【springBoot和vue框架整合】--增删改查快速入门

最新推荐文章于 2024-08-20 19:09:12 发布

sumengpan

最新推荐文章于 2024-08-20 19:09:12 发布

阅读量1.1k

点赞数 1

分类专栏： 2020实习 SpringBoot vue 文章标签： vue java ajax spring boot

本文链接：https://blog.csdn.net/qq_41209886/article/details/110387683

版权

本文介绍了如何结合SpringBoot后端和Vue前端框架，搭建一个包含增删改查功能的简单项目。从创建Maven工程、设置UTF-8编码、建立SpringBoot项目开始，到数据库准备，再到后台的配置、实体类、Service、Dao及测试，最后到Vue的控制层、页面和JS实现，详述了整个项目的构建过程。

摘要由CSDN通过智能技术生成

文章内容

后台使用springBoot
前台使用vue

项目准备

（1）框架

（1-1）创建maven工程

（1-2）设置UTF-8

(1)File->Settings->Editor->File Encodings
在这里插入图片描述
(2)File->Settings->Build,Execution,Deployment -> Compiler -> Java Compiler

（1-3）创建springBoot项目

在这里插入图片描述

（2）创建数据库

drop database vuejsdemo; 
create database vuejsdemo; 
use vuejsdemo;
#创建数库中的表
create table user(
id int primary key auto_increment,
age int,
username varchar(20), 
`password` varchar(50), 
email varchar(50), 
sex varchar(20)
)


insert into `user` values ('1', '33', '张老师', '123', 'zzz@wzx.cn', '男 ');
insert into `user` values ('2', '31', '刘老师', '123', 'lll@wzx.cn', '女');
insert into `user` values ('3', '17', '赵工', '213', 'zg@wzx.cn', '女');
insert into `user` values ('4', '40', '高管', '213', 'gg@wzx.cn', 'female');
insert into `user` values ('5', '28', '李总', '312', 'lz@wzx.com', 'male');
insert into `user` values ('6', '34', '王董', '312', 'wd@wzx.com', 'male');
insert into `user` values ('7', '55', '孙老板', '4321', 'slb@wzx.com', '男');
insert into `user` values ('8', '19', '陈秘书', '4321', 'cms@wzx.com', '女');

（3）准备完成

在这里插入图片描述

后台代码

（1）application.properties

# app
spring.application.name=demo01crud
server.port=8001
# datasource hykar
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.url=jdbc:mysql://localhost:3306/vuejsdemo?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
# mybatis
mybatis.type-aliases-package=com.smp.demo01crud.domain
# mybatis -dao  -->
# @MapperScan(basePackages = {"com.smp.demo01curd.dao"})
  # log   日志查看
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
# resources
spring.web.resources.static-locations=classpath:/static/,classpath:/templates/

（2）创建包

在这里插入图片描述

（2-1）User实体类

@Data
public class User {
   
    private Integer id;
    private String username;
    private String password;
    private String sex;
    private int age;
    private String email;
}

（2-2）Result 实体类

@Data
public class Result {
   
    private int code;
    private String msg;
    private Object data;

    /*public Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }*/

    public static Result init(int code, String msg, Object data) {
   
        Result result=new Result();
        result.code=code;
        result.msg=msg;
        result.data=data;
        return result;
    }
}

（3）Demo01crudApplicationTests测试

@SpringBootTest
@Slf4j
class Demo01crudApplicationTests {
   

    @Autowired
    UserService userService;
    @Test
    void test01() {
   
        List<User> userList=userService.findAll();//查询一条
        User user=userService.findById(2