Springboot3+vue3从0到1开发实战项目（一）

旧城等待， 2024-04-29 19:03 62阅读 0赞

## 一. 可以在本项目里面自由发挥拓展 ##

## 二. 知识整合项目使用到的技术 ##

后端开发 ： Validation, Mybatis,Redis, Junit,SpringBoot3 ，mysql，Swagger, JDK17 ，JWT，项目部署

前端开发： Vue3，Vite，Router，Pina ，Element-Plus

开发工具idea ，VsCode，navicat。。。

### KunkunFamily新闻需求 ###

**用户**：注册，登录，用户详细信息，更新用户基本信息， 更新用户头像，更新用户密码

**文章新闻分类管理**： 文章分类列表， 新增文章分类，更新文章分类，获取文章分类，删除文章分类

**文章管理**：新增文章， 更新文章，获取文章详情， 删除文章，文章列表（条件分页）

**文件上传**

**后端开发要求以及前端需要熟知知识**

![504491931a93439485f02e8be61fc536.png][]

## 三. 后端环境搭建： ##

### 1.根据前面的需求来写mysql数据库， 准备数据库表 ###

-- 创建User表
    create table user (
                          id int unsigned primary key auto_increment comment 'ID',
                          username varchar(20) not null unique comment '用户名',
                          password varchar(32)  comment '密码',
                          nickname varchar(10)  default '' comment '昵称',
                          email varchar(128) default '' comment '邮箱',
                          user_pic varchar(128) default '' comment '头像',
                          create_time datetime not null comment '创建时间',
                          update_time datetime not null comment '修改时间'
    ) comment '用户表';
    -- 后面添加数据
    insert into user(id, username, password, nickname, email,user_pic,create_time,update_time) VALUES ();
    
    
    -- 分类表
    create table category(
                             id int unsigned primary key auto_increment comment 'ID',
                             category_name varchar(32) not null comment '分类名称',
                             category_alias varchar(32) not null comment '分类别名',
                             create_user int unsigned not null comment '创建人ID',
                             create_time datetime not null comment '创建时间',
                             update_time datetime not null comment '修改时间',
                             constraint fk_category_user foreign key (create_user) references user(id) -- 外键约束
    );
    
    -- 文章表
    create table article(
                            id int unsigned primary key auto_increment comment 'ID',
                            title varchar(30) not null comment '文章标题',
                            content varchar(10000) not null comment '文章内容',
                            cover_img varchar(128) not null  comment '文章封面',
                            state varchar(3) default '草稿' comment '文章状态: 只能是[已发布] 或者 [草稿]',
                            category_id int unsigned comment '文章分类ID',
                            create_user int unsigned not null comment '创建人ID',
                            create_time datetime not null comment '创建时间',
                            update_time datetime not null comment '修改时间',
                            constraint fk_article_category foreign key (category_id) references category(id),-- 外键约束
                            constraint fk_article_user foreign key (create_user) references user(id) -- 外键约束
    )

### 2.创建springboot工程项目 引入依赖 ###

注意： 这里需要下载JDK17 SpringBoot3需要JDK17的支持,不再支持JDK8， 我的成功是因为把Springboot版本降低了实现效果，以为自己就是17

![79c41121e7834773b7f2110c8fd2666e.png][]

![d6e30d92432e48509db05b756577703c.png][]

![3b259e24e2e64e30a381b518c3e05da7.png][]

### 3. 书写配置文件 ###

修改配置文件后缀名为yml

![bee337364de940efb0fb77605bdbe6ab.png][]

application.yml文件配置连接mysql

spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/dahsijian
        username: root
        password: 1234

### 4. 创建基本的包结构 ###

![c9e8cc30924f409aa4fc5d1c02e40e7a.png][]

##  ##

## 四. 开始编写开发 ##

### 1. 根据数据库书写实体类pojo ###

#### 1.1注册功能 这是自己画的注册需要什么 ####

![b58c390f83844204a6ff2978ac236ae7.png][]

User.java

@Data
    public class User {
        private  Integer id; // 主键id
        private String username; // 用户名
        private  String  password; // 密码
        private String  nickname; //昵称
        private String email; // 邮箱
        private String userPic; // 用户头像地址
        private LocalDateTime createTime;// 创建时间
        private LocalDateTime updateTime;// 更新时间
    }

在Maven配置lombok就可以不用写set，get了， 前面配置@Data

![ec11ba3aa46645a3a906a845d6816dea.png][]

接口文档参数返回值类 Result.java

![76ec3ed9750044bf8b979a6f51b5b670.png][]

@NoArgsConstructor
    @AllArgsConstructor
    public class Result<T> {
        private Integer code; //业务状态码  0-成功  1-失败
        private String message; //提示信息
        private T data; //响应数据
    
        //快速返回操作成功响应结果(带响应数据)
        public static <E> Result<E> success(E data) {
            return new Result<>(0, "操作成功", data);
        }
    
        //快速返回操作成功响应结果
        public static Result success() {
            return new Result(0, "操作成功", null);
        }
    
        public static Result error(String message) {
            return new Result(1, message, null);
        }
    }

看接口要有用户名密码校验，这里使用spring的注解方式导入包validation

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

UserController.java类

@RestController
    @RequestMapping("/user")
    public class UserController {
    
        // service层
        @Autowired
        private  UserService userService;
    
    
    
        // 注册类   判断是否已存在用户查数据库
        @PostMapping("/register")
        // 使用注解 @Pattern以及表达式
        public Result register(@Pattern(regexp = "^\\${5,16}$") String username, @Pattern(regexp = "^\\${5,16}$")String password) {
            if (userService.findByUsername(username) != null) {
                return Result.error("该用户已被占用");
            }
            userService.register(username, password);
            return  Result.success();
    
    //        以前的校验方式 ： 调用查询用户的方法
    //        User u = userService.findByUsername(username);
    //        // 注册
    //        if (u == null) {
    //            // 没有占有
    //            // 注册
    //            userService.register(username, password);
    //            return Result.success();
    //        }else {
    //            // 占用
    //            return Result.error("用户已经被占用");
    //        }
        }
    }

UserService

public interface UserService{
        //根据用户名查询用户
        User findByUsername(String username);
    
        //注册
        void register(String username,String password);
    
    }

UserServiceImpl实现类

@Service
    public class UserServiceImpl  implements UserService {
    
        @Autowired
        private UserMapper userMapper;
        @Override
        public User findByUsername(String username) {
            User user =userMapper.findByUserName(username);
            return user;
        }
    
        @Override
        public void register(String username, String password) {
            // 加密
            String md5String = Md5Util.getMD5String(password);
            // 添加
            userMapper.add(username,md5String);
        }
    }

MD5util.java

public class Md5Util {
        /**
         * 默认的密码字符串组合，用来将字节转换成 16 进制表示的字符,apache校验下载的文件的正确性用的就是默认的这个组合
         */
        protected static char hexDigits[] = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'};
    
        protected static MessageDigest messagedigest = null;
    
        static {
            try {
                messagedigest = MessageDigest.getInstance("MD5");
            } catch (NoSuchAlgorithmException nsaex) {
                System.err.println(Md5Util.class.getName() + "初始化失败，MessageDigest不支持MD5Util。");
                nsaex.printStackTrace();
            }
        }
    
        /**
         * 生成字符串的md5校验值
         *
         * @param s
         * @return
         */
        public static String getMD5String(String s) {
            return getMD5String(s.getBytes());
        }
    
        /**
         * 判断字符串的md5校验码是否与一个已知的md5码相匹配
         *
         * @param password  要校验的字符串
         * @param md5PwdStr 已知的md5校验码
         * @return
         */
        public static boolean checkPassword(String password, String md5PwdStr) {
            String s = getMD5String(password);
            return s.equals(md5PwdStr);
        }
    
    
        public static String getMD5String(byte[] bytes) {
            messagedigest.update(bytes);
            return bufferToHex(messagedigest.digest());
        }
    
        private static String bufferToHex(byte bytes[]) {
            return bufferToHex(bytes, 0, bytes.length);
        }
    
        private static String bufferToHex(byte bytes[], int m, int n) {
            StringBuffer stringbuffer = new StringBuffer(2 * n);
            int k = m + n;
            for (int l = m; l < k; l++) {
                appendHexPair(bytes[l], stringbuffer);
            }
            return stringbuffer.toString();
        }
    
        private static void appendHexPair(byte bt, StringBuffer stringbuffer) {
            char c0 = hexDigits[(bt & 0xf0) >> 4];// 取字节中高 4 位的数字转换, >>>
            // 为逻辑右移，将符号位一起右移,此处未发现两种符号有何不同
            char c1 = hexDigits[bt & 0xf];// 取字节中低 4 位的数字转换
            stringbuffer.append(c0);
            stringbuffer.append(c1);
        }

UserMapper

@Mapper
    public interface UserMapper {
        // 查询用户
        @Select("select * from user where username=#{username}")
        User findByUserName(String username);
    
        // 添加用户
        @Insert("insert into user(username,password,create_time,update_time) values(#{username},#{password},now(),now())")
        void add(String username, String password);// md5String
    }

完整的项目结构如下：

![387d162ab6694f1cabbdfcd2e3dd0a80.png][]

测试接口使用postman 注册用户添加到数据库

![c8a3b655914a42e1a6f75a78c41ff71c.png][]

数据库已经注册一个用户了

![6363c4e1adaf449cbe653de2af700682.png][]

注意： 这里需要下载JDK17 SpringBoot3需要JDK17的支持,不再支持JDK8， 我的成功是因为把Springboot版本降低了实现效果，以为自己就是17

## 五. 项目遇到的小问题 ##

1. 版本问题：java: 警告: 源发行版 17 需要目标发行版 17

安装了jdk17后之前是jdk1.8 想要把项目换成jdk17然后出现的这个问题

![46e7e7a2b9844f228471814d5cd24ee8.png][]

解决 检查项目是不是使用到了jdk17：

![c36e2f72e5734c7a848752c67cbf845f.png][]

![2bee65fbbba447559b4ef14ff6c14f88.png][]

![113d2273adac44a9b6fbe36773ff2299.png][] ![482582a8b7414e8590b99e25f65c35a0.png][]

这一章完结！！！

[504491931a93439485f02e8be61fc536.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/e7f918810402469f80034b8936533570.png
[79c41121e7834773b7f2110c8fd2666e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/377c8adcefcb4b7da3aec8a14ef8eb5b.png
[d6e30d92432e48509db05b756577703c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/82a1b1db7bde4690a944d4146b52965c.png
[3b259e24e2e64e30a381b518c3e05da7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/d6db4fdccfdb440ca1cb5c442a12d588.png
[bee337364de940efb0fb77605bdbe6ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/3a80a1063ae04a168c6fe7ca0b6f199e.png
[c9e8cc30924f409aa4fc5d1c02e40e7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/fbb98a7bb9c8447fbbdaf1c8c6fd5082.png
[b58c390f83844204a6ff2978ac236ae7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/37dac408b2504ac6bf05c028b8c3b973.png
[ec11ba3aa46645a3a906a845d6816dea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/257020881b5246d587b23c6004a5450f.png
[76ec3ed9750044bf8b979a6f51b5b670.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/467f047cab1b447c8ee1bbc6e558a5e0.png
[387d162ab6694f1cabbdfcd2e3dd0a80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/e5860f1403f249bca7421993e2f43b3a.png
[c8a3b655914a42e1a6f75a78c41ff71c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/c6781906d5204f0e976d10696bdde95f.png
[6363c4e1adaf449cbe653de2af700682.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/91de077df0224119851a654810f4117e.png
[46e7e7a2b9844f228471814d5cd24ee8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/d5928c9ec7e6418cb0a2d4cbab49f2dc.png
[c36e2f72e5734c7a848752c67cbf845f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/d4375b63789d43b49877aa3e666b0723.png
[2bee65fbbba447559b4ef14ff6c14f88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/94b70155946f494ba790659cbaae0597.png
[113d2273adac44a9b6fbe36773ff2299.png]: https://img-blog.csdnimg.cn/113d2273adac44a9b6fbe36773ff2299.png
[482582a8b7414e8590b99e25f65c35a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/9d9099d0eb9f4f9cad76ad3b842c00df.png