搭建Vue+Express双模板脚手架02

改造Express生成的初始项目结构，使其符合目前使用的规范，并且进一步code，能够出示一个简单的demo，本地的前端工程和后端工程能够完成通信，前端成功展示后端返回的数据。

目录结构的变化

Express自动创建的server项目代码结构如下：

express初始项目结构.jpg

这个初始化的目录结构相对比较复杂一点，而我们在使用的时候有些目录是不需要的（每个人根据实际的需要进行定制化），这里我只需要极简的框架结构，易于理解并可以使用即可，变化后的接口框架如下：

express项目结构修改之后.jpg

调整过后的目录结构十分简洁，一个请求过来之后，基本的传播路径为：

请求的传播路径.jpg

当然上面给的传播路径是期望如此的，但是有的时候，编码人员在一开始没有规范好就会导致关系有错乱，个人觉得这样会比较清晰（有其他好的可以交流一下哦!）

Demo源码实现

这里只是实现了一个最简单的GET请求由前端发起，后端响应，最后前端展示的demo，虽然简单，但是基本能够与上面的请求传播路径相互对齐。

server端源码

//app.js
const msgInfo = require('./interfaces/i-msgInfo');
app.use('/msgInfo', msgInfo);

//i-msgInfo.js
const express = require('express');
const router = express.Router();
const msgDao = require('../services/msgInfo');

const msgInfo = async(req,res)=>{
    try {
        let msgInfo = await msgDao.getMsgInfo();
        res.send(msgInfo);
    } catch (err) {
        res.send(err)
    }
}

router.get('/', msgInfo);
module.exports = router;

//msgInfo.js
const common  = require('../utils/common');
const msgInfo = {};

msgInfo.getMsgInfo = async () => {
    try {
        let msgInfo = 'Welcome to Your Vue&Express App';
        return msgInfo;
    } catch (err) {
        throw {
            code: common.SERVICEERRCODE,
            msg: err.msg || JSON.stringify(err)
        }
    }
}

module.exports = msgInfo;

//common.js
const common = {};

common.SERVICEERRCODE = 3;

module.exports = common;

最核心的代码都在上面贴了出来，彼此之间的关系也十分的明确，建议动手操作一波。

View端源码

在前端代码中，主要改造的是安装异步请求的包axios，并在HelloWorld中发起GET请求，将请求的结果展示在首页上，还需要注意的是跨域的问题。

//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  beforeCreate () {
    window.util = {}
    window.util.$http = axios.create({
      timeout: 1000 * 50,
      withCredentials: true
    })
  }
})

//HelloWorld.vue
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: ''
    }
  },
  created () {
    //在created中data已经初始化完毕，所以可以在这里进行赋值
    this.msg = this.getMsg()
  },
  methods: {
    //Get请求，并将结果赋值给data中的msg
    getMsg: function () {
      window.util.$http.get('/api/chai/agent/msgInfo').then(r => {
        this.msg = r.data
      })
    }
  }
}

//config/index.js
//这里主要就是解决本地跨域的问题，在测试环境或者生产环境可以利用其它手段解决跨域
proxyTable: {
    '/api/chai/agent': {
        target: 'http://127.0.0.1:9106/',
        changeOrigin: true,
        pathRewrite: {
            '^/api/chai/agent': ''
        }
    }
}

Demo最终结果

demo展示结果.jpg

最终由上图所示，server返回的结果，正确的在前端页面上面展示。