当前位置: 首页 > news >正文

Springboot3+vue3从0到1开发实战项目(一)

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

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

后端开发 : 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.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
}

完整的项目结构如下:

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

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

 

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

五. 项目遇到的小问题

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

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

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

 

 

 这一章完结!!!

相关文章:

Springboot3+vue3从0到1开发实战项目(一)

一. 可以在本项目里面自由发挥拓展 二. 知识整合项目使用到的技术 后端开发 &#xff1a; Validation, Mybatis,Redis, Junit,SpringBoot3 &#xff0c;mysql&#xff0c;Swagger, JDK17 &#xff0c;JWT&#xff0c;项目部署 前端开发&#xff1a; Vue3&#xff0c;Vite&am…...

[字符串操作] 有年代的病历单

有年代的病历单 题目描述 小英是药学专业大三的学生&#xff0c;暑假期间获得了去医院药房实习的机会。 在药房实习期间&#xff0c;小英扎实的专业基础获得了医生的一致好评&#xff0c;得知小英在计算概论中取得过好成绩后&#xff0c;主任又额外交给她一项任务&#xff0c…...

怎么批量提取文件名字到Excel中?

怎么批量提取文件名字到Excel中&#xff1f;Excel是由微软公司开发的一种电子表格软件&#xff0c;它是Microsoft Office办公套件的一部分。Excel提供了强大的数据处理和分析功能&#xff0c;用户可以使用Excel创建、编辑和管理电子表格&#xff0c;进行各种计算、数据分析、图…...

QT搭建的Ros/librviz的GUI软件

1.前言 开发初期学习了下面博主的文章&#xff0c;也报了他在古月局的课&#xff0c;相当于感谢吧。 ROS Qt5 librviz人机交互界面开发一&#xff08;配置QT环境&#xff09;-CSDN博客​​​​​​​r 软件前期也是参考他的开源项目 GitHub - chengyangkj/Ros_Qt5_Gui_App …...

Docker 概述与安装

文章目录 1. Docker简介2. 传统虚拟机和容器3. Docker运行速度快的原因4. Docker软件4.1 Docker镜像4.2 Docker容器4.3 Docker仓库 5. Docker架构6. CentOS安装Docker6.1 卸载旧版本6.2 配置yum资源库6.3 安装Docker引擎6.4 启动docker引擎6.5 设置开机自启 7. 卸载Docker8. 运…...

JS作用域与作用域链

让我为大家介绍一下作用域与作用域链吧&#xff01; 作用域 作用域规定了变量能够访问的“范围”&#xff0c;离开了这个“范围”变量便不能被访问。 作用域分为&#xff1a;局部作用域&#xff0c;全局作用域 一、局部作用域 局部作用域分为函数作用域与块作用域 1.函数作…...

elmentui 查看大图组件 点击图片关闭弹窗方法

elmentui 查看大图组件 点击图片关闭弹窗方法 html <el-imageref"Imgs":src"item.url ? item.url : ":preview-src-list"item.url ? [item.url] : []"click.stop"handlePreviewClose"class"alarm_img"/>js //图片…...

蓝桥杯官网练习题(最长子序列)

题目描述 我们称一个字符串S 包含字符串 T 是指 T 是 S 的一个子序列&#xff0c;即可以从字符串 S 中抽出若干个字符&#xff0c;它们按原来的顺序组合成一个新的字符串与 T 完全一样。 给定两个字符串 S 和 T&#xff0c;请问 T 中从第一个字符开始最长连续多少个字…...

Make sure that using this pseudorandom number generator is safe here.

问题类型&#xff1a;安全热点 安全问题级别&#xff1a;MEDIUM 一、问题代码 工具类Package&#xff1a; Java commons-lang3 库 RandomUtils 随机数工具类 import org.apache.commons.lang3.RandomUtils; 用法&#xff1a; RandomUtils.nextInt(0, 999999999) //生成 0…...

【C/C++】常见模拟题题解

题解 模拟双目运算符一元二次方程求解水仙花数统计学生成绩学生成绩管理模拟选举大小写字符转换最大公约数、最小公倍数字符串反序 模拟双目运算符 编写一个根据用户键入的两个操作数和一个双目运算符&#xff0c;由计算机输出结果的程序。 #include<stdio.h>int opera…...

TikTok 购物和直播的 5 个简单技巧

TikTok 的一切都很大&#xff1a;应用程序下载量、受众规模和病毒式营销活动。因此&#xff0c;该公司多方面进军社交商务也就不足为奇了。是的&#xff0c;这将是巨大的。自去年年底以来&#xff0c;TikTok Shopping 和TikTok 直播购物活动已在一些市场上线&#xff0c;并将于…...

神经网络中BN层简介及位置分析

1. 简介 Batch Normalization是深度学习中常用的技巧&#xff0c;Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift (Ioffe and Szegedy, 2015) 第一次介绍了这个方法。 这个方法的命名&#xff0c;明明是Standardization, 非…...

BGP基础配置

EBGP是AS之间 IBGP是AS内 R1-R2是EBGP,R4-R5是EBGP R2-R3-R4是IBGP 第一步基础配置&#xff1a;IP地址 [r1-GigabitEthernet0/0/0]ip ad 12.0.0.1 24 [r1-LoopBack0]ip ad 1.1.1.1 32 [r2-GigabitEthernet0/0/0]ip ad 12.0.0.2 24 [r2-LoopBack0]ip ad 2.2.2.2 32 [r2-Loop…...

【开题报告】基于深度学习的驾驶员危险行为检测系统

研究的目的、意义及国内外发展概况 研究的目的、意义&#xff1a;我国每年的交通事故绝对数量是一个十分巨大的数字&#xff0c;造成了巨大的死亡人数和经济损失。而造成交通事故的一个很重要原因就是驾驶员的各种危险驾驶操作行为。如果道路驾驶员的驾驶行为能够得到有效识别…...

Linux云服务器打包部署前端Vue项目

1. 打包 在项目包的终端使用命令打包成dist文件。 npm run build2. Linux云服务器上创建文件夹 mkdir /home/www/dist注&#xff1a;dist文件夹不用创建&#xff0c;将打包好的dist.zip放进去&#xff0c;然后解压就行。 3. 安装nginx yum install -y nginx4. 修改配置文件…...

Egg.js中Cookie和Session

Cookie HTTP请求是无状态的&#xff0c;但是在开发时&#xff0c;有些情况是需要知道请求的人是谁的。为了解决这个问题&#xff0c;HTTP协议设计了一个特殊的请求头&#xff1a;Cookie。服务端可以通过响应头&#xff08;set-cookie&#xff09;将少量数据响应给客户端&#…...

与 PCIe 相比,CXL为何低延迟高带宽?

文章目录 前言1. LatencyPCIE 生产者消费则模型结论Flit 包PCIE/CXL.ioCXL.cace & .mem总结 2. BandWidth常见开销CXL.IO Link efficiencyPCIe Link efficiencyCXL.IO bandwidthCXL.mem/.cache bandwidth 参考 前言 CXL 规范里没有具体描述与PCIe 相比低延时高带宽的原因&…...

Vue 入门指南:从零开始学习 Vue 的基础知识

&#x1f95d;VUE官方文档 注意&#xff1a; &#x1f4d2;Vue 2 将于 2023 年 12 月 31 日停止维护。详见 Vue 2 延长 LTS。&#x1f4d2;Vue 2 中文文档已迁移至 v2.cn.vuejs.org。&#x1f4d2;想从 Vue 2 升级&#xff1f;请参考迁移指南。 文章目录 &#x1f341;前言&am…...

11.docker的网络-docker0的理解及bridge网桥模式的介绍与实例

1.docker0的基本理解 安装完docker服务后&#xff0c;我们首先查看一下宿主机的网络配置 ifconfig我们可以看到&#xff0c;docker服务会默认在宿主机上创建一个虚拟网桥docker0&#xff0c;该网桥网络的名字称为docker0。它在内核层连通了其他物理或者虚拟网卡&#xff0c;这…...

新材料制造ERP用哪个好?企业应当如何挑选适用的

有些新材料存在特殊性&#xff0c;并且在制造过程中对车间、设备、工艺、人员等方面提出更高的要求。还有些新材料加工流程复杂&#xff0c;涉及多种材料的请购、出入库、使用和管理等环节&#xff0c;解决各个业务环节无缝衔接问题是很多制造企业面临的管理难题。 新材料制造…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...