diff --git "a/\351\231\210\344\275\263\344\270\275/20240408-09.\344\270\215\345\260\201\350\243\205\344\273\243\347\240\201\345\256\214\345\226\204.md" "b/\351\231\210\344\275\263\344\270\275/20240408-09.\344\270\215\345\260\201\350\243\205\344\273\243\347\240\201\345\256\214\345\226\204.md"
new file mode 100644
index 0000000000000000000000000000000000000000..76a86ecfaaff34b45e0cb06bccd67af080fa8a89
--- /dev/null
+++ "b/\351\231\210\344\275\263\344\270\275/20240408-09.\344\270\215\345\260\201\350\243\205\344\273\243\347\240\201\345\256\214\345\226\204.md"
@@ -0,0 +1,417 @@
+## 后端代码
+1. app.js
+```javascript
+import Koa from "koa";
+import Router from "koa-router";
+import bodyParser from "koa-bodyparser";
+import cors from "koa2-cors";
+import { Op,DataTypes, Sequelize } from "sequelize";
+
+const app = new Koa();
+const router = new Router();
+
+let sequelize = new Sequelize('myData','sa','123456',{
+ host:'localhost',
+ dialect:'mssql'
+})
+//这句代码定义了一个名为 Films 的模型，包含了四个字段：filmName（字符串类型）、actor（字符串类型）、score（整数类型）和 flag（字符串类型）。这个模型将在数据库中创建一个名为 Films 的表。
+const Films = sequelize.define('Films',{
+ filmName:{type:DataTypes.STRING},
+ actor:{type:DataTypes.STRING},
+ score:{type:DataTypes.DOUBLE},
+ flag:{type:DataTypes.STRING}
+})
+
+await Films.sync();
+
+const filmsData = [
+ {
+ filmName:"霸道总裁爱上我",
+ actor:"杨可盈",
+ score:"9.8",
+ flag:"都市 爱情"
+ },
+ {
+ filmName:"杨可盈三打白骨精",
+ actor:"杨可盈",
+ score:"9.3",
+ flag:"魔幻"
+ },{
+ filmName:"杨少：莫欺少年穷",
+ actor:"杨x盈",
+ score:"9.3",
+ flag:"励志"
+ },{
+ filmName:"杨少：莫欺中年穷",
+ actor:"杨可x",
+ score:"8.3",
+ flag:"励志"
+ },{
+ filmName:"杨少：莫欺老年穷",
+ actor:"x可盈",
+ score:"8.0",
+ flag:"励志"
+ },{
+ filmName:"鲁可盈漂流记",
+ actor:"杨可盈",
+ score:"7.8",
+ flag:"探险"
+ }
+];
+//插入
+Films.bulkCreate(filmsData).then(()=>{
+ console.log('数据插入成功');
+})
+router.get('/films/:id?',async (ctx)=>{
+ let id = ctx.params.id || 0;
+ //ctx 是 Koa 框架中的上下文对象，ctx.request 表示当前请求对象，ctx.request.query 表示获取请求的查询参数。而 keyword 是一个变量，用来存储从查询参数中名为 keyword 的值。
+//所以，let keyword = ctx.request.query.keyword; 的意思是将 HTTP 请求中查询参数中名为 keyword 的值赋给变量 keyword，以便后续在代码中使用这个值进行相关操作，比如根据关键字进行搜索或过滤数据。
+ let keyword = ctx.request.query.keyword
+ console.log(keyword)
+ // console.log(id)
+ let data;
+ if(id>0){
+
+ data = await Films.findByPk(id);
+ console.log(data);
+ ctx.body = {
+ code:1000,
+ msg:"查找指定数据成功",
+ data:data
+
+ }
+ }else{
+ //在查询中，where 对象指定了查询条件，这里使用了 Sequelize 提供的 [Op.substring] 操作符，表示模糊查询，查找包含指定关键字 keyword 的 shopName 字段值。${keyword} 是 ES6 模板字符串的语法，用来动态插入变量 keyword 的值。
+ if(keyword){
+ let arr = await Films.findAll({
+ where:{
+ [Op.or]:[
+ {filmName:{[Op.like]:`%${keyword}%`}},
+ {actor:{[Op.like]:`%${keyword}%`}},
+ {score:{[Op.like]:`%${keyword}%`}},
+ {flag:{[Op.like]:`%${keyword}%`}}
+ ]
+ }
+
+ });
+ ctx.body = {
+ code:1000,
+ msg:"查找指定数据成功",
+ data:arr
+
+ }
+ }else{
+ data = await Films.findAll();
+ ctx.body = {
+ code:1000,
+ msg:"查找全部数据成功",
+ data:data
+
+ }
+ }
+
+ }
+})
+
+router.post('/films',async (ctx)=>{
+ let obj = ctx.request.body;
+ console.log(obj)
+ let row = await Films.create(obj)
+ ctx.body={
+ code:1000,
+ msg:"创建成功",
+ data:row
+ }
+})
+
+router.put('/films/:id',async (ctx)=>{
+ let id = ctx.params.id||0;
+ // console.log(id);
+ let obj = ctx.request.body;
+ console.log(obj);
+ let item = await Films.findByPk(id);
+ console.log(item);
+ if(item){
+ let date = await Films.update(obj,{
+ where:{
+ id:id
+ }
+ });
+ console.log(date)
+ ctx.body={
+ code:1000,
+ data:obj,
+ msg:"修改成功"
+ }
+ }else{
+ ctx.body={
+ code:4000,
+ data:null,
+ msg:"找不到id"
+ }
+ }
+})
+
+router.delete('/films/:id',async (ctx)=>{
+let id = ctx.params.id || 0;
+let row = await Films.findByPk(id);
+if(row){
+ Films.destroy({
+ where:{
+ id:id
+ }
+ })
+
+ ctx.body = {
+ code:1000,
+ data:null,
+ msg:"删除成功"
+ }
+}else{
+ ctx.body ={
+ code:4000,
+ data:null,
+ msg:"找不到"
+ }
+}
+})
+
+app.use(cors())
+app.use(bodyParser());
+app.use(router.routes());
+
+let port = 3000;
+app.listen(port);
+console.log(`http://localhost:${port}`)
+
+```
+
+## 前端代码
+1. index.html
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+ | 序号 |
+ 电影名 |
+ 主演 |
+ 评分 |
+ 标签 |
+ 操作 |
+
+
+
+
+ | ${item.id} |
+ ${item.filmName} |
+ ${item.actor} |
+ ${item.score} |
+ ${item.flag} |
+
+
+
+ |
+
+
+ `
+ tb.append(html)
+ });
+ })
+})
+
+function btnQuery(){
+ console.log("查找");
+ let keyword = $('[name="find"]').val();
+ console.log(keyword)
+ axios.get(`http://localhost:3000/films?keyword=${keyword}`).then(res=>{
+ console.log(res.data);
+ if(res.data.code===1000){
+ let tr = $('[class^=tr]');
+ tr.remove();
+ res.data.data.forEach(item=>{
+ let tb = $('.tb');
+ let html = `
+
+ | ${item.id} |
+ ${item.filmName} |
+ ${item.actor} |
+ ${item.score} |
+ ${item.flag} |
+
+
+
+ |
+
+
+ `
+ tb.append(html)
+ })
+ }
+ })
+}
+function btnAdd(){
+ location.href="./edit.html"
+}
+function btnDel(id){
+ console.log("删除");
+ if(confirm(`是否要删除id为${id}的电影`)){
+ axios.delete(`http://localhost:3000/films/${id}`).then(res=>{
+ console.log(res)
+ if(res.data.code===1000){
+ let tr = $('.tr'+id)
+
+ tr.remove()
+ }else if(res.data.code === 4000){
+ alert(data.msg)
+ }
+ }
+ )
+ }
+}
+function btnEdit(id){
+ location.href='./edit.html?id='+id
+
+
+}
+
+```
+4. edit.js
+```javascript
+$(() => {
+ let ID = urlStr();
+ if (ID > 0) {
+ axios.get(`http://localhost:3000/films/${ID}`).then(res => {
+ let data = res.data.data
+ console.log(data)
+ $('[name="filmName"]').val(data.filmName);
+ $('[name="actor"]').val(data.actor);
+ $('[name="score"]').val(data.score);
+ $('[name="flag"]').val(data.flag);
+ // let arr=[data]
+ // arr.forEach(item => {
+ // $('[name="filmName"]').val(item.filmName);
+ // $('[name="actor"]').val(item.actor);
+ // $('[name="score"]').val(item.score);
+ // $('[name="flag"]').val(item.flag);
+ // }
+ // );
+ }
+ )
+ }
+})
+function btnSave() {
+ let filmName = $('[name="filmName"]').val();
+ let actor = $('[name="actor"]').val();
+ let score = $('[name="score"]').val();
+ let flag = $('[name="flag"]').val()
+ let obj = {
+ filmName,actor,score,flag
+ }
+ console.log(obj)
+ let ID = urlStr();
+ if(ID>0){
+
+ axios.put(`http://localhost:3000/films/${ID}`,obj).then(res=>{
+ location.href = "./index.html"
+ })
+ }else{
+ axios.post(`http://localhost:3000/films`,obj).then(res=>{
+ location.href = "./index.html"
+ })
+ }
+ // location.href = "./index.html"
+}
+function btnCancel() {
+ location.href = "./index.html"
+}
+function urlStr() {
+ let url = location.href.split('=');
+ // console.log(url)
+ return url[1]
+}
+
+```
\ No newline at end of file