Vue数据传输（晓舟报告笔记）

看一下结构

后台
serve.js没啥用处，就是写了一个fruitList模拟数据库，然后提供三个方法get、post、delete

const Koa = require("koa");
const parser = require("koa-parser"); //获取post请求数据
const router = require("koa-router")(); //设置路由
const cors = require('koa2-cors'); //允许跨域
const app = new Koa();

app.use(cors());
app.use(parser());
app.use(router.routes());

//模拟数据库
const fruitList = ["香蕉", "苹果", "鸭梨"];

//get方法：获取水果列表
router.get("/fruits", async ctx => {
    ctx.body = fruitList;
})
//post方法：添加水果
router.post("/fruits", async ctx => {
    let fruit = ctx.request.body.fruit;
    fruitList.push(fruit);
    ctx.body = true;
})
//delete方法：删除水果列表
router.delete("/fruits/:index", async ctx => {
    let index = ctx.params.index;
    fruitList.splice(index, 1);
    ctx.body = true;
})

app.listen(3000, () => {
    console.log("色ver")
})

App.vue

<template>
  <div>
    <form @submit.prevent="postData">
      <input type="text" v-model="fruit" />
      <button>add</button>
    </form>
    <ul>
      <li v-for="(i, index) of fruitList" :key="i">
        {{ i }}<button @click="del(index)">delete</button>
      </li>
    </ul>
  </div>
</template>

记得Vue项目中使用如下命令安装

npm install axios --save
在要引用axios的页面引用

import axios from ‘axios’

<script>
import axios from "axios";

export default {
  data() {
    return {
      fruit: "",
      fruitList: [],
    };
  },

  methods: {
    getFruitList() {
      axios.get("http://127.0.0.1:3000/fruits").then((res) => {
        this.fruitList = res.data;
      });
    },
    postData() {
      axios
        .post("http://127.0.0.1:3000/fruits", {
          //对应前面input双向绑定的fruit
          fruit: this.fruit,
        })
        .then((res) => {
          this.getFruitList();
        });
    },
    del(index) {
    //这里用模板字符串因为delete方法要传参${index}
      axios.delete(`http://127.0.0.1:3000/fruits/${index}`).then((res) => {
        this.getFruitList();
      });
    },
  },
  created() {
    //注意拼写
    this.getFruitList();
  },
};
</script>