第三章 建議學習時間8小時 總項目預計10章
學習方式：詳細閱讀，並手動實現相關代碼（如果沒有node和vue基礎，請學習前面的vue和node基礎博客【共10章】
演示地址：後臺：demoback.lalalaweb.com 前臺：demo.lalalaweb.com
演示過程中可能會發現bug，希望即時留言反饋，謝謝
源碼下載：https://github.com/sutianbinde/classweb //不是全部的代碼，每次更新博客才更新代碼
學習目標：此教程將教會大家 如何一步一步實現一個完整的課程學習系統（包括課程管理後臺/Node服務器/學習門戶三個模塊）。
上次node基礎課程博客大家反響很好，時隔3個月，才更新項目部分，預計2~3天更新一章，我儘量20天更新完畢，學完這個項目Nodejs和vue就基本熟悉了，如發現教程有誤的地方，請及時留言反饋
視頻教程地址：www.lalalaweb.com，後期會上傳教學視頻，大家可前往視頻學習（暫時還沒有視頻）
用戶添加/修改/刪除 表格組件 分頁組件
首先我們通過命令行啓動前面已經寫完的項目
由於要用到表格，我們這裏就得封裝 表格和分頁組件
先在componets中創建分頁組件 pagebar.vue，寫入以下代碼（功能是傳入分頁信息，然後展示分頁，點擊分頁的時候，會向上觸發goto()跳轉到第幾頁，具體參數的解釋在代碼中，對於組件不熟悉的，可以再去看看前面的基礎教程）
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
然後在componets中創建 grid.vue ，表格組件，然後寫入以下代碼，我們在表格組件中，引入了分頁組件，這樣就不用在主頁面中兩次引入了，參數的註釋在代碼中，這裏我們需要傳入表格數據的頭信息和列表信息
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
表格頭信息和列表數據 需要傳入的數據格式 如下（這只是展示，幫助大家理解上面的代碼的，不用寫到頁面中）
var listData = [
{
name:"css+html基礎",
duration:"30h",
teacher:"小豆子",
videoNb:"20",
sysId:1
},{
name:"javascript進階",
duration:"20h",
teacher:"小豆子",
videoNb:"12",
sysId:2
},{
name:"移動端全解析 ",
duration:"10h",
teacher:"小豆子",
videoNb:"3",
sysId:3
},{
name:"10分鐘系列 ",
duration:"23h",
teacher:"小豆子",
videoNb:"2",
sysId:4
},{
name:"移動端動態網頁編程",
duration:"10h",
teacher:"小豆子",
videoNb:"10",
sysId:5
}
];
var theadData = [
{
title:"課程名稱",
keyname:"name"
},{
title:"時長",
keyname:"duration"
},{
title:"視頻數量",
keyname:"videoNb"
},{
title:"老師",
keyname:"teacher"
}
];
然後我們修改系統管理員列表組件（我們上一章中建立的 adminList.vue），修改其中的代碼如下，我們這裏代碼比較多，包括了增刪該，分頁等功能，確實不好分步驟講解，這裏就直接上代碼了，整體來說，方法都很明確，希望大家能看懂，中間的ajax接口我們下一步再去Node端寫。
注：這裏我們沒有對輸入數據進行嚴格的正則驗證，是因爲此後臺功能設定爲內部人員使用，所以不需要像前臺用戶註冊頁面那樣寫非常複雜的驗證
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
vue部分我們就寫好了，然後我們編寫node接口
我們修改 routes中的 users.js，添加增刪改用戶的接口 ，由於需要對 _id進行轉化，我們還需要引入mongodb的ObjectId模塊，修改後的users.js如下
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
這裏我們用的分頁查詢page方法，在原來的 dbhander.js中沒有，所以需要修改 dbhandler.js，修改後的如下，（添加的方法在63行 和 123行）
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
然後重啓node端服務，可以看到人員增刪改查功能已經實現，原來的admin顯示出來了，你也可以進行添加，修改，刪除
由於mongodb其實不太穩定，所以我們操作過程中，可能會出錯停止，如果出現下面報錯，就表示Mongodb數據庫停了
報錯
只需要 重啓 mongodb 並重啓 node端 即可
等以後上線那一章，我們再講如何在服務器上讓 mongodb和node穩定運行，現階段運行出錯我們都手動重啓。
到這裏，我們發現，貌似不登陸也能請求列表數據呀，這不科學，所以，我們需要對所有的請求進行攔截，只有當登錄了，才能請求數據
我們在vue端的 app.js中加入攔截代碼，在session設置的後面添加吧，位置和代碼如下
這裏我們看到，只有當session中有username的時候，才表示已經登錄的（大家還記得嗎，這個我們在登錄的時候有設置session.username，就是用來這裏作判斷的），判斷中，如果不是登錄/登出/已登錄三種狀態，就直接返回 redirect:true，來告訴瀏覽器端，需要重定位到登錄頁面
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
然後我們來在vue的main.js中 作redirect跳轉，還有當後臺返回err的處理，代碼和位置如下
這裏在axios中作響應前攔截，就是所有的響應到達$req.post的then(){}之前執行的代碼，具體的axios配置項大家可以查查axios官網
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
重啓node端，然後訪問列表數據，就會提示登錄並跳轉了，如果已登錄，就不會提示這個
好啦，今天就講到這裏。下一篇將講解 學員列表，課程列表（暫時可能停更項目一段時間，基本的框架和操作都已經實現了，如果看到這裏能弄懂的後面的功能應該都能自己寫出來了）