Vue+Node 後臺管理系統

赤~日華發表於2017-11-29

菜鳥版(2017.11.28)

(1)前端:Vue2 + Element UI

(2)後端:Node + Koa2

(3)資料庫:MongoDB + Mongoose

(4)功能:登入(其它需要的功能請參照登入功能自行擴充套件)

線上地址

專案啟動流程:

1. 把專案從GitHub蕩下來後,下載MongoDB安裝包

    MongoDB下載地址

2. 安裝MongoDB安裝包,安裝時候直接點選下一步、下一步即可

3. MongoDB安裝完成後,新建一個名為DB的資料夾(路徑可以自己決定)作為倉庫,新建一個runMongo.bat檔案(路徑可以自己決定)

    runMongo.bat內容如下:

Vue+Node 後臺管理系統

4. 在vue2-project裡面呼叫命令列,輸入

npm install複製程式碼

   回車,等待依賴包安裝完成;

   在koa2-project裡面呼叫命令列,輸入

npm install複製程式碼

   回車,等待依賴包安裝完成

5. 依賴安裝完成後,雙擊runMongo.bat檔案開啟MongoDB服務,彈出視窗列印出如下內容則成功開啟:

Vue+Node 後臺管理系統

    注意彈出的命令列視窗不要關閉,否則服務也跟著關閉; 在koa2-project根資料夾呼叫命令列,輸入

npm start複製程式碼

    回車,如果控制檯列印如下內容則成功:

Vue+Node 後臺管理系統

6. 在瀏覽器訪問http://localhost:3000/initData/addAdmin,如下則admin資訊成功插入資料庫:

Vue+Node 後臺管理系統

7.  在vue2-project裡面呼叫命令列,輸入

npm run dev複製程式碼

    回車,控制檯列印如下內容則成功:

Vue+Node 後臺管理系統

8. 在瀏覽器訪問http://localhost:8080會出現如下頁面:

Vue+Node 後臺管理系統    點選登入,訪問後臺admin資訊返回結果,若成功跳轉則來到後臺頁面如下:

Vue+Node 後臺管理系統

煮了一天的雞湯

作為一個前端菜鳥的守門人,深知“自己動手豐衣足食”的道理,因此在這篇文章就教大家怎麼把專案執行起來了,如果專案在你的電腦成功執行起來了。很好!你已經成功了一半了。

接下來只需認真研讀此專案程式碼,並能夠加以改進擴充套件,則全棧有望,大業可期也~


相關文章