• vue前后端分离

    目录

    前言

    一、后端

    1、实体类

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

     3、mapper

    4、service

    5、 启动类

    6、配置文件

    7、config 配置类

    8、controller控制层

    二、数据库的sql

    三、vue的前端

    前言

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

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

    一、后端

    依赖

    1.  
    2.         
    3.             org.projectlombok
    4.             lombok
    5.         
    6.         
    7.             org.springframework.boot
    8.             spring-boot-starter
    9.         
    10.         
    11.             org.springframework.boot
    12.             spring-boot-starter-web
    13.         
    14.         
    15.             org.springframework.boot
    16.             spring-boot-starter-test
    17.             test
    18.         
    19.         
    20.             com.baomidou
    21.             mybatis-plus-boot-starter
    22.             3.5.1
    23.         
    24.         
    25.             mysql
    26.             mysql-connector-java
    27.         
    28.    
    29.         
    30.             p6spy
    31.             p6spy
    32.             3.9.1
    33.         
    34.

    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 {
    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 {
    12.     Page 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 implements UserService{
    21.  
    22.     @Autowired
    23.     private  UserMapper mapper;
    24.     @Override
    25.     public Page queryByPage(User user, Integer pageNumber, Integer pageSize) {
    26.        Page page=new Page<>(pageNumber,pageSize);
    27.         LambdaQueryWrapper 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 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 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 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 前端

  • 相关阅读:
    Java 设计模式——外观模式
    让生产活动更高效，物料管理场景的RPA应用
    Qt “$$“符号的讲解
    Days task Privacy Policy
    如何在Linux上部署1Panel运维管理面板并远程访问内网进行操作
    基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目
    【JAVA】值传递与引用传递
    WPF拖拽相关的类
    Python学习小组课程P4-Python办公（1）Excel保存
    Spring注解之@Configuration和@Bean功能简介说明
  • 原文地址：https://blog.csdn.net/weixin_52574640/article/details/126743336