Vue(四)——vue-router（异步请求）

一、异步请求

在实际的应用开发中，与后端交互，进行异步请求是很常见的需求

1.1axios

npm i axios

1.2请求

// home.vue
<template><div class="home">Home</div>
</template><script>
import axios from 'axios';
export default {name: 'home',data() {return {items: []}},created() {axios({url: 'http://localhost:7777/items'}).then(res => {this.items = res.data;});}
}
</script>

二、跨域

vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理

2.1vue.config.js

在项目的根目录下创建一个 vue.config.js 的文件，通过 npm run serve 启动服务的时候，会读取该文件

2.2跨域请求代理配置

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:7777',pathRewrite: {'^/api': ''}}}}
}

修改配置文件，需要重启服务：npm run serve

// home.vue
<script>
...
created() {axios({url: '/api/items'}).then(res => {this.items = res.data;});
}
...
</script>

三、node.js后台接口

注：这个后台接口系统后面的router系列都用到了

入口文件：app.js

const Koa = require('koa');
const KoaRouter = require('koa-router');let datas = {items: require('./data/items.json'),users: require('./data/users.json')
}
// console.log(datas);const app = new Koa();app.use( async (ctx, next) => {// let origin = ctx.headers.origin;ctx.set('Access-Control-Allow-Origin', 'http://localhost:3000');ctx.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');ctx.set('Access-Control-Allow-Headers', 'Content-Type');ctx.set('Access-Control-Allow-Credentials', true);await next();
} );const router = new KoaRouter();router.get('/', async ctx => {ctx.body = 'api';
});router.get('/items', async ctx => {let sort = ctx.request.query.sort || 'desc';let items = datas.items.sort((a, b) => sort === 'asc'  ? a.price - b.price : b.price - a.price);ctx.body = items;
});router.get('/item/:id', async ctx => {let id = Number(ctx.params.id);let item = datas.items.find(item => item.id === id);// await new Promise(resolve => {//     setTimeout(_=>resolve(), 2000);// });if (!item) {// return ctx.body = {//     code: 1,//     message: '没有该商品的信息'// }ctx.throw(404, '没有该商品信息');return;}ctx.body = item;});app.use( router.routes() );app.listen(7777);

items.json 

[{"id": 1,"name": "iPhone XR","vendor": "Apple","price": 542500},{"id": 2,"name": "Apple iPad Air 3","vendor": "Apple","price": 377700},{"id": 3,"name": "Macbook Pro 15.4","vendor": "Apple","price": 1949900},{"id": 4,"name": "Apple iMac","vendor": "Apple","price": 1629900},{"id": 5,"name": "Apple Magic Mouse","vendor": "Apple","price": 72900},{"id": 6,"name": "Apple Watch Series 4","vendor": "Apple","price": 599900},{"id": 7,"name": "小米9","vendor": "XiaoMi","price": 259900},{"id": 8,"name": "小米手环4","vendor": "XiaoMi","price": 16900},{"id": 9,"name": "游戏本2019款","vendor": "XiaoMi","price": 879900},{"id": 10,"name": "HUAWEI P30","vendor": "HuaWei","price": 368800},{"id": 11,"name": "HUAWEI P30 Pro","vendor": "HuaWei","price": 498800},{"id": 12,"name": "华为平板 M6 10.8英寸","vendor": "HuaWei","price": 229900},{"id": 13,"name": "HUAWEI WATCH GT","vendor": "HuaWei","price": 128800},{"id": 14,"name": "Redmi K20","vendor": "XiaoMi","price": 199900}
]

users.json:

[{"username": "lmf","password": 123},{"username": "yj","password": 123}
]