【鱼皮-用户中心】笔记

任务：完整了解做项目的思路，接触一些企业及的开发技术

企业做项目流程

• 需求分析 => 设计（概要设计、详细设计）=> 技术选型 => 初始化 / 引用需要的技术 => 写Demo => 写代码（实现业务逻辑） => 测试（单元测试）=> 代码提交 => 部署发布

需求分析

1. 登陆、注册
2. 用户管理（仅管理员可见）
3. 用户校验（仅星球用户）

技术选型

前端：三件套 + React + 组件库Ant Design + Umi + Ant Design Pro （现成的管理系统）
后端： java + spring + springmvc + mybatis + mybatis-plus + springboot + mysql
部署： 服务器 容器

1. 学会前后端企业主流开发技术的应用
2. 了解做项目的完整流程，能够独立开发及上线项目
3. 学到系统设计的方法和经验
4. 学到一些实际的编码技巧，比如开发工具、快捷键、插件的使用
5. 学到代码的优化技巧，比如抽象、封装、提高系统性能、节约资源的方法
6. 学习登录态、代理、多环境、容器、跨域等重要的开发知识
7. 学到一些源码阅读的技巧
8. 提升自主解决问题的能力

计划一

一、前端初始化

1. 下载node.js

• 官网下载：https://nodejs.org/en/
• 最好使用大于等于14的版本，12版本有点老
• 安装后进行换源

npm config get registry  #get命令查看registry
npm config set registry http://registry.npm.taobao.org   #用set换为阿里镜像

2. 安装yarn

1. 尽量不使用npm命令安装，推荐使用msi安装包安装，下载地址：msi安装包
2. 安装 yarn 后需要检查环境配置和安装路径是否相同，否则会报错，找不到该命令
3. 通过 yarn -v 验证安装是否成功
4. 安装好后还需要进⾏最后⼀步：改变镜像 运行下面的命令即可

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass-g

3. 初始化 Ant Design Pro 脚⼿架（关于更多可进入官网了解）

Ant design pro 官网

1. 创建项目目录，在该目录下打开 cmd ，运行以下命令：（由于 Ant Design Pro 更新 旧版命令可能会有错误，要根据官网初始化步骤进行初始化）

• 提供 create umi 来快速的初始化脚手架 ANT DESIGN PRO

npm i @ant-design/pro-cli -g
pro create myapp

2. 选择 umi 的版本 一定要选择umi@3

3. 选择选择简单的（Simple）脚手架

4. 使用 WebStorm 打开项目

5. 执行左下角提示的 npm install/在终端运行 yarn

6. 依赖下载完成之后即可运行

4. 开启Umi UI插件（可帮助我们快速开发完整的界面）

1. 安装 Umi UI，控制台运行下面的命令：
```bash
yarn add @umijs/preset-ui -D #在项目文件夹中运行！
#或
npm install --save-dev @umijs/preset-ui
```
- Umi UI 区块无法预览解决方式：在 hosts 里加 151.101.64.133 raw.githubusercontent.com
- 这个 ip 指向的是美国，其实也不影响功能

5. 项目瘦身

1. 移除国际化- package.json 已经定义好了移除国际化的命令：
`"i18n-remove": "pro i18n-remove --locale=zh-CN --write"`
- 运行该脚本- 删除 src 下的 locales 文件夹2. 删除无用的文件- 如果删除后无法运行，全局搜索查看哪里引用了该文件，删除该引用即可

二、后端初始化

1. 初始化MySQL

1. 老师使用的是MySQL5.7版本，但是其他的版本已经不兼容，于是我是用的是
   mysql8.0 + springboot3x
2. 验证 MySQL是否安装成功 - 使用 IDEA 连接

2. 三种方式创建 SpringBoot 项目的方式：

1. 在 GitHub 拉取现成的模板：SpringBoot-Templates（不建议从零开始写一个项目或在企业中做项目的情况下使用）
2. SpringBoot 官方的模板生成器
3. 直接在 IDEA 开发工具中生成 ⭐

注意：在这里的pom.xml导入中有一个大坑❗

为了和mysql 8.0 java17 版本匹对，所以需要引入 springboot3.0 版本，但是启动会发生报错，原因是mapper接口和其他问题，最后检查过后发现是版本问题。

• 一般来说的导入：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

• 但是应该是：

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-starter</artifactId><version>3.5.6</version>
</dependency>

3. 这里使用在 IDEA 中创建 SpringBoot 项目

1. new => project => Spring Initializr => 填写项目的相关信息（本项目使用 Java8 版本）

2. 勾选 Dependencies

4. 导入Junit

<dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope>
</dependency>

5. 引入 MyBatis-Plus

1. 导入依赖

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.2</version>
</dependency>

2. 在 Spring Boot 启动类中添加 @MapperScan 注解，扫描 Mapper 文件夹

@SpringBootApplication
@MapperScan("com.mark.usercenter.mapper")
public class UserCenterApplication {public static void main(String[] args) {SpringApplication.run(UserCenterApplication.class, args);}
}

3. 创建数据库

DROP TABLE IF EXISTS user;CREATE TABLE user
(id BIGINT(20) NOT NULL COMMENT '主键ID',name VARCHAR(30) NULL DEFAULT NULL COMMENT '姓名',age INT(11) NULL DEFAULT NULL COMMENT '年龄',email VARCHAR(50) NULL DEFAULT NULL COMMENT '邮箱',PRIMARY KEY (id)
);INSERT INTO user (id, name, age, email) VALUES
(1, 'Jone', 18, '[e-mail]'),
(2, 'Jack', 20, '[e-mail]'),
(3, 'Tom', 28, '[e-mail]'),
(4, 'Sandy', 21, '[e-mail]'),
(5, 'Billie', 24, '[e-mail]');

4. 配置数据源

spring:application:name: user-centerdatasource:driver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/universeusername: rootpassword: 123456

5. model 包下创建实体类User.java

@Data
public class User {private Long id;private String name;private Integer age;private String email;
}

6. 编写 Mapper 包下的 UserMapper接口

public interface UserMapper extends BaseMapper<User> {}

7. 测试 MyBatis-Plus 导入成功：

@SpringBootTest
//这里使用的@Test注解与SpirngBoot并无联系，因此此处需要加RunWith注解
@RunWith(SpringRunner.class)
public class SampleTest {@Resourceprivate UserMapper userMapper;@Testpublic void testSelect() {System.out.println(("----- selectAll method test ------"));//调用Mapper方法，查询条件为空，即查询所有List<User> userList = userMapper.selectList(null);//断言——预期结果 对比5与查询结果是否相同Assert.assertEquals(5, userList.size());//输出userList.forEach(System.out::println);}	

notes

一个项目所需要的依赖

• .prettierrc.js 美化代码工具

项目	解释
Lombok	默认
Spring Boot DevTools	改代码自动重启
Spring Configuration Processor	自动获取get set函数
MySQL Driver	驱动
Spring Web	增加外部访问能力
MyBatis Framework	数据访问层理框架

后端技术介绍：

• spring ： 依赖注入框架，帮助管理java对象，集成一些其他内容

• springmvc ： web框架，提供接口访问、restful接口等能力

• mybatis ： java操作数据库的框架，持久层框架

• mybatis-plus ： 对mybatis增强，一个为简化开发的数据库工具

• springboot ： 不用自己管理spring配置，不用整合框架，快速启动

• junit ： 单元测试库

• 对于要引入java的包，可以去maven中心仓库查找 （http://mvnrepository.com/）点我跳转

用户表字段

id 主键 bigint
username 昵称 varchar
userAccount 登录账号 varchar
avatarUrl 头像 varchar
gender 性别 tinyint
userPassword 密码 varchar
phone 电话 varchar
email 邮箱 varchar
userStatus 用户状态 int 0表示正常
userRole 用户角色 int 0 -> 普通用户 1 -> 管理员

---

createTime 创建时间（数据插入时间） datetime
updateTime 更新时间（数据更新时间） datetime
isDelete 是否删除（逻辑删除） tinyint

创建表
使用 IDEA 傻瓜式生成数据表

updateTime 和 createTime 需要手动指定，生成并手动修改的 DDL 如下

-- auto-generated definition
create table user
(id           bigint auto_increment comment '主键id'primary key,username     varchar(256)                       null comment '用户昵称',userAccount  varchar(256)                       null comment '登录账号',avatarUrl    varchar(1024)                      null comment '用户头像',gender       tinyint                            null comment '性别',userPassword varchar(512)                       not null comment '密码',phone        varchar(128)                       null comment '电话',email        varchar(512)                       null comment '邮箱',userStatus   int      default 0                 not null comment '用户状态 0 - 正常',createTime   datetime default CURRENT_TIMESTAMP null comment '创建时间',updateTime   datetime default CURRENT_TIMESTAMP null on update CURRENT_TIMESTAMP comment '更新时间',isDelete     tinyint  default 0                 not null comment '是否删除'
)comment '用户';

计划二

后端-注册功能

1.规整项目目录

• 项目的请求层，业务层
  
• 静态文件和页面模板文件
  
• 整体后端框架
  

2. 实现基本数据库操作

1）模型 user 对象 => 和数据库的字段关联
如果mysql实体类过多，那么就需要自动生成

• 使用 MyBatisX 插件自动生成 domain 实体对象、mapper （操作数据库对象） 、mapper.xml （定义了mapper对象和数据库关联，可以在里面自己写 SQL ）、service（包含常用的增删改查）、serviceImpl（ service 实现类）
• 右键表 => MyBatisX-Generator => Next => 勾选 MyBatis-Plus3 => 勾选 Comment（注释）、Actual Column（每一个列的实际列名）、 Model（生成 domain ） 、 Lombok（使用 Lombok 注解） => 勾选 mybatis-plus3 => Finish

• 这里就是自动生成的 generator 文件
  

• 一键生成对象所有set方法
  

• 生成所有的set方法并且赋予默认值
  

3. 完成注册业务层代码

一、注册逻辑

1. 用户子啊前端输入账户和密码，遗迹校验码（todo）
2. 校验用户的账号、密码、校验密码是否符合要求
   • 账号不小于4位
   • 密码不小于8位
   • 其他的校验 账户不能重复
   • 账户不包含特殊字符
   • 密码和校验密码相同
3. 对密码进行加密 （密码千万不要直接存储到数据库中）
4. 向数据库插入用户数据

由于一个一个校验是非常麻烦的，所以需要引入一个java库

注册功能 | 后端 - 接口逻辑开发 5.44

• QueryWrapper

QueryWrapper<User> queryWrapper = new QueryWrapper<>();queryWrapper.eq("userAccount",userAccount);long count = this.count(queryWrapper);if(count > 0){return -1;}

QueryWrapper<User> queryWrapper = new QueryWrapper<>();

⭕创建了一个查询包装器对象，用于构建查询条件
表示这个查询是针对User实体类的

queryWrapper.eq("userAccount",userAccount);

⭕设置查询条件：查询userAccount字段等于给定userAccount值的记录
eq()方法表示"equals"，即等于条件

• 检验账户名特殊字符的正则表达式

	public static String romveSpecialChar(String str) {String regEx = "\\pP|\\pS|\\s+";str = Pattern.compile(regEx).matcher(str).replaceAll("").trim();return str;}

notes

1. Mybatis_plus 下划线自动转换成驼峰

多环境开发

同一套项目代码在不同的阶段需要根据实际情况调节配置并部署到不同的机器上

为什么需要？

每个环节互不影响
为了区分不同的阶段：开发、测试、生产
对项目进行优化
本地日志级别
精简依赖（节省项目体积）
项目的环境/参数可以调整，比如JVM参数
针对不同环境做不同的事情。

多环境分类：

本地开发（自己的电脑）：localhost（127.0.0.1）
开发环境（远程开发）：大家连同一台机器，为了大家开发方便
测试环境（测试）：开发/测试/产品人员使用，单元测试/性能测试/功能测试/系统集成测试，独立的数据库、独立的服务器
沙箱环境（实验环境）：完全隔离的环境，为了做实验，测试某个功能
预发布环境（类似内测/体验服）：基本和正式环境一致，使用正式数据库，更严谨、查出更多问题
正式环境（线上、公开对外访问的项目）：尽量不要改动，保证上线前的代码是“完美”运行的

---

待更新