NestJS实战-前端搭建本文介绍 NestJS 实战前端搭建文章内部管理平台，目的是搭建一个前端平台去联调接口和展示

NestJS实战-前端搭建

本文介绍 NestJS 实战前端搭建文章内部管理平台，目的是搭建一个前端平台去联调接口和展示 UI 效果给到大家预览，前端 UI 就直接使用 Antd 一套。

供自己以后查漏补缺，也欢迎同道朋友交流学习。

引言

本来是想用 墨刀 或者 figma 去画个原型图的，但操作起来发现还挺复杂，可能还不如直接撸码快；而且我特别熟悉 Ant Design Pro，撸码速度还是比较快的，借用框架的力量直接生成一套内部管理平台。

这让我想到我们前端开发的低代码和无代码平台的使用局限性，就是用户的接受度不大，需要教学下，复杂的页面上手难度大，如果页面嵌套层级深，有时候拖拽，层级合并也麻烦，相当于要运营业务接手PS软件一样。

想到我之前为了给业务做运营活动做了个简单的低代码营销平台，最后的使用是 UI 出图，然后选择区域或者添加按钮进行事件绑定，然后给到业务宣传和 APP 下载。

技术栈

JS框架：React@18.2
UI框架：Ant Design Pro@6.0、antd@5.13.2
状态库：umi@4

环境安装

初始化脚手架安装

# 我的node版本是v18.12.0 稳定的20、22更好
node -v 

# 使用 npm
npm i @ant-design/pro-cli -g
pro create client-frontend

选择 pro 的模块，我们默认选个 simple 就行了，complete 是完全版的，体量太大，做演示就不搞了。

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

安装依赖：

cd client-frontend && npm install

运行测试：

npm run dev

原文件目录结构

我们先看下原文件的目录结构，对 ant pro 有个大概得印象。

.
├── README.md
├── config // 配置文件
├── jest.config.ts // jest配置文件
├── jsconfig.json
├── mock // 模拟文件
├── package.json
├── pnpm-lock.yaml
├── public // 静态文件夹
├── src
│   ├── access.ts
│   ├── app.tsx
│   ├── components // 公共组件文件夹
│   ├── global.less
│   ├── global.tsx
│   ├── locales
│   ├── manifest.json
│   ├── pages // 页面文件夹
│   ├── requestErrorConfig.ts
│   ├── service-worker.js
│   ├── services // 服务文件夹
│   └── typings.d.ts
├── tsconfig.json
└── types
    └── index.d.ts

删除部分文件

我们保留框架的核心，把一些文件删除然后修改，保留部分核心功能留做演示：

国际化，仅支持中文
登录的多种方式，仅支持用户名密码
非必要的 CSS、antd 引入
相关 mock，直接先写死，后面会做接口联调

前端页面开发

打算做 4 个模块相关的页面：登录模块、账号管理、文章管理、专栏管理。

登录模块

登录目前只支持用户名和密码登录，做一些简单的校验，登录后获取用户信息和 token 存储。

UI图：

账号管理

账号这块主要是增删改查导出这些功能（页面和接口层都做权限校验，账号页面仅管理员以上权限可见）。具体的有：

列表查询：返回 list 数据
查询导出/批量导出：以数据流形式下载 excel
添加账号：添加账号、用户名、权限、密码
修改账号：修改账号、用户名、权限
重置密码：重置密码（仅限管理员可以重置，管理员的账号仅限系统管理员可以重置）
修改密码：修改自己的登录密码（访客也可以进行修改）
删除/批量删除：删除账号（仅限管理员可以删除，管理员的账号仅限系统管理员可以删除）

UI图：

account-list

account-add

account-update

account-rest-password

account-update-password

文章管理

文章模块是我们的核心模块。具体的有：

列表查询：查询文章列表，展示文章ID、名称、描述、创建时间、创建人、更新时间
新建文章：新建文章
编辑文章：编辑文章详情
删除文章：删除某个 id 的文章
发布文章：设置标题名、收录至专栏、编辑摘要

UI图：

article-list

article-detail

article-list

专栏管理

专栏管理模块负责管理文章移到不同的专栏里：

专栏列表查询：专栏列表查询，展示专栏的标题、收录文章数量、专栏描述、创建时间
新建专栏：新建专栏，添加名称、简介
修改专栏：修改专栏，修改名称、简介
删除专栏：根据id删除专栏
专栏详情：跳转到专栏详情，去管理某个专栏
专栏详情-文章列表查询：某个专栏所有的文章列表，展示标题、更新时间、文章描述
专栏详情-取消收录/批量取消收录：取消收录某个文章至该专栏
收录至专栏-非该专栏文章列表查询：查询非某个专栏的文章
收录至专栏-提交：收录至某个专栏。

UI图：

column-list

column-add

column-update

column-function

column-detail

column-detail-add

column-detail-remove

代码实现

因为想主要写 NestJS 的开发，前端这块儿就不一一的写某个模块代码了，可以直接访问仓库地址

已实现内容

目前静态页面的开发都已实现，但请求接口封装、加解密、接口联调、单元测试目前都没有做，后续补上。

目前项目结构

.
├── README.md
├── config
│   ├── config.ts
│   ├── defaultSettings.ts
│   ├── proxy.ts
│   └── routes.ts
├── jest.config.ts
├── jsconfig.json
├── package.json
├── public
├── src
│   ├── access.ts
│   ├── app.tsx
│   ├── components
│   │   ├── HeaderDropdown
│   │   │   └── index.tsx
│   │   ├── RightContent
│   │   │   └── AvatarDropdown.tsx
│   │   └── index.ts
│   ├── global.less
│   ├── manifest.json
│   ├── pages
│   │   ├── 404.tsx
│   │   ├── Account
│   │   │   ├── components
│   │   │   │   ├── UserModal.tsx
│   │   │   │   ├── RestPasswordModal.tsx
│   │   │   │   └── columns.ts
│   │   │   └── index.tsx
│   │   ├── Article
│   │   │   ├── Detail
│   │   │   │   ├── components
│   │   │   │   │   └── PublishModal.tsx
│   │   │   │   └── index.tsx
│   │   │   └── List
│   │   │       ├── components
│   │   │       │   └── columns.ts
│   │   │       └── index.tsx
│   │   ├── Column
│   │   │   ├── Detail
│   │   │   │   ├── components
│   │   │   │   │   └── AddColumnModal.tsx
│   │   │   │   └── index.tsx
│   │   │   └── List
│   │   │       ├── components
│   │   │       │   └── ColumnModal.tsx
│   │   │       └── index.tsx
│   │   ├── Login
│   │   │   └── index.tsx
│   │   └── Welcome.tsx
│   ├── requestErrorConfig.ts
│   ├── service-worker.js
│   ├── typings.d.ts
│   └── utils
│       └── index.ts
├── tests
│   └── setupTests.jsx
├── tsconfig.json
└── types
    └── index.d.ts

实战合集地址

仓库地址

cms-project