【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代码）

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来实现跨域