基於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元件 |
專案部署和啟動
- 安裝並建立一個名為demeter的mongo資料庫
- clone倉庫在專案跟目錄下執行
npm install
- 安裝配置pm2
npm install pm2 -g
- 專案根目錄下
npm run deploy
部署專案 - 根目錄下
npm run undeploy
解除安裝專案.
使用者模組
提供使用者體系. 使用者分為管理員和普通使用者兩個許可權, 管理員可以對所有使用者資訊進行管理.
功能 | 需要登陸 | 需要許可權 |
---|---|---|
登入 | × | × |
修改密碼 | × | × |
修改暱稱 | √ | × |
登入後修改密碼 | √ | × |
建立使用者 | √ | √ |
重置密碼 | √ | √ |
刪除使用者 | √ | √ |
模糊查詢使用者 | √ | √ |
檢視使用者列表 | √ | √ |
登入
提供登入操作, 鍵入賬號密碼登入Demeter. 提供輸入校驗.
修改密碼 (未登入)
在登入頁點選修改密碼跳轉到該頁面. 使用者如果知道自己的賬號密碼就可以通過該頁面修改密碼. 如果忘記密碼了則需要聯絡管理員重置賬號密碼.
首頁
登入成功之後進入系統首頁, 首頁預設展示儀表盤頁面. 該頁面展示當前系統註冊使用者數和已經建立的專案數. 頁面左側為模組選單, 頂部顯示使用者名稱, 使用者許可權以及推出登入按鈕. 使用者管理模組和專案管理模組只有管理員可以看到並操作.
個人中心
個人中心模組提供基本使用者資訊修改和修改密碼功能. 修改基本資訊頁可以修改使用者暱稱.
修改密碼頁面可以對已有密碼進行修改.
使用者管理(管理員)
使用者管理模組需要管理員許可權才能訪問. 提供新建使用者, 重置使用者密碼和使用者列表展示. 新建使用者時只能輸入賬號, 使用者暱稱預設為匿名, 使用者許可權預設為普通使用者
管理員可以根據使用者提供的賬號重置該使用者的密碼. 預設密碼為
a123456
.使用者列表可以分頁展示所有的使用者資訊, 並提供管理使用者的功能.
分頁列表提供根據賬號模糊搜尋, 修改使用者暱稱, 重置使用者密碼和刪除使用者功能.
模糊搜尋
修改使用者暱稱
重置使用者密碼
刪除使用者
專案模組
提供專案管理功能. 新建一個專案時會生成Android 和IOS兩個平臺對應的子專案, 同時生成兩個唯一的App ID作為該專案對應平臺的唯一標識, 可以在不同的場景使用, 例如移動端原生接入或者作為指令碼引數等. 之後的業務模組都以專案為單位展開. 該模組提供以下管理功能.
功能 | 需要許可權 |
---|---|
退出專案 | × |
檢視專案資訊 | × |
修改專案基本資訊 | × |
新建專案 | √ |
刪除專案 | √ |
新增專案成員 | √ |
刪除專案成員 | √ |
建立專案
管理員可以建立一個新專案, 輸入專案名稱, 專案簡介並上傳專案Logo.
專案列表 (管理員)
所有建立成功的專案都會在專案列表中展示. 列表分頁展示所有的專案資訊, 並提供根據專案名稱模糊查詢; 平臺ID查詢; 專案資訊顯示; 專案資訊更新; 成員管理以及專案刪除的功能.
模糊搜尋
AppID查詢
選中某個專案的特定平臺Logo上時會展示該專案所選平臺的AppID. AppID為專案+平臺的唯一標識.
更新專案資訊
提供修改專案Logo和專案簡介的入口.
成員管理
將使用者模組和專案模組結合起來, 使用者和專案呈多對多的關係. 在專案管理模組中提供專案成員的新增和刪除.
刪除專案
管理員有許可權將已有的專案刪除, 在刪除之前會將所有的使用者先移除該專案.
專案列表 (普通使用者)
普通使用者可以查詢到自己所加入的專案列表. 在專案資訊展示方面跟管理員所查詢到的專案列表保持一直. 但是在功能上普通使用者只保留了退出專案的選項.