/React-Nest-Admin

admin project powered by :rocket: React + Nestjs + Antd 全栈中后台，后端项目：https://github.com/cnscorpions/React-Nest-Admin-be

Primary LanguageJavaScriptMIT LicenseMIT

React Nest Admin

react nest

简体中文 | English

简介

React Nest Admin 是怎么来的？
学习 React 想要找一个练手的项目，结果市面上开源的都是各种 TODO App，甚至于Real World 系列也很难让人满意。付费课程，也很难详尽地讲清楚方方面面。同时，Admin, dashboard 之类的中后台的需求日愈旺盛，值得前端开发者多多关注。于是，就有了这样一个项目，本人预期如下：

  1. 这是一个产品，能贯穿前端（开发，版本管理，单元测试，打包部署），后端（接口开发，单元测试，打包部署等），运维（服务器环境搭建，CI & CD 等）
  2. 这是一个 Admin 前后端解决方案，涉及 JWT 鉴权，基于角色权限管理;
  3. 这是一套 Web 项目的完整学习资料，涉及到相关知识会提供 Roadmap 和 tips

系列教程：

  1. 手把手撸一个前后端分离 Admin 系统 - 由用户登录而来的 JWT 鉴权以及权限管理

环境

  • node 13 + （建议使用 nvm 进行 node 版本管理）
  • npm 6 +
  • git
  • pm2 （可选，初级部署需要，使用 npm 安装即可）

准备

本项目前端基于 CRA 搭建，技术栈涉及 es6+, react, react-router, react-redux（以及 redux-devTools, redux-thunk, react-persist 等中间件），axios 和 ant design of react，sass, CSS Module 等等，后端基于 nest-cli 搭建，技术栈涉及 Typescript, nest.js 及其中间件，mongodb, mongoose, rxjs 等等，运维涉及 MEAN 环境搭建（涉及到 Nginx 的偏多），PM2 部署 node 应用，Docker 部署实践，Travis CI 集成等等。 提前了解其中知识会对使用本项目大有帮助。

效果图

  • 登录页

  • 用户管理

  • 文件上传

  • 富文本编辑器

  • 404 页面

功能及技术实现

  • 登录 & 注册
  • 登录
  • 注册
  • 重置密码
  • 用户鉴权
  • Bcrypt + Salt + JWT 鉴权
  • Role-Based 权限管理
  • 状态管理
  • React-Redux
  • Redux-DevTools 开发调试
  • Redux-Thunk dispatch 异步 Action
  • Redux-persist（状态可持久化）
  • 网络请求
  • axios 拦截请求，注入 token
  • 后台 filter 自定义全局 HTTP 异常捕获
  • 后台请求响应拦截，统一放回格式
  • 后台 auth guard
  • 后台 role guard
  • 文件上传
  • 上传
  • 列表查询
  • 删除
  • 计划中
  • 帐号密码 MD5+salt 加密
  • 前端使用绝对路径引入
  • token 失效弹窗提示
  • refresh token
  • 写 unit test
  • 配置 travis 初步实现 CI
  • Docker 容器化
  • i18n

开发

# 前端开发
npm run start or yarn start

# 后端开发
npm run start:dev or yarn start:dev

发布

# 前端代码格式化
npm run formate

# 前端打包
npm run build & yarn build

# 前端提交commit
yarn git "commit message"

# 前端部署（注意要修改pm2的配置文件）
npm run update