【Vue】学习笔记-数据交互

概述

基于Vue的web项目显示的所有服务端数据，都是通过Ajax获取的。官方推荐使用Axios作为Ajax库，所以本文主要讲解在Vue项目中，如何安装和使用Axio，以及通过前端的Vue框架和后端的Koa框架进行数据交互的例子

安装axios

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

npm install axios --save

在要引用axios的页面引用

import axios from 'axios'

通过axios向后台获取数据

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

注意： 需要安装和导入koa2-cors模块，实现后台数据（端口：3000）和前端页面（端口：8080）的数据交互。用Vue启动的是8080端口，用Koa启动的是3000端口，相当于启动两个服务器，涉及跨域问题，用Vue服务器获得Koa服务器数据的话，利用koa2-cors来实现允许跨域，方便从Koa上拿数据

App.vue（Vue代码）

<template>
  <div id="app">
    <form @submit.prevent="postData">
      <input type="text" v-model="fruit" />
      <button>添加</button>
    </form>
    <ul>
      <li v-for="(item, index) of fruitList" :key="index">
        {{ item }}
        <button @click="del(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<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", {
          fruit: this.fruit,
        })
        .then((res) => {
          this.getFruitList();
        });
    },
    //删除数据
    del(index) {
      axios.delete(`http://127.0.0.1:3000/fruits/${index}`).then((res) => {
        this.getFruitList();
      })
    }
  },
  created() {
    this.getFruitList(); //初始化数据
    //初始化程序
  },
};
</script>

<style>
</style>

server.js （Koa代码）

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

let dataList = ["香蕉","苹果","鸭梨"];

//get查看
router.get("/fruits", ctx => {
    ctx.body = dataList;
})
//post添加
router.post("/fruits", ctx => {
    let fruit = ctx.request.body.fruit;
    dataList.push(fruit);
    ctx.body = dataList;
})

//put修改
router.put("/fruits/:id", ctx => {
    let id = ctx.params.id;
    let fruit = ctx.request.body.fruit;
    dataList.splice(id,1,fruit);
    ctx.body = dataList;
})
//delete删除
router.delete("/fruits/:id", ctx => {
    let id = ctx.params.id;
    dataList.splice(id,1);
    ctx.body = dataList;
})


app.listen(3000,() => {
    console.log("server is running")
});

数据交互的实现

如图所示解析URL（http://127.0.0.1:3000/fruits）后，浏览器与服务器进行交互，状态码为200显示响应成功，浏览器接收到返回的html页面后，开始进行页面渲染，在页面绘制出文字和带有功能的按钮，结果显示如下：

常见错误总结

由于后台数据启动的服务器是3000端口（127.0.0.1:3000）前端页面启动的服务器是8080端口（10.2.124.111:8080），需要使用koa2-cors来实现跨域