基於vue2.0 +vuex+ element-ui後臺管理系統:包括本地開發調試詳細步驟

• 效果演示地址,
• github地址：

demo演示：

 

 

 

 

一、About

此項目是 vue2.0 + element-ui + node+mongodb 構建的後臺管理系統，全部的數據都是從服務器實時獲取的真實數據，具備真實的註冊、登陸、數據顯示、新增數據、修改數據、刪除數據等功能。

 

二、說明

若是對您對此項目有興趣，能夠點 "Star" 支持一下 謝謝！ ^_^

或者您能夠 "follow" 一下，我會不斷開源更多的有趣的項目

開發環境 windows 64 、nodejs 6.10.0

若有問題請直接在 Issues 中提，或者您發現問題並有很是好的解決方案，歡迎 PR 

 

三、技術棧

前端技術棧：vue2 + vuex + vue-router + webpack2.0 + ES6/7 + less + element-ui

服務端技術棧：nodejs + express + mongodb

 

四、前序準備

運行前準備：

   4.一、不須要在本地調試及開發： 請訪問本項目的服務器地址。

 

   4.二、須要在本地調試及開發：

 因爲此項目是基於nodejs和mongodb的先後端結合項目，你須要進行nodejs和mongodb的相關準備工做。項目運行以前，請確保系統已經安裝如下應用：

   (1)、node (6.0 及以上版本)。使用細節，請參考： node的下載及安裝。

   (2)、mongodb 。 使用細節，請參考： mongodb的下載及使用。【下載，db/log配置，開啓服務，use touzi，導入數據】

  　　（2.1）、下載地址(免安裝版，下載完成以後，直接解壓就行);

　　  （2.2）、指定mongodb的數據表和日誌存放路徑：

　　　　將解壓後的mongodb文件重命名爲mongodb,放入指定盤符，這裏我默認放在E盤，個人目錄爲：E:/mongodb/。

              若是是windows 7系統，點擊快捷鍵：windows鍵，打開cmd窗口，進入E:/mongodb/mongod/bin文件夾下，執行以下命令便可。

　　　　e:\mongodb\mongod\bin> mongod --dbpath=e:\mongodb\mongod\db --logpath=e:\mongodb\mongod\log\log.txt --install

 

              注意：若是是window 10系統，因爲系統安全性較高，須要在微軟小娜搜索框中，輸入cmd,右鍵出現的「命令提示符」，以管理員身份運行，執行以下命令便可，如圖：

              

　　　　

 

　　 （2.3）、啓動服務，鏈接數據庫:

　　　　若是是window系統，使用快捷鍵：windows+R,打開運行窗口，輸入命令：services.msc，雙擊Mongo DB,啓動類型：自動；點擊「啓動」按鈕，肯定便可。如圖：

　　　　

　　（2.4)、切換數據庫；

　　進入mongodb/mongod/bin文件夾，雙擊mongo.exe文件，出現以下畫面，表示mongodb默認鏈接的數據庫名爲test，咱們這個項目用到的數據庫名爲：tougu。

      

   

　　接下來，使用命令：>use tougu,即切換到tougu數據庫。如圖：

　　

　　（2.5）、導入初始化數據；

　　由於剛剛安裝的本地數據庫，db中的數據爲空，若是您進行本地開發，須要拿到數據，必須導入初始化數據。初始化數據在 /outdb/文件夾下，複製到剛剛安裝的本地數據mongodb/mongod/outdb文件夾下，導入方法以下：

　　進入bin文件夾，若是是windows系統，點擊快捷鍵：windows鍵，打開cmd窗口，進入E:/mongodb/mongod/bin文件夾下,輸入命令mongoimport逐個文件導入便可。注意：moneyIncomePay.txt爲對應導入的文件名。

　　e:\mongodb\mongod\bin> mongoimport  -d tougu -c  moneyIncomePay  --file ../outdb/moneyIncomePay.txt --upsert

　　如圖：表示數據導入成功。

       

     

　　(3)、robomongod。（注意：mongodb可視化視圖工具，本項目不是必須安裝，主要用於方便查看數據庫數據）。

　　使用細節，請參考： robomongod的下載及使用。

　　免安裝版，下載完成以後，直接解壓就行。放到E:mongodb/文件夾下，重命名爲：robomongod。

　　雙擊robomongo文件夾下的robo3t.exe，新建一個connection，輸入主機名：localhost和端口號27017（mongod的默認端口），默認狀況下不須要用戶名密碼。如圖：

 　　

  　　鏈接後，咱們就能夠看到test這個數據庫。當咱們運行項目，調取接口的時候，就會自動建立數據庫tougu及數據庫下相應的表格數據.

　　  雙擊tougu這個集合，查看裏面的數據。數據的展現分三種。樹形（能夠看到字段的類型），表格，文本。如圖：

         

五、開發

    git clone https://github.com/wdlhao/vue2-element-touzi-admin

    cd vue2-element-touzi-admin npm install

    npm run dev (訪問本地後臺系統，需開啓服務端express服務)。運行以後，會默認打開本地訪問路徑： http://localhost:8012。

      開啓服務端express服務方法以下：雙擊server/start.bat啓動文件，執行命令>node index.js便可，啓動後切記不要關閉cmd窗口。

 

六、發佈

   npm run bulid (生成打包以後的項目文件,此文件主要用於項目部署)。

 

七、功能列表

- 登陸/退出 -- 完成

- 首頁 -- 完成

- 用戶列表 -- 完成

- 信息列表 -- 完成

- 信息管理

• - 我的信息 -- 完成
• - 修改信息 -- 完成

- 資金管理

• - 資金流水 -- 完成
• - 支付單據 -- 完成

- 投資管理

• - 省份投資 -- 完成
• - 區域投資 -- 完成

- 金融文章

• - 文章發佈 -- 完成
• - 文章編輯 -- 完成
• - 查看文章 -- 完成

- 資金數據

• - 投資分佈 -- 完成
• - 項目分佈 -- 完成
• - 收支統計 -- 完成

 八、項目總結

      vue2.0-element-touzi-admin項目，目前是首次上線版本，確定會存在有不少不足之處。歡迎各位大神，提出寶貴意見。後續會不斷更新和優化。

     若是對您對此項目有興趣，能夠點 "Star" 支持一下 謝謝！ ^_^

     項目討論qq羣： 602515030，歡迎你們加羣，一塊兒來學習和交流。