【尚庭公寓SpringBoot + Vue 项目实战】用户管理(十五)

【尚庭公寓SpringBoot + Vue 项目实战】用户管理(十五)


1、业务介绍

用户管理共包含两个接口

  1. 根据条件分页查询用户列表
  2. 根据ID更新用户状态
2、接口实现
2.1、根据条件分页查询用户列表

查看接口

image-20240617150610462

请求信息:

  • 请求方法: GET
  • 请求路径: /admin/user/page
  • 请求内容类型: application/x-www-form-urlencoded

请求参数:

参数名称参数位置是否必须数据类型参数说明
currentquerytrueinteger当前页号
sizequerytrueinteger每页显示条数
phonequeryfalsestring用户手机号
statusqueryfalsestring用户审核状态

响应状态码:

状态码说明
200OK

响应参数:

  • 响应体: ResultPageUserInfo
  • 响应参数说明:
实体名称参数名称参数说明数据类型
codecode响应码integer
messagemessage响应消息string
datadata数据IPageUserInfo
sizesize每页显示条数integer
currentcurrent当前页号integer
totaltotal总记录数integer
pagespages总页数integer
recordsrecords用户信息数组array

代码开发

查看请求的数据结构

currentsize为分页相关参数,分别表示当前所处页面每个页面的记录数

UserInfoQueryVo为用户的查询条件,详细结构如下:

@Schema(description = "用户信息查询实体")
@Data
public class UserInfoQueryVo {

    @Schema(description = "用户手机号码")
    private String phone;

    @Schema(description = "用户账号状态")
    private BaseStatus status;
}

编写Controller层逻辑

UserInfoController中增加如下内容

@Operation(summary = "分页查询用户信息")
@GetMapping("page")
public Result<IPage<UserInfo>> pageUserInfo(@RequestParam long current, @RequestParam long size, UserInfoQueryVo queryVo) {

    IPage<UserInfo> page = new Page<>(current, size);
    LambdaQueryWrapper<UserInfo> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.like(queryVo.getPhone() != null, UserInfo::getPhone, queryVo.getPhone());
    queryWrapper.eq(queryVo.getStatus() != null, UserInfo::getStatus, queryVo.getStatus());
    IPage<UserInfo> list = service.page(page, queryWrapper);
    return Result.ok(list);
}

解释:

  • LambdaUpdateWrapper: 用于构建更新条件的包装器。

  • eq: 添加一个等值条件,表示更新操作只会影响满足该条件的记录。

  • set: 设置要更新的字段及其新值。

  • userInfoService.update: 调用服务层的方法执行更新操作。

  • Result.ok(): 返回一个表示成功的结果对象。

知识点

password字段属于敏感信息,因此在查询时应过滤掉,可在UserInfo实体的password字段的@TableField注解中增加一个参数select=false来实现。

@Schema(description = "密码")
@TableField(value = "password",select = false)
private String password;
2.2、根据ID更新用户状态

查看接口

image-20240617151011856

请求信息:

  • 请求方法: POST
  • 请求路径: /admin/user/updateStatusById
  • 请求内容类型: application/x-www-form-urlencoded

请求参数:

参数名称参数位置是否必须数据类型参数说明
idquerytrueinteger(int64)用户ID
statusquerytruestring用户状态

响应状态码:

状态码说明
200OK

响应参数:

  • 响应体: Result
  • 响应参数说明:
参数名称参数说明数据类型
code响应码integer(int32)
message响应消息string
data数据object

响应示例:

{
  "code": 0,
  "message": "",
  "data": {}
}

代码开发

UserInfoController中增加如下内容

@Operation(summary = "根据用户id更新账号状态")
@PostMapping("updateStatusById")
public Result updateStatusById(@RequestParam Long id, @RequestParam BaseStatus status) {
    LambdaUpdateWrapper<UserInfo> updateWrapper = new LambdaUpdateWrapper<>();
    updateWrapper.eq(UserInfo::getId,id);
    updateWrapper.set(UserInfo::getStatus,status);
    userInfoService.update(updateWrapper);
    return Result.ok();
}

解释

  • LambdaUpdateWrapper: 用于构建更新条件的包装器。
  • eq: 添加一个等值条件,表示更新操作只会影响满足该条件的记录。
  • set: 设置要更新的字段及其新值。
  • userInfoService.update: 调用服务层的方法执行更新操作。
  • Result.ok(): 返回一个表示成功的结果对象。
  • 13
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
### 回答1: springboot+vue项目实战是一种常见的开发模式,它将后端的业务逻辑和前端的用户界面分离开来,使得开发更加高效和灵活。在这种模式下,后端使用springboot框架进行开发,前端使用vue框架进行开发,两者通过RESTful API进行通信。这种模式具有易于维护、易于扩展、易于测试等优点,因此在实际项目中得到了广泛应用。 ### 回答2: SpringBootVue是现代web开发中非常流行的技术栈,他们分别代表了后端和前端的强大。结合起来,可以实现更加灵活和高效的web应用开发。本篇文章将介绍如何用SpringBootVue搭建一个完整的web应用,并展示如何运用他们的优势来提高开发效率和用户体验。 首先是SpringBoot后端的实现。使用SpringBoot可以快速搭建一个轻量级的后端架构,它包含了很多优秀的特性,例如自动配置,简单易用的API,以及集成了很多流行的依赖。开发者只需要一个简单的Maven或Gradle配置就可以开始编写Java代码了。 在实现中,我们使用了一个简单的用户管理系统,它包括了用户注册,登录,以及权限管理等基本功能。我们使用MySQL数据库存储用户信息,同时使用SpringSecurity来处理用户认证和授权。 Vue是一个非常强大的JavaScript框架,它拥有很多出色的特性,例如响应式页面设计,单页面应用等。结合Webpack,Vue可以使用诸如Vue Router,Vuex,Element UI等插件来加速开发。在本项目中,我们使用Vue来实现前端界面,同时使用Vue Router来处理页面路由,Vuex来处理状态管理,以及Element UI来提高视觉效果和交互体验。 最后我们将介绍如何使用SpringBootVue来组合一个完整的web应用。我们将使用axios来发起Ajax请求,同时使用SpringBoot提供的Restful API来处理请求,以及使用Vue显示数据和更新页面。我们也会展示如何使用SpringSecurity来保护API,并如何使用拦截器来控制用户权限。 综合起来,这个项目展示了如何使用SpringBootVue来构建一个完整的web应用,通过它你可以了解到SpringBootVue各自的优点,以及如何合理地结合它们来提高开发效率和用户体验。本项目代码开源可供下载、修改和使用。 ### 回答3: SpringBootVue.js是现在很热门的开发框架,它们都有自己的优势和特点,可以很好地实现前后端分离的开发模式。SpringBoot是一个快速开发框架,可以帮助我们快速搭建后端接口,而Vue.js则是一个轻量级的前端开发框架,可以帮助我们快速搭建前端页面和交互。 SpringBootVue.js可以非常完美地结合起来,形成一个完整的项目。在实践中,我们可以先使用SpringBoot搭建后端接口,然后使用Vue.js搭建前端页面和交互。在前后端分离的开发模式下,前后端的开发可以同时进行,互不干扰,提高了开发效率和代码质量。 具体项目实战中,我们可以根据需求来设计和实现项目。例如,我们可以使用SpringBoot来实现一个简单的登录注册接口,然后使用Vue.js来实现用户登录和注册页面。我们也可以使用SpringBoot实现一个简单的数据接口,然后使用Vue.js来实现数据的展示和交互功能。不管是哪种场景,SpringBootVue.js都可以帮助我们快速搭建一个完整的项目。 在项目实战中,我们还需要注意一些细节和技巧。例如,在使用SpringBoot时,我们应该合理地设计接口和参数,统一返回格式和错误码,便于前端调用和处理。在使用Vue.js时,我们应该注意组件的拆分和复用,尽量避免重复性的代码编写,提高代码的可维护性和可拓展性。同时,我们还应该注意前后端数据的交互和安全性,使用合适的加密和验证方式,避免数据泄露和攻击。 总之,SpringBootVue.js的结合是一个非常不错的选择,通过它们的协作,我们可以快速搭建高效、可维护、安全的项目。在实际项目中,我们需要结合具体场景和需求来设计和实现项目,同时注意细节和技巧,才能取得良好的效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小林学习编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值