改造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返回的结果，正确的在前端页面上面展示。
