Vue 实现用户管理(展示用户列表功能)

最新推荐文章于 2023-05-28 16:03:22 发布
最新推荐文章于 2023-05-28 16:03:22 发布
阅读量3k 收藏 26
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47906106/article/details/122998148
版权

在这里插入图片描述
components下新建user文件夹,user下新建User.vue
在这里插入图片描述

index.js中配置路由(注意在home页面下)

const routes = [
    // 访问根路径的时候跳转到login
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/home',
        component: () =>
            import ('../components/Home.vue'),
        redirect: '/welcome',
        children: [{
                path: '/welcome',
                component: () =>
                    import ('../components/index/Welcome.vue')
            },
            {
                path: '/users',
                component: () =>
                    import ('../components/user/User.vue')
            }
        ]
    }
]

实现用户管理=>用户列表的面包屑效果

<template>
  <div>
    <!-- 面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图-->
    <el-card>
        card
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

在global.css中设置全局样式(面包屑和卡片)

html,
body,
#app {
    margin: 0;
    padding: 0;
    height: 100%;
    min-width: 1366px;
}

.el-breadcrumb {
    font-size: 12px;
    margin-bottom: 15px;
}

.el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15) !important;
}

<!-- 卡片试图-->
    <el-card>
      <!-- 搜索和添加 -->
      <!-- gutter每列之间的间隔 槽宽 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
           
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
    </el-card>

<script>
export default {
    data(){
        return{
            // 查询用户列表的参数对象
            queryInfo:{
                query:'',
                pagenum:1,//页码
                pagesize:5,// 页大小
            },
            // 用户列表数据
            users:[]
        }
    },

    created(){
        this.getUserList()
    },
    methods:{
        async getUserList(){
            const {data:res} = await this.$http.get('users',{
                params:this.queryInfo
            })
            
            if(res.meta.status !== 200){
                return this.$message.error("获取用户列表失败")
            }
            console.log(res)
        }
    }
    
};
</script>

由于很多地方都要用到这个判断，可以定义一个全局的

if(res.meta.status !== 200){
return this.$message.error("获取用户列表失败")}

在vscode 文件=》首选项=>用户片段 定义一个代码片段
在这里插入图片描述

"element-message": {
		"scope": "javascript,typescript,vue",
		"prefix": "msg",
		"body": [
			"if(res.meta.status !== 200){",
                "    return this.\\$message.error('获取$1失败')",
            "}"
		],
		"description": "element-message"
	}

这样每次需要输入这个提示信息时直接输msg就可以出来了

<script>
export default {
    data(){
        return{
            // 查询用户列表的参数对象
            queryInfo:{
                query:'',
                pagenum:1,//页码
                pagesize:5,// 页大小
            },
            // 用户列表数据
            userList:[]
        }
    },

    created(){
        this.getUserList()
    },
    methods:{
        async getUserList(){
            const {data:res} = await this.$http.get('users',{
                params:this.queryInfo
            })
            
            if(res.meta.status !== 200){
                return this.$message.error('获取失败')
            }
            this.userList = res.data.users
            console.log(this.userList)
        }
    }
    
};
</script>

返回的数据

{
    "data": {
        "total": 5,
        "pagenum": 1,
        "users": [
            {
                "id": 25,
                "username": "tom",
                "mobile": "13951783475",
                "type": 1,
                "email": "1049901079@qq.com",
                "create_time": "2020-11-09T20:36:26.000Z",
                "mg_state": true, // 当前用户的状态
                "role_name": "超级管理员"
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

<!-- 用户表格-->
      <!-- 一页有很多行，这个不用关心 会自动帮我们循环 -->
      <el-table :data="userList">
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column  label="状态">
          <!--自定义模板 使用作用域插槽,通过scope.row获取当前行数据-->
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.mg_state"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
      </el-table>

在这里插入图片描述
完整代码

<template>
  <div>
    <!-- 面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片试图-->
    <el-card>
      <!-- 搜索和添加 -->
      <!-- gutter每列之间的间隔 槽宽 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>

      <!-- 用户表格-->
      <!-- 一页有很多行，这个不用关心 会自动帮我们循环 stripe隔行展示 -->
      <el-table :data="userList" border stripe>
          <!-- type="index" 会自动排序 -->
          <el-table-column type="index" label="索引"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="状态">
          <!--自定义模板 使用作用域插槽,通过scope.row获取当前行数据-->
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.mg_state"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
            <!-- enterable 文字是否可以移入提示信息，默认是可以的 -->
        
      <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>

      <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
  
         <el-tooltip effect="dark"  placement="top"  content="分配角色" :enterable='false'>
      <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
    </el-tooltip>
            
            </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询用户列表的参数对象
      queryInfo: {
        query: "",
        pagenum: 1, //页码
        pagesize: 5, // 页大小
      },
      // 用户列表数据
      userList: [],
    };
  },

  created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("users", {
        params: this.queryInfo,
      });

      if (res.meta.status !== 200) {
        return this.$message.error("获取失败");
      }
      this.userList = res.data.users;
      console.log(this.userList);
    },
  },
};
</script>

给表格设置全局样式

.el-table {
    margin-top: 15px;
    font-size: 12px;
}

在这里插入图片描述

季布，
关注
  • 0
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE搭建后台管理界面_vue后台管理页面
2401_84437604的博客
04-29 350
【代码】VUE搭建后台管理界面_vue后台管理页面。
Vue前端项目-用户管理-显示用户列表(上)
踏 浪的博客
04-05 4802
目录 1、用户管理页面 2、导入相关的 element-ui 组件 3、查询用户列表API 4、全局挂载方法 5、添加日期范围方法 6、定义分页组件 7、scroll-to 文件 8、未完成部分 9、Controller层 10、Service层 11、Service的 impl 12、Mapper接口 13、Mapper接口映射描述文件 实现效果图： 1、用户管...
vue实现用户管理系统
11-18
里面有详细的步骤和页面设计的样式来使用vue实现用户管理系统
Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能 三一
码侬人生
12-20 6777
1. 用户列表组件UI结构的组成 1.1 头部是一个面包屑（Breadcrumb）导航区域 1.2 白色区域是一个卡片（Card）视图 1.3 卡片 （Card）视图中嵌套了输入框（Input ）、按钮（Button）、表单（Form）、分页（Pagination ） Breadcrumb 面包屑 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/breadcrumb.html 2. 用户列表组件实..
vue实战--用户管理系统
08-02
vue实战项目--用户管理系统，本管理系统使用json来当做数据库，能够实现用户数据的增删改查等功能
vue.js 初探之用户管理
string_user_get_set的博客
08-09 475
什么是vue.js:      是一套构建用户界面的渐进式框架。vue的核心库之专注于视图层，并且很容易和第三方或者现有的项目集成。 官网api文档：https://vuefe.cn/v2/guide/ Hello Vue:            vue起步 {{ message }}
Vue实战--用户管理系统
Muchen灬
08-02 4046
看这篇文章的时候，如果知道使用json-server的可以直接看下面内容，若为解除json-server建议先去看看我的另一篇博客 https://blog.csdn.net/qq_40976321/article/details/97486701 创建用户管理系统项目 步骤一：创建vue-cli项目 首先打开我们的终端，切换到自己项目需要存放的文件夹中 输入vue init webpa...
Vue.js 搭建用户管理系统
We_jia的博客
04-10 4420
目录 一、前言 二、搭建项目过程 2.1配置json-server 2.2新建vue项目 2.3项目目录解析 2.4 初探组件,搭建导航 2.5 获取并展示用户信息 2.6 添加用户 2.7 弹窗及详情 2.7.1 弹窗 alert.vue组件 2.7.2 详情组件 customersdetails.vue 2.8 编辑和删除 2.8.1 编辑Edit. vue组件...
vuex根据不同的用户权限展示不同的路由列表功能
01-21
最近接到一个新的需求，要求将系统的用户进行分类，用户登陆后根据不同的用户权限展示不同的功能列表。 这个功能在后台管理中很常见，大致的思路是 后台返回用户类型，前端根据用户类型生成该类用户可以访问的功能...
vue实现后台管理权限系统及顶栏三级菜单显示功能
01-19
 根据用户登录的roles信息与路由中配置的roles信息进行比较过滤，生成可以访问的路由表，并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表，从而实现左侧和顶栏菜单的展示。 实现步骤： ...
vue实现个人信息查看和密码修改功能
01-19
下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述： //用了element组件，自己要加载和引入 基本信息 name=first> <el-form :model=userlist :rules=rul
vue项目（用户管理系统）
06-29
1.管理员可以对用户进行增删改查； 2.用户只能导入导出文档内容，不能对用户进行操作； 3.适合做毕设的同学，可以下载参考或者直接使用； 4.vue2+elementUI设计，增删改查，导入导出功能，样样俱全。 5.接口由JAVA书写，使用Form Data的调用方式。
VueJS实现用户管理系统
10-15
主要为大家详细介绍了VueJS实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue-后台用户管理系统管理系统.rar
02-10
后台用户管理系统管理系统小项目，实现对模拟的后台元素的增删查改..........................
基于vue的人力资源管理系统的设计与实现.rar
11-28
内容包括详细设计文档word版，附带开题报告和相关PPT等文档，供大家参考学习。...本系统帮助用户从人事、考勤、财务功能出发,为公司的运营及监控提供有力保障,帮助企业整合化地创造价值、沟通、管理的企业生态。
基于SpringBoot3.x+Vue3.x整合从0到1一步一步实现酒店管理系统
10-24
后台主要功能有：后台首页展示、个人信息展示和修改、用户管理、角色管理、日志管理、楼层管理、房间类型管理、房间管理、入住管理、会员管理、日历房态、预订管理等。 随着国家社会经济水平的提升，各酒店的发展...
Vue-后台管理项目002---用户管理
初遇我ㄖ寸の热情呢？
05-28 506
【代码】Vue-后台管理项目002---用户管理。
Vue用户管理模块(实现用户的增删改)
weixin_47906106的博客
02-20 2069
elementui 对话框 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false"&g
Vue实战之 5.用户管理模块
weixin_47505105的博客
02-10 4196
实战项目之用户管理模块
vue后台管理系统用户管理
最新发布
04-13
Vue后台管理系统用户管理是指在Vue框架下，通过管理系统对用户进行管理和操作的功能。用户管理一般包括用户的创建、编辑、删除、查询等操作，以及对用户权限的管理和控制。 在Vue后台管理系统中，用户管理一般需要实现以下功能： 1. 用户列表展示：展示系统中所有用户的信息，包括用户名、角色、创建时间等。 2. 用户创建：管理员可以通过表单或其他方式创建新用户，并设置用户的基本信息和权限。 3. 用户编辑：管理员可以对已存在的用户进行编辑，修改用户的基本信息和权限。 4. 用户删除：管理员可以删除不再需要的用户，将其从系统中移除。 5. 用户查询：提供搜索功能，管理员可以根据关键字搜索用户，并快速找到目标用户。 6. 用户权限管理：管理员可以设置用户的权限，包括访问权限、操作权限等，以控制用户对系统资源的访问和操作范围。 相关问题: 1. Vue后台管理系统是什么？ 2. 如何在Vue中实现用户列表展示功能？ 3. 如何实现用户创建和编辑功能？ 4. 如何实现用户删除功能？ 5. 如何实现用户查询功能？ 6. 如何实现用户权限管理功能？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

季布，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值