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


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文件夾下,執行如下命令即可。
    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這個集合,查看里面的數據。數據的展示分三種。樹形(可以看到字段的類型),表格,文本。如圖:
         
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" 支持一下 謝謝! ^_^

     項目討論qq群: 602515030,歡迎大家加群,一起來學習和交流。
    
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM