專案CMS前端的搭建使用Vue.js。由於這不是學習的重點，一些基礎內容就不在這裡提及了。主要記錄搭建過程。
Vue.js 使用步驟
Webpack 使用步驟
CMS 前端的開發
由於單頁面互動通過Ajax，有使用者操作體驗好，不用重新整理頁面操作以及適合前後端分離的優點；但是有首頁載入慢，搜尋引擎優化不友好等缺點，我們專案的的門戶、課程介紹不採用單頁面應用架構去開發，對於需要使用者登入的管理系統採用單頁面開發。
建立頁面原型
頁面結構
所有.vue檔案均以一下模板佈局
<template>
<!‐‐編寫頁面靜態部分，即view部分‐‐>
測試頁面顯示...
</template>
<script>
/*編寫頁面靜態部分，即model及vm部分。*/
</script>
<style>
/*編寫頁面樣式，不是必須*/
</style>- 在page資料夾中新增前端頁面
- 在router資料夾中配置路由資訊
- 在base資料夾的router新增該路由，這樣才能訪問相應頁面
Table元件新增
可以從Element元件庫挑選可用的元件，改用其程式碼。
這一步將表格介面建立完成，可以顯示出一個初步的列表了。
其中分頁和查詢還未定義具體方法，將在下一步完成。
查詢功能
頁面圖中有一個查詢按鈕，現在我們需要的功能是點選查詢，能夠查到資料庫中所有的頁面資訊。
所有和資料相關的內容都應該寫在<script></script>標籤中。比如需要從資料庫返回的列表資料寫在data()中；分頁，查詢具體的方法實現寫在methods()中，為了解決點開列表頁面即能看到查詢結果，這使用了vue中的鉤子函式mounted()實現……
裡面的方法如何寫，我給自己的要求是能看懂，照葫蘆畫瓢寫出來即可。
此外，需要注意的是，我們讀取資料，要用到別的庫中的方法，所以需要引用其他庫。import * as cmsApi from '../api/cms.js'
而且我們要在api/cms/cms.js中定義一個js方法，此方法實現http請求服務端頁面查詢介面。
// 定義方法，請求服務端頁面查詢介面
export const pagelist = (page, size, params) =>{
// 請求服務端的頁面查詢介面
// 通過ajax呼叫獲取頁面資料
return http.requestQuickGet(apiUrl + '/cms/page/list/' + page + '/' + size);
}跨域問題
注意到，上個部分的返回連線中使用到了apiUrl這樣一個引數。這是為了解決跨域呼叫問題的。
如果我們使用頁面原本的域名http://localhost:11000/#/xxx，由於瀏覽器的同源策略，會使得我們無法獲取資料庫的資料，因為資料庫埠是http://localhost:31001/。
所以我們需要一箇中介軟體解決埠不一致的問題。
proxyTable
proxyTable的底層使用了http-proxymiddleware，基本原理是用服務端代理解決瀏覽器跨域。
除了在獲取服務端請求介面的域名中用apiUrl替換之外，我們還要在config/index.js下配置proxyTable，需要把域名中的../api/..這部分去掉。
'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': ''//實際請求去掉/api
}總結
程式碼
程式碼地址
從7.28號開始的commit檢視
本作品採用《CC 協議》，轉載必須註明作者和本文連結