vue的搭建

最新推荐文章于 2024-07-10 01:10:32 发布

暹罗猫～

最新推荐文章于 2024-07-10 01:10:32 发布

阅读量97

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_55695456/article/details/130743113

版权

本文展示了如何使用GET和POST方法实现前后端接口。GET接口用于分页查询用户列表，接受query、current和limit参数，而POST接口用于添加新用户，接收User对象作为请求体。在后台，接口调用相应的服务进行数据操作并返回响应结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端接口

get中带有参数

 @ApiOperation(value = "分页查询")
    @GetMapping()
    public R<Page> getUserList(@RequestParam(name = "query", required = false) String query,
                                  @RequestParam(name = "current", required = true) Long current,
                                  @RequestParam(name = "limit", required = true) Long limit) {
        LambdaQueryWrapper<User> qw = new LambdaQueryWrapper<>();
        qw = qw.or().like(query != null,User::getUsername,query)
                .or().like(query != null,User::getPhone,query);
        Page<User> ipage = new Page<>(current, limit);
        Page<User> page = userService.page(ipage,qw);

        return R.success(page);
    }

async getUserList() {
            const { data: res } = await this.$http.get('user', { params: this.queryInfo })
            console.log(res)
            if (res.code != 200) return this.$message.error("获取用户列表失败")
            this.userList = res.data.records
            this.total = res.data.total
        },

post提交

async addSubmit() {
            this.addDialogVisible = false;
            const {data: res} = await this.$http.post('user', this.addForm)
            if (res.code != 200) return this.$message.error("添加用户失败")
            this.getUserList()
            this.$message.success("添加用户成功")
            
        }

@ApiOperation(value = "添加用户")
    @PostMapping
    public R saveUser(@RequestBody User user) {
        userService.save(user);
        return R.success("添加用户成功");
    }