【SpringBoot+Vue】009-搜索栏和添加用户组件、后台实现查询、用户列表渲染

目录

​​一、搜索栏和添加用户组件​​

​​1、用户列表页面​​

​​2、全局CSS​​

​​3、最终效果​​

​​二、后台实现查询​​

​​1、修改UserDao类​​

​​2、修改UserDao.xml​​

​​3、创建类，封装查询信息QueryInfo​​

​​4、新建UserController类​​

​​三、获取用户列表​​

​​1、修改UserList页面​​

​​2、测试结果​​

​​三、用户列表渲染​​

​​1、修改userList​​

​​2、最终效果​​

​​3、element ui框架地址​​

---

一、搜索栏和添加用户组件

1、用户列表页面

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</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="请输入关键字">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    created() {
      this.getUserList();
    },
    methods: {
      getUserList() {
        // 调用post请求
        console.log("123");
      }
    }
  }
</script>

<style lang="less" scoped>
  /* 面包屑样式 */
  .el-breadcrumb {
    margin-bottom: 15px;
    font-size: 12px;
  }
</style>

 

2、全局CSS

/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
/* 卡片区域  !important 提高样式级别 */
.el-card{
    box-shadow: 0 1px 1px rgba(0, 8, 10, 0.15) !important;
}

 

3、最终效果

 

二、后台实现查询

1、修改UserDao类

package com.zibo.sport.dao;

import com.zibo.sport.bean.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface UserDao {
    User getUserByMessage(@Param("username") String username, @Param("password") String password);
    List<User> getAllUsers(@Param("username")String username,@Param("pageStart")int pageStart,@Param("pageSize")int pageSize);
    int getUserCounts(@Param("username") String username);
}

 

2、修改UserDao.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zibo.sport.dao.UserDao">
    <select id="getUserByMessage" parameterType="String" resultType="user">
        select * from user where username=#{username} and password=#{password} and state=1;
    </select>
    <select id="getAllUsers" parameterType="String" resultType="user">
        select * from user
        <if test="username!=null">
            where username like #{username}
        </if>
        limit #{pageStart},#{pageSize};
    </select>
    <select id="getUserCounts" resultType="java.lang.Integer">
        SELECT count(*) FROM user
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
    </select>
</mapper>

 

3、创建类，封装查询信息QueryInfo

package com.zibo.sport.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class QueryInfo {
    private String query;
    private int pageNum;//页码
    private int pageSize;//每页个数
}

 

4、新建UserController类

package com.zibo.sport.controller;

import com.alibaba.fastjson.JSON;
import com.zibo.sport.bean.QueryInfo;
import com.zibo.sport.bean.User;
import com.zibo.sport.dao.UserDao;
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;
import java.util.Map;

@RestController
public class UserController {

    @Autowired
    UserDao userDao;

    @RequestMapping("/allUser")
    public String getUserList(QueryInfo queryInfo){
        System.out.println(queryInfo);
        int numbers = userDao.getUserCounts("%"+queryInfo.getQuery()+"%");// 获取数据总数
        int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
        List<User> users = userDao.getAllUsers("%"+queryInfo.getQuery()+"%",pageStart+"",queryInfo.getPageSize()+"");
        Map<String, Object> res = new HashMap<>();
        res.put("numbers",numbers);
        res.put("data",users);
        System.out.println("总条数："+numbers);
        return JSON.toJSONString(res);
    }

}

 

三、获取用户列表

1、修改UserList页面

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</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="请输入关键字">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
      <span>{{userlist}}</span>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 请求数据
        //查询信息实体
        queryInfo: {
          query: "",
          pageNum: 1,
          pageSize: 5
        },
        userlist: [], // 用户列表
        total: 0, // 最大数据记录
      }
    },
    created() {
      this.getUserList();
    },
    methods: {
      async getUserList() {
        // 调用post请求
        const {data: res} = await this.$http.get("allUser", {params:this.queryInfo});
        this.userlist = res.data; // 将返回数据赋值
        this.total = res.number; // 总个数
      }
    }
  }
</script>

<style lang="less" scoped>
  /* 面包屑样式 */
  .el-breadcrumb {
    margin-bottom: 15px;
    font-size: 12px;
  }
</style>

 

2、测试结果

 

三、用户列表渲染

1、修改userList

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</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="请输入关键字">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表 -->
      <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"></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">
              <!--文字提示 enterable 隐藏-->
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 请求数据
        //查询信息实体
        queryInfo: {
          query: "",
          pageNum: 1,
          pageSize: 5
        },
        userlist: [], // 用户列表
        total: 0, // 最大数据记录
      }
    },
    created() {
      this.getUserList();
    },
    methods: {
      async getUserList() {
        // 调用post请求
        const {
          data: res
        } = await this.$http.get("allUser", {
          params: this.queryInfo
        });
        this.userlist = res.data; // 将返回数据赋值
        this.total = res.number; // 总个数
      }
    }
  }
</script>

<style lang="less" scoped>
  /* 面包屑样式 */
  .el-breadcrumb {
    margin-bottom: 15px;
    font-size: 12px;
  }
</style>

 

2、最终效果

 

3、element ui框架地址

（又看了看，确实不错！）

​​https://element.eleme.cn/#/zh-CN/component/tooltip​​