三阶段--day10--用户管理实现/分页查询/修改用户状态/新增用户

于 2021-08-06 09:13:29 发布
阅读量479 收藏
点赞数
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58580280/article/details/119444040
版权

目录

一 用户管理的实现

1 用户管理后台搭建

1.1 表设计

         1.2 User的POJO类设计

1.3 页面调用JS流程---user.vue

1.4 用户查询的业务接口文档

1.5 在VO层封装PageResult类-对象

1.6 编辑UserController

1.7 编辑UserServicImpl

1.8 编辑UserMapper

二 MP方式实现分页查询(API调用!!!)

2.1 编辑UserServiceImpl

2.2 编辑配置类 

2.3 分页后的结果

 三 用户状态修改

3.1 业务接口文档

3.2 页面JS的了解分析

3.3 后台编辑UserController

3.4 编辑UserServiceImpl

四 用户新增

4.1 用户JS分析(了解)

4.2 业务接口文档说明

 4.3 后台编辑UserController

4.4 编辑UserService及实现类

一 用户管理的实现

1 用户管理后台搭建

1.1 表设计

在这里插入图片描述

1.2 User的POJO类设计

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @author 刘昱江
 * 时间 2021/2/2
 */
@TableName("user")//对象与表一一对应,注意大小写
@Data
@Accessors(chain = true)
public class User extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Integer id;//主键自增
    private String username;
    private String password;
    private String phone;
    private String email;
    private Boolean status;
    @TableField(exist = false)  //该属性不存在
    private Role role;  //定义role角色数据
}

1.3 页面调用JS流程---user.vue

1)生命周期函数

在这里插入图片描述

 2)属性

<script>
  export default {
    data(){
      return {
        userinfo: {
          query: '',
          pageNum: 1,
          pageSize: 5
        },
        total: 0,
        userList: []
      }
    },

3)getUserList()函数定义

 methods: {
      async getUserList(){
        const {data: result} = await this.$http.get("/user/list",{
          params: this.userinfo
        })
        if(result.status !== 200) return this.$message.error("用户数据查询失败")
        this.userList = result.data.rows
        this.total = result.data.total
      },

1.4 用户查询的业务接口文档

  • 请求路径: /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.5 在VO层封装PageResult类-对象

说明: 该对象主要的作用,封装分页后的结果 其中的数据需要在业务层 赋值.最后由SysResult对象 携带返回给用户.

@Data
@Accessors(chain = true)
public class PageResult {
    private String  query;   //用户查询的数据
    private Integer pageNum; //页数
    private Integer pageSize;//每页的条数
    private Long    total;   //总记录数
    private Object  rows;    //分页后的结果
}

1.6 编辑UserController

 /**
     * 业务: 实现用户列表的分页查询
     * 类型: GET
     * URL:  /user/list
     * 参数:  PageResult对象进行接收  传递了3个参数
     * 返回值: SysResult对象(PageResult对象) 返回5个
     */
    @GetMapping("/list")
    public SysResult getUserList(PageResult pageResult){//3个

        //通过业务处理 获取总数/分页后的结果
        pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult); //5个
    }

1.7 编辑UserServicImpl

重写控制层中getUserList(pageResult)方法,有两种方法:

  1. 在业务层实现类建立一个方法,持久层进行手写SQL语句的查询方法
  2. 在业务层实现类使用MP的方式进行查询--写法在第2段MP方式实现分页查询(API调用!!!)
 /**
     * 需求: 进行分页查询   总数 分页后的结果
     * 知识铺垫:  每页20条
     *      Sql: select * from user limit 起始位置,每页条数
     *      第一页:
     *          select * from user limit 0,20  下标[0-19]
     *      第二页:
     *          select * from user limit 20,20 下标[20-39]
     *      第三页:
     *          select * from user limit 40,20 下标[40-59]
     *      第N页:
     *          select * from user limit (n-1)*rows,rows
     * @param pageResult
     * @return
     *  方法实现:
     *          1.手写Sql
     *          2.利用MP方式实现
     */
    @Override
    public PageResult getUserList(PageResult pageResult) {
        //根据参数动态的执行分页查询!!!!
        int start = (pageResult.getPageNum()-1) * pageResult.getPageSize();
        int size = pageResult.getPageSize();
        List<User> userList = userMapper.findUserListByPage(start,size);
        //获取全部记录的总数  利用java 自动拆装箱的规范
        long total = userMapper.selectCount(null);

        return pageResult.setTotal(total).setRows(userList);
    }

1.8 编辑UserMapper

在持久层重写findUserListByPage(start,size),手写SQL语句

/**
 * @author 刘昱江
 * 时间 2021/2/2
 */
public interface UserMapper extends BaseMapper<User> {
    /**
     *  如果Sql语句比较简单,可以通过直接注解开发.
     *     @Select("Sql!!!!!")
     *     @Insert("sql")
     *     @Update("sql")
     *     @Delete("sql")
     * @param start
     * @param size
     * @return
     */
    @Select("select * from user limit #{start},#{size}")
    List<User> findUserListByPage(Integer start, Integer size);
}

重启服务器,刷新项目的home页面,点击用户列表查看效果:

二 MP方式实现分页查询(API调用!!!)

2.1 编辑UserServiceImpl

效果和手写sql语句的方式一样

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import com.jt.vo.PageResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;
import org.springframework.util.StringUtils;

import java.util.List;
import java.util.UUID;

/**
 * @author 刘昱江
 * 时间 2021/5/11
 */
@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }

    //登录
    @Override
    public String login(User user) {
        String password = user.getPassword();
        byte[] passwordBytes = password.getBytes();
        String md5Pass = DigestUtils.md5DigestAsHex(passwordBytes);
        user.setPassword(md5Pass);

        QueryWrapper<User> userQueryWrapper = new QueryWrapper<>(user);
        User user1 = userMapper.selectOne(userQueryWrapper);
        if (user1 == null){
            return null;
        }
        String token = UUID.randomUUID().toString().replace("-","");

        return token;
    }

    //用户列表分页查询
    @Override
    public PageResult getUserList(PageResult pageResult) {
//        int start = (pageResult.getPageNum() - 1) * pageResult.getPageSize();
//        int size = pageResult.getPageSize();
//        List<User> userList=userMapper.findUserListByPage(start,size);
//        long total = userMapper.selectCount(null);//全部记录
//        return pageResult.setTotal(total).setRows(userList);
        int pageNum = pageResult.getPageNum();//获取页面
        int pageSize = pageResult.getPageSize();//获取页面条数
        Page<User> page = new Page<>(pageNum, pageSize);

        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        //判断用户是否传参
        boolean flag = StringUtils.hasLength(pageResult.getQuery());
        queryWrapper.like(flag,"username",pageResult.getQuery());
        //规则: page2个参数 根据分页查询返回 total/分页后的记录 4个参数
        page = userMapper.selectPage(page,queryWrapper);
        //根据分页对象获取记录
        List<User> userList = page.getRecords();
        //根据分页对象获取总数
        long total = page.getTotal();
        //封装VO对象 返回数据
        pageResult.setTotal(total).setRows(userList);
        return pageResult;
    }
}

页面效果:

2.2 编辑配置类 

说明:MP如果需要进行分页的查询,则必须添加配置类,否则分页不能正常执行.
关于配置类的说明:
SpringBoot整合第三方框架时,提供了配置类的机制, 通过这种机制,第三方框架可以实现定制化的对象的创建.

com.jt包下创建com.jt.config包,再创建配置类MybatisPlusConfig

//1.表示这个类 是一个配置类  目的: 封装对象-交给Spring容器管理
@Configuration
public class MybatisPlusConfig {

    // @Bean 将方法的返回值对象,交给Spring容器管理
    //MP分页机制  Mysql分页语句/Oracle分页语句  为了实现功能复用 需要手动配置
    //根据数据库类型不同 之后动态的生成Sql  MP才能调用分页对象
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        //定义分页拦截器对象
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
        return interceptor;
    }

}

2.3 分页后的结果

注意:如果user表的数据不够,就不会分页,需要手动再user表多添加几个数据,重启服务器,刷新页面就有效果了,分成了两页

在这里插入图片描述

 搜索框可以根据username查询,包括模糊查询也可以

 三 用户状态修改

3.1 业务接口文档

说明: 用户通过开关 控制 状态 true/false 在数据库中 存储true 用1, 存储false 用0

用户状态为true,该用户才能登录;为false,该用户即使密码正确也无法登录

在这里插入图片描述

3.2 页面JS的了解分析

说明:如果修改状态信息,则必须获取当前行的数据,id和status

作用于插槽:一般在表格循环遍历时,如果需要获取当前行的数据,则采用作用域插槽的方式.

作用域插槽用法:

在这里插入图片描述

 发起Ajax请求:

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.3 后台编辑UserController

  /*url:/user/status/{id}/{status}
    * 参数:id主键 status状态信息true/false
    * 返回值:SysResult对象,没有业务参数
    * */

    @PutMapping("/status/{id}/{status}")
    public SysResult updateStatus(User user){//restFul风格多个数据可以统一成对象

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

    }
}

3.4 编辑UserServiceImpl

控制层定义updateStatus(user)方法,业务层接口补充抽象方法,业务层实现类进行方法的重写

  //用户状态修改
    //user对象有效数据 id=xxx,status=true/false
    @Override
    public void updateStatus(User user) {
        //根据其中不为null的元素当做set条件,id当做唯一的where条件
        userMapper.updateById(user);
    }

效果:页面点击状态的修改按钮,数据库指定id对应的status字段状态会修改0/1

作用:是为了限制指定用户及密码可不可以登录,状态为true就允许登录,为false就不允许登录,用于封号

四 用户新增

4.1 用户JS分析(了解)

//校验用户数据
      addUserBtn(){
        this.$refs.addUserRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          //console.log(this.addUserModel)
          const {data: result} = await this.$http.post('/user/addUser',this.addUserModel)
          if(result.status !== 200) return this.$message.error("用户新增失败")
          this.$message.success("用户新增成功")
          //关闭对话框
          this.dialogVisible = false
          //重新获取用户列表
          this.getUserList()

        })
      },

4.2 业务接口文档说明

在这里插入图片描述

 4.3 后台编辑UserController

 /*业务:实现用户新增
    * url:/user/addUser
    * 类型:post类型
    * 参数:整合form表单数据,json串转成js对象接收
    * */
    @PostMapping("/addUser")
    public SysResult addUser(@RequestBody User user){
        userService.addUser(user);
        return SysResult.success(user);
    }

4.4 编辑UserService及实现类

 //新增用户信息
    /*新增入库:
    *       1.密码需要加密处理
    *       2.应该赋值默认状态 true
    *       3.需要添加时间  创建/修改*/
    @Override
    public void addUser(User user) {
        //1.密码加密
        byte[] bytes = user.getPassword().getBytes();
        String md5Pass = DigestUtils.md5DigestAsHex(bytes);
        user.setPassword(md5Pass);
        //2.添加默认状态
        user.setStatus(true);
        //3.添加时间 目的保证时间统一
        Date date =new Date();
        user.setCreated(date).setUpdated(date);
        //4.实现入库
        userMapper.insert(user);
    }

页面效果:点击添加按钮,弹出新增用户的框

添加号信息后,可以查询到信息

 

心猿意码~~
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值