前面讲了环境的搭建用,,的使用以及

下面讲一下使用nodejs+koa提供接口，axios访问接口，前后端数据通信的相关内容。

11.使用nodejs+koa2提供后台接口

npm install koa koa-router --save-dev

在根目录下下新建server/index.js文件index.js:

const Koa = require('koa');    const router = require('koa-router')();    const app = new Koa();    router.get('/', (ctx, next)=> {        ctx.response.body = '111'    });    app        .use(router.routes())        .use(router.allowedMethods());    app.listen(3000,()=>{       console.log('server is start at port 3000')    });

package.json里面设置命令:"server":"node server index.js"

启动服务:npm run server

浏览器里面访问localhost/3000可看到返回值

12.设置koa允许前端跨域访问

使用设置跨域

安装npm install koa2-cors --save-dev

...    app.use(cors({        origin: function (ctx) {            if (ctx.url === '/test') {                return false;            }            return 'http://localhost:9001';        },        exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],        maxAge: 5,        credentials: true,        allowMethods: ['GET', 'POST', 'DELETE'],        allowHeaders: ['Content-Type', 'Authorization', 'Accept'],    }));    ...

13 使用axios访问后台接口

安装axios：

npm install axios --save

在根目录新建server/request.js

export default {    post(url, data) {        return axios({            method: 'post',            baseURL: BASE_URL,            url,            data: JSON.stringify(data),            timeout: 10000,            headers: {                'X-Requested-With': 'XMLHttpRequest',                // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'                'Content-Type':"application/json",                // 'Accept': 'application/json',                // "charset":"utf-8"            }        }).then(            (response) => {                return checkStatus(response)            }            ).then(            (res) => {                return checkCode(res)            }            ).catch((e)=>{                console.log(e)                return new Promise((resolve, reject) => {                    reject(e);                })            })    },    get(url, params) {        return axios({            method: 'get',            baseURL: BASE_URL,            url,            params, // get 请求时带的参数            timeout: 10000,            headers: {                'X-Requested-With': 'XMLHttpRequest'            }        }).then(            (response) => {                return checkStatus(response)            }            ).then(            (res) => {                return checkCode(res)            }            )    }}

function checkStatus(response) {

// loading// 如果http状态码正常，则直接返回数据if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {    return response    // 如果不需要除了data之外的数据，可以直接 return response.data}// 异常状态下，把错误信息返回去return {    status: -404,    msg: '网络异常'}

}

function checkCode(res) {

// 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户if (res.status === -404) {    let vue = new Vue;    vue.$message({ type: 'error', message:res.msg});}// if (res.data && (!res.data.success)) {//     alert(res.data.error_msg)// }return res

}

调用：

import request from '.././request.js'; let {data} =await request.post(options.url,data1);let {data} =await request.get(options.url,data1);

请注意这里踩了两个坑：1.设置axios.defaults.withCredentials = true   //请求时带上cookie这样请求时才会带上cookie2.设置'Content-Type':"application/json",并JSON.stringify(data),这样后台才能正确接收到数据3.当设置请求时带上cookie时后端允许的跨域不能用"*"要说明协议+域名+端口[相关问题](https://segmentfault.com/q/1010000011878964?_ea=2792154)

请求数据效果图：

后面将讲一下element-ui的使用

代码托管于 欢迎star