用户管理系统---第一天（技术选型+初始化项目）

技术选型（第一天）

前端：三件套 + React + 组件库 Ant Design + Umi + Ant Design Pro（现成的管理系统）

后端：（java）

1. spring（依赖注⼊框架，帮助你管理 Java 对象，集成⼀些其他的内容）
2. springmvc（web 框架，提供接⼝访问、restful接⼝等能⼒）
3. mybatis（Java 操作数据库的框架，持久层框架，对 jdbc 的封装）、
4. mybatis-plus（对 mybatis 的增强，不⽤写 sql 也能实现增删改查）
5. springboot（快速启动 / 快速集成项⽬。不⽤⾃⼰管理 spring 配置，不⽤⾃⼰整合各种框架）
6. junit 单元测试库
7. mysql

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

初始化项⽬

⼀、前端初始化：

1.下载nodejs

2. Ant Design Pro (最好⽤⼤于等于14的版本，12版本都有点⽼了)

瘦身：（去除国际化）看官网去瘦身

可以点击预览查看它的效果：

3 新建项目

1. ​ 在项目所在文件夹中的路径上方输入cmd，弹出cmd窗口，按照官网文档进行项目初始化
2. ​ 按照 umi 脚⼿架的引导，第⼀步先选择 ant-design-pro
3. ​ 选择 antd 的语⾔版本，TypeScript 或 JavaScript ,选择typescript回⻋确定
4. ​ 选择 antd 的模板（simple 是基础模板，只提供了框架运⾏的基本内容，complete 包含 antd 的集成⽅案，不太适合当基础模板来进⾏⼆次开发,这⾥选择simple,回⻋确定(不是所有⻚⾯都需要，就选择simple)）
5. ​ 打开开发⼯具下的终端 , 输⼊yarn ,它就能⾃动帮我们安装依赖了(过程有点⻓,慢慢等待)

4 启动项目

在package.json中找到"start"在左侧点击绿⾊的运⾏按钮即可，

vscode是选中cross-env UMI_ENV=dev umi dev或者start，点击运⾏脚本

http://localhost:8000，预览⼀下：

用户名：admin

密码：ant.design

两种启动命令的区别，start:dev⽐start多了⼀个MOCK=none，这是把模拟的数据给关闭了，因为现在我们还没

有写后台，所以使⽤start:dev去启动项⽬登录，会登录失败

5 安装Umi UI（这个⼯具可以帮我们⾃动⽣成代码）

​ 1.停⽌项⽬运⾏,在终端输⼊命令

  yarn add @umijs/preset-ui -D

​ 2.再次启动项⽬，会发现右下⻆多⼀个类似于⽶饭的图标

页面都写在src->pages文件夹下

可以利用它进行页面生成

6 项目瘦身

你会发现这个项⽬⽂件夹内有很多⽂件和代码，能不能减少⼀些不必要的内容呢？

我们减少⼀些国际化的内容，因为这个项⽬主要在国内访问，国内都没多少⽤户浏览，更别说国外了🤣

国际化的代码在src->locales⽂件夹下

在package.json找到 i18n-remove，并执行

7 介绍项目结构

项目目录结构：

删除刚刚分析⻚的⽂件夹，发现⻚⾯报错了，因为我们只删除了⽂件，但是没有删除路由，因为有地⽅⽤到了这个⽂件

路由配置(把 { icon: 'smile', path: '/yupi', component: './DashboardAnalysis' },删掉)：

网页可以正常显示了

还要在config⽂件夹下的config.ts删掉⼀些代码,因为我们删掉了oneapi.json，这段代码引⽤了它

把上⾯这个( import {join} from ‘path’; )也删掉

再次重启，运⾏成功

二、后端初始化:

​ 1. IDEA开发工具生成：

2.idea连接本地数据库/数据库管理工具（Navicat）连接本地数据库

​ idea连接本地数据库后才可以使用mybatisx插件自动生成代码

3. 项目配置文件application.yml进行配置

4. 创造启动类（添加 @MapperScan 注解，扫描 Mapper ⽂件夹）

​

5.junit测试

<!-- https://mvnrepository.com/artifact/junit/junit -->
<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.13.1</version>
    <scope>test</scope>
</dependency>

在userservice上alt+enter键自动生成测试类

安装这个插件生成假数据

alt+enter

生成假数据图：

然后根据数据库默认值去除一些不需要的值

ctrl+p快捷键可以查询方法需要那些参数

测试类的编写：

/**
 * 用户服务测试
 */
@SpringBootTest
class UserServiceTest {
    @Resource
    private UserService userService;
    @Test
    void testAddUser(){
        User user=new User();
        user.setUsername("dogjiang");
        user.setAvatarUrl("4545");
        user.setUserAccount("555");
        user.setGender(0);
        user.setUserPassword("1131");
        user.setPhone("2524");
        user.setEmail("424242");
        user.setUserStatus(0);
        user.setIsDelete(0);
        boolean result=userService.save(user);
        System.out.println(user.getId());
        Assertions.assertEquals(true,result);
    }
}

@Autowired@Resource
区别：@Resource它是根据name来进行注入的，@Autowired是根据类型来注入的。

Assertions.assertEquals(true,result);这是什么？断言是干啥的？

答：用来测试的，看程序的实际执行结果是不是期望的结果

运行结果：

原因：

mybatisplus自动加了下划线转换，而我们设计的数据库中没有用下划线的命名规范所以报错

解决方法：1数据库设计属性名为下划线的（以后还是设计成符合规范的吧）

​ 2或者在applocation.yml中添加如下配置：

mybatis-plus:
  configuration:
    map-underscore-to-camel-case: false

6. mybatisplus的引入（https://baomidou.com/）

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

7.commons-lang3的引用（用于简化判空操作什么的）https://blog.csdn.net/qq_43842093/article/details/121914554

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.12.0</version>
</dependency>

StringUtils.isAnyBlank(userAccount,userPassword,checkPassword)

这里只举例StringUtils（具体看上边链接）：

​ StringUtils

所有java包的寻找：http://mvnrepository.com/

项目结构：

码