vue前后端分离

目录

前言

一、后端

1、实体类

2、实现统一结果的封装类

 3、mapper

4、service

5、 启动类

6、配置文件

7、config 配置类

8、controller控制层

二、数据库的sql

三、vue的前端

---

---

前言

实现用户的CRUD,实现后端全部是异步请求；前端是vue,之前在后端写得同步请求页面跳转，现在利用vue的路由进行实现.

后端我们使用的mybatis-plus和springboot进行

一、后端

依赖

1.  
   <dependencies>
2.  
   <dependency>
3.  
   <groupId>org.projectlombok</groupId>
4.  
   <artifactId>lombok</artifactId>
5.  
   </dependency>
6.  
   <dependency>
7.  
   <groupId>org.springframework.boot</groupId>
8.  
   <artifactId>spring-boot-starter</artifactId>
9.  
   </dependency>
10.  
    <dependency>
11.  
    <groupId>org.springframework.boot</groupId>
12.  
    <artifactId>spring-boot-starter-web</artifactId>
13.  
    </dependency>
14.  
    <dependency>
15.  
    <groupId>org.springframework.boot</groupId>
16.  
    <artifactId>spring-boot-starter-test</artifactId>
17.  
    <scope>test</scope>
18.  
    </dependency>
19.  
    <dependency>
20.  
    <groupId>com.baomidou</groupId>
21.  
    <artifactId>mybatis-plus-boot-starter</artifactId>
22.  
    <version>3.5.1</version>
23.  
    </dependency>
24.  
    <dependency>
25.  
    <groupId>mysql</groupId>
26.  
    <artifactId>mysql-connector-java</artifactId>
27.  
    </dependency>
28.  
    <!--监控sql的执行-->
29.  
    <dependency>
30.  
    <groupId>p6spy</groupId>
31.  
    <artifactId>p6spy</artifactId>
32.  
    <version>3.9.1</version>
33.  
    </dependency>
34.  
    </dependencies>

1、实体类

1.  
   package com.sofwin.pojo;
2.  
    
3.  
   import com.baomidou.mybatisplus.annotation.*;
4.  
   import lombok.Data;
5.  
   import org.springframework.format.annotation.DateTimeFormat;
6.  
    
7.  
   import java.util.Date;
8.  
    
9.  
   /**
10.  
    * @author : wentao
11.  
    * @version : 1.0
12.  
    */
13.  
    //查看方法的快捷键 alt 7
14.  
    @Data
15.  
    //表名注解，标识实体类中对应的表 使用位置实体类
16.  
    //value 表名
17.  
    @TableName(value = "user")
18.  
    public class User {
19.  
    //标识id为表的主键
20.  
    //value为id的名称 type为主键自增情况
21.  
    //auto为数据库自增
22.  
    //ASSIGN_UUID 通过uuid进行主键的自增
23.  
    @TableId(value = "id",type = IdType.AUTO)
24.  
    private Long id;
25.  
    @TableField("name") //非主键的字段描述
26.  
    private String name;
27.  
    private Integer age;
28.  
    private String email;
29.  
    private String realName;
30.  
    //insert的时候触发的时候自动填充
31.  
    @TableField(fill = FieldFill.INSERT)
32.  
    //@DateTimeFormat的作用是入参格式化，前端传string类型的时间字符串，此注解将字符串转换为Date类型。
33.  
    @DateTimeFormat(pattern ="yyyy-MM-dd")
34.  
    private Date createTime;
35.  
    //update触发的时候自动填充
36.  
    @TableField(fill = FieldFill.UPDATE)
37.  
    @DateTimeFormat(pattern = "yyyy-MM-dd")
38.  
    private Date updateTime;
39.  
    //乐观锁的 要设置默认为1
40.  
    @Version
41.  
    private Integer version;
42.  
    @TableLogic
43.  
    private Integer status;
44.  
    }

2、实现统一结果的封装类

1.  
   package com.sofwin.pojo;
2.  
    
3.  
   import lombok.Data;
4.  
    
5.  
   /**
6.  
   * @author : wentao
7.  
   * @version : 1.0
8.  
   */
9.  
   @Data
10.  
    public class ResponseEntity {
11.  
    private Integer code;
12.  
    private String msg;
13.  
    private Object ret;
14.  
     
15.  
     
16.  
    public static ResponseEntity success(Object ret){
17.  
    ResponseEntity responseEntity=new ResponseEntity();
18.  
    responseEntity.ret =ret;
19.  
    responseEntity.msg ="操作成功";
20.  
    responseEntity.code =200;
21.  
    return responseEntity;
22.  
    }
23.  
    }

 3、mapper

继承mybatisplus的接口 baseMapper

1.  
   public interface UserMapper extends BaseMapper<User> {
2.  
   }

4、service

继承 IService  泛型是实体类的类型   ----mybatis提供的

1.  
   package com.sofwin.service;
2.  
    
3.  
   import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
4.  
   import com.baomidou.mybatisplus.extension.service.IService;
5.  
   import com.sofwin.pojo.User;
6.  
    
7.  
   /**
8.  
   * @author : wentao
9.  
   * @version : 1.0
10.  
    */
11.  
    public interface UserService extends IService<User> {
12.  
    Page<User> queryByPage(User user, Integer pageNumber, Integer pageSize);
13.  
    }

这里需要注意的是 实现类一定要实现接口 

1.  
   package com.sofwin.service.impl;
2.  
    
3.  
   import com.baomidou.mybatisplus.core.conditions.Wrapper;
4.  
   import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
5.  
   import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
6.  
   import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
7.  
   import com.sofwin.mapper.UserMapper;
8.  
   import com.sofwin.pojo.User;
9.  
   import com.sofwin.service.UserService;
10.  
    import org.springframework.beans.factory.annotation.Autowired;
11.  
    import org.springframework.stereotype.Service;
12.  
    import org.springframework.util.StringUtils;
13.  
     
14.  
    /**
15.  
    * @author : wentao
16.  
    * @version : 1.0
17.  
    */
18.  
    @Service
19.  
    //第一个泛型是mapper的 第一个是实体类的
20.  
    public class UserServiceImpl extends ServiceImpl<UserMapper,User> implements UserService{
21.  
     
22.  
    @Autowired
23.  
    private UserMapper mapper;
24.  
    @Override
25.  
    public Page<User> queryByPage(User user, Integer pageNumber, Integer pageSize) {
26.  
    Page<User> page=new Page<>(pageNumber,pageSize);
27.  
    LambdaQueryWrapper<User> wrapper=new LambdaQueryWrapper<>();
28.  
    //如果字符串里面的值为null， ""， " "，那么返回值为false；否则为true
29.  
    if (StringUtils.hasText(user.getName())){
30.  
    wrapper.like(User::getName,user.getName());
31.  
    }
32.  
    page = mapper.selectPage(page, wrapper);
33.  
    return page;
34.  
    }
35.  
    }

5、 启动类

1.  
   package com.sofwin;
2.  
    
3.  
   import org.mybatis.spring.annotation.MapperScan;
4.  
   import org.springframework.boot.SpringApplication;
5.  
   import org.springframework.boot.autoconfigure.SpringBootApplication;
6.  
    
7.  
   /**
8.  
   * @author : wentao
9.  
   * @version : 1.0
10.  
    */
11.  
    @SpringBootApplication
12.  
    //mapper的返现映射器
13.  
    @MapperScan(basePackages = "com.sofwin.mapper")
14.  
    public class App {
15.  
    public static void main(String[]args){
16.  
    SpringApplication.run(App.class,args);
17.  
    }
18.  
    }

6、配置文件

application.yml

1.  
   spring:
2.  
   datasource:
3.  
   driver-class-name: com.p6spy.engine.spy.P6SpyDriver
4.  
   url: jdbc:p6spy:mysql://localhost:3306/dubbotest?serverTimezone=UTC
5.  
   username: root
6.  
   password: root
7.  
    
8.  
   logging:
9.  
   level:
10.  
    root: info
11.  
    com.sofwin: debug
12.  
    mybatis-plus:
13.  
    configuration:
14.  
    #打印sql语句 org.apache.ibatis.logging.stdout.StdOutImpl
15.  
    log-impl: org.apache.ibatis.logging.slf4j.Slf4jImpl
16.  
    # global-config:
17.  
    # db-config:
18.  
    # table-prefix: 设置表的前缀名
19.  
     
20.  
    #逻辑删除
21.  
    global-config:
22.  
    db-config:
23.  
    logic-delete-field: status # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
24.  
    logic-delete-value: 1 # 逻辑已删除值(默认为 1)
25.  
    logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
26.  
    server:
27.  
    port: 80
28.  
     
29.  
     

 spy.properties 

用于mybatisplus 的扩展功能 sql语句检查  ---具体可以看mybatisplus的官网

1.  
   #3.2.1以上使用
2.  
   modulelist=com.baomidou.mybatisplus.extension.p6spy.MybatisPlusLogFactory,com.p6spy.engine.outage.P6OutageFactory
3.  
   #3.2.1以下使用或者不配置
4.  
   #modulelist=com.p6spy.engine.logging.P6LogFactory,com.p6spy.engine.outage.P6OutageFactory
5.  
   # 自定义日志打印
6.  
   logMessageFormat=com.baomidou.mybatisplus.extension.p6spy.P6SpyLogger
7.  
   #日志输出到控制台
8.  
   appender=com.baomidou.mybatisplus.extension.p6spy.StdoutLogger
9.  
   # 使用日志系统记录 sql
10.  
    #appender=com.p6spy.engine.spy.appender.Slf4JLogger
11.  
    # 设置 p6spy driver 代理
12.  
    deregisterdrivers=true
13.  
    # 取消JDBC URL前缀
14.  
    useprefix=true
15.  
    # 配置记录 Log 例外,可去掉的结果集有error,info,batch,debug,statement,commit,rollback,result,resultset.
16.  
    excludecategories=info,debug,result,commit,resultset
17.  
    # 日期格式
18.  
    dateformat=yyyy-MM-dd HH:mm:ss
19.  
    # 实际驱动可多个
20.  
    #driverlist=org.h2.Driver
21.  
    # 是否开启慢SQL记录
22.  
    outagedetection=true
23.  
    # 慢SQL记录标准 2 秒
24.  
    outagedetectioninterval=2

7、config 配置类

跨域的配置类

1.  
   package com.sofwin.config;
2.  
    
3.  
   import org.springframework.context.annotation.Bean;
4.  
   import org.springframework.context.annotation.Configuration;
5.  
   import org.springframework.web.cors.CorsConfiguration;
6.  
   import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
7.  
   import org.springframework.web.filter.CorsFilter;
8.  
   //设置跨域的配置类
9.  
   @Configuration
10.  
    public class CrosConfiger {
11.  
    @Bean
12.  
    public CorsFilter corsFilter(){
13.  
    CorsConfiguration corsConfiguration = new CorsConfiguration();
14.  
    corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
15.  
    corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
16.  
    corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
17.  
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
18.  
    source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
19.  
    return new CorsFilter(source);
20.  
    }
21.  
    }

 分页和乐观锁的插件

1.  
   package com.sofwin.config;
2.  
    
3.  
   import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
4.  
   import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
5.  
   import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
6.  
   import org.springframework.context.annotation.Bean;
7.  
   import org.springframework.context.annotation.Configuration;
8.  
    
9.  
   /**
10.  
    * @author : wentao
11.  
    * @version : 1.0
12.  
    */
13.  
    //mybatis plus的插件的拦截器
14.  
    @Configuration
15.  
    public class PageInteceptor {
16.  
     
17.  
    @Bean
18.  
    public MybatisPlusInterceptor getPageInteceptor(){
19.  
    MybatisPlusInterceptor interceptor= new MybatisPlusInterceptor();
20.  
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
21.  
    //乐观锁
22.  
    interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());
23.  
    return interceptor;
24.  
    }
25.  
    }

8、controller控制层

1.  
   package com.sofwin.controller;
2.  
    
3.  
   import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
4.  
   import com.sofwin.pojo.ResponseEntity;
5.  
   import com.sofwin.pojo.User;
6.  
   import com.sofwin.service.UserService;
7.  
   import org.springframework.beans.factory.annotation.Autowired;
8.  
   import org.springframework.web.bind.annotation.*;
9.  
    
10.  
    import java.util.ArrayList;
11.  
    import java.util.Arrays;
12.  
    import java.util.List;
13.  
     
14.  
    /**
15.  
    * @author : wentao
16.  
    * @version : 1.0
17.  
    */
18.  
    @RestController
19.  
    @RequestMapping("/user")
20.  
    public class UserServiceController {
21.  
    @Autowired
22.  
    private UserService userService;
23.  
     
24.  
    /**
25.  
    * 分页查询 还筛选
26.  
    * @param user
27.  
    * @param pageNumber
28.  
    * @param pageSize
29.  
    * @return
30.  
    */
31.  
    @GetMapping()
32.  
    public ResponseEntity queryByPage(User user,@RequestParam(required = true,defaultValue = "1")Integer pageNumber
33.  
    ,@RequestParam(required = true,defaultValue = "10")Integer pageSize){
34.  
    Page<User> page= userService.queryByPage(user,pageNumber,pageSize);
35.  
    return ResponseEntity.success(page);
36.  
    }
37.  
     
38.  
    /**
39.  
    * 修改或者添加
40.  
    * @param user
41.  
    * @return
42.  
    */
43.  
    @PostMapping()
44.  
    public ResponseEntity saveOrUpdate(User user){
45.  
    return ResponseEntity.success(userService.saveOrUpdate(user));
46.  
    }
47.  
     
48.  
    /**
49.  
    * 修改的查询
50.  
    * @param id
51.  
    * @return
52.  
    */
53.  
    @GetMapping("/{id}")
54.  
    public ResponseEntity selectById(@PathVariable(name = "id") Long id){
55.  
    return ResponseEntity.success(userService.getById(id));
56.  
    }
57.  
     
58.  
    /**
59.  
    * 删除单个
60.  
    * @param id
61.  
    * @return
62.  
    */
63.  
    @DeleteMapping()
64.  
    public ResponseEntity removeById(Long id){
65.  
    return ResponseEntity.success(userService.removeById(id));
66.  
    }
67.  
     
68.  
    /**
69.  
    * 批量删除
70.  
    * @param ids
71.  
    * @return
72.  
    */
73.  
    // @DeleteMapping ("/removeByIds/{ids}")
74.  
    // public ResponseEntity removeById(@PathVariable Long[] ids){
75.  
    // List<Long> list=new ArrayList();
76.  
    // for (Long id : ids) {
77.  
    // list.add(id);
78.  
    // }
79.  
    // boolean b = userService.removeByIds(list);
80.  
    // return ResponseEntity.success(b);
81.  
    // }
82.  
    //第二种都可以 这个是普通的
83.  
    @DeleteMapping ("/removeByIds")
84.  
    public ResponseEntity removeById(@RequestBody Long[] ids){
85.  
    List<Long> list=new ArrayList();
86.  
    for (Long id : ids) {
87.  
    list.add(id);
88.  
    }
89.  
    boolean b = userService.removeByIds(list);
90.  
    return ResponseEntity.success(b);
91.  
    }
92.  
    }

二、数据库的sql

1.  
   create database dubbotest;
2.  
   use dubbotest;
3.  
   create table user
4.  
   (
5.  
   id bigint auto_increment comment '主键ID'
6.  
   primary key,
7.  
   name varchar(30) null comment '姓名',
8.  
   age int null comment '年龄',
9.  
   email varchar(50) null comment '邮箱',
10.  
    real_name varchar(20) null,
11.  
    create_time date null,
12.  
    update_time date null,
13.  
    version int default 1 null,
14.  
    status int default 0 null
15.  
    );

后端整个代码gitee ：vue的后端: vue的后端 

三、vue的前端

前端代码gitee：vue elementui前端: vue elementui 前端

这篇好文章是转载于：学新通技术网