Vue+Express实现先后端分离

先说明一下原因，由于本身前段时间在实习，实习期间为了参与项目开发，粗略学习了下Vue、Vuex、Vue-Router，大体会一些基础的。这里也快要作毕业设计了，趁着放假回来的这两天，学习下Node的相关知识，最主要的是学习了Express这个基于Node的web框架，我本身自己选的毕设题目也是有关Node的，天然而然地想去用Vue和Express来作一个先后端分离的项目，也算是为毕业设计作准备了。下面进入正题。

1、 Vue和Express怎么实现先后端分离呢

在接触Express的时候，更多的是使用html、ejs、jade这样的模板来实现的View层页面开发。首先我没有萌生直接在views目录里面，使用.vue后缀文件来代替相似.ejs模板文件的想法。 我首先想到的是，先把后端工程搭建起来，而后再用vue-cli生成前端vue工程，可是两个工程基础架构都建好了，可是怎么将其二者有机地结合在一块儿呢？

解决思路

以前本身在用Vue作项目的过程当中，也是先后端分离的，只不过前端是在一个工程，后端是Java的一个工程，那么想要先后端交互，通常是将前端代码打包好以后，放到后端工程的某个目录下。 前端打包：vue-cli用的是webpack打包，运行npm run build打包命令会在根目录下生成一个dist文件夹，这个文件夹中包含前端的img,css,js文件。 在express中提供静态资源：在使用express生成器生成的项目工程中，通常会将ejs模板文件放在views文件夹下，而后express有一个内置中间件，能够解决访问静态资源的问题。

app.use(express.static('public')) //public是指的放置前端静态资源的文件夹名称，若是有不清楚的地方，能够去express官网看看

一样是访问静态资源，那么在express.static()中间件中，写入vue-cli打包好以后的dist文件夹名称就好了，这下就能够访问前端工程下的静态资源了。

2、先后端分离以后，怎么渲染模板或者页面

Express+ejs(jade)模式下，呈现视图模板的话主要是经过ejs(jade)模板渲染的方式，可是Express+Vue模式下，由于Vue是单页应用，因此Express针对任何路由的处理，都会只返回一个页面（html方式）。

• Express+ejs(jade)模式 由于接触Node也比较浅，实际操做的项目不多，因此对于express的原理有些生疏。前两天我对Express框架作了一个小的复习，大体了解了理论，今天在作Vue+Express的时候，怎么渲染页面的原理我居然忘了？？？为Express开发模板引擎，我看了这篇以后，才恍然大悟，后端对路由作处理的时候，会使用res.render('about')来渲染并返回模板。about指的就是views文件夹下的about.ejs模板文件。
• Express+Vue模式 使用Vue开发前端页面，实际上后端express在对路由作处理的时候，只会返回一个页面，即前端打包生成后的index.html文件。

// 由于是单页应用 全部请求都走/dist/index.html
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
    res.send(html)
})

这样先后端分离也作好了，页面访问也ok，而后就能够继续开发前端页面逻辑及后端路由处理及数据库操做。