效果演示地址,

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-admincd vue2-element-touzi-admin npm installnpm 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" 支持一下 謝謝！ ^_^