Axios前后端交互规范

基于Axios封装的http通信模块

在main.js中导入了http对象, 并且注册到了Vue的原型对象上面, 取名为$http

有了上面的代码前提

我们可以在任意一个Vue组件中使用

this.$http发起http请求

GET请求 (查询)

情况1: 根据id查询一个对象

因为只有一个参数id, 所有可以使用占位符的方式将id拼接在地址后面传

后端取得时候, 注意在地址里面取参数

情况2: 条件+分页查询一个集合

参数是一个对象, 里面包含多个条件和分页参数

必须把参数放在 {params: {}}

这种方式得参数会拼接在url后面

this.$http.get('url', {params: 参数})
    .then((data) => {
    
    })

POST请求 (添加)

这种方式得参数会放在请求体里面

this.$http.post('url', 参数)
    .then((data) => {
    
    })

后端需要使用@RequestBody请求体里面获取数据, 否则数据取不到

PUT请求 (修改)

参数得传和取同POST请求

this.$http.put('', 参数)
    .then((data) => {
    
    })

DELETE请求 (删除)

这种请求一般也是携带id, 可以使用占位符得方式

this.$http.delete('')
    .then((data) => {
    
    })

后端控制器

处理get请求用@GetMapping

处理post请求用@PostMapping，参数使用@RequestBody从请求体获取

处理put请求用@PutMapping，参数使用@RequestBody从请求体获取

处理delete请求用@DeleteMapping

所有得控制器方法得返回值统一使用封装得ResponseData类型

所有得控制器方法中只有一行return 代码

这样控制器层得代码会非常干净，整洁

所有得业务代码全部交给Service层取实现

@RestController
@RequestMapping("/api/user")
public class UserController {
    @Resource
    private UserService userService;

    @GetMapping("/list")
    public ResponseData list(UserPage userPage){
        return userService.selectPage(userPage);
    }

    @DeleteMapping("/del/{id}")
    public ResponseData del(@PathVariable("id") Integer id){
        return userService.logicDeleteById(id);
    }

    @GetMapping("/detail/{id}")
    public ResponseData detail(@PathVariable("id") Integer id){
        return userService.selectById(id);
    }

    @PutMapping("/edit")
    public ResponseData edit(@RequestBody User user){
        return userService.edit(user);
    }

    @PostMapping("/login")
    public ResponseData login(@RequestBody User user){
        return userService.login(user);
    }
}

因为控制器层方法得返回值是ResponseData类型

这里直接返回调用得service层方法得返回值

那么，编写Service层接口和实现类得时候，也需要统一Service层全部返回ResponseData类型

public interface UserService {
    ResponseData selectPage(UserPage userPage);

    ResponseData logicDeleteById(Integer id);

    ResponseData selectById(Integer id);

    ResponseData login(User user);

    ResponseData edit(User user);
}

@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;

    @Override
    public ResponseData selectPage(UserPage userPage){
        QueryWrapper qw=new QueryWrapper();
        qw.likeRight(StringUtils.hasText(userPage.getUsername()),"username",userPage.getUsername());
        qw.likeRight(StringUtils.hasText(userPage.getIdCode()),"id_code",userPage.getIdCode());
        qw.likeRight(StringUtils.hasText(userPage.getMobile()),"mobile",userPage.getMobile());
        qw.eq("is_delete", 0);
        return ResponseData.success(userMapper.selectPage(userPage,qw));
    }

    @Override
    public ResponseData logicDeleteById(Integer id) {
        User user = new User();
        user.setId(id);
        user.setIsDelete(1);
        return ResponseData.success(userMapper.updateById(user) > 0 ? true: false);
    }

    @Override
    public ResponseData selectById(Integer id) {
        return ResponseData.success(userMapper.selectById(id));
    }

    @Override
    public ResponseData login(User user) {
        User dbUser = userMapper.selectByUsername(user.getUsername());
        if (dbUser == null){
            throw new CustomException(ResponseMsg.USER_NOT_EXIST);
        }else {
            if(!user.getPassword().equals(dbUser.getPassword())){
                throw new CustomException(ResponseMsg.PASSWORD_ERROR);
            }
        }
        String token = TokenUtil.getToken(dbUser);
        dbUser.setToken(token);
        return ResponseData.success(dbUser);
    }

    @Override
    public ResponseData edit(User user) {
        return ResponseData.success(userMapper.updateById(user));
    }
}

在调试前后端通信得时候，一定要学会浏览器F12功能里面得网络