基於vue2.0 +vuex+ element-ui後臺管理系統

wdlhao發表於2017-12-25

xxx金融後臺管理系統

A magical vue element touzi admin.

基於vue2.0 +vuex+ element-ui後臺管理系統
基於vue2.0 +vuex+ element-ui後臺管理系統
基於vue2.0 +vuex+ element-ui後臺管理系統

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,歡迎大家加群,一起來學習和交流。

基於vue2.0 +vuex+ element-ui後臺管理系統

相關文章