基于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组件

项目地址: https://github.com/HiJesse/Demeter

项目部署和启动

  1. 安装并建立一个名为demeter的mongo数据库
  2. clone仓库在项目跟目录下执行npm install
  3. 安装配置pm2 npm install pm2 -g
  4. 项目根目录下 npm run deploy部署项目
  5. 浏览器打开http://localhost:3000/站点进入demeter登录
  6. 根目录下 npm run undeploy卸载项目.

用户模块

提供用户体系. 用户分为管理员和普通用户两个权限,管理员可以对所有用户信息进行管理.

功能 需要登陆 需要权限
登录 × ×
修改密码 × ×
修改昵称 ×
登录修改密码 ×
创建用户
重置密码
删除用户
模糊查找用户
查看用户列表

项目模块

提供项目管理功能. 新建一个项目时会生成Android 和IOS两个平台对应的子项目,同时生成两个唯一的App ID作为该项目对应平台的唯一标识,可以在不同的场景使用,例如移动端原生接入或者作为脚本参数等. 之后的业务模块都以项目为单位展开. 该模块提供以下管理功能.

功能 需要权限
退出项目 ×
查看项目信息 ×
修改项目基本信息 ×
新建项目
删除项目
添加项目成员
删除项目成员
  • 创建项目

    管理员可以创建一个新项目,输入项目名称,项目简介并上传项目logo.

  • 项目列表 (管理员)

    所有建立成功的项目都会在项目列表中展示. 列表分页展示所有的项目信息,并提供根据项目名称模糊查询; 平台ID查询; 项目信息显示; 项目信息更新; 成员管理以及项目删除功能.

    1. 模糊搜索

    2. AppID查询

      选中某个项目的特定平台logo上时会展示该项目所选平台的AppID. AppID为项目+平台的唯一标识.

    3. 更新项目信息

      提供修改项目logo和项目简介的入口.

    4. 成员管理

      用户模块和项目模块结合起来,用户和项目呈多对多的关系. 在项目管理模块中提供项目成员的添加删除.

    5. 删除项目

      管理员有权限将已有的项目删除,在删除之前会将所有的用户先移除该项目.

  • 项目列表 (普通用户)

    普通用户可以查询到自己所加入的项目列表. 在项目信息展示方面跟管理员查询到的项目列表保持一直. 但是在功能上普通用户只保留了退出项目的选项.

相关文档


转载请注明出处:http://www.jb51.cc/article/p-uafyttjx-bqs.html

猜你在找的React相关文章