上次更到mutations和actions，今天繼續寫
總覽模塊
總覽模塊就是顯示所有文章和鏈接，樣式和上次分享的文章類似。我覺得沒有添加一個返回按鈕好不科學，於是我添加了一個。
大概的感覺就是這樣。
遇到的問題就是
1. 使用getter獲取劃分好年份的數據，for item in obj此時item爲obj中的一個值而非下標，所以需要另外存儲一個數據去保存。
2. 返回使用的是this.$router.push({path:'/'})，此時不需要用go，因爲使用go會重新刷新頁面，體驗不好。
至此算是把簡單的頁面和一些簡單的跳轉做完了，現在需要涉及到文章和鏈接的可修改可編輯可刪除了。
沒想到這麼麻煩，打包啥的
本來想用passport做的驗證用戶身份，但是由於本次使用的是單頁應用，沒辦法在前端判斷用戶是否登錄，在後端又不能先渲染再判斷跳轉。
不過我覺得這一塊還是可以做的，再試試看。
如果用passport做的話可能不行，因爲跳轉的邏輯交給了前端，後端不執行跳轉，那麼使用無法使用redirect去控制跳轉。
期待有大佬可以給個解決方案
webpack自動刷新
一開始我一直使用的是npm start在上面進行修改，這樣會有一個問題。
就是每次我一旦修改了文件，不會自動刷新，而是需要手動重新打包再一次npm start，這樣很麻煩。由於使用了webpack打包，所以也使用了webpack-dev-server工具進行自動監聽文件的變化。
命令如cross-env NODE_ENV=development webpack-dev-server --open --inline --hot
也就是實時監聽文件變化並打包。
此時必須要先將服務端跑起來，npm start。然後再通過npm run dev進入開發模式。
登錄/登出
原作者在這裏添加了一個註冊的功能，我這邊省略了。
主要的邏輯就是，在界面中點擊了登錄按鈕，此時會派發一個登錄事件，在action中會post一個請求，這個請求被後臺處理，處理後會返回一個數據對象，這個數據對象是後臺進行校驗後的數據。
router.post('/api/login', function(req, res) {
const username = req.body.username;
const password = req.body.password;
db.User.find({username}, 'password', function(err, users) {
if(!users.length) {
res.send({status: 0, msg: '該用戶不存在'})
} else if(users[0].password != password) {
res.send({status: 1, msg: '密碼錯誤'});
} else if(users[0].password == password) {
res.send({status: 2, msg: '成功登錄'});
}
})
})action會根據返回的數據判斷是否成功登陸，並返回數據給頁面。頁面拿回數據後選擇是否跳轉。
獲取所有文章/鏈接
這部分主要通過actions中getArticles和getLinks實現。
這兩個action都是請求數據，然後再通過返回的數據對現有的文章和鏈接進行更新。
寫文章/添加鏈接
添加鏈接
這裏的樣式我做成彈窗，如圖
因爲每次添加一條鏈接都去修改一次數據庫性能肯定很差，因此跟原作者一樣，做成了一系列操作之後點擊保存按鈕對現在的鏈接進行保存。
大概就是
也就是說，添加/刪除/修改都是在本地進行修改（只改state裏links的數據），最後只有點擊了save按鈕纔會將修改後的數據進行保存。
添加文章
添加文章與添加鏈接不同，添加鏈接在同一個頁面就可以完成但是添加文章不行。
因此我添加了一個新的組件用於寫文章。
添加文章的邏輯還是很容易理解的，就是點擊添加文章按鈕後跳轉到編輯頁面，編輯後保存會觸發一個post請求，此時添加到數據庫中就可以啦。
有一點需要注意一下，數據庫中對所有數據都有id值_id，可以通過是否傳入這個id值判斷此時是編輯還是新增文章。
get請求帶參數
如果我要獲取特定的文章，我可以通過id去獲取。但是查詢是get請求，如何帶參呢？
getArticle: ({commit}, id) => {
return Vue.http.get('/api/getArticle', {params: {id}}).then((res) => {
return Promise.resolve(res.data);
})
},{params: {id}}就是帶參的方式，記住此時的params也是一個對象。
那麼後端如何獲取到你帶的參數呢？
// 獲取特定的文章
router.get('/api/getArticle', function(req, res) {
const _id = req.query.id;
db.Articles.findById({_id}, (err, article)=>{
if(err) {
console.log(err);
} else {
res.send(JSON.stringify(article));
}
})
})const _id = req.query.id;通過query來獲取。
完成了文章中大部分的邏輯，大概如下
下面一篇就主要寫寫一些改進的內容，像樣式啊，還有邏輯呀，收藏還沒做呢。。