09 用户模块实现

已于 2022-01-24 09:07:19 修改
阅读量490 收藏 2
点赞数
文章标签： spring
于 2021-12-05 00:18:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whatfuswd/article/details/121720544
版权

1 用户管理

1.1 用户列表展现

1.1.1 页面JS分析

  1. 生命周期函数
//利用钩子函数实现数据查询
    mounted(){
      this.getUserList()
    }
  1. 获取数据函数分析
 	 async getUserList(){
        const {data: result} = await this.$http.get('/user/list',{
           params: this.queryInfo
        })
        if(result.status !== 200) return this.$message.error("用户列表查询失败")
        this.userList = result.data.rows
        this.total = result.data.total
        console.log("总记录数:"+this.total)
      },

1.1.2 业务接口说明

  • 请求路径: /user/list
  • 请求类型: GET
  • 请求参数: 后台使用PageResult对象接收
  • 请求案例: http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
参数名称参数说明备注
query用户查询的数据可以为null
pageNum分页查询的页数必须赋值不能为null
pageSize分页查询的条数必须赋值不能为null
  • 响应参数: SysResult对象 需要携带分页对象 PageResult
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据返回值PageResult对象
  • PageResult 对象介绍
参数名称参数类型参数说明备注
queryString用户查询的数据可以为null
pageNumInteger查询页数不能为null
pageSizeInteger查询条数不能为null
totalLong查询总记录数不能为null
rowsObject分页查询的结果不能为null
  • 返回值效果
{"status":200,
  "msg":"服务器调用成功!",
  "data":
	{"query":"",
	"pageNum":1,
	"pageSize":2,
	"total":4,
	"rows":[
		{"created":"2021-02-18T11:17:23.000+00:00",
		 "updated":"2021-03-26T06:47:20.000+00:00",
		 "id":1,
		 "username":"admin",
		 "password":"a66abb5684c45962d887564f08346e8d",
		 "phone":"13111112222",
		 "email":"1235678@qq.com",
		 "status":true,
		 "role":null
		 },
		{"created":"2021-02-18T11:17:23.000+00:00",
		"updated":"2021-03-13T08:50:30.000+00:00",
		"id":2,
		"username":"admin123",
		"password":"a66abb5684c45962d887564f08346e8d",
		"phone":"13111112223",
		"email":"1235678@qq.com",
		"status":false,
		"role":null
		}
		]
	}
}

1.1.3 封装PageResult对象

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class PageResult {   //封装VO对象
    private String query;
    private Integer pageNum;
    private Integer pageSize;
    private Long    total;
    private Object  rows;
}

1.1.4 编辑UserController

/**
     * 业务说明:
     *  1. /user/list
     *  2.请求类型: GET
     *  3.参数接收: 后台使用PageResult对象接收
     *  3.返回值: SysResult<PageResult>
     */
     @GetMapping("/list")
     public SysResult getUserList(PageResult pageResult){//参数3
         //业务查询总数.分页条数.
         pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult);//参数5个
     }

1.1.5 编辑UserService

 /**
     * 要求查询  1页10条
     * 特点: 数组的结果  口诀: 含头不含尾
     * 语  法:  select * from user limit 起始位置,查询的条数
     * 第一页:  select * from user limit 0,10       0-9
     * 第二页:  select * from user limit 10,10      10-19
     * 第三页:  select * from user limit 20,10      20-29
     * 第N页:   select * from user limit (n-1)*10,10
     * @param pageResult
     * @return
     */
    @Override
    public PageResult getUserList(PageResult pageResult) {
        //1.记录总数 total
        long total = userMapper.getTotal();
        //2.分页后的数据
        int size = pageResult.getPageSize();
        int start = (pageResult.getPageNum() - 1) * size;
        List<User> rows = userMapper.findUserListByPage(start,size);
        return pageResult.setTotal(total).setRows(rows);
    }

1.1.6 编辑UserMapper接口

	@Select("select * from user limit #{start},#{size}")
    List<User> findUserListByPage(@Param("start") int start,@Param("size") int size);

1.1.7 页面效果展现

请添加图片描述

2 利用子查询实现左侧菜单列表

2.1 编辑映射文件

2.1.1 子查询Sql语句写法

	/*查询一级菜单信息*/
SELECT * FROM rights WHERE parent_id = 0
/* 查询从表数据 */
SELECT * FROM rights WHERE parent_id = 3

2.1.2 xml映射文件写法

	 <!--利用子查询的方式实现数据获取
        1.查询主表信息
     -->
    <select id="getRightsList" resultMap="rightsRM">
        select * from rights where parent_id = 0
    </select>
    <resultMap id="rightsRM" type="Rights" autoMapping="true">
        <!--主键信息-->
        <id property="id" column="id"></id>
        <collection property="children" ofType="Rights"
                    select="findChildren" column="id"/>
    </resultMap>
    <select id="findChildren" resultType="Rights">
        select * from rights where parent_id = #{id}
    </select>

3 用户模块管理

3.1 分页查询补充

3.1.1 用户需求说明

说明: 用户的文本输入框,可能有值,也可能没有数据. 则在后端服务器中应该使用动态Sql的方式实现数据的查询.请添加图片描述

3.1.2 编辑UserController

 /**
     * 业务说明:
     *  1. /user/list
     *  2.请求类型: GET
     *  3.参数接收: 后台使用PageResult对象接收
     *  3.返回值: SysResult<PageResult>
     */
     @GetMapping("/list")
     public SysResult getUserList(PageResult pageResult){//参数3
         //业务查询总数.分页条数.
         pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult);//参数5个
     }

3.1.3 编辑UserService

 @Override
    public PageResult getUserList(PageResult pageResult) {
        //1.记录总数 total
        long total = userMapper.getTotal();
        //2.分页后的数据
        //2.1获取每页条数
        int size = pageResult.getPageSize();
        //2.2获取起始位置
        int start = (pageResult.getPageNum() - 1) * size;
        //2.3 获取用户查询的数据
        String query = pageResult.getQuery();
        List<User> rows = userMapper.findUserListByPage(start,size,query);
        return pageResult.setTotal(total).setRows(rows);
    }

3.1.4 编辑UserMapper

  1. 编辑Mapper接口
List<User> findUserListByPage(@Param("start") int start,
                                  @Param("size") int size,
                                  @Param("query") String query);
  1. 编辑UserMapper.xml 映射文件
<mapper namespace="com.jt.mapper.UserMapper">
    <!--
        resultType: 适合单表查询
        resultMap:  1.多表关联查询  2.字段名称和属性不一致的时候使用
        if 判断条件
               test="query !=null and query !='' 表示同时不满足时条件成立
    -->
    <select id="findUserListByPage" resultType="User">
        select * from user
            <where>
                <if test="query !=null and query !='' ">username like "%"#{query}"%"</if>
            </where>
        limit #{start},#{size}
    </select>
</mapper>

3.2 完成状态修改

3.2.1 业务说明

说明: 通过开关 控制数据库中的 status=true/false 数据库中显示1/0 1/0 与 true/false 对象映射可以互相转化.
根据用户的ID 实现状态的修改.请添加图片描述

3.2.2 前端JS分析

  1. 知识点
    作用域插槽: 一般在表格数据展现时,可以动态获取当前行对象.
    用法:
    1.template
    2.slot-scope属性=“变量”

  2. 页面JS分析

 		   <el-table-column prop="status" label="状态">
              <!-- <template slot-scope="scope">
                  {{scope.row.status}}
              </template> -->
             <template slot-scope="scope">
                <el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
                  active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
             </template>
           </el-table-column>
  1. 页面函数说明
	async updateStatus(user){
         //实现用户状态修改  注意使用模版字符串  ES6中提出的新用法 ${key}
        //const {data: result} = await this.$http.put('/user/status/'+user.id+'/'+user.status)
        const {data: result} = await this.$http.put(`/user/status/${user.id}/${user.status}`)
        if(result.status !== 200) return this.$message.error("用户状态修改失败!")
        this.$message.success("用户状态修改成功!")
      },

3.2.3 业务接口文档说明

  • 请求路径 /user/status/{id}/{status}
  • 请求类型 PUT
  • 请求参数: 用户ID/状态值数据
参数名称参数类型参数说明备注信息
idInteger用户ID号不能为null
statusboolean参数状态信息不能为null
  • 返回值结果: SysResult对象
{"status":200,"msg":"服务器调用成功!","data":null}

3.2.4 编辑UserController

/**
     * 业务: 实现用户状态的修改
     * 参数: /user/status/{id}/{status}
     * 返回值: SysResult对象
     * 类型:   put 类型
     */
    @PutMapping("/status/{id}/{status}")
    public SysResult updateStatus(User user){

        userService.updateStatus(user);
        return SysResult.success();
    }

3.2.5 编辑UserService

 //更新操作时修改 status/updated 更新时间
    @Override
    public void updateStatus(User user) {
        user.setUpdated(new Date());
        userMapper.updateStatus(user);
    }

3.2.6 编辑UserMapper

	@Update("update user set status = #{status},updated = #{updated} where id=#{id}")
	void updateStatus(User user);

3.3 用户新增操作

3.3.1 页面JS分析

  1. 编辑新增页面
    请添加图片描述

  2. 新增页面JS分析
    请添加图片描述

3.3.2 新增业务接口说明

  • 请求路径 /user/addUser
  • 请求类型 POST
  • 请求参数: 整个form表单数据封装为js对象进行参数传递
参数名称参数类型参数说明备注
usernameString用户名不能为null
passwordString密码不能为null
phoneString电话号码不能为null
emailString密码不能为null
  • 返回值结果: SysResult对象
{"status":200,"msg":"服务器调用成功!","data":null}

3.3.3 编辑UserController

/**
     * 业务: 实现用户新增操作
     * url:  /user/addUser   post类型
     * 参数: 使用User对象接收
     * 返回值: SysResult对象
     */
    @PostMapping("/addUser")
    public SysResult addUser(@RequestBody User user){

        userService.addUser(user);
        return SysResult.success();
    }

3.3.4 编辑UserService

 /**
     * 1.密码进行加密
     * 2.添加状态码信息
     * 3.添加创建时间/修改时间
     * 4.完成入库操作 xml方式
     * @param user
     */
    @Override
    public void addUser(User user) {
        //1.密码加密处理
        Date date = new Date();
        String md5Pass = DigestUtils.md5DigestAsHex(user.getPassword().getBytes());
        user.setPassword(md5Pass)
                .setStatus(true)
                .setCreated(date)
                .setUpdated(date); //最好保证时间唯一性.
        userMapper.addUser(user);
    }

3.3.5 编辑UserMapper/xml映射文件

  1. 编辑mapper接口
 	void addUser(User user);
  1. 编辑xml映射文件
 <!--完成用户新增操作-->
    <insert id="addUser">
        insert into user(id,username,password,phone,email,status,created,updated)
                value
                        (null,#{username},#{password},#{phone},#{email},#{status},#{created},#{updated})
    </insert>

3.4 修改操作数据回显

3.4.1 页面JS分析

  1. 按钮点击事件
<el-button type="primary" icon="el-icon-edit" size="small" @click="updateUserBtn(scope.row)"></el-button>
  1. 数据回显JS
	async updateUserBtn(user){
        this.updateDialogVisible = true
        const {data: result} = await this.$http.get("/user/"+user.id)
        if(result.status !== 200) return this.$message.error("用户查询失败")
        this.updateUserModel = result.data
      },

3.4.2 页面接口文档

  • 请求路径: /user/{id}
  • 请求类型: GET
  • 返回值: SysResult对象
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据返回user对象
  • JSON格式如下:
{
 "status":200,
 "msg":"服务器调用成功!",
 "data":{
	 "created":"2021-02-18T11:17:23.000+00:00",
	 "updated":"2021-05-17T11:33:46.000+00:00",
	 "id":1,
	 "username":"admin",
	 "password":"a66abb5684c45962d887564f08346e8d",
	 "phone":"13111112222",
	 "email":"1235678@qq.com",
	 "status":true,
	 "role":null
	 }
 }

3.4.3 编辑UserController

 /**
     * 根据ID查询数据库
     * URL:/user/{id}
     * 参数: id
     * 返回值: SysResult(user对象)
     */
    @GetMapping("/{id}")
    public SysResult findUserById(@PathVariable Integer id){

        User user = userService.findUserById(id);
        return SysResult.success(user);
    }

3.4.4 编辑UserService

 @Override
    public User findUserById(Integer id) {

        return userMapper.findUserById(id);
    }

3.4.5 编辑UserMapper

	//原理: mybatis在进行单值传递时(int等基本类型/string) 取值时名称任意
    //     底层通过下标[0]获取的数据和名称无关.
    @Select("select * from user where id=#{id}")
    User findUserById(Integer id);

3.4.6 页面效果展现

请添加图片描述

3.5 实现用户的更新操作

3.5.1 页面JS分析

  1. 页面JS
    请添加图片描述

  2. 发起Ajax请求
    请添加图片描述

3.5.2 修改的业务接口

  • 请求路径: /user/updateUser
  • 请求类型: PUT
  • 请求参数: User对象结构
参数名称参数说明备注
ID用户ID号不能为null
phone手机信息不能为null
email邮箱地址不能为null
  • 返回值: SysResult对象
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据null
  • JSON格式如下:
{
 "status":200,
 "msg":"服务器调用成功!",
 "data":{}
 }

3.5.3 编辑UserController

/**
     * 业务说明: 实现数据的修改操作
     * URL:  /user/updateUser
     * 参数:  user对象
     * 返回值: SysResult对象
     * 请求类型: PUT
     */
    @PutMapping("/updateUser")
    public SysResult updateUser(@RequestBody User user){

        userService.updateUser(user);
        return SysResult.success();
    }

3.5.4 编辑UserService

//id/phone/email
    @Override
    public void updateUser(User user) {

        userMapper.updateUser(user);
    }

3.5.5 编辑UserMapper

 @Update("update user set phone=#{phone},email=#{email} where id=#{id}")
    void updateUser(User user);

3.6 用户删除操作

3.6.1 页面JS修改

请添加图片描述

3.6.2 删除业务接口文档

  • 请求路径: /user/{id}
  • 请求类型: delete
  • 请求参数:
参数名称参数说明备注
ID用户ID号不能为null
  • 返回值: SysResult对象
参数名称参数说明备注
status状态信息200表示服务器请求成功 201表示服务器异常
msg服务器返回的提示信息可以为null
data服务器返回的业务数据null

3.6.3 编辑UserController

 /**
     * 关于请求的小结
     *    1.常规请求方式 get/delete   ?key=value&key2=value2
     *    2.post/put    data: JS对象    后端接收@RequestBody
     *    3.restFul风格  /url/arg1/arg2/arg3   使用对象接收
     * 完成用户删除操作
     *  1.URL地址 /user/{id}
     *  2.参数:  id
     *  3.返回值: SysResult
     */
    @DeleteMapping("/{id}")
    public SysResult deleteUserById(@PathVariable Integer id){

        userService.deleteUserById(id);
        return SysResult.success();
    }

3.6.4 编辑UserService

@Override
    public void deleteUserById(Integer id) {

        userMapper.deleteUserById(id);
    }

3.6.5 编辑UserMapper

 	@Delete("delete from user where id=#{id}")
    void deleteUserById(Integer id);
蟑螂恶霸不是恶霸
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用户管理模块设计与实现
11-02
针对电子商务系统的需求，用户信息管理模块的设计与实现
简单实现 用户模块
BF-Lone Silver Wind 的博客
07-13 582
博客项目准备 + 用户模块 简单实现 博客项目 具体功能 1、增删改查 2、免登录: cookie 与 session 3、非法登录: 过滤器 4、分页: 5、ajax： 操作表格 6、文件上传 7、富文本编辑器 技术运用 1、jsp&servlet 2、jquery 及插件 3、UEditor 4、log4j 5、junit 开发环境 ...
用户模块开发
最新发布
yeliuhuo的博客
05-26 319
在接口声明了方法，那下一步自然就是在接口实现类对方法进行实现，在service包下创建impl包作为接口实现类包，impl包中创建UserServiceImpl类作为IUserService接口的实现类。在portal包下创建UserController类作为用户控制类，用@Controller、@RequestMapping("/user/")注释类名，前者使该类将被Spring容器作为一个Spring MVC控制器来处理HTTP请求，后者指定与用户相关的请求路径。
用户模块的实现和首页的开发(二)
分享学习编程中的遇到的问题,总结平时的笔记
11-05 593
用户模块的实现和首页的开发
CGB2107-Day11-完成用户模块实现-MybatisPlus
qq_16804847的博客
10-11 8101
1.路由配置 子级路由写法 2.用户列表展现 分页查询 VO 3.用户列表CURD操作 4.MP入门(单表查询再也不需要写Sql)
CGB2108-Day11-用户模块实现
qq_16804847的博客
11-09 5819
1.用户模块管理
C#登录模块【用户控件实现】
06-25
1、C#实现的登录模块，适合新手学习如何使用用户控件开发 2、代码中实现了不同等级人员登录的权限，封装成用户控件的DLL，可移植使用 3、该Demo需要用户在主程序中注册用户控件的事件，实现密码验证部分，通过返回值...
ThinkPHP实现用户注册和登录模块
05-29
ThinkPHP实现用户注册、登录模块 一、 开发环境 1、环境搭建：Windows 7+Apache 2.4.18+MySQL 5.7.11+PHP 7.1.0。 2、文本编辑器：Sublime 3。 二、主要技术 本案例主要使用ThinkPHP 3.2.3框架和PHP 7中的PDO数据...
用户登陆模块设计与实现
11-02
用户登陆模块是电子商务系统中一个非常重要的组件，其主要功能是实现网站的分角色管理，保护网站资源的安全。下面我们将详细介绍用户登陆模块的设计与实现。 一、用户登陆模块的设计原则 用户登陆模块的设计需要...
javaweb用户模块
11-16
javaweb开发中，用户模块的基本实现：登陆，注册，注销。 页面没有经css+div的设计，因为主要考虑实现功能就行。 如需设计出优美的画面，请自行设计。 没有引进验证码。 但附上验证码文件，使用者如需可以运用所学...
分页工具类
11-27
/** * 分页查询 */ @RequestMapping("queryPageList") @ResponseBody public PageResult queryPageList(Integer page,Integer rows, User user) { return userService.queryPageList(page,rows,user); } service 实现类 public PageResult queryPageList(Integer page, Integer rows, User user) { PageResult pageResult = new PageResult(); HashMap<String, Object> hashMap = new HashMap<String, Object>(); hashMap.put("userBean", user); //查询条数 int count=userMapper.querygetCount(hashMap); pageResult.setTotal(count); PageUtil<User> pageUtil = new PageUtil<User>(count, page, rows); hashMap.put("startIndex", pageUtil.getStartIndex()); hashMap.put("endIndex", pageUtil.getEndIndex()); List<User> list = userMapper.queryPageList(hashMap); pageResult.setRows(list); return pageResult; }
创建多模块实现登陆以及用户信息的增删查改
qq_41411003的博客
07-02 367
首先建立四个模块，目录如下： 每个模块下的目录类似： 配置最外层的pom.xml 各个模块中的类和接口 UserInfo package com.whut.bean; public class UserInfo { private int id; private String username; private String password; publ...
用户模块Web层开发
felix_alone2012的博客
09-09 81
以往我们在开发Web组件时，我们只管实现controller。这里小卷给大家一个更优雅的实现方式，我们为controller抽取出接口，俗称web层的api。import ...// 给管理员一个单独的登录入口说明这里我们将REST API接口定义和Controller接口实现进行了分离。这样我们从接口签名中很容易就能看到这个接口是干嘛的，一目了然，这里我们注入了来进行http会话的相关操作。除了这种注入外，我们还可以借助Filter和。
六、模块实现：用户管理模块（1）
jiantsing的专栏
09-05 4997
用户管理模块 配置类 首先，在包“com.example.demo”中新建一个“MybatisPlusConfig”类（在这个类中还可以对mybatis-plus进一步进行配置，本例中启用了分页插件），代码如下： package com.example.demo; import org.springframework.context.annotation.Bean;...
基于SpringBoot的电子商城项目开发 （2）用户功能模块
qq_45331721的博客
10-22 1072
三：功能模块实现 功能模块一共可分为用户功能模块、商品分类模块、商品模块、购物车模块、订单模块五个功能模块，具体实现细节如下： 1：用户功能模块 用户功能模块包括以下接口：在功能实现之前需要创建自定义异常包，包下含有普通异常类（供在service层中调用，作用为调用自定义枚举类）和自定义异常枚举类（controller中直接使用）； 1）、注册新用户接口文档如下： 注册功能实现时需要创建一个工具类MD5用于密码加密（ps：为防止被破解可在密码后加入固定值SALT再...
JavaWeb项目练习--环境搭建、用户模块、
一万年行不行的博客
09-21 1154
ywnbxn网上书城。 一、搭建环境 1.导入原型：复制原型中的src、webRoot。 用户模块 分类模块 图书模块 购物车模块 订单模块 二、功能分析 前台 1)用户模块： 注册、 激活 、登录 、退出 2)分类模块： 查看所有分类 3)图书模块： 查询所有图书、 分类查询图书、 查询图书详细（按id查） 4)购物车模块： 添加购物车条目、 清...
Spring项目开发-用户模块登录功能开发
qq_27565603的博客
03-20 1319
用户登录功能主要包含了验证用户是否存在，用户密码是否正确，以及将当前用户信息记录在session里。 1.首先创建UserController，在controller里添加登录接口，传递参数username, password, session。添加@RequestMapping注解，设置属性value为请求的地址，method设置请求类型为POST；添加@RequestBody注解，将返回值自动将返回值序列化为json。 2.在service包下创建IUserService接口，声明login方法，传入u
用户注册模块详解（30）
weixin_30448603的博客
06-19 448
由于工作需要，对方要求me做个模块或者其他实体东西，于是就选择了大家经常用到的用户注册模块，废话不多说先看效果图，没有经过任何美工处理，效果一般，效果图： 在设计注册模块之前需要先知道此模块的工作流程，即各个控件的用途，比如使用验证控件，电话号码的验证需要正则表达式，邮箱也是，主要还是控件与SQL的交互。 html代码： <head runat="server"> ...
使用element ui实现用户管理模块
05-13
在使用element ui实现用户管理模块的过程中，可以通过element ui提供的组件、插件和样式等工具来快速构建出一个美观、功能完备的用户管理页面。首先，可以使用element ui的表格组件来展示用户列表，并通过自定义列头...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值