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

野性酷女 2023-10-05 12:04 46阅读 0赞

**目录**

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

1、用户列表页面

2、全局CSS

3、最终效果

二、后台实现查询

1、修改UserDao类

2、修改UserDao.xml

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

4、新建UserController类

三、获取用户列表

1、修改UserList页面

2、测试结果

三、用户列表渲染

1、修改userList

2、最终效果

3、element ui框架地址

--------------------

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

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

### 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、最终效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 二、后台实现查询 #

## 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页面 ##

## 2、测试结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

# 三、用户列表渲染 #

## 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">
    					
    					
    					<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">
    							
    							<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、最终效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

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

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

[https://element.eleme.cn/\#/zh-CN/component/tooltip][https_element.eleme.cn_zh-CN_component_tooltip]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201019212521435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020101922210232.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201019224825616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_element.eleme.cn_zh-CN_component_tooltip]: https://element.eleme.cn/#/zh-CN/component/tooltip