Vue+Express+Mock(Web后端随机生成数据)独立于服务端开发

本文链接：https://blog.csdn.net/qq_25751673/article/details/77870036

需要有两个工程：
1.Web前端的数据请求和展现（Vue+echarts+axios）
2.Web后端的响应请求（Express框架+Mock js）

本文以echarts柱状图的使用为例子，做了基础demo，如下：
web前端文件为echarts柱状图的初始化与展现，代码上
vue工程main.js,用到了axios插件请求后端:

import Vue from 'vue'
import VueRouter from 'vue-router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App'
import axios from 'axios'
import echarts from 'echarts'

Vue.use(VueRouter)
Vue.use(ElementUI)

/*vue全局引入外部插件的方法*/
Vue.prototype.$axios = axios;
Vue.prototype.$echarts = echarts;

Vue.config.productionTip = false
window.bus = new Vue()
/* eslint-disable no-new */

var vm = new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

config文件夹下的index.js配置文件，需要设置跨域相关代码，主要代码如下：

 proxyTable: {
        /*跨域请求设置（设置请求根接口、地址和端口）*/
        '/getBarData': {
            target: ' http://127.0.0.1:3000/',
            changeOrigin:true,
            /*pathRewrite: {
                '^/fatherdata/': '/fatherdata/'
            }*/
        }
    },

页面代码：

<template>
    <div class="son">
    <div id="chart1" style="height:300px;"></div>  
    <el-button @click="getBarData">获取数据</el-button>   //点击重新请求后台数据，并刷新柱状图
    </div>
</template>


<script>
export default {
    props:['ref1'],
    inheritAttrs: false,
    data(){
        return{
            myChart:'',
            yData: [],
            xData:[],
        }
    },
    created:function(){
        this.getBarData();
    },
    methods:{
        getBarData(){
            //请求web后端
            this.$axios.get('/getBarData').then(res => {
                console.log(res.data)
                //将结果赋值给柱状图相关data
                this.yData = res.data.arr;
                this.xData = res.data.title;
                //初始化柱状图
                this.initEcharts();
            })
            .catch(e => {
                console.warn('error','getBarData查询异常')
            })
        },
        //柱状图初始化与赋值函数
        initEcharts:function(){
            this.myChart = this.$echarts.init(document.getElementById('chart1'));
            this.myChart.setOption({
                title: { text: 'ECharts 入门示例' },
                tooltip: {},
                xAxis: {
                    data: this.xData
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: this.yData,
                }]
            });
        }
    }                   

}
</script>

*******************下面是Web后打端需要配置的********************
web后端代码上：express框架搭建，根目录下的app.js，主要代码如下

/*路由访问配置*/
app.use('/', index);

route/index.js代码如下：浏览器请求地址…./getBarData,即可获得相应数据

var express = require('express');
var router = express.Router();
const Mock = require('mockjs');        //引入mock模块

router.get('/getBarData', function(req, res, next) {
    /**
     * mockjs中属性名‘|’符号后面的属性为随机属性，数组对象后面的随机属性为随机数组数量，正则表达式表示随机规则，+1代表自增
     */
    let result = Mock.mock({
        "status": 200,
        "data|1-9": [{
            "name|2-5": /[a-zA-Z]/,
            "number|1-100": 100
        }]
    })
    //***数据处理为echarts需要的数组形式****//
    let arr = [];
    let title = [];
    for(let i=0;i<result.data.length;i++){
        arr.push(result.data[i].number)
        title.push(result.data[i].name)
    }
    //返回数据给web前端
    res.json({arr:arr,title:title});
});

module.exports = router;