diff --git "a/\345\224\220\345\255\235\345\235\232/2024-04-01sequelize.md" "b/\345\224\220\345\255\235\345\235\232/20240401-sequelize.md"
similarity index 100%
rename from "\345\224\220\345\255\235\345\235\232/2024-04-01sequelize.md"
rename to "\345\224\220\345\255\235\345\235\232/20240401-sequelize.md"
diff --git "a/\345\224\220\345\255\235\345\235\232/2024-04-02\351\233\206\346\210\220.md" "b/\345\224\220\345\255\235\345\235\232/20240402-\351\233\206\346\210\220.md"
similarity index 100%
rename from "\345\224\220\345\255\235\345\235\232/2024-04-02\351\233\206\346\210\220.md"
rename to "\345\224\220\345\255\235\345\235\232/20240402-\351\233\206\346\210\220.md"
diff --git "a/\345\224\220\345\255\235\345\235\232/2024-04-07\350\241\245\345\205\205.md" "b/\345\224\220\345\255\235\345\235\232/20240407-\350\241\245\345\205\205.md"
similarity index 100%
rename from "\345\224\220\345\255\235\345\235\232/2024-04-07\350\241\245\345\205\205.md"
rename to "\345\224\220\345\255\235\345\235\232/20240407-\350\241\245\345\205\205.md"
diff --git "a/\345\224\220\345\255\235\345\235\232/20240408-\345\242\236\345\210\240\346\224\271\346\237\245\345\220\216\347\253\257.md" "b/\345\224\220\345\255\235\345\235\232/20240408-\345\242\236\345\210\240\346\224\271\346\237\245\345\220\216\347\253\257.md"
new file mode 100644
index 0000000000000000000000000000000000000000..144e807802e8ccb2a9fb1e353143ff3b5a569cc7
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240408-\345\242\236\345\210\240\346\224\271\346\237\245\345\220\216\347\253\257.md"
@@ -0,0 +1,172 @@
+### 增删改查后端相关代码
+
+```
+import Koa from 'koa'
+import Router from 'koa-router'
+import bodyparser from 'koa-bodyparser'
+import cors from 'koa2-cors'
+import { DataTypes, Sequelize } from 'sequelize'
+
+const app = new Koa();
+let router = new Router();
+
+// 数据库的ORM工具实例化
+
+let sequelize = new Sequelize('cx', 'sa', '123456', {
+    host: 'localhost',
+    dialect: 'mssql'
+})
+
+// const sequelize = new Sequelize('node_demo', 'sa', '123456', {
+//     host: 'ACODE-RNSTCQHZE\\SQLEXPRESS',
+//     dialect: 'mssql'/* one of 'mysql' | 'postgres' | 'sqlite' | 'mariadb' | 'mssql' | 'db2' | 'snowflake' | 'oracle' */
+// });
+
+const Films = sequelize.define('Films', {
+    director: { type: DataTypes.STRING },
+    actor: { type: DataTypes.STRING },
+    score: { type: DataTypes.INTEGER },
+    flag: { type: DataTypes.STRING },
+})
+
+
+await Films.sync();
+
+
+// 读取（相对于数据库的查询）
+router.get('/films/:id?', async (ctx) => {
+    let id = ctx.params.id * 1 || 0;
+    console.log(undefined * 1);
+    /*
+        1. 尝试获取id，如果id为0，则说明获取的是列表数据
+        2. 通过ORM工具，向数据库获取列表数据或者指定行的数据（根据业务需要可能需要分页）
+        3. 通过ctx.body返回响应数据（包含列表数据或者指定行数据）
+            {
+                code:1000,
+                data:'',
+                msg:'获取数据成功'
+            }
+    */
+    console.log(id);
+
+    let data;
+    if (id > 0) {
+        let item = await Films.findByPk(id);
+        data = item;
+    } else {
+        let list = await Films.findAll();
+        data = list;
+    }
+
+    ctx.body = {
+        code: 1000,
+        data: data,
+        msg: '获取指定电影信息'
+    }
+})
+
+// 创建电影（相对于数据库的插入）
+router.post('/films', async (ctx) => {
+    let obj = ctx.request.body;
+    console.log(obj);
+    /*
+        1. 获取传入的表单数据（实体参数）（根据业务需要可能需要做数据验证）
+        2. 复用ORM工具，将数据写入数据库（数据验证）
+        3. 返回创建成功的信息（根据业务，返回带id的记录）
+    */
+    let row = await Films.create(obj);
+
+    ctx.body = {
+        code: 1000,
+        data: row,
+        msg: '创建电影成功'
+    }
+})
+// 创建用户（相对于数据库的插入）
+router.post('/users', async (ctx) => {
+    let obj = ctx.request.body;
+    /*
+        1. 获取传入的表单数据（实体参数）（根据业务需要可能需要做数据验证）
+        2. 复用ORM工具，将数据写入数据库（数据验证）
+    */
+})
+
+// 修改（相对于数据库的更新）
+router.put('/films/:id', async (ctx) => {
+    let id = ctx.params.id || 0;
+    let obj = ctx.request.body;
+    console.log(id);
+    console.log(obj);
+    /*
+        1. 通过id在数据库中查找对应记录
+        2. 如果有对应的记录，则进行修改；如果没有对应记录，则提示修改失败
+        3. 返回响应，剩下的让前端自己判断
+    */
+    let item = await Films.findByPk(id);
+    if (item) {
+        let data = await Films.update(obj, {
+            where: {
+                id: id
+            }
+        });
+
+        ctx.body = {
+            code: 1000,
+            data: data,
+            msg: "修改成功"
+        }
+    } else {
+        ctx.body = {
+            code: 4000,
+            data: null,
+            msg: '找不到'
+        }
+    }
+})
+
+// 删除（相对于数据库的删除（软删除））
+router.delete('/films/:id', async (ctx) => {
+    let id = ctx.params.id || 0;
+    console.log(id);
+    /*
+        1. 查找id对应的记录
+        2. 如果找到，则删除成功，返回响应提示成功；否则删除失败，返回未找到的响应
+    */
+    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());
+// 解决post、put请求拿到表单数据的问题
+app.use(bodyparser());
+// 解决路由问题
+app.use(router.routes());
+
+let port = 3000;
+
+app.listen(port);
+
+console.log(`服务运行于此：http://localhost:${port}`); 
+
+
+```
\ No newline at end of file
diff --git "a/\345\224\220\345\255\235\345\235\232/20240409-\345\242\236\345\210\240\346\224\271\346\237\245\345\211\215\347\253\257.md" "b/\345\224\220\345\255\235\345\235\232/20240409-\345\242\236\345\210\240\346\224\271\346\237\245\345\211\215\347\253\257.md"
new file mode 100644
index 0000000000000000000000000000000000000000..896fb1f9e170e882a47362443bc928705cebc809
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240409-\345\242\236\345\210\240\346\224\271\346\237\245\345\211\215\347\253\257.md"
@@ -0,0 +1,163 @@
+### 增删改查前端相关代码
+
+```
+function renderData(dataArray) {
+    let tb = $('#dataBody');
+    dataArray.forEach(item => {
+        let html = `
+            <tr class="tr${item.id}">
+                <td>${item.id}</td>
+                <td>${item.director}</td>
+                <td>${item.actor}</td>
+                <td>${item.score}</td>
+                <td>${item.flag}</td>
+                <td>
+                    <button onclick="editData(${item.id})">编辑</button>
+                    <button onclick="deleteData(${item.id})">删除</button>
+                </td>
+            </tr>
+        `;
+        tb.append(html);
+    });
+}
+
+
+$(async function () {
+    let list = await axios.get('http://localhost:3000/films');
+
+    console.log(list);
+
+    renderData(list.data.data);
+})
+
+async function deleteData(id) {
+    console.log(id);
+    if (confirm(`确定要删除为${id}的数据吗？`)) {
+        let res = await axios.delete(`http://localhost:3000/films/${id}`);
+
+        console.log(res);
+
+        if (res.data.code === 1000) {
+            let tr = $(`.tr${id}`);
+
+            tr.remove();
+        }
+    }
+
+}
+
+
+function editData(id) {
+    location.href='./edit.html?id'+id;
+}
+
+function btnFind() {
+    console.log(888);
+}
+
+function btnAdd() {
+    console.log(2222);
+}
+
+
+```
+
+
+
+
+```
+
+function btnSave() {
+    /*  
+        1.获取表单数据，向后端api发送请求，携带上表单数据
+        2.api拿表单数据，做一些逻辑处理，插入到数据库表，返回插入成功的消息（PS：也可能成功，那就返回不成功的消息）
+        3.获取后端返回的响应，判断后做一些反应和处理(插入成功，就给前端表格加一行，否则展示不成功的消息)
+    */
+    // 获取表单数据
+    let filmName = $('[name=filmName]').val();
+    let director = $('[name=director]').val();
+    let actor = $('[name=actor]').val();
+    let score = $('[name=score]').val();
+    let flag = $('[name=flag]').val();
+   
+    // 组合表单数据，传过去的是一个对象
+    let obj = {
+        filmName: filmName, director, actor, score, flag
+    }
+
+    let params = getId();
+    console.log(params);
+    let id = params.id * 1;
+    // console.log(id);
+    // 如果id存在并且大于0，则认为是编辑，走修改的请求，否则走新增请求
+    if (id > 0) {
+        axios.put(`http://localhost:3000/films/${id}`, obj).then(res => {
+            let data = res.data;
+            if (data.code === 1000) {
+                // location.href = './index.html';
+            } else {
+                alert(data.msg)
+            }
+        })
+    } else {
+        axios.post(`http://localhost:3000/films`, obj).then(res => {
+            let data = res.data;
+            if (data.code === 1000) {
+                // location.href = './index.html';
+            } else {
+                alert(data.msg)
+            }
+        })
+    }
+}
+function btnCancel() {
+    // location.href = './index.html';
+}
+
+// 原生事件，当页面元素（节点）初始化完成时，必然触发一次的事件
+$(function () {
+    /*
+    1.想方设法，拿到传过来的id，如果有的话
+    2.使用拿到的id，向api发请求，获取id对应的那条记录，然后通过响应返回给前端
+    3.前端拿响应的数据，渲染（填充）页面
+
+    */
+
+    let params = getId();
+    console.log(params);
+    let id = params.id * 1;
+
+    // id大于0，则表示是修改，则需要通过id，从api获取id对应的数据
+    if (id > 0) {
+        axios.get(`http://localhost:3000/films/${id}`).then(res => {
+            let data = res.data;
+            $('[name=filmName]').val(data.data.filmName);
+            $('[name=director]').val(data.data.director);
+            $('[name=actor]').val(data.data.actor);
+            $('[name=score]').val(data.data.score);
+            $('[name=flag]').val(data.data.flag);
+        })
+    }
+
+})
+
+
+// 拿到地址中"？"后面所有的参数
+function getId() {
+    const path = window.location.search
+    console.log(url)
+    let url = new URLSearchParams(path)
+    console.log(url)
+
+}
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/\345\224\220\345\255\235\345\235\232/20240411-\350\256\244\350\257\206Vue.md" "b/\345\224\220\345\255\235\345\235\232/20240411-\350\256\244\350\257\206Vue.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b9236be641611b91ac8800200e36b9f4b534c8a7
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240411-\350\256\244\350\257\206Vue.md"
@@ -0,0 +1,38 @@
+### 什么是 Vue？​
+Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
+
+下面是一个最基本的示例：
+
+```
+import { createApp, ref } from 'vue'
+
+createApp({
+  setup() {
+    return {
+      count: ref(0)
+    }
+  }
+}).mount('#app')
+
+
+
+```
+
+
+```
+<div id="app">
+  <button @click="count++">
+    Count is: {{ count }}
+  </button>
+</div>
+
+
+```
+
+上面的示例展示了 Vue 的两个核心功能：
+
+- 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
+
+- 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
+
+
diff --git "a/\345\224\220\345\255\235\345\235\232/20240412-\345\210\233\345\273\272\344\270\200\344\270\252Vue\345\272\224\347\224\250.md" "b/\345\224\220\345\255\235\345\235\232/20240412-\345\210\233\345\273\272\344\270\200\344\270\252Vue\345\272\224\347\224\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..77940aaafe7036881ac3d962545e2f57f5212dd1
--- /dev/null
+++ "b/\345\224\220\345\255\235\345\235\232/20240412-\345\210\233\345\273\272\344\270\200\344\270\252Vue\345\272\224\347\224\250.md"
@@ -0,0 +1,57 @@
+## 创建一个Vue应用
+
+### 应用实例​
+每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：
+```
+js
+import { createApp } from 'vue'
+
+const app = createApp({
+  /* 根组件选项 */
+})
+
+
+```
+
+
+### 根组件​
+我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
+
+如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。
+
+```
+import { createApp } from 'vue'
+// 从一个单文件组件中导入根组件
+import App from './App.vue'
+
+const app = createApp(App)
+
+```
+
+
+### DOM 中的根组件模板​
+根组件的模板通常是组件本身的一部分，但也可以直接通过在挂载容器内编写模板来单独提供：
+
+```
+html
+<div id="app">
+  <button @click="count++">{{ count }}</button>
+</div>
+js
+import { createApp } from 'vue'
+
+const app = createApp({
+  data() {
+    return {
+      count: 0
+    }
+  }
+})
+
+app.mount('#app')
+
+```
+
+当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。
+
+DOM 内模板通常用于无构建步骤的 Vue 应用程序。它们也可以与服务器端框架一起使用，其中根模板可能是由服务器动态生成的。
\ No newline at end of file
diff --git "a/\345\224\220\345\255\235\345\235\232/loop.zip" "b/\345\224\220\345\255\235\345\235\232/loop.zip"
new file mode 100644
index 0000000000000000000000000000000000000000..36ff8d9b80f16cb57b65b1072942ceea5b3aa4f3
Binary files /dev/null and "b/\345\224\220\345\255\235\345\235\232/loop.zip" differ