• 总结一下前后端分离业务流程

    目录

     1.创建一个返回统一结果的处理类

    2.定义成功失败的枚举

    3.自定义异常以及异常处理

    4.控制层例子

    5.来看前端

    构造

     1.创建一个返回统一结果的处理类

    1. package com.atguigu.eduservice;
    2.  
    3. import io.swagger.annotations.Api;
    4. import io.swagger.annotations.ApiModelProperty;
    5. import lombok.Data;
    6.  
    7. import java.util.HashMap;
    8. import java.util.Map;
    9.  
    10. /**
    11.  * 统一返回结果类
    12.  * 调用结果
    13.  * 对success，code，message进行设置->返回调用者的对象方便链式编程->以此继续调用
    14.  */
    15. @Data
    16. public class R {
    17.     @ApiModelProperty(value = "是否成功")
    18.     private Boolean success;
    19.  
    20.     @ApiModelProperty(value = "返回码")
    21.     private Integer code;
    22.  
    23.     @ApiModelProperty(value = "返回消息")
    24.     private String message;
    25.  
    26.     @ApiModelProperty(value = "返回数据")
    27.     private Map data = new HashMap();
    28.  
    29.     //设置一个私有构造让别人不能修改我的属性和方法，只能用规定的static成员
    30.     private R() {
    31.     }
    32.  
    33.     public static R ok(){
    34.         R r = new R();
    35.         r.setSuccess(true);
    36.         r.setCode(ResultCode.SUCCESS);
    37.         r.setMessage("成功");
    38.         return r;
    39.     }
    40.  
    41.     public static R error(){
    42.         R r = new R();
    43.         r.setSuccess(false);
    44.         r.setCode(ResultCode.ERROR);
    45.         r.setMessage("失败");
    46.         return r;
    47.     }
    48.  
    49.     /**
    50.      * 对状态码以及信息（success,code,data）进行设置
    51.      * @param success
    52.      * @return
    53.      */
    54.     public R success(Boolean success){
    55.         this.setSuccess(success);
    56.         return this;
    57.     }
    58.  
    59.     public R message(String message){
    60.         this.setMessage(message);
    61.         return this;
    62.     }
    63.  
    64.     public R code(Integer code){
    65.         this.setCode(code);
    66.         return this;
    67.     }
    68.  
    69.     public R data(String key, Object value){
    70.         this.data.put(key, value);
    71.         return this;
    72.     }
    73.  
    74.     public R data(Map map){
    75.         this.setData(map);
    76.         return this;
    77.     }
    78. }

    2.定义成功失败的枚举

    1. package com.atguigu.eduservice;
    2.  
    3. public interface ResultCode {
    4. //定义成功失败的编码
    5.     public static Integer SUCCESS = 20000;
    6.  
    7.     public static Integer ERROR = 20001;
    8. }

    3.自定义异常以及异常处理

     自定义异常类

    1. package com.atguigu.eduservice.exceptionHandler;
    2.  
    3. import io.swagger.annotations.ApiModelProperty;
    4. import lombok.AllArgsConstructor;
    5. import lombok.Data;
    6. import lombok.NoArgsConstructor;
    7.  
    8. @Data
    9. @AllArgsConstructor
    10. @NoArgsConstructor
    11. /**
    12.  * 自定义异常
    13.  */
    14. public class GuliException extends RuntimeException{
    15.  
    16.     @ApiModelProperty(value = "状态码")
    17.     private Integer code;
    18.     private String msg;
    19.  
    20. }

     统一异常处理类

    核心：@ControllerAdvice+@Slf4j+@ExceptionHandler(xxx.class)

    1. package com.atguigu.eduservice.exceptionHandler;
    2.  
    3. import com.atguigu.eduservice.R;
    4. import lombok.extern.slf4j.Slf4j;
    5. import org.springframework.web.bind.annotation.ControllerAdvice;
    6. import org.springframework.web.bind.annotation.ExceptionHandler;
    7. import org.springframework.web.bind.annotation.ResponseBody;
    8.  
    9. /**
    10.  * 统一异常处理类
    11.  */
    12. @ControllerAdvice
    13. @Slf4j//logback日志
    14. public class GlobalExceptionHandler {
    15.  
    16.     @ResponseBody
    17.     @ExceptionHandler(Exception.class)//指定在哪里出现的异常会被处理
    18.     public R GlobalError(Exception e) {
    19.         e.printStackTrace();
    20.         return R.error().message("执行全局异常处理");
    21.     }
    22.  
    23.  
    24.     /**
    25.      * 优先执行特定异常
    26.      * 特定异常处理
    27.      */
    28.     @ResponseBody
    29.     @ExceptionHandler(ArithmeticException.class)//指定在哪里出现的异常会被处理
    30.     public R ArithmeticError(Exception e) {
    31.         e.printStackTrace();
    32.         return R.error().message("ArithmeticException出现");
    33.     }
    34.  
    35.     /**
    36.      * 自定义异常
    37.      */
    38.     @ExceptionHandler
    39.     @ResponseBody
    40.     public R error(GuliException e) {
    41.         //会把日志信息写到文件中
    42.         log.error(e.getMsg());
    43.  
    44.         e.printStackTrace();
    45.         return R.error().message(e.getMsg()).code(e.getCode());
    46.     }
    47. }

    对字段进行填充

    1. package com.atguigu.eduservice.handler;
    2.  
    3. import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
    4. import org.apache.ibatis.reflection.MetaObject;
    5. import org.springframework.stereotype.Component;
    6.  
    7. import java.nio.channels.NetworkChannel;
    8. import java.util.Date;
    9.  
    10. @Component
    11. public class MyMetaObjectHandler implements MetaObjectHandler {
    12.  
    13.     /**
    14.      * 对插入字段进行自动填充->这里就是创建时间和修改时间我们会自动填充
    15.      *
    16.      * @param metaObject
    17.      */
    18.     @Override
    19.     public void insertFill(MetaObject metaObject) {
    20.         this.setFieldValByName("gmtCreate", new Date(), metaObject);
    21.         this.setFieldValByName("gmtModified", new Date(), metaObject);
    22.     }
    23.  
    24.     @Override
    25.     public void updateFill(MetaObject metaObject) {
    26.         this.setFieldValByName("gmtModified", new Date(), metaObject);
    27.     }
    28. }

    4.控制层例子

    1. package com.atguigu.eduservice.controller;
    2.  
    3.  
    4. import com.atguigu.eduservice.R;
    5. import com.atguigu.eduservice.entity.EduTeacher;
    6. import com.atguigu.eduservice.entity.vo.TeacherQuery;
    7. import com.atguigu.eduservice.service.EduTeacherService;
    8. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    9. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    10. import io.swagger.annotations.Api;
    11. import io.swagger.annotations.ApiOperation;
    12. import org.apache.commons.lang3.StringUtils;
    13. import org.springframework.beans.factory.annotation.Autowired;
    14. import org.springframework.web.bind.annotation.*;
    15.  
    16. import java.util.HashMap;
    17. import java.util.List;
    18.  
    19. /**
    20.  * 
    21.  * 讲师 前端控制器
    22.  * 
    23.  * http://localhost:8001/eduservice/edu-teacher/findAll
    24.  *
    25.  * @author testjava
    26.  * @since 2022-07-05
    27.  */
    28. @Api(description = "讲师管理")
    29. @RestController
    30. @CrossOrigin
    31. @RequestMapping("/eduservice/teacher")
    32. public class EduTeacherController {
    33.  
    34.     @Autowired
    35.     private EduTeacherService teacherService;
    36.  
    37.     /**
    38.      * 1.查询教师表中所有数据
    39.      * SELECT id,name,intro,career,level,avatar,sort,is_deleted,gmt_create,gmt_modified FROM edu_teacher WHERE is_deleted=0
    40.      */
    41.     @ApiOperation(value = "所有讲师")
    42.     @GetMapping("findAll")
    43.     public R findAllTeacher() {
    44.         List<EduTeacher> list = teacherService.list(null);
    45.         return R.ok().data("items", list);
    46.     }
    47.  
    48.     /**
    49.      * 2.逻辑删除讲师的方法:rest风格来一手
    50.      */
    51.     @ApiOperation(value = "根据逻辑删除讲师")
    52.     @DeleteMapping("{id}")
    53.     public R removeTeacher(@PathVariable String id) {
    54.         boolean flag = teacherService.removeById(id);
    55.         System.out.println("删除成功：" + flag);
    56.  
    57.         //具体判断进行返回
    58.         if (flag) {
    59.             return R.ok();
    60.         } else {
    61.             return R.error();
    62.         }
    63.     }
    64.  
    65.  
    66.     /**
    67.      * 3.分页查询讲师
    68.      * SELECT id,name,intro,career,level,avatar,sort,is_deleted,gmt_create,gmt_modified FROM edu_teacher WHERE is_deleted=0 LIMIT 0,3
    69.      */
    70.     @GetMapping("pageTeacher/{current}/{limit}")
    71.     public R pageListTeacher(@PathVariable long current, @PathVariable long limit) {
    72.  
    73.         //创建page对象
    74.         Page<EduTeacher> teacherPage = new Page<>(current, limit);
    75.  
    76.         //调用方法进行分页,会将分页的数据封装到teacherPage里面
    77.         teacherService.page(teacherPage, null);
    78.  
    79.         //总记录数
    80.         long total = teacherPage.getTotal();
    81.         //得到分页后数据集合
    82.         List<EduTeacher> records = teacherPage.getRecords();
    83.  
    84.         HashMap map = new HashMap();
    85.         map.put("total", total);
    86.         map.put("rows", records);
    87.  
    88.         return R.ok().data(map);
    89.     }
    90.  
    91.     /**
    92.      * 4.多条件组合查询
    93.      * 讲师级别，入住时间，名称...
    94.      * 多条件：我们可以将条件值传入对象中，然后将对象传递到接口中（vo）
    95.      * PageHelper的话调用startPage然后封装到PageInfo下即可
    96.      * 这里的TeacherQuery也可以用@RequestBody来传递数据->Post提交
    97.      * 传递的为Json数据，将Json数据封装到对象里面
    98.      * SELECT id,name,intro,career,level,avatar,sort,is_deleted,gmt_create,gmt_modified FROM edu_teacher WHERE is_deleted=0 ORDER BY gmt_create DESC LIMIT 0,3      */
    99.     @PostMapping("pageTeacherCondition/{current}/{limit}")
    100.     public R pageTeacherCondition(@PathVariable long current, @PathVariable long limit, @RequestBody(required = false) TeacherQuery teacherQuery) {
    101.  
    102.         //创建Page对象
    103.         Page<EduTeacher> teacherPage = new Page<>(current, limit);
    104.  
    105.         //wrapper构建条件过滤
    106.         QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();
    107.  
    108.         String name = teacherQuery.getName();
    109.         Integer level = teacherQuery.getLevel();
    110.         String begin = teacherQuery.getBegin();
    111.         String end = teacherQuery.getEnd();
    112.  
    113.         wrapper.like(StringUtils.isNotBlank(name), "name", name)
    114.                 .like(level != null, "level", level)
    115.                 .ge(begin != null, "gmt_create", begin)
    116.                 .le(end != null, "gmt_create", end);
    117.  
    118.         //按照时间降序处理
    119.         wrapper.orderByDesc("gmt_create");
    120.  
    121.         //对过滤条件进行封装进而->得到分页数据
    122.         teacherService.page(teacherPage, wrapper);
    123.         long total = teacherPage.getTotal();
    124.         List<EduTeacher> records = teacherPage.getRecords();
    125.  
    126.         return R.ok().data("total", total).data("rows", records);
    127.     }
    128.  
    129.  
    130.     /**
    131.      *5.添加讲师
    132.      */
    133.     @ApiOperation(value = "添加讲师")
    134.     @PostMapping("addTeacher")
    135.     public R addTeacher(@RequestBody EduTeacher eduTeacher){
    136.         boolean save = teacherService.save(eduTeacher);
    137.         return save?R.ok():R.error();
    138.     }
    139.  
    140.     /**
    141.      * 6.修改讲师
    142.      * 根据讲师id先进行查询，然后修改
    143.      * UPDATE edu_teacher SET name=?, intro=?, career=?, level=?, avatar=?, sort=?, gmt_modified=? WHERE id=? AND is_deleted=0
    144.      */
    145.     @GetMapping("getTeacher/{id}")
    146.     public R getTeacher(@PathVariable String id){
    147.         EduTeacher eduTeacher = teacherService.getById(id);
    148.         return R.ok().data("teacher",eduTeacher);
    149.     }
    150.  
    151.     @ApiOperation(value = "修改讲师")
    152.     @PostMapping("updateTeacher")
    153.     public R updateTeacher(@RequestBody EduTeacher eduTeacher){
    154.         boolean flag = teacherService.updateById(eduTeacher);
    155.         if(flag){
    156.             return R.ok();
    157.         }else{
    158.             return R.error();
    159.         }
    160.     }
    161.  
    162.  
    163.  
    164. }
    165.

    返回我们的json数据

    5.来看前端

    5.1在我们的config下配置了路由信息dev.env.js

     

     9001是我们nginx负载均衡的端口

    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.   // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
    8.   BASE_API: '"http://localhost:9001"',
    9. })

    5.2定义我们的后台api

     里面调用了我们后台的接口

    1. import request from '@/utils/request'
    2.  
    3. export default {
    4.     //1.讲师列表(条件查询分页)
    5.     //参数分别为当前页，每页记录数，
    6.     getTeacherListPage(current,limit,teacherQuery) {
    7.         return request({
    8.             url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
    9.  
    10.             method: 'post',
    11.             //teacherQuery条件对象，后端使用RequestBody传输数据
    12.             //data表示对象传唤成json传输
    13.             data: teacherQuery
    14.           })
    15.     },
    16.     deleteTeacherId(id){
    17.         return request({
    18.             url: `/eduservice/teacher/${id}`,
    19.  
    20.             method: 'delete'
    21.             //teacherQuery条件对象，后端使用RequestBody传输数据
    22.             //data表示对象传唤成json传输
    23.             // data: teacherQuery
    24.           })
    25.     },
    26.     addTeacher(teacher){
    27.         return request({
    28.             url: '/eduservice/teacher/addTeacher',
    29.             method: 'post',
    30.             //将teacher转为json传输数据
    31.             data: teacher
    32.         })
    33.     },
    34.     getTeacherInfo(id){
    35.         return request({
    36.             url: `/eduservice/teacher/getTeacher/${id}`,
    37.             method: 'get'
    38.         })
    39.     },
    40.     //修改讲师
    41.     updateTeacherInfo(teacher){
    42.        return request({
    43.         url: `/eduservice/teacher/updateTeacher`,
    44.         method: 'post',
    45.         data: teacher
    46.        }) 
    47.     },
    48.      //2.查询所有的讲师
    49.     getListTeacher(){
    50.     return request({
    51.       url: `/eduservice/teacher/findAll`,
    52.       method: 'get'
    53.     })
    54.   }
    55. }
    56.  
    57.

    5.3然后再在具体页面调用封装后台接口的js文件，调用里面的方法

    1.