vue查询列表中所有用户信息_Vue 后台管理项目12-用户列表页实现

最新推荐文章于 2023-05-08 19:30:00 发布

weixin_39517241

最新推荐文章于 2023-05-08 19:30:00 发布

阅读量560

点赞数

文章标签： vue查询列表中所有用户信息

本文链接：https://blog.csdn.net/weixin_39517241/article/details/111541501

版权

这篇博客详细介绍了如何使用 Vue 和 Element UI 搭建用户管理页面，包括用户查询、添加用户、编辑用户状态、删除用户以及分页功能的实现。内容涵盖面包屑导航、复合型输入框、Table 表格、Switch 开关、分页组件等 Element UI 组件的使用，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

用户列表页实现

1.完成user组件静态布局

页面结构：组件盒子内分五部分，顶级面包屑(全局组件)+ 操作框 + 用户数据列表 + 底部的分页 + 用户增删改弹框(后面写动态交互再添加)，都用el-row(饿了吗Layout 布局)包裹

Ⅰ.顶级面包屑的实现：参照前两章

Ⅱ.操纵框：

饿了吗组件复合型输入框传送们http://element-cn.eleme.io/#/zh-CN/component/input

button按钮传送门http://element-cn.eleme.io/#/zh-CN/component/button

Ⅲ.用户数据列表：

饿了吗组件 Table表格(固定列表格) 传送门http://element-cn.eleme.io/#/zh-CN/component/table

Switch 开关传送门http://element-cn.eleme.io/#/zh-CN/component/switch

Ⅳ.底部的分页：

饿了吗组件 Pagination 分页(完整功能)传送门http://element-cn.eleme.io/#/zh-CN/component/pagination

效果图：

示例代码

添加用户

v-model="scope.row.mg_state"

active-color="#13ce66"

inactive-color="#ff4949"

:current-page="pageData.pagenum"

:page-sizes="[2, 4, 6, 8, 10]"

:page-size="pageData.pagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

export default {

data() {

return {

level2: "用户管理",

level3: "用户列表",

//页码

pageData: {

pagenum: 1,

pagesize: 10,

query: ""

//总页数,默认为0

total: 0,

//用户的数据

userList: []

};

created() {

//get请求需要通过params属性来传对象

this.$axios.get("users", { params: this.pageData }).then(res => {

console.log(res);

this.userList = res.data.data.users;

this.total = res.data.data.total;

});

}

};

#user {

.operate {

background-color: #e8edf3;

}

2.完成user组件动态交互

Ⅰ.用户查询

NO.

题外话：组件中写name的好处

vue开发者界面语义更明确

可以使用搜索快速定位到组件

用户查询步骤：点搜索→发请求→调接口→拿数据

NO.

用户查询步骤

根据input输入的查询字段可以进行模糊搜索，如果input输入为空默认搜索到全部用户

搜索方法和页面刷新created调用的方法一样，可以封装复用

Ⅱ.用户添加

饿了吗：Dialog 对话框(自定义内容) 传送门http://element-cn.eleme.io/#/zh-CN/component/dialog

NO.

Dialog对话框

和面包屑同级，新增html用户添加的对话框代码

在form上添加:rules="rules"属性，增加表单数据验证

在form上添加：ref="userForm"属性，并将userForm传给提交按钮，增加表单提交验证

表单验证是前端验证可以被绕过，主要防止普通用户的误操作

技术用户可以绕过前端验证，比如用postman直接发送请求，添加用户，就不需要受到前端的限制

所以后端服务器一定会再验证一次

//template

//css

#user {

.operate {

background-color: #e8edf3;

}

.el-dialog {

width:30%;

}

//js

export default {

//写了name方便在Vue Devtools谷歌插件应用内找到对应的组件

name: "user",

data() {

return {

level2: "用户管理",

level3: "用户列表",

//页码

pageData: {

pagenum: 1,

pagesize: 10,

//query是查询的字段

query: ""

//总页数,默认为0

total: 0,

//用户的数据

userList: [],

//是否显示对话框

visible: false,

form: {

username: "",

password: "",

email: "",

mobile: ""

//表单验证规则

rules: {

username: [

{ required: true, message: '请输入用户名', trigger: 'blur' },

{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }

password: [

{ required: true, message: '请输入密码', trigger: 'blur' },

{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }

]

}

methods: {

//查询用户方法

async getUsers() {

//get请求需要通过params属性来传对象

//用async/await 同步执行异步代码

let res = await this.$axios.get("users", {

params: this.pageData

});

//赋值

this.userList = res.data.data.users;

this.total = res.data.data.total;

//提交增加用户方法

//这边submitForm和validate都要加上async，内部的await才能生效

async submitForm(formName) {

this.$refs[formName].validate(async valid => {

if (valid) {

//验证成功

//调用接口

let res = await this.$axios.post("users",this.form);

console.log(res);

if(res.data.meta.status===201){

//201表示成功请求并创建了新的资源，可以继续执行下一步

//关闭弹框

this.visible=false;

//重新获取数据

this.getUsers();

}

} else {

//验证失败

this.$message.error('请您输入正确的信息')

return false;

}

});

//生命周期函数，回调函数

async created() {

//get请求需要通过params属性来传对象

// let res = await this.$axios.get("users", { params: this.pageData });

// this.userList = res.data.data.users;

// this.total = res.data.data.total;

//直接调用封装后的代码

this.getUsers();

}

};

Ⅲ.用户状态(启用跟禁用该用户)

饿了吗组件 Switch 开关有change方法

//template中

v-model="scope.row.mg_state"

active-color="#13ce66"

inactive-color="#ff4949"

@change="statusChange(scope.row)">

//js的methods中增加如下方法

async statusChange(data){

console.log(data);

let res = await this.$axios.put(`users/${data.id}/state/${data.mg.state}`);

}

Ⅳ.用户删除：传入id即可

//在删除按钮增加delOne方法，写在methods内

delOne(data){

console.log(data);

let id = data.id;

//提示用户

this.$confirm('此操作将永久删除用户，是否继续？',"提示",{

confirmButtonText:"确定",

cancelButtonText:"取消",

type:"danger"

})

.then(async()=>{

//确定

let res = await this.$axios.delete(`users/${id}`);

//console.log(res);

//重新获取用户数据即可

this.getUsers();

})

.catch(()=>{

//取消

})

}

V.用户编辑：

NO.

用户编辑

进入编辑状态

保存编辑结果

进入编辑状态

//template

//js:

//1.data数据里增加

//编辑框是否可见

editVisible:false,

//编辑框的表单数据

editForm:{

username:'',

email:'',

mobile:''

//增加用户的id，方便后续编辑使用

id:''

}

//2.methods里增加方法

//显示编辑框

showEditDialog(data){

//打印data

console.log(data);

//显示编辑框

this.editVisible = true;

//js的for in方法，遍历editForm的key，将data对应的key赋值给editForm的key

for (const key in this.editForm) {

this.editForm[key] = data[key];

}

//这种方法可能会在vue插件界面被篡改数据，保险点是用id再请求一个接口获取数据

//如果id也被修改了呢？一般不会这么无聊

}

保存编辑结果

//1.template:增加确定保存按钮

//2.js：methods里增加方法

async submitEdit(){

let res = await this.$axios.put(

`users/${this.editForm.id}`,

this.editForm

);

console.log(res);

if(res.data.meta.status===200){

//关闭编辑框

this.editVisible = false;

//重新获取数据即可

this.getUsers();

}

VI.分配角色

NO.

分配角色

弹出角色框，分配角色

保存分配结果

饿了吗组件 Select 选择器

传送门http://element-cn.eleme.io/#/zh-CN/component/select

//template

v-for="item in roles"

:key="item.id"

:label="item.roleName"

:value="item.id">

//js

// data里增加下面数据

//分配角色框是否显示

roleVisible:false,

//当前选中的用户数据

selectUser:'',

//所有的角色数据

roles:''

//methods里增加下面的方法

//显示角色对话框

async showRoleDialog(data){

this.roleVisible = true;

//通过data获取用户的名字，用户的角色

//console.log(data);

//为了方便编码，直接保存当前选择的用户数据

this.selectUser = data;

//获取所有的角色，去数据库获取(角色列表接口)

let res = await this.$axios.get('roles');

console.log(res);

this.roles = res.data.data;

console.log(this.roles);

//保存分配结果

async submitRole(){

// 获取用户id，获取角色id

// 调用接口

let res = this.$axios.put(`users/${this.selectUser.id}/role`,{

rid:this.selectUser.role_name

});

console.log(res);

//关闭对话框

this.roleVisible = false;

//提示用户,之前已经有axios拦截器了

}

V.分页功能实现

饿了吗组件 Pagination 分页的一些属性和方法

属性/方法

作用

1.@size-change="handleSizeChange"

pageSize (每页条数) 改变时会触发，回调参数是新的pageSize

2.@current-change="handleCurrentChange"

currentPage(当前页)改变时会触发，回调参数是新的currentPage

3.:page-sizes="[2, 4, 6, 8, 10]"

这是下拉框可以选择的，每选择一行，要展示多少内容

4.:page-size="pageSize"

显示当前行的条数

5.:total="userList.length"

总共有多少数据

6.:data="userList.slice((currentPage-1)pagesize,currentPagepagesize)

userList取第几页的数据，最为重要的一句话

//html

:data="userList.slice((pageData.pagenum-1)*pageData.pagesize,pageData.pagenum*pageData.pagesize)" >

v-model="scope.row.mg_state"

active-color="#13ce66"

inactive-color="#ff4949"

@change="statusChange(scope.row)"

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pageData.pagenum"

:page-sizes="[2, 4, 6, 8, 10]"

:page-size="pageData.pagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="userList.length"

//js 在methods中加如下方法

handleSizeChange(size){

this.pageData.pagesize = size;//每页下拉显示数据

// console.log(this.pageData.pagesize);

handleCurrentChange(currentPage){

this.pageData.pagenum = currentPage;//点击第几页

// console.log(this.pageData.pagenum);

}

weixin_39517241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue查询列表中所有用户信息_Vue 后台管理项目12-用户列表页实现

用户列表页实现1.完成user组件静态布局页面结构：组件盒子内分五部分，顶级面包屑(全局组件)+ 操作框 + 用户数据列表 + 底部的分页 + 用户增删改弹框(后面写动态交互再添加)，都用el-row(饿了吗Layout 布局)包裹Ⅰ.顶级面包屑的实现：参照前两章Ⅱ.操纵框：饿了吗组件复合型输入框传送们http://element-cn.eleme.io/#/zh-CN/component/in...
复制链接

扫一扫