实习笔记3

需求

1、优化界面
2、增加字段
3、增加用户信息修改功能、批量修改功能
4、用户搜索（根据不同字段）

实现

1）优化界面

首页添加欢迎语，引入bootstrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

要求登录和注册时不跳转页面，定义两个样式的CSS样式，一个用来做背景，一个用来做登录表单，定义两个模块分别应用这两个样式，未点击登录时，两个模块隐藏，点击登录时，取消隐藏，效果如下：
登录界面(http://localhost:8080/)

点击登录

点击注册（字段增加到5个）

2）增加字段

增加性别(sex)、手机号(phone)、地址(address)三个字段，表结构如下

登录后，进入http://localhost:8080/userList/{userId}，之后所有的操作都将在这个页面上进行，使用ajax实现局部刷新，界面展示如下

此页面中，可以实现1）用户列表的展现 2）用户信息的修改 3）批量修改 4）修改密码 5）返回登录界面

3）增加用户信息修改功能、批量修改功能

1、单个用户信息修改
在展现用户信息的时候，在表格的最后一列增加一个修改按钮，点击修改后，弹出修改界面，利用ajax从数据库查询该用户的信息，填到修改界面中，设置用户id、用户名为只读状态，其他字段为可修改状态，界面如下：

2、批量修改
首先点击单个checkbox时，批量修改的按钮是灰色的，只有点到2个及以上时，才会亮起。实现方法就是在js中定义一个全局变量

var set = new Set();

然后在每个checkbox添加点击事件

    function check(id){
        var checkState = document.getElementById(id).checked;
        if(checkState){
            set.add(id);
        }else{
            set.delete(id);
        }
        document.getElementById("multiUpdate").disabled = set.size <= 1;
    }

这段代码的作用就是每次点击checkbox后，获取当前checkbox的选中状态，根据当前状态将该用户id加入set或删除id，当set的size>1时说明有多个checkbox被选中，此时将批量修改的按钮亮起(取消disable状态)

在批量修改按钮上绑定一个点击事件，首先要将记录id的set传至后端，后端接收后，根据set里的id将user查询出来，放入ResultData中。Controller如下所示

    @GetMapping("/userInfoList")
    @ResponseBody
    public String getUserInfoList(@RequestParam("userIdList") String userIdList){
        List<String> idList = JSON.parseObject(userIdList,ArrayList.class);
        List<User> users = new ArrayList<>();
        Collections.sort(idList);
        for(String id : idList){
            users.add(userService.searchById(Integer.parseInt(id)));
        }
        List<Object> res = new ArrayList<>();
        res.add(users);
        return JSON.toJSONString(ResultData.success(res));
    }

这里遇到最多的问题就是，前后端的数据格式转化问题，后端经常报格式转换的错，解决方法就是前端向后端发数据时，需要将所有的数据转成JSON格式，如果是set，需要这样处理再传到后端

var userIdList = JSON.stringify(Array.from(set));

修改密码实现方式基本与上面一致。

另外，以上弹出修改、批量修改窗口的方式都和前面弹出登录窗口时一致，都是定义一个模块，在没有被点击时隐藏，被点击后取消隐藏属性。

项目代码地址：https://github.com/nt869147378/user-admin.git