效果演示地址,
demo演示：
1、About 此項目是 vue2.0 + element-ui + node+mongodb 構建的後臺管理系統，所有的數據都是從服務器實時獲取的真實數據，具有真實的註冊、登錄、數據顯示、新增數據、修改數據、刪除數據等功能。
2、說明 如果對您對此項目有興趣，可以點 "Star" 支持一下 謝謝！ ^_^ 或者您可以 "follow" 一下，我會不斷開源更多的有趣的項目 開發環境 windows 64 、nodejs 6.10.0 如有問題請直接在 Issues 中提，或者您發現問題並有非常好的解決方案，歡迎 PR
3、技術棧 前端技術棧：vue2 + vuex + vue-router + webpack2.0 + ES6/7 + less + element-ui 服務端技術棧：nodejs + express + mongodb
4、前序準備 運行前準備：
4.1、不需要在本地調試及開發： 請訪問本項目的服務器地址。
4.2、需要在本地調試及開發： 由於此項目是基於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文件夾下，執行如下命令即可。
注意：如果是window 10系統，由於系統安全性較高，需要在微軟小娜搜索框中，輸入cmd,右鍵出現的“命令提示符”，以管理員身份運行，執行如下命令即可，如圖：
e:\mongodb\mongod\bin>mongod --dbpath=e:\mongodb\mongod\db --logpath=e:\mongodb\mongod\log\log.txt --install
（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這個集合，查看裡面的數據。數據的展示分三種。樹形（可以看到字段的類型），表格，文本。如圖：
5、開發
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窗口。
6、發佈 npm run bulid (生成打包之後的項目文件,此文件主要用於項目部署)。
7、功能列表
- 登錄/退出 -- 完成
- 首頁 -- 完成
- 用戶列表 -- 完成
- 信息列表 -- 完成
- 信息管理
- 個人信息 -- 完成
- 修改信息 -- 完成
- 資金管理
- 資金流水 -- 完成
- 支付單據 -- 完成
- 投資管理
- 省份投資 -- 完成
- 區域投資 -- 完成
- 金融文章
- 文章發佈 -- 完成
- 文章編輯 -- 完成
- 查看文章 -- 完成
- 資金數據
- 投資分佈 -- 完成
- 項目分佈 -- 完成
- 收支統計 -- 完成 8、項目總結
vue2.0-element-touzi-admin項目，目前是首次上線版本，肯定會存在有很多不足之處。歡迎各位大神，提出寶貴意見。後續會不斷更新和優化。
- 如果對您對此項目有興趣，可以點 "Star" 支持一下 謝謝！ ^_^
相關推薦
