vue-cli3中使用express配置本地數據接口

1.在項目的根目錄中增加mock.js文件，該文件作用的是關於express配置本地服務，代碼如下

const express = require('express')
const app = express()
const apiData = require('./data.json')
const seller = apiData.seller
const goods = apiData.goods
const ratings = apiData.ratings
const apiRouters = express.Router()
//使用express路由獲得本地數據
apiRouters.get('/sellers',(req,res) => {
    res.json({
        stu: 0,
        data: seller
    })
})
apiRouters.get('/goods',(req,res) => {
    res.json({
        stu: 0,
        data: goods
    })
})
apiRouters.get('/ratings',(req,res) => {
    res.json({
        stu: 0,
        data: ratings
    })
})
app.use('/',apiRouters)
app.listen(8081,()=>{
    console.log('mock data is running...');
})

 

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

//webpack自定義配置，配置獲取本地數據接口，使用proxy解決數據接口的跨域問題
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            config.mode = 'production'
        } else {
            config.mode = 'development'
            require('./mock')
            config.devServer = {
                proxy:{//使用proxy解決跨域問題
                    '/api': {// 以 “/api” 開頭的 代理到 下邊的 target 屬性 的值 中
                        target: 'http://localhost:8081',
                        changeOrigin: true,
                        pathRewrite: {// 路徑重寫
                            '^/api': '/' // 這個意思就是以api開頭的，定向到哪里, 如果你的后邊還有路徑的話， 會自動拼接上
                        }
                    }
                }              
            }
        }
    }

在api目錄中定義獲得本地數據的數據接口，目錄如下圖所示

 

 

 config.js文件時關於公共變量的定義，封裝方法，以使用axios或的數據

export const ERR_OK = 0
import axios from 'axios'
let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
    baseUrl = process.env.VUE_APP_API
} else if(process.env.NODE_ENV === 'porduction'){
    baseUrl = process.env.production.BASE_URL
}
//將獲得的數據接口封裝為axios,便於使用promise
export function get(url){
    return function(params = {}){
        return axios.get(baseUrl + url,{
            params
        }).then(res => {
            const {stu,data} = res.data
            if(stu === ERR_OK){
                return data
            }
        }).catch( e =>{
        })
    }
}

 

index.js文件時獲取數據的接口，在組件中使用

import {get} from './config'
const getSellers = get('/sellers')
const getGoods = get('/goods')
const getRatings = get('/ratings')
export {
    getSellers,
    getGoods,
    getRatings
}