学习笔记-数据交互| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第3天
概述
基于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来实现跨域
