vue-backend-system
一直想把以前所學的相關知識進行總結歸納，方便以後檢視複習，正好最近最近抽時間研究點東西，打算是做前後臺的，對後臺這塊不熟悉，本來是打算用node加mongodb實現，資料自己弄的不是很清楚，就乾脆爬下自己的部落格，主要是研究下前後臺一起結合著來做的整個流程。
步驟
下載專案
git clone 或者直接下載檔案
安裝依賴
cd到專案根目錄下執行 npm install安裝依賴 使用淘寶映象 cnpm install(需要先安裝淘寶淘寶映象，執行
npm install -g cnpm --registry=https://registry.npm.taobao.org)
執行vue專案
npm run dev(開發環境執行，訪問
localhost:8081/) npm run server(執行後臺服務，後臺埠是8888)
記錄筆記
簡單總結下自己遇到的問題，學習到的東西，主要是根據這個專案進行簡單的總結，一個是vue相關的內容，另一個是node相關的知識。
Vue總結筆記
這個主要是記錄Vue的相關內容，主要是根據這個專案，在專案中用到的知識，進行一個 大致的總結，以方便以後進行復習檢視，大家看的話，最好把相關的文件都大致看下，我這裡只是簡單介紹下記錄下大致的步驟，方便自己以後複習來用的，稍微深點的只是都需要大家自行閱讀相關的文件。
參考文件
技術點
- vue
- vuex
- vue-router
- axios
- element-ui
- echarts
步驟
####建立專案
專案直接使用了vue-cli快速搭建了專案結構
vue-cli腳手架安裝使用
-
cnpm install vue-cli -g (全域性安裝vue-cli)
-
vue (執行vue檢視是否安裝成功)
-
vue init webpack 專案名稱 (建立webpack模板專案，這一步是快速建立vue專案，按照提示一步步完成安裝)
D:\shanll\js\vue\vue-all-system>vue init webpack vue-backend-system 建立專案
A newer version of vue-cli is available.
latest: 2.9.3
installed: 2.9.1
? Project name vue-backend-system 這個是專案名稱
? Project description 專案描述 專案描述
? Author 作者 作者
? Install vue-router? Yes 專案路由我用到了選擇了yes，可以選擇no建立專案後在安裝路由
? Use ESLint to lint your code? No 程式碼檢查
? Set up unit tests No 單元測試
? Setup e2e tests with Nightwatch? No 自動化測試
? Should we runnpm installfor you after the project has been created? (recommended) no 這個是是否現在就安裝依賴
vue-cli · Generated "test".
# Project initialization finished!
# ========================
To get started: 接下來要執行的步驟
cd vue-backend-system
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at
https://vuejs-templates.github.io/webpack
- cd vue-backend-system (到專案跟目錄下)
- cnpm install (安裝依賴)
- npm run dev (執行專案, 預設訪問
localhost:8080/)
到此專案的基本架構建立完成
路由
做的是一個後臺管理的專案，首先是頁面的結構，根據頁面的結構設計路由。
-
設計頁面結構
-
最終的路由結構參考
src/router/index.js# 引入vue 和vue-router # Vue.use(Router)註冊路由外掛 # export default router 匯出router物件 # src/main.js 中例項化Vue時傳入router物件 # router是例項化的路由物件，路由配置都在這個物件中 複製程式碼router物件中的引數:
path路由路徑，name路由的名稱,component路由變數(引入的路由模組),children子路由,meta路由傳遞的資訊(一般在這裡的資訊可以處理訪問許可權等) -
頁面解析 主頁面是
views/Index/index.vue,一些樣式直接使用element-ui的樣式,element-ui的使用參考src/main.js的全域性引入並註冊。分為頂部、左側導航欄，右側的主題三部分，在該index.vue中使用了router-view標籤，大致相當於一個容器，渲染路由對應的元件，在這個專案中大致就相當於router.js的router的childredn下的路由匹配的元件,transition是過度標籤，具體的使用可以參考官網 -
可以根據路由和頁面參考佈局，基礎的概念和知識可以參考下方官方文件連結。
編寫程式碼的過程記錄
- 過程中使用了element-ui做ui上面的處理，安裝element-ui
cnpm install --save element-ui然後引入外掛，使用Vue.use(ElementUI)註冊使用,下面就可以在各個元件中進行使用了。
- 各個元件中的引數傳遞
使用vuex進行各個元件之間進行引數傳遞
cnpm install --save vuex，我把vuex相關程式碼寫入src/vuex/資料夾下，大家可以參考 使用，最後只要把store.js進入到main.js中，然後在vue例項化中引入就ok，可以參考main.js中的使用，在vuex中使用了vuex-presist外掛，這個主要是解決快取的問題.
關於上面的vuex-presist使用的原因
關於頁面的設計左側的導航欄對應不同的路由，切換不同的頁面，也有對應的
active樣式，這些是一一對應的，大家參考router.js中的引數配置，meta欄位中有個index是為了控制頁面左側導航欄對應的地址和active樣式，但是每次重新整理active都會是預設的初始值，為了解決這個問題就要使用快取，所以引入了vuex-presist外掛，然後把active對應的欄位和index欄位建立聯絡就ok了，就是通過vuex把資料傳遞給導航欄對應的active.vuex-presist的具體使用可以參考sotre.js的使用方法。
- 關於vuex專案中只使用到了定義
state和賦值mutations
使用vuex的過程中，最簡單的就是直接使用state屬性，然後在各個元件中引入vuex進行使用，參考
views/Index/left.vue檔案,引入import { mapMutations, mapState } from 'vuex',使用的話可以再computed和mathods中使用。使用的話可以使用陣列的方式，這種方法的話名字必須和store.js的變數名字一樣,views/Index/left.vue檔案中的...mapState。另一種方式是使用物件的方式，像views/Index/left.vue檔案中的...mapMutations,要使用mapMutations中的變數改變state的值，必須使用$store.commit()進行使用，可以參考vuex文件。
- 最初的設計是隻有
/首頁頁面的是不用登陸的，其餘頁面是需要登入才能訪問的，因此需要做許可權判斷，這裡只是模仿了登入的效果，登入固定只有admin才能登入，重點是在如何處理token,登入許可權判斷。
參考
router.js在路由的配置用有meta.login判斷是否需要登入訪問，router有個路由守衛，可以在元件中分開寫也可以在全域性中寫，這裡用的是全域性路由守衛beforeEach,to即將進入的頁面，from從哪個頁面過來，具體的可以看下stroe.js中的程式碼。其中登入超時的判斷是在前臺進行判斷的，在登入的時候設定一個時間點，每次切換路由或者重新整理頁面的時候一個新的時間點，這之間的時間段來進行判斷是否超時，當然一般這個超時有後臺判斷更合適點，後臺判斷是否超時來返回不同的欄位就ok。為登入情況也做了處理，物件中的query跟的引數是為了返回從哪個頁面過來的，在login頁面進行登入成功的處理就好了。
- 頁面的資料問題
元件的頁面資料來源於我的git page部落格，想來熟悉node的使用，之前用過node寫點東西，所以就乾脆用node的爬蟲來爬去下我的這個頁面，根據爬取到的資料作為請求的資料返回給本地的請求。本地請求用的是
axios,安裝外掛並在main.js中引入，然後在vue的原型中定義一個屬性來引入使用axios，另外由於請求的服務是在8888埠，因此會出現跨域的問題，因此用到了vue的代理請求的方式處理跨域問題，參考config/index.js下面的屬性proxyTable，匹配所有/node請求，target代理的地址，pathRewrite是把所有的/node替換為空，就是前臺的請求介面比著後臺的介面是要少/node欄位的。
總結: 到這裡vue的簡單構建專案差不多就寫完了，主要是走一個整體的流程，一般專案這樣就算是能開頭了，後續就是加功能，完善業務，然後就是一些具體的處理。
介面上的處理就是下一篇文章了主要是node相關的內容大家參考node的學習記錄
node的相關知識總結
這裡主要是node相關的知識，簡單的介紹下node的服務建立，請求的介面的寫法，由於資料來源問題，最後 採用的是爬蟲的方式來獲取資料，順便記錄下node是怎麼實現爬蟲的。
參考連結
node中文文件 express官方文件 superagent中文參考文件 cheerio的參考文件
起步建立服務
所有介面和爬蟲內容都在server目錄下，大家可以自行參考，這裡使用的是express框架建立服務，關於express的詳細內容大家可以參考上面的連結，這裡簡單介紹下這個專案使用時程式碼編寫的過程.
// index.js
const express = require('express')
const app = express()
app.listen(8888)
console.log('node server is running at port 8888')
複製程式碼在該目錄下執行node index.js啟動服務,在這個專案中可以執行npm run server來啟動服務，因為在package.json中的script屬性中進行了配置，能夠使用快捷啟動服務,配置用使用的是nodemon這個事一個外掛，全域性安裝就ok主要是可以實時啟動服務，不用每次修改儲存都要手動重啟服務，外掛會儲存的時候自動重啟服務。
在這裡把各個功能的部分進行了單獨檔案模組化，引入各個模組，然後使用app.use(模組名)註冊使用模組。
主要介面模組
api.js這是主要的文章介面模組，對文章列表和分類進行爬蟲，然後然後編寫相應介面進行介面註冊。把不同功能的介面進行模組化，主要是介紹怎麼在介面比較多的時候如何進行處理。
api介面的一般模板參照server/api.js
// server/api.js
const express = require('express')
const router = express.Router()
// 路由中介軟體的使用，就是可以使用router.use來呼叫相關處理的中介軟體，其實相當於一系列的函式
router.use((req, res, next) => {
next()
})
module.exports = router
複製程式碼對外包路router物件，在server/index.js中引入router物件,通過app.use進行註冊使用。
get請求
// server/api.js
router.get('請求介面', (req, res) => {
// callback
})
複製程式碼superagent，cheerio請求和處理網站資料
使用superagent外掛請求網路資料，根據返回的網站資訊獲取網站程式碼，分析網站程式碼獲取自己想要的資訊，進行提取。一般的爬蟲規則就是基於此種情況，這是最簡單的爬蟲，操作手法都是相同的，後續是處理爬取到的內容進行資料處理。
使用cheerio對請求回來的出去進行處理，其api和jQuery的api基本一致，會使用jQuery可以直接使用。
一般使用:
// server/api.js
// 引入
const superagent = require('superagent')
// 使用
superagent.get(請求地址).end((err, response) => {
if(err){
// 處理錯誤
}
// 這裡對獲取的內容進行處理,使用cheerio定義一個變數，可以參考cheerio的使用
let $ = cheerio.load(reponse.text)
// 下面就是對獲取的內容進行處理了，獲取自己想要的資料儲存到一個變數中
let obj = {}
// 這步是把資料返回給請求的介面，這是前端能夠拿到的資料
res.send({data: obj})
})
複製程式碼其中server/userInfo.js這裡面的程式碼是和上面一至的，請求頁面獲取不同的資訊，返回給前端。這樣一來通過介面就能調取到想要的資料，前端拿到資料，將資料渲染到頁面。
到這裡關於這個專案裡面用到的node的東西都說的差不多了，只是簡單介紹下，是怎麼處理前後臺的關係的，這種是前後臺分開來做的，後臺處理業務邏輯server資料夾下的，前端進行頁面方面的處理，前端一般不對資料進行處理，拿來就行進渲染。這裡也可以把爬蟲獲取的資料換掉，使用mongodb進行後臺資料庫的操作，效果是一樣的，之前做過這方面的嘗試，複雜的業務邏輯不好寫，一些簡單的增刪改查還是很容易的，需要的可以參考我之前寫的專案vue-node-mongodb