Vue+Express实现前后端分离

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

一、 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文件夹名称就行了，这下就可以访问前端工程下的静态资源了。

二、前后端分离之后，怎么渲染模板或者页面

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，然后就可以继续开发前端页面逻辑及后端路由处理及数据库操作。

巴特西

Vue+Express实现前后端分离

一、 Vue和Express怎么实现前后端分离呢

解决思路

二、前后端分离之后，怎么渲染模板或者页面

最新文章

热门文章