隔了一个月，我终于又开始写了。这个月忙到起飞，而我又是一个不愿熬夜的人，所以也就很长时间没有写文了，废话不多说，开始进入正题。单纯的vue只是一个前端框架，那么一个完整的项目，则少不了后端（服务器）的支持，确切来说是少不了数据的交互，具体到表单的验证，页面根据数据库的配置动态加载等。作为服务器的选择也有很多，如Tomcat与node等，这里尝一下新，也为了更好的锻炼一下js能力所以选择以node作为服务器来与前端交互。
那么应该怎么做？
以下所谈论的是开发环境，先介绍下项目所用到的工具
- vue-cli，官方脚手架工具，快速搭建开发环境以及各种配置
- express，node框架，同样可以用命令行快速构建
这个事有两种解决方案（我想到的），一种是整合vue与express，即跑在同一个端口下；另一种是前后端分离开发，通过vue-cli构建的项目可以通过命令行将项目跑在端口上，后端的express再启动一个端口，这样前后端分离开发。
两种方案比较
- 第一种需要通过webpack配置来达到目的，较为麻烦，而且前后端整合在一切开发会比较混乱，好处还是可以通过配置使得后端代码也可以动态刷新发布；
- 第二种方案，分离前后端主要是跨域问题，当然这个很好解决，对于项目结构本身也不需要改动什么，缺点在于开发项目过程中后端没法动态刷新发布，需要手动重启。
整理出来的结果第二种方案比较吸引我，毕竟改动是最小的，对于构建工具构建出来的项目基本不用动什么手笔，只需要再建立多一个server目录用来存放后端代码，以及配置一下跨域问题就可以了。以上说的是开发环境，在生产环境下则不存在这个问题，只要项目代码一打包，顺便配置一下server中的app.js指向打包后的index.html就可以运行整个项目了。
项目结构
项目结构
基本与vue-cli生成的目录一致，主要增加了一个server目录，用来存放后端的express代码，其中server目录下的app.js是后端项目的入口文件，client目录下的main.js则是前端项目的入口文件。
前端与后端的数据交互
其实就是各种url请求，这里用作ajax请求的库是axios.js，这也是vue框架官方的推荐库，当然你也可以用其它的库来作为ajax请求，比如经典的jquery，也可以自己动手封装一个xmlHttpRequest。
大概介绍一下axios的引入，具体的参考官网axios
npm install axios --save //引入axios模块
//在main.js中引入axios并作为全局对象
import axios from 'axios'
Vue.use(axios);
或像我一样，在client目录下新建文件夹util，里面再建一个axios.js文件，这样做的好处是我可以把axios的配置都写在这里，不会与其它文件混合在一起，同时提供export，这样只有在有需要的组件中才引入，方便管理。
需要注意的点
- 这里前后端分离会遇到跨域的问题，解决的方法是在
config/index.js里将proxyTable修改一下，将目标路径修改为你后端node服务运行的地址，如我的后端跑在8081端口，则配置如下
proxyTable: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true
}
}
- 生产环境项目路径指正
//开发环境运行
npm run dev
//项目打包
npm run build
//上述命令生成一个dist文件夹，里面是打包后的生产环境代码
在服务器上运行时只需要部署dist和server文件夹，通过server中的node来启动整个项目，这需要修改一些配置
//同样进入文件 config/index.js
//将build下的以下配置修改为
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist')
总结
这一篇主要讲的是前后端项目构建过程中一些需要思考的地方以及大概的构建思路，少有具体代码的实现。项目因人而异，摸索出自己的一条道路最为重要，当然少不了借鉴参考，实战永远是增加实力最好的办法，接下来还会持续更新这一系列的文章，keep住！
网友评论