Springboot3+vue3從0到1開發實戰項目（一）

一. 可以在本項目里面自由發揮拓展

二. 知識整合項目使用到的技術

后端開發： Validation, Mybatis,Redis, Junit,SpringBoot3 ，mysql，Swagger, JDK17 ，項目部署

前端開發： 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.Driverurl: jdbc:mysql://localhost:3306/dahsijianusername: rootpassword: 1234

4. 創建基本的包結構

四. 開始編寫開發

1. 根據數據庫書寫實體類pojo

1.1注冊功能? ? 這是自己畫的注冊需要什么

User.java

@Data
public class User {private  Integer id; // 主鍵idprivate 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層@Autowiredprivate  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 {@Autowiredprivate UserMapper userMapper;@Overridepublic User findByUsername(String username) {User user =userMapper.findByUserName(username);return user;}@Overridepublic 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
}

完整的項目結構如下：