在线教育第二次课-前端搭建

这边采用vue-admin-template模板搭建后台的前端页面

官网地址：https://panjiachen.gitee.io/vue-element-admin-site/zh/

vue-element-template的网址：

https://panjiachen.github.io/vue-element-admin/#/icon/index

解决跨域

前端固定端口启动，反向代理到服务端,修改vue.config.js

module.exports = {
  devServer: {
    port: 8888,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:81',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }
}

前端请求拦截器

这两一定要对应上

前端响应拦截器

这里的2000一定要跟咱们服务端统一结果返回那成功返回对应上

自定义异常

@AllArgsConstructor
@NoArgsConstructor
@Data
public class TokenException extends RuntimeException{

    private Integer code;//状态码
    private String mess;//异常信息
}

全局异常里补充

 /**
     * 自定义异常
     */
@ExceptionHandler(TokenException.class)
public ResultVo error(TokenException e) {
    return ResultVo.error(e.getCode(),e.getMess());
}

vuex状态管理

官网：https://vuex.vuejs.org/zh/

把登录成功拿到的token存到store和本地

 return  ResultVo.success("登录成功",token);

我这里为啥改成data,那是因为我后端返回的data就是token,而不是data里放着{"token","xxxxxxxx"}这种对象

请求接口配置

发现登录成功的同时会发送一个获取用户基本信息的接口

所以你要写一个这样的接口，咱们暂时为了开发后面的功能，先直接写个假的接口

   @GetMapping("/user/info")
    public ResultVo getUser(String token){
        Map map= new HashMap();
        map.put("name","xiaojie");
        map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");

        return ResultVo.success("",map);
    }

这样就可以登录成功了。

后端讲师接口

@RestController
@RequestMapping("/teacher")
public class TeacherController {

    @Autowired
    TeacherService teacherService;

    @PostMapping("/page")
    public ResultVo page(@RequestBody SearchTeacherDto searchTeacherDto,
                         @RequestParam(defaultValue = "1") Integer pageNum,
                         @RequestParam(defaultValue = ""+Integer.MAX_VALUE) Integer pageSize){


        LambdaQueryWrapper<Teacher> queryWrapper= new LambdaQueryWrapper<>();
        if (searchTeacherDto != null) {

            if (!ObjectUtils.isEmpty(searchTeacherDto.getName())) {
                queryWrapper.like(Teacher::getName,searchTeacherDto.getName());
            }
            if (!ObjectUtils.isEmpty(searchTeacherDto.getLevel())) {
                queryWrapper.eq(Teacher::getLevel,searchTeacherDto.getLevel());
            }
            if (!ObjectUtils.isEmpty(searchTeacherDto.getDates()) ) {
                queryWrapper.between(Teacher::getEduCreate,searchTeacherDto.getDates().get(0),searchTeacherDto.getDates().get(1));
            }

            queryWrapper.orderByDesc(Teacher::getId);

        }


        Page<Teacher> page = teacherService.page(new Page<>(pageNum, pageSize), queryWrapper);
        return  ResultVo.success("",page);

    }
}

注意service等不在容器中怎么解决

@ComponentScan(basePackages = {"com.jf3q.common","com.jf3q.back"})

后端数据校验

新的版本有点问题，需要研究下

依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>

实体类加注解

@Data
public class TeacherVo {

    @NotBlank(message = "讲师姓名不能为空")
    private String name;
    /**
     * 讲师简介
     */
    @NotBlank(message = "讲师简介不能为空")
    private String intro;
    /**
     * 讲师资历,一句话说明讲师
     */
    @ApiModelProperty("讲师资历,一句话说明讲师")
    @NotBlank(message = "讲师资历不能为空")
    private String career;
    /**
     * 头衔 1高级讲师 2首席讲师
     */
    @NotNull(message = "讲师头衔不能为空")
    private Integer level;
    /**
     * 讲师头像
     */
    @NotBlank(message = "讲师头像不能为空")
    private String avatar;
    /**
     * 排序
     */
    @NotNull(message = "排序不能为空")
    private Integer sort;

}

controller部分

    @PostMapping("/saveOrUpdate")
    @Operation(summary = "添加或者修改讲师")
    public ResultVo saveOrUpdate(@RequestBody @Validated SaveTeacherDto teacherDto){

异常处理

 @ExceptionHandler(MethodArgumentNotValidException.class)
    public ResultVo error(MethodArgumentNotValidException e) {
        StringBuffer errorMsg = new StringBuffer();
        BindingResult bindingResult = e.getBindingResult();
        if(bindingResult.hasErrors()){
            List<FieldError> fieldErrors = bindingResult.getFieldErrors();
            for(FieldError fieldError : fieldErrors){
                errorMsg.append(fieldError.getDefaultMessage()+",");
            }
        }
        //去掉最后一个逗号
        String substring = errorMsg.substring(0, errorMsg.lastIndexOf(","));
        return ResultVo.error("系统异常:"+substring);
    }

讲师前端

有个小瑕疵：图标没出来。