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，而後就能夠繼續開發前端頁面邏輯及後端路由處理及數據庫操做。