快速基於nodeJS+vue+vuex+mysql+redis建立一個後臺管控系統

saucxs發表於2018-11-05
NodeJSVueMySqlRedis

structure-admin

structure-admin是一個後臺管控系統的架子，技術棧：nodeJS+vue+vuex+mysql+redis，前端使用vue的element-ui的元件庫，後端使用nodeJS的服務，資料庫mysql，快取使用的是redis，後端完全使用nodeJS，資料庫使用mysql，基於nodejs的thinkjs框架搭建的，全棧開發。

支援：

  • 1、vuex來實現狀態管理
  • 2、靜態頁面，引入後端服務（nodeJs）
  • 3、元件是用的是element-ui
  • 4、頁面佈局是上左右，左右佈局使用的彈性和佈局flex，左邊定寬，右邊計算寬度
  • 5、左右的滾動條是相互獨立的，去掉body上的滾動條

如果喜歡nodeJS寫的後端，支援大前端，支援全棧開發，請請star並fork專案。

如有使用問題請留言。

一、技術棧

二、原始碼地址

structure-admin

三、線上地址

線上地址： structure_admin.mwcxs.top 賬號：test，密碼：123456

四、系統截圖

4.1 登入頁

image

4.2 主頁

image

五、本地執行程式

1、首先你的環境是nodejs，不會安裝配置參考：nodejs環境配置

2、clone下來專案

git clone https://github.com/saucxs/structure-admin.git
複製程式碼

3、分別針對前端vue的structure-admin-web的資料夾和node後端structure-admin-node，安裝相應依賴

npm install
複製程式碼

4、安裝redis（可以考慮安裝RedisDesktopManager）

參考：安裝window下的redis，redis視覺化管理工具（Redis Desktop Manager）安裝，基礎使用，例項化專案

5、安裝mysql，這個就不贅述

6、修改nodejs的後端的配置檔案adapter.js，config.js這兩個檔案中

adapter.js

exports.cache = {
    type: 'redis',
    common: {
        timeout: 24 * 60 * 60 * 1000 // millisecond
    },
    redis: {
        handle: redisCache,
        host: '127.0.0.1',
        port: 6379,
        password: 'a123456'  //redis安裝時候設定的祕密
    }
};
//
//
exports.model = {
  type: 'mysql',
  common: {
    logConnect: true,
    logSql: true,
    logger: msg => think.logger.info(msg)
  },
  mysql: {
    handle: mysql,
    database: 'structure_admin',
    prefix: 'structure_',
    encoding: 'utf8',
    host: '127.0.0.1',   //本地資料庫
    port: '3306',     //資料庫埠
    user: 'root',    //資料庫的使用者名稱
    password: '123456',    //資料庫該使用者名稱的密碼
    dateStrings: true
  }
};
複製程式碼

7、資料庫檔案，地址在structure-admin-node/src/common/mysql/structure_admin.sql

8、分別對前後端分離的專案啟動

(1)前端vue的structure-admin-web的啟動

npm run dev
複製程式碼

(2)和node後端structure-admin-node的啟動

npm start
複製程式碼

說明

週報系統是基於structure-admin後臺管理框架下搭建

週報系統演示地址為：系統網站平臺

週報系統原始碼地址：週報系統原始碼地址

歡迎fork和start

相關文章