菜鳥版(2017.11.28)
(1)前端:Vue2 + Element UI
(2)後端:Node + Koa2
(3)資料庫:MongoDB + Mongoose
(4)功能:登入(其它需要的功能請參照登入功能自行擴充套件)
專案啟動流程:
1. 把專案從GitHub蕩下來後,下載MongoDB安裝包
2. 安裝MongoDB安裝包,安裝時候直接點選下一步、下一步即可
3. MongoDB安裝完成後,新建一個名為DB的資料夾(路徑可以自己決定)作為倉庫,新建一個runMongo.bat檔案(路徑可以自己決定)
runMongo.bat內容如下:
4. 在vue2-project裡面呼叫命令列,輸入
npm install複製程式碼
回車,等待依賴包安裝完成;
在koa2-project裡面呼叫命令列,輸入
npm install複製程式碼
回車,等待依賴包安裝完成
5. 依賴安裝完成後,雙擊runMongo.bat檔案開啟MongoDB服務,彈出視窗列印出如下內容則成功開啟:
注意彈出的命令列視窗不要關閉,否則服務也跟著關閉; 在koa2-project根資料夾呼叫命令列,輸入
npm start複製程式碼
回車,如果控制檯列印如下內容則成功:
6. 在瀏覽器訪問http://localhost:3000/initData/addAdmin,如下則admin資訊成功插入資料庫:
7. 在vue2-project裡面呼叫命令列,輸入
npm run dev複製程式碼
回車,控制檯列印如下內容則成功:
8. 在瀏覽器訪問http://localhost:8080會出現如下頁面:
點選登入,訪問後臺admin資訊返回結果,若成功跳轉則來到後臺頁面如下:
煮了一天的雞湯
作為一個前端菜鳥的守門人,深知“自己動手豐衣足食”的道理,因此在這篇文章就教大家怎麼把專案執行起來了,如果專案在你的電腦成功執行起來了。很好!你已經成功了一半了。
接下來只需認真研讀此專案程式碼,並能夠加以改進擴充套件,則全棧有望,大業可期也~