1. 程式人生 > >基於Express React AntD和MongoDB構建一個CMS系統

基於Express React AntD和MongoDB構建一個CMS系統

Demeter是一個CMS系統, 提供使用者體系以及App專案相關內容管理. 其中會包括使用者模組, 專案模組和歸檔模組等. 該系統會長期迭代和維護.

技術棧 描述
ES6 專案程式碼以ES2015為標準
Rxjs 構建流式應用
MongoDB 使用MongoDB作為資料持久化容器
Express 基於nodejs的Web後端開發框架
JWT 使用JWT實現前後端分離
React 構建前端框架
react-router 控制前端路由
Redux 管理React的狀態流
Redux-observable 處理非同步redux action
Webpack 打包React程式碼, 並提供dev-server
AntD 使用AntD提供的UI元件

專案部署和啟動

  1. 安裝並建立一個名為demeter的mongo資料庫
  2. clone倉庫在專案跟目錄下執行npm install
  3. 安裝配置pm2 npm install pm2 -g
  4. 專案根目錄下 npm run deploy部署專案
  5. 根目錄下 npm run undeploy解除安裝專案.

使用者模組

提供使用者體系. 使用者分為管理員和普通使用者兩個許可權, 管理員可以對所有使用者資訊進行管理.

功能 需要登陸 需要許可權
登入 × ×
修改密碼 × ×
修改暱稱 ×
登入後修改密碼 ×
建立使用者
重置密碼
刪除使用者
模糊查詢使用者
檢視使用者列表
  • 登入

    提供登入操作, 鍵入賬號密碼登入Demeter. 提供輸入校驗.

  • 修改密碼 (未登入)

    在登入頁點選修改密碼跳轉到該頁面. 使用者如果知道自己的賬號密碼就可以通過該頁面修改密碼. 如果忘記密碼了則需要聯絡管理員重置賬號密碼.

  • 首頁

    登入成功之後進入系統首頁, 首頁預設展示儀表盤頁面. 該頁面展示當前系統註冊使用者數和已經建立的專案數. 頁面左側為模組選單, 頂部顯示使用者名稱, 使用者許可權以及推出登入按鈕. 使用者管理模組和專案管理模組只有管理員可以看到並操作.

  • 個人中心

    個人中心模組提供基本使用者資訊修改和修改密碼功能. 修改基本資訊頁可以修改使用者暱稱.

    修改密碼頁面可以對已有密碼進行修改.

  • 使用者管理(管理員)

    使用者管理模組需要管理員許可權才能訪問. 提供新建使用者, 重置使用者密碼和使用者列表展示. 新建使用者時只能輸入賬號, 使用者暱稱預設為匿名, 使用者許可權預設為普通使用者

    管理員可以根據使用者提供的賬號重置該使用者的密碼. 預設密碼為a123456.

    使用者列表可以分頁展示所有的使用者資訊, 並提供管理使用者的功能.

    分頁列表提供根據賬號模糊搜尋, 修改使用者暱稱, 重置使用者密碼和刪除使用者功能.

    1. 模糊搜尋

    2. 修改使用者暱稱

    3. 重置使用者密碼

    4. 刪除使用者

專案模組

提供專案管理功能. 新建一個專案時會生成Android 和IOS兩個平臺對應的子專案, 同時生成兩個唯一的App ID作為該專案對應平臺的唯一標識, 可以在不同的場景使用, 例如移動端原生接入或者作為指令碼引數等. 之後的業務模組都以專案為單位展開. 該模組提供以下管理功能.

功能 需要許可權
退出專案 ×
檢視專案資訊 ×
修改專案基本資訊 ×
新建專案
刪除專案
新增專案成員
刪除專案成員
  • 建立專案

    管理員可以建立一個新專案, 輸入專案名稱, 專案簡介並上傳專案Logo.

  • 專案列表 (管理員)

    所有建立成功的專案都會在專案列表中展示. 列表分頁展示所有的專案資訊, 並提供根據專案名稱模糊查詢; 平臺ID查詢; 專案資訊顯示; 專案資訊更新; 成員管理以及專案刪除的功能.

    1. 模糊搜尋

    2. AppID查詢

      選中某個專案的特定平臺Logo上時會展示該專案所選平臺的AppID. AppID為專案+平臺的唯一標識.

    3. 更新專案資訊

      提供修改專案Logo和專案簡介的入口.

    4. 成員管理

      將使用者模組和專案模組結合起來, 使用者和專案呈多對多的關係. 在專案管理模組中提供專案成員的新增和刪除.

    5. 刪除專案

      管理員有許可權將已有的專案刪除, 在刪除之前會將所有的使用者先移除該專案.

  • 專案列表 (普通使用者)

    普通使用者可以查詢到自己所加入的專案列表. 在專案資訊展示方面跟管理員所查詢到的專案列表保持一直. 但是在功能上普通使用者只保留了退出專案的選項.

相關文件