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

訾博ZiBo

发布于 2025-01-06 16:12:10

18700

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

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

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>