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
    }
]