springboot+vue健康管理小项目（七）用户列表实现

用户列表

1. 新建用户列表页 UserList.vue

<template>
    <div>
        用户列表
         <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 用户列表主体 -->
     <!-- 卡片视图区 -->
    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <!-- 搜索添加 -->
          <el-input placeholder="请输入搜索内容" v-model="queryInfo.query"  clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>

        <!-- 用户列表 -->
      <el-table :data="userList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="角色" prop="role"></el-table-column>
        <el-table-column label="状态" prop="state">
          <!-- scope.row 就是当前行的信息 -->
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" @change="userStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
            <!-- 权限 -->
            <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      </el-row>
    </el-card>
    </div>
</template>

<script>
export default {
    created(){
        this.getUserList();
    },
    data(){
        return{
            queryInfo:{
                query:"",//查询信息
                pageNum: 1,//当前页
                pageSize: 5,//每页最大数
            },
            userList:[],//用户列表
            total: 0,//总记录数
        }
    },
    methods: {
        //获取所有用户
       async getUserList(){
          const {data:res} = await this.$http.get("allUser",{params:this.queryInfo});
          this.userList = res.data;
          this.total = res.number;
        }
    }
}
</script>

<style lang="less" scoped>

</style>

2. dao层创建查询列表接口

userDao.java

 public List<User> getAllUser(@Param("username")String username,@Param("pageStart")int PageStart,@Param("pageSize")int pageSize);

    public int getUserCounts(@Param("username")String username);

3. UserMapper.xml

 <select id="getAllUser" resultType="com.zjj.entity.User">
        SELECT * FROM easyUser
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
        LIMIT #{pageStart},#{pageSize}
    </select>

    <select id="getUserCounts" resultType="java.lang.Integer">
        SELECT count(*) FROM `easyuser`
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
    </select>

5. 创建查询类
   QueryInfo.java

package com.zjj.entity;

public class QueryInfo {
    private String query;//查询信息
    private int pageNum = 1;//当前页
    private int pageSize = 1;//每页最大数

    public QueryInfo() {
    }

    public QueryInfo(String query, int pageNum, int pageSize) {
        this.query = query;
        this.pageNum = pageNum;
        this.pageSize = pageSize;
    }

    public String getQuery() {
        return query;
    }

    public void setQuery(String query) {
        this.query = query;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    @Override
    public String toString() {
        return "QueryInfo{" +
                "query='" + query + '\'' +
                ", pageNum=" + pageNum +
                ", pageSize=" + pageSize +
                '}';
    }
}

6. controller层

UserController.java

package com.zjj.controller;

import com.alibaba.fastjson.JSON;
import com.zjj.dao.UserDao;
import com.zjj.entity.QueryInfo;
import com.zjj.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;

@RestController
public class UserController {

    @Autowired
    private UserDao userDao;

    @RequestMapping("/allUser")
    public String getUserList(QueryInfo queryInfo){
        //获取最大列表数
        int numbers = userDao.getUserCounts("%" + queryInfo.getQuery() + "%");
        System.out.println(queryInfo.getQuery());
        int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
        List<User> users = userDao.getAllUser("%" + queryInfo.getQuery() + "%", pageStart, queryInfo.getPageSize());
        HashMap<String, Object> res = new HashMap<>();
        res.put("number",numbers);
        res.put("data",users);
        String res_string = JSON.toJSONString(res);
        return res_string;
    }
}

效果

7. 添加css样式

global.css

/* 全局样式*/
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
/* 面包屑样式 */
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
}
/* 卡片区域 */
.el-card{
    box-shadow: 0 1px 1px rgba(0, 8, 10, 0.15) !important;
}

/* 表格样式 */
.el-table {
    margin-top: 15px;
    font-size: 12px;
    min-width: 350px;
}

8. 分页组件

<!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 2, 5, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

9. methods中添加跳转方法

//最大数
        handleSizeChange(newSize){
          this.queryInfo.pageSize = newSize;
          this.getUserList();
        },
        handleCurrentChange(newPage){
          this.queryInfo.pageNum = newPage;
          this.getUserList();
        }

效果