前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【SpringBoot+Vue】009-搜索栏和添加用户组件、后台实现查询、用户列表渲染

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

作者头像
訾博ZiBo
发布2025-01-06 16:12:10
发布2025-01-06 16:12:10
18500
代码可运行
举报
运行总次数:0
代码可运行

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

1、用户列表页面

代码语言:javascript
代码运行次数:0
运行
复制
<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
代码语言:javascript
代码运行次数:0
运行
复制
/* 全局样式 */
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类

代码语言:javascript
代码运行次数:0
运行
复制
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

代码语言:javascript
代码运行次数:0
运行
复制
<?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

代码语言:javascript
代码运行次数:0
运行
复制
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类

代码语言:javascript
代码运行次数:0
运行
复制
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页面

代码语言:javascript
代码运行次数:0
运行
复制
<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

代码语言:javascript
代码运行次数:0
运行
复制
<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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、搜索栏和添加用户组件
    • 1、用户列表页面
      • 2、全局CSS
    • 3、最终效果
  • 二、后台实现查询
    • 1、修改UserDao类
    • 2、修改UserDao.xml
    • 3、创建类,封装查询信息QueryInfo
    • 4、新建UserController类
  • 三、获取用户列表
    • 1、修改UserList页面
    • 2、测试结果
  • 三、用户列表渲染
    • 1、修改userList
    • 2、最终效果
    • 3、element ui框架地址
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档