前后端联调实例-讲师管理

最新推荐文章于 2024-07-30 16:46:18 发布

wunianisme

最新推荐文章于 2024-07-30 16:46:18 发布

阅读量560

点赞数 1

分类专栏：爱编程文章标签： java vue.js spring

本文链接：https://blog.csdn.net/qq_29645505/article/details/109432535

版权

本文通过讲师管理功能的实例，详细介绍了前后端联调的实战过程。项目采用SpringBoot+MyBatisPlus+MySQL+Nginx作为后端环境，vue-cli+axios作为前端工具。后端实现了讲师管理的Controller、Service、Mapper接口及其实现，前端利用axios调用后端接口，通过Nginx进行请求分发。同时，文章总结了后台接口的统一异常处理和前端路由变化的数据刷新策略。

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

之前学习了一下前后端联调的一般步骤和Nginx的简单配置，现在以讲师管理功能为例来实战一下。

项目环境

后端：SpringBoot + MyBatisPlus +MySQL+Nginx
前端：vue-cli + axios

后端

1、编写讲师管理Controller，包含根据id删除讲师、分页查询讲师列表、新增讲师等请求接口。

@Api(description = "讲师管理")
@RestController
@RequestMapping("/admin/edu/teacher")
@CrossOrigin   //跨域支持
public class TeacherAdminController {
  
  @Autowired
  private TeacherService teacherService;

  @ApiOperation(value = "根据id删除讲师")
  @DeleteMapping("{id}")
  public R removeById(@ApiParam(name = "id",value="讲师id",required = true)
                                    @PathVariable String id){
    teacherService.removeById(id);
    return R.ok();
  }
  
  @ApiOperation(value = "分页查询讲师列表")
  @GetMapping("{page}/{limit}")
  public R pageList(@ApiParam(name = "page",value = "当前页码",required = true)
                               @PathVariable Long page,
                               @ApiParam(name = "limit",value = "每页记录数",required = true)
                               @PathVariable Long limit,
                               @ApiParam(name = "teacherQuery",value = "查询对象",required = true)
                               TeacherQuery teacherQuery){
    if(page <=0 || limit <=0){  
      //抛出统一异常，好处：所有开发人员协同时可保证错误结构一致
      throw new CodingException(ResultCodeEnum.PARAM_ERROR);
    }
    Page<Teacher> pageParam = new Page<>(page,limit);
    //调用自己扩展的查询方法
    teacherService.pageQuery(pageParam,teacherQuery);
    //结果封装
    List<Teacher> records = pageParam.getRecords();
    long total = pageParam.getTotal();
    return R.ok().data("total",total).data("rows",records);
  }
  
  @ApiOperation(value = "新增讲师")
  @PostMapping
  public R save(@ApiParam(name = "teacher",value = "讲师对象",required = true)
                        @RequestBody Teacher teacher){
    teacherService.save(teacher);
    return R.ok();
  }
}

2、编写讲师服务接口，并继承IService接口。

public interface TeacherService extends IService<Teacher> {
    void pageQuery(Page<Teacher> pageParam,TeacherQuery teacherQuery);
}

3、编写讲师服务接口实现类，并继承ServiceImpl类。

@Service
public class TeacherServiceImpl extends ServiceImpl<TeacherMapper,Teacher> implements TeacherService {
    
    @Override
    public void pageQuery(Page<Teacher> pageParam,TeacherQuery teacherQuery){
        //MP 让我们可以通过面向对象的方式编写SQL
        QueryWrapper<Teacher> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByAsc("sort");
        if(teacherQuery == null){
            baseMapper.selectPage(pageParam,queryWrapper);
            return;
        }
        String name = teacherQuery.getName();
        String level = teacherQuery.getLevel();
        Strin