第一期 - 上

用户中心笔记第一期 - 上

1、企业做项目流程

1. 需求分析
2. 设计（概要设计、详细设计）
3. 技术选型
4. 初始化 / 引入需要的技术
5. 写 Demo
6. 写代码（实现业务逻辑）
7. 测试（单元测试、系统测试）
8. 代码提交 / 代码评审
9. 部署
10. 发布上线

2、需求分析

1. 登录 / 注册
2. 用户管理（仅管理员可见）对用户的查询或者修改
3. 用户校验（注册校验，权限校验）

3、技术选型

前端：

• HTML+CSS+JavaScript 三件套
• React 开发框架
• 组件库 Ant Design
• Umi 开发框架
• Umi Request 开发框架Ant Design Pro（现成的管理系统）

后端：

• java
• spring（依赖注入框架，帮助你管理 Java 对象，集成一些其他的内容）
• springmvc（web 框架，提供接口访问、restful接口等能力）
• mybatis（Java 操作数据库的框架，持久层框架，对 jdbc 的封装）
• mybatis-plus（对 mybatis 的增强，不用写 sql 也能实现增删改查）
• springboot（快速启动 / 快速集成项目。不用自己管理 spring 配置，不用自己整合各种框架）
• junit 单元测试库
• mysql 数据库

部署：服务器 / 容器（平台）

4、初始化项目

4.1 前端初始化

1. 按照 Nodejs 版本 16.14 以上

Ant Design Pro 前端框架

先新建一个文件夹 user-center，进入到目录，在地址栏输入 cmd，打开终端，输入以下命令初始化前端：

npm i @ant-design/pro-cli -g
pro create user-center-ui

步骤

执行后进入前端框架初始化过程，这里选择使用 umi@3 和 simple 一个简单模式的脚手架，然后通过 webstorm 进入 user-center-ui 文件夹，打开终端，输入 yarn，自动安装相关依赖。安装依赖完成后，找到 package.json。scripts 下有很多脚本，找到 start 并运行。即可启动 ant design pro.

2. 关于 Umi UI 插件的构建，因为我们之前已经选择的是 umi@3，进入 myapp 文件夹的 terminal 是一个 Umi UI 可视化辅助工具，但是区块一直无法显示，挂了梯子以及修改了 hosts 之后还是不行，所以实在不行可以跳过，不影响后续开发。

安装 Umi UI

yarn add @umijs/preset-ui -D

使用该工具可以帮助我们快速生成页面

3. 前端瘦身

   • 删除国际化
     • 执行 package.json 的 scripts 下的 i18n-remove 脚本，移除国际化
     • 删除前端路径下 src/locales 文件夹
   • 删除项目路径下 src/e2e 文件夹
     • e2e 文件夹里面定义的是一系列测试流程
   • 若前面有使用 Umi UI 添加页面，可把该页面删除
     • 注意：需要在路劲为 config/routes.ts 的文件夹下，删除对应的路由规则
   • 删除项目路径下 src/services/swagger 文件夹
     • swagger 文件夹里面定义了一系列后台接口程序
   • 删除项目路径下 config/oneapi.json 文件
     • oneapi.json 定义了整个项目用到的一些接口
   • 删除项目根路径下 tests 文件夹
     • tests 文件夹主要是和测试相关的
   • 删除项目根路径下 jest.config.js 文件
     • jest.config.js 测试相关的配置文件
   • 删除项目根路径下 playwright.config.ts 文件
     • playwright.config.ts -> 自动化测试工具，帮你在火狐或谷歌自动测试，不用真实地打开浏览器就能测试

4.2 后端初始化：3种初始化 Java 项目的方式

1. GitHub 搜现成的代码

2. SpringBoot 官方的模板生成器（https://start.spring.io/）

3. 直接在 IDEA 开发工具中生成 （一般都是自己创建工程）
   如果要引入 java 的包，可以去 maven 中心仓库寻找（http://mvnrepository.com/）新建好工程，然后整合 MyBatis-Plus 跟着官网来就可以了