再写一遍用户列表，熟悉vue+springboot的增删改査，总结的思路很详细

• 新建一个User2.vue文件，然后去index.js文件里面配置路由

  • 
  • 通过地址栏就可以访问了，
  • 
  • 但是，我们需要实现，在菜单栏里面，点击子菜单，跳转到用户列表，那么，我们需要在主页面Home.js这个文件里面写响应的事件，动态绑定激活路径
  • 
  • 这样就可以通过点击，跳转到User2.vue这个页面了

• 然后，我们在页面逐步实现我们需要的效果

• 有些效果在全局样式当中写了，所以在这里先说明一下
  • 

   

• 在用到element的属性的时候，我们都需要去element.js文件下引入并注册才可以使用，否则会报错
• 现在使用element面包屑
  • 
• 因为我们需要显示用户列表，那么我们需要用到  Card 卡片，然后引入Card的模板
  • 
• 然后我们现在要在卡片当中实现分页显示的效果，并且要有一个搜索框集合一些操作按钮
  • 
• 首先来实现搜索框，在vue当中，element-ui 当中row一行占24格
  • 
• 因为我们是需要分页显示所有用户的信息，需要用到element的表格，
  • 
  • 基本效果我们就实现了，那么，我们需要发送请求到后台，获取到所用用户列表userList
  • 
  • 
  • 然后，我们定义userList数组，编写getUsers()方法来发送请求获取后台数据
  • 这里我们需要明白一个处理异步的概念
    • 
  • 先写方法，发请求去后台查，将获得的数据解构赋值给数据源中定义的userList和total
    • 
  • 然后在table当中根据获取的数据显示出来
    • 
    • 分页的后台代码

      • @GetMapping("/users")
            public R users(int page,int rows,String query){
                IPage<User> pageObj = null;
                try {
                    pageObj = userService.userPages(page, rows,query);
                    if(pageObj.getRecords().size() > 0){
                        return new R(200,"查询分页成功",pageObj);
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                    return new R(501,"查询分页失败");
                }
                return new R(201,"没有分页数据");
            }

      •   /**
             * 分页
             * @param page
             * @param rows
             * @return
             */
            @Override
            public IPage<User> userPages(int page, int rows,String query) {
                Page<User> p = new Page<>(page,rows);
                QueryWrapper queryWrapper = new QueryWrapper<>();
                queryWrapper.like("username",query);
                IPage<User> pageObject = userMapper.selectPage(p,queryWrapper);
                return pageObject;
            }
        

    • 效果也就有了
  • 但是我们现在才显示了一页数据，那么我们应该要能实现分页的功能
    • 我使用的是element的完整功能
    • 
    • 
    • 通过事件绑定，动态的实现分页效果
      • 
      • 

    • 分页的效果实现之后，我们现在来实现对单个用户的增删改査

    • 首先，上面的操作那一栏，我们没有对应的按钮，先去找几个自己想要的按钮
      • 
      • 
    • 但是还缺少新增按钮，我们将这个按钮，放到搜索框旁边
      • 

    • 至此，我们的界面显示就完成了，那么就应该逐一去实现效果

    • 首先，我们来实现搜索框的效果
      • 
      • clearable，表示清空文本框，因为我们需要在清空后重新查询一次列表数据，所以，
      • 这里会有一个bug（还没解决）

        • 在搜索时，有可能在非第一页，所以当前页码不是1，在查询时就没有了数据，所以，单击搜索时需要判断一下是否在第一页，不在则设为1，再调用getUsers方法
          getUsers(){this.queryWhere.page=1:getUser()}

    • 然后，我们来实现新增的功能，如果要新增，那么我们应该想到需要用到表单，但是好像直接生成一个表单不太美观，那么我们可以弹出一个对话框，所以，我们需要去引入element对话框和表单，在对话框当中写我们的表单数据进行新增
      • 先引入对话框，因为是新增对话框，所以名字改为addDialogvisible(见名知意)
        •  
      • 给几个按钮加上绑定事件，通过改变数据源的值来消失和显示
        •  
      • 然后，我们就引入表单
      • 这里需要注意，当我们关闭对话框的时候，应该清空表单