0
点赞
收藏
分享

微信扫一扫

CGB2111-Day13-用户模块管理

code_balance 2022-02-22 阅读 56
vue.js前端javascript

文章目录

1.用户模块实现

1.1 VUE中路由说明

1.1.1 路由要素

  1. 定义跳转的标签 用户
  2. 定义路由填充位(路由占位符)
  3. 定义路由机制
    在这里插入图片描述
  4. vue对象挂载路由
    在这里插入图片描述

1.1.2 父子组件跳转

编辑路由 index.js
在这里插入图片描述

1.2 用户列表展现

1.2.1 业务接口说明

  • 请求路径: /user/list
  • 请求类型: GET
  • 请求参数: 后台使用PageResult对象接收
  • 请求案例: http://localhost:8091/user/listquery=查询关键字&pageNum=1&pageSize=10

参数名称

参数说明

备注信息

query

用户查询的数据

可以为null

pageNum

分页查询的页数

必须赋值不能为null

pageSize

分页查询的条数

必须赋值不能为null

  • 响应参数: SysResult对象 需要携带分页对象 PageResult

参数名称

参数说明

备注信息

status

状态信息

200表示服务器请求成功 201表示服务器异常

msg

服务器返回的提示信息

可以为null

data

服务器返回的业务数据

返回值PageResult对象

  • PageResult 对象介绍

参数名称

参数类型

参数说明

备注信息

query

String

用户查询的数据

可以为null

pageNum

Integer

查询页数

不能为null

pageSize

Integer

查询条数

不能为null

total

Long

查询总记录数

不能为null

rows

Object

分页查询的结果

不能为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.2.2 编辑UserController

/**
     * 业务说明: 分页查询用户信息
     * URL:  http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
     * 参数:  ?query=查询关键字&pageNum=1&pageSize=10
     * 返回值: SysResult(PageResult)
     */
     @GetMapping("/list")
     public SysResult findUserList(PageResult pageResult){//3个有值
         //业务层完成 查询总数和记录数的操作
         pageResult = userService.findUserList(pageResult);
         return SysResult.success(pageResult);
     }

1.2.3 编辑UserService

1.定义接口

/**
     * 业务说明: 分页查询用户信息
     * URL:  http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
     * 参数:  ?query=查询关键字&pageNum=1&pageSize=10
     * 返回值: SysResult(PageResult)
     */
     @GetMapping("/list")
     public SysResult findUserList(PageResult pageResult){//3个有值
         //业务层完成 查询总数和记录数的操作
         pageResult = userService.findUserList(pageResult);
         return SysResult.success(pageResult);
     }

  1. 编辑实现类

    /**
    * 业务说明: 需要分页查询
    * java数组取值特点: 含头不含尾
    * Sql: 一页10条
    * select * from user limit 起始位置,查询的条数
    * 第一页:
    * select * from user limit 0,10 真实下标[0-9]
    * 第二页:
    * select * from user limit 10,10
    * 第三页:
    * select * from user limit 20,10
    * 第N页:
    * select * from user limit (n-1)*10,10
    * @param pageResult
    * @return
    */
    @Override
    public PageResult findUserList(PageResult pageResult) {
    int size = pageResult.getPageSize();
    int startNum = (pageResult.getPageNum() - 1) * size;
    String query = pageResult.getQuery();

        return null;
}

1.2.4 编辑UserMapper接口

1.编辑Mapper接口

long findCount(String query);

  1. 编辑Mapper映射文件

    select * from user where username like "%"#{query}"%" limit #{startNum},#{size} 
    <select id="findCount" resultType="long">
    select count(1) from user where username like "%"#{query}"%"
</select>

1.2.5 页面效果展现

在这里插入图片描述

1.3 用户状态的修改

1.3.1 业务接口文档

  • 请求路径 /user/status/{id}/{status}
  • 请求类型 PUT
  • 请求参数: 用户ID/状态值数据

参数名称

参数类型

参数说明

备注信息

id

Integer

用户ID号

不能为null

status

boolean

参数状态信息

不能为null

  • 返回值结果: SysResult对象

    {“status”:200,“msg”:“服务器调用成功!”,“data”:null}

1.3.2 编辑UserController

/**
     * URL:  /user/status/{id}/{status}
     * 参数:  id/status
     * 返回值: SysResult对象
     */
     @PutMapping("/status/{id}/{status}")
     public SysResult updateStatus(User user){

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

1.3.3 编辑UserService

  1. 编辑UserService接口

    void updateStatus(User user);

  2. 编辑UserServiceImpl实现类

    //更新操作 准备修改时间
    @Override
    @Transactional //如果程序运行出现运行时异常,则实现事务回滚
    public void updateStatus(User user) {//2个参数有值
    user.setUpdated(new Date());
    userMapper.updateStatus(user);
    }

1.3.4 编辑UserMapper

  1. 编辑Mapper接口

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

1.4 用户数据新增

1.4.1 业务接口

  • 请求路径 /user/addUser
  • 请求类型 POST
  • 请求参数: 整个form表单数据封装为js对象进行参数传递

参数名称

参数类型

参数说明

备注信息

username

String

用户名

不能为null

password

String

密码

不能为null

phone

String

电话号码

不能为null

email

String

密码

不能为null

  • 返回值结果: SysResult对象

    {“status”:200,“msg”:“服务器调用成功!”,“data”:null}

1.4.2 编辑UserController

/**
     * URL:  /user/addUser
     * 参数:  form表单 js对象 json串
     * 返回值: SysResult对象
     */
    @PostMapping("/addUser")
    public SysResult addUser(@RequestBody User user){

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

1.4.3 编辑UserService

  1. 编辑接口

    void addUser(User user);

  2. 编辑实现类

    /**
    * 业务思维:
    * 1.密码需要md5加密
    * 2.设定状态信息 true
    * 3.设定创建时间/修改时间
    * 4.注意事务控制
    * @param user
    */
    @Override
    @Transactional //事务控制
    public void addUser(User user) {
    //密码加密
    Date date = new Date();
    String password = user.getPassword();
    password = DigestUtils.md5DigestAsHex(password.getBytes());
    user.setPassword(password)
    .setStatus(true)
    .setCreated(date)
    .setUpdated(date);
    userMapper.addUser(user);
    }

1.4.4 编辑UserMapper

1.编辑接口

	void addUser(User user);

  1. 编辑映射文件

    <insert id="addUser">
    insert into user value (null,#{username},#{password},#{phone},
        #{email},#{status},#{created},#{updated})
</insert>

1.5 用户数据修改-数据回显

1.5.1 业务接口说明

  • 请求路径: /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
    }
    }

1.5.2 编辑UserController

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

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

1.5.3 编辑UserService

  1. 编辑UserService接口

    User findUserById(Integer id);

  2. 编辑UserServiceImpl实现类

    @Override
    public User findUserById(Integer id) {

        return userMapper.findUserById(id);
}

1.5.4 编辑UserMapper

 @Select("select * from user where id=#{id}")
 User findUserById(Integer id);

1.6 用户数据修改-数据更新操作

1.6.1 业务接口说明

  • 请求路径: /user/updateUser
  • 请求类型: PUT
  • 请求参数: User对象结构

参数名称

参数说明

备注

ID

用户ID号

不能为null

phone

手机信息

不能为null

email

邮箱地址

不能为null

  • 返回值: SysResult对象

参数名称

参数说明

备注

status

状态信息

200表示服务器请求成功 201表示服务器异常

msg

服务器返回的提示信息

可以为null

data

服务器返回的业务数据

null

  • JSON格式如下:

    {
    “status”:200,
    “msg”:“服务器调用成功!”,
    “data”:{}
    }

1.6.2 编辑UserController

 /**
     * URL地址:   /user/updateUser
     * 参数:   3个参数 js对象 json串
     * 返回值: SysResult对象
     */
    @PutMapping("/updateUser")
    public SysResult updateUser(@RequestBody User user){

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

1.6.3 编辑UserService

void updateUser(User user);

 @Override
    @Transactional
    public void updateUser(User user) {

        user.setUpdated(new Date());
        userMapper.updateUser(user);
    }

1.6.4 编辑UserMapper

  1. 编辑mapper接口

    void updateUser(User user);

  2. 编辑xml映射文件

    update user set phone=#{phone},email=#{email}, updated=#{updated} where id = #{id}

1.7 用户删除

1.7.1 业务接口文档

  • 请求路径: /user/{id}
  • 请求类型: delete
  • 请求参数:

参数名称

参数说明

备注

ID

用户ID号

不能为null

  • 返回值: SysResult对象

参数名称

参数说明

备注

status

状态信息

200表示服务器请求成功 201表示服务器异常

msg

服务器返回的提示信息

可以为null

data

服务器返回的业务数据

null

1.7.2 编辑UserController

    @DeleteMapping("/{id}")
    public SysResult deleteUserById(@PathVariable Integer id){

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

1.7.3 编辑UserService

	void deleteUserById(Integer id);

 	@Override
    @Transactional
    public void deleteUserById(Integer id) {

        userMapper.deleteUserById(id);
    }

1.7.4 编辑UserMapper

 @Delete("delete from user where id=#{id}")
 void deleteUserById(Integer id);
举报

相关推荐

CGB2111-Day04-Spring

springjava后端

CGB2111-Day08-Axios-Mybatis

javascriptajax前端

CGB2111Mybatis

javamybatis

CGB2107-Day02

java

CGB2107-Day01

java

Day13-日历模块

Java编程语言

DAY13 包和模块

python

CGB2107-Day05-Mybatis高级

java

苍穹外卖day09——历史订单模块（用户端）+订单管理模块（管理端）

python开发语言前端

CGB2107-Day06-SpringBoot整合Mybatis

java
0 条评论