vue-cli3中使用express配置本地数据接口

1.在项目的根目录中增加mock.js文件，该文件作用的是关于express配置本地服务，代码如下

 1 const express = require('express')
 2 const app = express()
 3 const apiData = require('./data.json')
 4 const seller = apiData.seller
 5 const goods = apiData.goods
 6 const ratings = apiData.ratings
 7 const apiRouters = express.Router()
 8 //使用express路由获得本地数据
 9 apiRouters.get('/sellers',(req,res) => {
10     res.json({
11         stu: 0,
12         data: seller
13     })
14 })
15 apiRouters.get('/goods',(req,res) => {
16     res.json({
17         stu: 0,
18         data: goods
19     })
20 })
21 apiRouters.get('/ratings',(req,res) => {
22     res.json({
23         stu: 0,
24         data: ratings
25     })
26 })
27 app.use('/',apiRouters)
28 app.listen(8081,()=>{
29     console.log('mock data is running...');
30 })

 

2.在vue.config.js中配置webpack

 1 //webpack自定义配置，配置获取本地数据接口，使用proxy解决数据接口的跨域问题
 2     configureWebpack: (config) => {
 3         if (process.env.NODE_ENV === 'production') {
 4             config.mode = 'production'
 5         } else {
 6             config.mode = 'development'
 7             require('./mock')
 8             config.devServer = {
 9                 proxy:{//使用proxy解决跨域问题
10                     '/api': {// 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
11                         target: 'http://localhost:8081',
12                         changeOrigin: true,
13                         pathRewrite: {// 路径重写
14                             '^/api': '/' // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
15                         }
16                     }
17                 }              
18             }
19         }
20     }

在api目录中定义获得本地数据的数据接口，目录如下图所示

 

 

 config.js文件时关于公共变量的定义，封装方法，以使用axios或的数据

 1 export const ERR_OK = 0
 2 import axios from 'axios'
 3 let baseUrl = ''
 4 if (process.env.NODE_ENV === 'development') {
 5     baseUrl = process.env.VUE_APP_API
 6 } else if(process.env.NODE_ENV === 'porduction'){
 7     baseUrl = process.env.production.BASE_URL
 8 }
 9 //将获得的数据接口封装为axios,便于使用promise
10 export function get(url){
11     return function(params = {}){
12         return axios.get(baseUrl + url,{
13             params
14         }).then(res => {
15             const {stu,data} = res.data
16             if(stu === ERR_OK){
17                 return data
18             }
19         }).catch( e =>{
20         })
21     }
22 }

 

index.js文件时获取数据的接口，在组件中使用

1 import {get} from './config'
2 const getSellers = get('/sellers')
3 const getGoods = get('/goods')
4 const getRatings = get('/ratings')
5 export {
6     getSellers,
7     getGoods,
8     getRatings
9 }

 

posted @ 2019-09-11 10:33  mchtig  阅读(2095)  评论(0)  编辑  收藏  举报