xxx金融後臺管理系統
A magical vue element touzi admin.
About
此專案是 vue2.0 + element-ui + node+mongodb 構建的後臺管理系統,所有的資料都是從伺服器實時獲取的真實資料,具有真實的註冊、登入、資料顯示、新增資料、修改資料、刪除資料等功能。
如果對您對此專案有興趣,可以點 "Star" 支援一下 謝謝! ^_^
或者您可以 "follow" 一下,我會不斷開源更多的有趣的專案
開發環境 windows 64 、nodejs 6.11.0
xxx金融後臺管理系統
A magical vue element touzi admin.
效果演示地址
github地址
如有問題請直接在 Issues 中提,或者您發現問題並有非常好的解決方案,歡迎 PR
複製程式碼
技術棧
前端技術棧: vue2 + vuex + vue-router + webpack2.0 + ES6/7 + less + element-ui
服務端技術棧: nodejs + express + mongodb
前序準備
執行前準備:
1、不需要在本地除錯及開發: 請訪問本專案的伺服器地址。
2、需要在本地除錯及開發:
由於此專案是基於nodejs和mongodb的前後端結合專案,你需要進行nodejs和mongodb的相關準備工作。專案執行之前,請確保系統已經安裝以下應用:
(1)、node (6.0 及以上版本)。使用細節,請參考:node的下載及安裝。
(2)、mongodb 。使用細節,請參考:mongodb的下載及使用。【下載,db/log配置,開啟服務,use touzi,匯入資料】
(3)、robomongod。使用細節,請參考:robomongod的下載及使用。(注意:mongodb視覺化檢視工具,本專案不是必須安裝,主要用於方便檢視資料庫資料)。
開發:
git clone github.com/wdlhao/vue2…
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 (生成打包之後的專案檔案,此檔案主要用於專案部署)。
功能
- 登入/退出 -- 完成
- 首頁 -- 完成
- 使用者列表 -- 完成
- 資訊列表 -- 完成
- 資訊管理
- 個人資訊 -- 完成
- 修改資訊 -- 完成
- 資金管理
- 資金流水 -- 完成
- 支付單據 -- 完成
- 投資管理
- 省份投資 -- 完成
- 區域投資 -- 完成
- 金融文章
- 文章釋出 -- 完成
- 文章編輯 -- 完成
- 檢視文章 -- 完成
- 資金資料
- 投資分佈 -- 完成
- 專案分佈 -- 完成
- 收支統計 -- 完成
目錄結構
├── build // 構建相關
├── config // 配置相關
├── exampleImgs // 專案示例圖片
├── outdb // 匯入資料庫的初始化資料
├── server // node服務端
│ ├── api.js // 封裝的介面請求
│ ├── db.js // db資料模型定義
│ ├── index.js // express伺服器
│ ├── mutils.js // 服務端工具類
├── src // 原始碼
│ ├── assets // 圖片等靜態資源
│ ├── components // 全域性公用元件
│ ├── config // 介面請求配置
│ ├── fonts // fontawesome字型庫檔案
│ ├── layout // 全域性 元件
│ ├── page // 專案所有的檢視
│ ├── register // 第三方庫註冊
│ ├── router // 登入路由
│ ├── store // 專案vuex資料儲存器
│ ├── style // 全域性樣式
│ ├── utils // 全域性公用方法
│ ├── vendor // 公用vendor
│ ├── App.vue // 入口頁面
│ ├── main.js // 入口 載入元件 初始化
├── static // 第三方不打包資源
│ └── Tinymce // 富文字
├── .babelrc // babel-loader 配置
├── .gitignore // git 忽略項
├── eslintrc.js // eslint 配置項
├── favicon.ico // favicon圖示
├── index.html // html模板
├── package.json // 包依賴配置
└── README.md // 說明檔案
複製程式碼
檢視更多demo
License
歡迎大家加入vue2.0 +vuex+ element-ui後臺管理系統 專案討論qq群:602515030,歡迎大家加群,一起來學習和交流。