【vue】MongoDB+Nodejs+express+Vue後臺管理項目Demo

¶項目分析

    一個完整的網站服務架構,包括：
   一、web frame ---這裏應用express框架
   二、web server ---這裏應用nodejs
   三、Database ---這裏應用MonggoDB  + NoSQL Manager for MonggoDB  professional 進行管理
   四、前端展現  ---這裏應用vue

1.項目服務器端搭建

安裝NoSQL Manager for MonggoDB  professional，mongodb,nodejs,express，配置服務器以便獲取真實數據。mongodb+ express + vue+nodejs  搭建後臺 （MEVN架構）

2.項目初始化 

在步驟1中的初始項目與此大體相同，選取的 配置 不一樣（vue-cli/webpack/yarn/element-ui ）

1）.新建項目文件夾vueManageSDL並初始配置

 在初始配置的時候能夠根據需求適當的修改選擇

 以上爲該項目初始配置

2）.繼續安裝以下npm依賴包

axios:用於發送相似Ajax請求
element-ui: 用於構建頁面ui的組件

此處我偷懶直接在package.json中寫入，後cnpm install 統一安裝

 3）.項目目錄圖

3.項目模擬數據生成

   用mongodb命令建立數據，eg:

   

¶項目運行

 ①前端頁面

  命令 npm run dev    或者 yarn run dev

  可訪問：localhost:8088/#/ 。成功圖：

  

 ps:  yarn的命令與npm命令

② 服務器端Database訪問    (保持cmd窗口打開，確保該項目服務器啓動狀態)

 

  可訪問：http://localhost:8088/api/log...

   另外，模擬數據Database (無服務器版)須要【vue】本地開發mock數據支持 

   

關於 註冊登陸demo    （api.js中改getAccount接口中 if (docs != "")  改成  if (docs != null)    ）

 

 

  小結：

     新建一個start.bat文件。內容保存爲  start mongod --dbpath F:\mongoDB\data    用於啓動MongoDB服務

  項目再次運行前，則：

        ① 雙擊start.bat文件 

        ②localhost鏈接MongoDB的操做： 打開NoSQL Mananger for MongoDB Professional ，next鏈接便可(端口默認)。

        ③項目鏈接MongoDB的操做 ： cmd窗口②進入項目的server目錄,輸入命令 ：node index.js     

        

  項目運行、編譯，則

       npm run dev

       npm run build        

 

 

       

 

  參考博文