企业员工信息中心管理系统（前后端从0到1开发—01）

一、项目需求分析：

        为企业提供一个专门的信息中心管理系统，后续并且会与其他企业其他项目结合，为企业其他管理项目提供员工的信息管理功能的技术支持。

二、概要设计：

1.登录/注册/注销功能。
2.用户管理(仅管理员可见) 对员工的查询或者修改。
3.用户校验(仅企业员工可以登录)。

三、技术选型：

前端:

HTML+CSS+JS + Umi 组件库 + Ant Design Pro (基于 React 的管理系统框架)。

后端:

spring (依赖注入框架，帮助你管理Java 对象，集成一些其他的内容)。

springmvc (web 框架，提供接口访问、restful接口等能力)。
mybatis (Java 操作数据库的框架，持久层框架，对jdbc的封装)。

mybatis-plus (自动生成代码，且不用写 sql也能实现增删改查)。

springboot (快速启动/集成项目。不用自己管理 spring 配置，不用自己整合各种框架)。
junit 单元测试库。mysql 关系型数据库。

部署、上线:

云服务器 / linux 容器(平台)

 四、详细设计——01：

1、软件和环境的安装；

①、前端：node.js安装 （npm 安装）；yarm 安装 ；webstrom 或者 VScode ；

②、后端：jdk 8下载；maven 3.6.5 下载 ；mysql 5.6.5安装 ；IDEA 2021；

扫描二维码关注公众号，回复： 16009342 查看本文章

2、前后端项目的初始化（拉取Ant Design Pro前端框架代码，创建springboot 2.5.4 版本项目）；

3、数据库建表，以及后端基础代码自动生成（基于TableGo或者mybatisX插件）；

4、使用断言测试数据方法；

前端配置相应的环境：

 安装、卸载nvm，配置环境变量，更换npm淘宝镜像,Releases · coreybutler/nvm-windows · GitHub

 就安装在C盘，文件没有多大。

 再安装node.js，再安装 yarn。

 

前端项目初始化

拉取项目  开始使用 - Ant Design Pro

跟着文档说明一步步操作即可。

 由于没有安装 tyarn 那就使用 npm install 

       当然使用yarn也可以安装，如果出现： “无法加载文件 C:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。” 的情况。可以参考下面的方法解决。

 安装好环境依赖后，用vscode 或者 webstrom 打开。

 出现这个报错，只要把这个文件注释了就行。

 点击start 运行。

 前端界面加载完成，前端模板生成完毕 ！

当然拉取下来的代码并不是完全我们都需要的，可以根据官网说明对代码进行一定程度的精简。

后端项目初始化

安装mysq

使用IDEA创建springboot 2.5.4 项目

选择相应的依赖  在 Maven Repository: Search/Browse/Explore (mvnrepository.com)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ss</groupId>
    <artifactId>center_demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>center_demo</name>
    <description>center_demo</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.12.0</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <!-- 工具类 -->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.20</version>
        </dependency>
        <!-- knife4j -->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-spring-boot-starter</artifactId>
            <version>2.0.9</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/junit/junit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.2</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

拟定建表参数：

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `username` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '用户昵称',
  `userAccount` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '账号',
  `avatarUrl` varchar(1024) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500' COMMENT '用户头像',
  `gender` tinyint(4) NULL DEFAULT NULL COMMENT '性别',
  `userPassword` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '密码',
  `phone` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '电话',
  `email` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '邮箱',
  `userStatus` int(11) NOT NULL DEFAULT 0 COMMENT '状态 0 - 正常',
  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '更新时间',
  `isDelete` tinyint(4) NOT NULL DEFAULT 0 COMMENT '是否删除（逻辑删除）',
  `userRole` int(11) NOT NULL DEFAULT 0 COMMENT '用户权限 0- 普通用户 1 - 管理员',
  `planetCode` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '用户编号',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Compact;

建好表后，可以选择使用mybatisX插件自动生成代码，也可以使用TableGo第三方软件一件生成。

以下是自动生成的实体类：（当然这里还有的一个可以便捷的方法，就是在看文档的时候，如果看到有别人创建的代码，想直接copy，不用单独创建一个java类，直接在想生成类的包名下 ctrl+ v 就可以生成这个复制的类）

package com.ss.center.model;
import cn.hutool.core.date.DatePattern;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonProperty;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import java.io.Serializable;
import java.util.Date;

/**
 * user 实体类
 */
@Data
@ApiModel(description = "user")
@TableName("user")
public class User implements Serializable {

    /** 版本号 */
    private static final long serialVersionUID = -1061945554880150667L;

    @ApiModelProperty(value = "id", position = 1)
    @JsonProperty(index = 1)
    @TableId
    @JsonFormat(shape = JsonFormat.Shape.STRING)
    private Long id;

    @ApiModelProperty(value = "用户昵称", position = 2)
    @JsonProperty(index = 2)
    private String username;

    @ApiModelProperty(value = "账号", position = 3)
    @JsonProperty(index = 3)
    private String userAccount;

    @ApiModelProperty(value = "用户头像", position = 4)
    @JsonProperty(index = 4)
    private String avatarUrl;

    @ApiModelProperty(value = "性别", position = 5)
    @JsonProperty(index = 5)
    private Integer gender;

    @ApiModelProperty(value = "密码", position = 6)
    @JsonProperty(index = 6)
    @NotBlank(message = "密码不能为空！")
    private String userPassword;

    @ApiModelProperty(value = "电话", position = 7)
    @JsonProperty(index = 7)
    private String phone;

    @ApiModelProperty(value = "邮箱", position = 8)
    @JsonProperty(index = 8)
    private String email;

    @ApiModelProperty(value = "状态 0 - 正常", position = 9)
    @JsonProperty(index = 9)
    @NotNull(message = "状态 0 - 正常不能为空！")
    private Integer userStatus;

    @ApiModelProperty(value = "创建时间", position = 10)
    @JsonProperty(index = 10)
    @JsonFormat(timezone = "GMT+8", pattern = DatePattern.NORM_DATETIME_PATTERN)
    private Date createTime;

    @ApiModelProperty(value = "更新时间", position = 11)
    @JsonProperty(index = 11)
    @JsonFormat(timezone = "GMT+8", pattern = DatePattern.NORM_DATETIME_PATTERN)
    private Date updateTime;

    @ApiModelProperty(value = "是否删除（逻辑删除）", position = 12)
    @JsonProperty(index = 12)
    @NotNull(message = "是否删除不能为空！")
    private Integer isDelete;

    @ApiModelProperty(value = "用户权限 0- 普通用户 1 - 管理员", position = 13)
    @JsonProperty(index = 13)
    @NotNull(message = "用户权限 0- 普通用户 1 - 管理员不能为空！")
    private Integer userRole;

    @ApiModelProperty(value = "用户编号", position = 14)
    @JsonProperty(index = 14)
    private String planetCode;
}

测试连接，建表（当然，使用navicat 可视化工具建表也可以）

 

 然后根据文档手册进行配置：快速开始 | MyBatis-Plus (baomidou.com)

spring:
  application:
    name: user_center
# mybatis-plus DataSource Config
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/center
    username: 数据库账号
    password: 数据库密码
server:
  port: 9000

当然不要忘了

进行单元测试后发现（关于类的get和set方法，可以利用插件  generateAllSetMethod  一键生成set/get方法以及bean对象转换）

package com.ss.center.mapper;

import java.util.Date;
import com.ss.center.model.User;
import org.junit.Assert;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import javax.annotation.Resource;
import java.util.List;

import static org.junit.jupiter.api.Assertions.*;

@SpringBootTest
class UserMapperTest {

    //Resource会默认按照Java的名称去注入属性，如果是Autowired的话，只会按照类型去注入属性
    // 所以一般用Resource来自动注入

    @Resource
    private UserMapper userMapper;

    @Test
    public void testSelect() {

        System.out.println(("----- add method test ------"));
        User user = new User();
        user.setId(0L);
        user.setUsername("张三");
        user.setUserAccount("123");
        user.setAvatarUrl("111");
        user.setGender(0);
        user.setUserPassword("123");
        user.setPhone("123");
        user.setEmail("[email protected]");
        user.setUserStatus(0);
        user.setCreateTime(new Date());
        user.setUpdateTime(new Date());
        user.setIsDelete(0);
        user.setUserRole(0);
        user.setPlanetCode("1");
        userMapper.insert(user);
        System.out.println(("----- selectAll method test ------"));
        List<User> userList = userMapper.selectList(null);
        assertEquals(5, userList.size());
        userList.forEach(System.out::println);
    }
}

 出现这个原因主要是因为，mybatis-plus框架关于下划线转驼峰有自己的规则，其实还有一个出现这个问题的原因，就是在建表的时候，就没有去按照下划线方式去建表(如果建表的时候采用下划线的方式进行创建，此处将不会报错)。

         由于此属性在 MyBatis 中原默认值为 false，在 MyBatis-Plus 中，此属性也将用于生成最终的 SQL 的 select body    即修改成：

# mybatis-plus的配置
mybatis-plus:
  configuration:
    map-underscore-to-camel-case: false # 数据库下划线自动转驼峰标示关闭

发现数据测试成功