diff --git a/20_脚手架/vue_code/19.src_Vue-Cli配置代理/App.vue b/20_脚手架/vue_code/19.src_Vue-Cli配置代理/App.vue
new file mode 100644
index 0000000..5d32cc5
--- /dev/null
+++ b/20_脚手架/vue_code/19.src_Vue-Cli配置代理/App.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="root">
+    <button @click="getStudents">获取学生信息</button><br/>
+    <button @click="getCars">获取汽车信息</button>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "App",
+  methods: {
+    getStudents() {
+      axios.get('http://localhost:8080/stu/students').then(
+          response => {
+            console.log('请求成功了', response.data)
+          },
+          error => {
+            console.log('请求失败了', error.message)
+          }
+      )
+    },
+    getCars() {
+      axios.get('http://localhost:8080/car/cars').then(
+          response => {
+            console.log('请求成功了', response.data)
+          },
+          error => {
+            console.log('请求失败了', error.message)
+          }
+      )
+    }
+  }
+}
+</script>
diff --git a/20_脚手架/vue_code/19.src_Vue-Cli配置代理/assets/logo.png b/20_脚手架/vue_code/19.src_Vue-Cli配置代理/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/20_脚手架/vue_code/19.src_Vue-Cli配置代理/assets/logo.png differ
diff --git a/20_脚手架/vue_code/19.src_Vue-Cli配置代理/main.js b/20_脚手架/vue_code/19.src_Vue-Cli配置代理/main.js
new file mode 100644
index 0000000..4d5e394
--- /dev/null
+++ b/20_脚手架/vue_code/19.src_Vue-Cli配置代理/main.js
@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')
diff --git a/20_脚手架/vue_code/package-lock.json b/20_脚手架/vue_code/package-lock.json
index 5a66cc0..60f3e6b 100644
--- a/20_脚手架/vue_code/package-lock.json
+++ b/20_脚手架/vue_code/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "animate.css": "^4.1.1",
+        "axios": "^1.3.2",
         "core-js": "^3.8.3",
         "pubsub-js": "^1.9.4",
         "vue": "^2.6.14"
@@ -3294,6 +3295,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3326,6 +3332,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.2.tgz",
+      "integrity": "sha512-1M3O703bYqYuPhbHeya5bnhpYVsDDRyQSabNja04mZtboLNSuZ4YrltestrLXfHgmzua4TpUqRiVKbiQuo2epw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -3911,6 +3927,17 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -4614,6 +4641,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -5783,7 +5818,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -5793,6 +5827,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -7144,7 +7191,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7153,7 +7199,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8554,6 +8599,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -13376,6 +13426,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -13396,6 +13451,16 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axios": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.2.tgz",
+      "integrity": "sha512-1M3O703bYqYuPhbHeya5bnhpYVsDDRyQSabNja04mZtboLNSuZ4YrltestrLXfHgmzua4TpUqRiVKbiQuo2epw==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -13882,6 +13947,14 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -14426,6 +14499,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -15371,8 +15449,17 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
     },
     "forwarded": {
       "version": "0.2.0",
@@ -16451,14 +16538,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -17491,6 +17576,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
diff --git a/20_脚手架/vue_code/package.json b/20_脚手架/vue_code/package.json
index 4afb74c..19f1d33 100644
--- a/20_脚手架/vue_code/package.json
+++ b/20_脚手架/vue_code/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "animate.css": "^4.1.1",
+    "axios": "^1.3.2",
     "core-js": "^3.8.3",
     "pubsub-js": "^1.9.4",
     "vue": "^2.6.14"
diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index ddfd312..5d32cc5 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,145 +1,36 @@
 <template>
   <div id="root">
-    <div class="todo-container">
-      <div class="todo-wrap">
-        <TodoHeader @addTodo="addTodo"/>
-        <TodoList :todos="todos"/>
-        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
-      </div>
-    </div>
+    <button @click="getStudents">获取学生信息</button><br/>
+    <button @click="getCars">获取汽车信息</button>
   </div>
 </template>
 
 <script>
-import pubsub from 'pubsub-js'
-import TodoHeader from "./components/TodoHeader.vue";
-import TodoList from "./components/TodoList.vue";
-import TodoBottom from "./components/TodoBottom.vue";
-
+import axios from "axios";
 
 export default {
   name: "App",
-  components: {
-    TodoHeader,
-    TodoList,
-    TodoBottom
-  },
-  data() {
-    return {
-      // 预置测试数据
-      todos: JSON.parse(localStorage.getItem('todos')) || []
-    }
-  },
-  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中
-  // 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件
   methods: {
-    // 添加todo任务，绑定到TodoHeader中
-    addTodo(todoObj) {
-      this.todos.unshift(todoObj)
-    },
-
-    // 勾选和取消勾选todo任务，穿透TodoList绑定到TodoItem中
-    checkTodo(id) {
-      this.todos.forEach((todo) => {
-        if (todo.id === id) todo.done = !todo.done
-      })
-    },
-
-    // 删除单个todo任务，穿透TodoList绑定到TodoItem中
-    deleteTodo(_, id) {
-      this.todos = this.todos.filter(todo => todo.id !== id)
-    },
-
-    // 更新一个TodoItem
-    updateTodo(id, title) {
-      this.todos.forEach((todo) => {
-        if (todo.id === id) todo.title = title
-      })
-    },
-
-    // 勾选或取消勾选全部todo任务，绑定到TodoBottom中
-    checkAllTodo(done) {
-      this.todos.forEach((todo) => todo.done = done)
+    getStudents() {
+      axios.get('http://localhost:8080/stu/students').then(
+          response => {
+            console.log('请求成功了', response.data)
+          },
+          error => {
+            console.log('请求失败了', error.message)
+          }
+      )
     },
-
-    // 清除全部已完成的todo任务，绑定到TodoBottom中
-    clearAllTodo() {
-      this.todos = this.todos.filter((todo) => {
-        return !todo.done
-      })
+    getCars() {
+      axios.get('http://localhost:8080/car/cars').then(
+          response => {
+            console.log('请求成功了', response.data)
+          },
+          error => {
+            console.log('请求失败了', error.message)
+          }
+      )
     }
-  },
-  watch: {
-    todos: {
-      deep: true,
-      handler(value) {
-        localStorage.setItem('todos', JSON.stringify(value))
-      }
-    }
-  },
-  // 生成全局事件总线
-  mounted() {
-    this.$bus.$on('checkTodo', this.checkTodo)
-    this.$bus.$on('updateTodo', this.updateTodo)
-    this.pubId = pubsub.subscribe('itemDel', this.deleteTodo)  // 使用订阅方式实现删除功能
-  },
-  // 销毁全局事件总线
-  beforeDestroy() {
-    this.$bus.$off('checkTodo')
-    this.$bus.$off('updateTodo')
-    this.pubsub.unsubscribe(this, pubId)  // 使用订阅方式实现删除功能，销毁订阅
   }
 }
 </script>
-
-<style>
-body {
-  background: #fff;
-}
-
-.btn {
-  display: inline-block;
-  padding: 4px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
-}
-
-.btn-danger {
-  color: #fff;
-  background-color: #da4f49;
-  border: 1px solid #bd362f;
-}
-
-.btn-edit {
-  color: #fff;
-  background-color: skyblue;
-  border: 1px solid #82cdea;
-  margin-right: 5px;
-}
-
-.btn-danger:hover {
-  color: #fff;
-  background-color: #bd362f;
-}
-
-.btn:focus {
-  outline: none;
-}
-
-.todo-container {
-  width: 600px;
-  margin: 0 auto;
-}
-
-.todo-container .todo-wrap {
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-}
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoBottom.vue b/20_脚手架/vue_code/src/components/TodoBottom.vue
deleted file mode 100644
index b4de571..0000000
--- a/20_脚手架/vue_code/src/components/TodoBottom.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="todo-bottom" v-show="total">
-    <label>
-      <input type="checkbox" v-model="isAll">
-    </label>
-    <span>
-      <span>已完成{{ totalDone }}</span>/全部{{ total }}
-    </span>
-    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TodoBottom",
-  // props: ['todos', 'checkAllTodo', 'clearAllTodo'],
-  props: ['todos'],
-  computed: {
-    // 用于计算全部todo任务的总数量，并且通过v-show绑定到模板，用于控制模板的展示
-    total() {
-      return this.todos.length
-    },
-    // 用于统计全部已完成的todo任务数量
-    totalDone() {
-      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
-    },
-    // 计算方法的完整写法
-    // get方法用于判断是否全部任务被勾选， 返回布尔值
-    // set方法是封装了App中checkAllTodo方法用于勾选和取消勾选全部任务
-    isAll: {
-      get() {
-        return this.totalDone === this.total && this.total > 0
-      },
-      set(value) {
-        // this.checkAllTodo(value)
-        this.$emit('checkAllTodo', value)
-      }
-    }
-  },
-  methods: {
-    // 封装App中的clearAllTodo方法，用于清除全部已完成数据
-    clearAll() {
-      if (confirm("确认清除全部已完成任务？")) {
-        this.$emit('clearAllTodo')
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.todo-bottom {
-  height: 40px;
-  line-height: 40px;
-  padding-left: 6px;
-  margin-top: 5px;
-}
-
-.todo-bottom label {
-  display: inline-block;
-  margin-right: 20px;
-  cursor: pointer;
-}
-
-.todo-bottom label input {
-  position: relative;
-  top: -1px;
-  vertical-align: middle;
-  margin-right: 5px;
-}
-
-.todo-bottom button {
-  float: right;
-  margin-top: 5px;
-}
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoHeader.vue b/20_脚手架/vue_code/src/components/TodoHeader.vue
deleted file mode 100644
index d4a857c..0000000
--- a/20_脚手架/vue_code/src/components/TodoHeader.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div class="todo-header">
-    <input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.en.enter="add">
-  </div>
-</template>
-
-<script>
-import {nanoid} from "nanoid"
-
-export default {
-  name: "TodoHeader",
-//  props: ['addTodo'], 改用自定义组件实现，不用再接收复组件传递的方法
-  data() {
-    // 初始化title已显示placeholder内容
-    return {
-      title: ''
-    }
-  },
-  methods: {
-    // 添加todo任务，trim用户输入数据后判断是否为空，如果内容正常则生成任务的对象数据
-    // 将任务的对象数据回写到App中的todo中
-    add() {
-      if (!this.title.trim()) return alert("输入不能为空")
-      const todoObj = {id: nanoid(), title: this.title, done: false}
-      // this.addTodo(todoObj)  // 改用emit触发自定义事件
-      this.$emit('addTodo', todoObj)
-      this.title = ''
-    }
-  }
-
-}
-</script>
-
-<style scoped>
-.todo-header input {
-  width: 560px;
-  height: 28px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 4px 7px;
-}
-
-.todo-header input:focus {
-  outline: none;
-  border-color: rgba(82, 168, 236, 0.8);
-  box-shadow: inset 0 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-}
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoItem.vue b/20_脚手架/vue_code/src/components/TodoItem.vue
deleted file mode 100644
index 2504f9d..0000000
--- a/20_脚手架/vue_code/src/components/TodoItem.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <!--  <transition name="todo" appear>-->
-  <!--    <li>-->
-  <!--      <label>-->
-  <!--        <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">-->
-  <!--        <span v-show="!todo.isEdit">{{ todo.title }}</span>-->
-  <!--        <input v-show="todo.isEdit" type="text" @blur="handleBlur(todo, $event)" ref="inputFocus" :value="todo.title">-->
-  <!--      </label>-->
-  <!--      <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>-->
-  <!--      <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>-->
-  <!--    </li>-->
-  <!--  </transition>-->
-  <li>
-    <label>
-      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
-      <span v-show="!todo.isEdit">{{ todo.title }}</span>
-      <input v-show="todo.isEdit" type="text" @blur="handleBlur(todo, $event)" ref="inputFocus" :value="todo.title">
-    </label>
-    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
-    <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
-  </li>
-
-</template>
-
-<script>
-import pubsub from 'pubsub-js'
-
-export default {
-  name: "TodoItem",
-  // 从todoList中接收数据todos和函数checkTodo、deleteTodo
-  props: ['todo'],
-  methods: {
-    // 触发全局事件总线中的方法，触发app中发回调方法
-    handleCheck(id) {
-      this.$bus.$emit('checkTodo', id)
-    },
-    // 通过订阅消息形式实现
-    handleDelete(id) {
-      if (confirm("确认删除？")) {
-        pubsub.publish('itemDel', id)
-      }
-    },
-    // 实现编辑逻辑
-    handleEdit(todo) {
-      if (todo.hasOwnProperty('isEdit')) {
-        todo.isEdit = true
-      } else {
-        this.$set(todo, 'isEdit', true)
-      }
-      this.$nextTick(function () {
-        this.$refs.inputFocus.focus()
-      })
-    },
-    // 失去焦点时更新数据
-    handleBlur(todo, e) {
-      todo.isEdit = false
-      console.log('updateTodo', todo.id, e.target.value)
-      if (!e.target.value.trim()) return alert("输入不能为空！")
-      this.$bus.$emit('updateTodo', todo.id, e.target.value)
-    }
-  }
-}
-</script>
-
-<style scoped>
-li {
-  list-style: none;
-  height: 36px;
-  line-height: 36px;
-  padding: 0 5px;
-  border-bottom: 1px solid #ddd;
-}
-
-li label {
-  float: left;
-  cursor: pointer;
-}
-
-li label input {
-  vertical-align: middle;
-  margin-right: 6px;
-  position: relative;
-  top: -1px;
-}
-
-li button {
-  float: right;
-  display: none;
-  margin-top: 3px;
-}
-
-li:before {
-  content: initial;
-}
-
-li:last-child {
-  border-bottom: none;
-}
-
-li:hover {
-  background-color: #ddd;
-}
-
-li:hover button {
-  display: block;
-}
-
-/*.todo-enter-active {*/
-/*  animation: td 0.5s linear;*/
-/*}*/
-
-/*.todo-leave-active {*/
-/*  animation: td 0.5s linear reverse;*/
-/*}*/
-
-/*@keyframes td {*/
-/*  from {*/
-/*    transform: translateX(100%);*/
-/*  }*/
-/*  to {*/
-/*    transform: translateX(0);*/
-/*  }*/
-/*}*/
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoList.vue b/20_脚手架/vue_code/src/components/TodoList.vue
deleted file mode 100644
index 09a80ba..0000000
--- a/20_脚手架/vue_code/src/components/TodoList.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <ul class="todo-list">
-    <transition-group name="todo" appear>
-      <TodoItem
-          v-for="todoObj in todos"
-          :key="todoObj.id"
-          :todo="todoObj"
-      />
-    </transition-group>
-  </ul>
-</template>
-
-<script>
-import TodoItem from "@/components/TodoItem.vue";
-
-export default {
-  name: "TodoList",
-  // 嵌套了子组件TodoItem
-  components: {TodoItem},
-  props: ['todos']
-}
-</script>
-
-<style scoped>
-.todo-list {
-  margin-left: 0px;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  padding: 0px;
-}
-
-.todo-empty {
-  height: 40px;
-  line-height: 40px;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  padding-left: 5px;
-  margin-top: 10px;
-}
-
-.todo-enter-active {
-  animation: td 0.5s linear;
-}
-
-.todo-leave-active {
-  animation: td 0.5s linear reverse;
-}
-
-@keyframes td {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/vue.config.js b/20_脚手架/vue_code/vue.config.js
index 6596a0b..45f0b4e 100644
--- a/20_脚手架/vue_code/vue.config.js
+++ b/20_脚手架/vue_code/vue.config.js
@@ -1,5 +1,25 @@
-const { defineConfig } = require('@vue/cli-service')
+const {defineConfig} = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true,
-  lintOnSave: false
+    transpileDependencies: true,
+    lintOnSave: false,
+    // 方式一
+    // devServer: {
+    //     proxy: 'http://localhost:5000'
+    // }
+    devServer: {
+        proxy: {
+            '/stu': {
+                target: 'http://localhost:5000',
+                pathRewrite: {'^/stu':''},
+                ws: true,  // 是否支持websocket
+                changeOrigin: true // 控制请求头中的host值
+            },
+            '/car': {
+                target: 'http://localhost:5001',
+                pathRewrite: {'^/car':''},
+                ws: true,  // 是否支持websocket
+                changeOrigin: true // 控制请求头中的host值
+            }
+        }
+    }
 })