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

作者：Gausst松鼠会 | 2024-05-14 06:17:55

踩

spring vue3 項目实战

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

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

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

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

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

KunkunFamily新闻需求

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

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

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

文件上传

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

三. 后端环境搭建：

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

3. 书写配置文件

修改配置文件后缀名为yml

application.yml文件配置连接mysql


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

4. 创建基本的包结构

四. 开始编写开发

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

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

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

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


@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
}