码上快乐

相关内容   简体   繁体

Vue后台管理系统—用户列表

本文转载自  查看原文  2020-10-24 09:33  485    Vue练习项目

用户列表

  • 建立自己的文件夹

  • 导入路由，放在home下（子路由）

  • ⭐解决高亮显示的BUG

    • 再点击每个二级菜单的时候不能显示激活状态

      • 把对应的地址保存到相对应的SessionStorage中 刷新页面的时候 从SessionStroage中取值 处在激活状态
      // 一级菜单
<el-menu  :default-active="activePath">

// 二级菜单
<el-menu-item :index="'/'+subItem.path"
			 @click="saveNavState('/'+subItem.path)">
</el-menu-item>


<script>
export default {
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  data () {
    return {
      // 当前激活状态
      activePath: ''
    }
  },
  methods: {
    // 保存当前激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
  this.activePath = activePath
    }
  }
}
</script>
2.1 搜索框&添加用户按钮
  • 用Element-UI模板
  • 面包屑导航
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
  • 用:span 进行划分栅格
<el-row :gutter="20">
	<el-col :span="8">
		XXX
	</el-col>
	<el-col :span="4">
		XXX
	</el-col>
</el-row>
  • 为表格渲染数据
	<!-- 表格 -->
<el-table :data="userList"
		   stripe
		   border
		   style="width: 100%">
		   
	// index索引列
	<el-table-column type="index">
	</el-table-column>
	// 姓名列
	<el-table-column prop="username"
	label="姓名"></el-table-column>
      
</el-table>
      
      
<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 20
      },
      userList: [],
      total: 0

    }
  },
  created () {
    // 页面加载的时候调用函数
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.userList = res.data.users
      this.total = res.data.total
    }
  }
}
</script>

  • 渲染true和false为按钮

    • 采用作用域插槽

      <!-- 状态列 -->
	<el-table-column prop="mg_state"
					 label="状态">
					 
		<!-- 作用域插槽 -->
		<template slot-scope="scope">
			<el-switch v-model="scope.row.mg_state" @change="switchChange(scope.row)">
            </el-switch>
		</template>
		
</el-table-column>

    • 把switch改变值的传入到数据库内的方法：

       methods: {
// Switch改变的时候
    async switchChange (newScope) {
      console.log(newScope)
      const { data: res } = await this.$http.put(`users/${newScope.id}}/state/${newScope.mg_state}`)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
    }
  }
}
</script>

  • 搜索框进行数据的筛选

<el-input placeholder="请输入内容"
			v-model="queryInfo.query"	//双向数据绑定v-model
			clearable					//清空属性
			@clear="getUserList">		//点击清空时，调用的事件就是获取用户列表事件
<el-button slot="append"
			icon="el-icon-search"
			@click="getUserList"></el-button>	//点击事件后获取数据
  • 添加用户按钮
<el-form :model="addForm"						//数据绑定到addForm{添加用户的表单数据}
                 :rules="addFormRules"			//验证规则{username:[{验证1},{验证2}]}
                 ref="addFormRef"				//引用名称
                 label-width="70px">
                 
<!-- 【弹出对话框--用户名】prop="name"是验证规则内的属性 -->
<el-form-item label="用户名"
	prop="username">								//验证规则的属性【prop】一定在rules内部
	<el-input v-model="addForm.username"></el-input>
</el-form-item>

</el-form>

  • ⭐自定义校验规则（邮箱、手机号）

    • 第一步：定义一个箭头函数 在data内的return之前
    • 第二步：在具体规则rules中[{validator:指向箭头函数名，trigger:'blur'(触发时机)} ]
    • 验证是否符合校验规则（正则表达式.test(value)）
    <script>
export default {
  data () {
    // 验证邮箱的规则(规则，待校验的值，回调函数)
    var checkEmail = (rule, value, callback) => {
      // 通过正则表达式
      const regEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
      if (regEmail.test(value)) {
        return callback()// 校验成功
      }
      callback(new Error('请输入合法的邮箱'))
    }

    // 校验手机号的规则
    var checkPhone = (rule, value, callback) => {
      // 通过正则表达式
      const regPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      if (regPhone.test(value)) {
        return callback()// 校验成功
      }
      callback(new Error('请输入合法的手机号'))
    }
    
    return {
      // 添加用户表单
      addForm: {
        email: '',
        phone: ''
      },
      // 验证规则
      addFormRules: {
        email: [{ required: true, message: '请输入邮箱', triggle: 'blur' }, 
        { validator: checkEmail, triggle: 'blur' }],
        phone: [{ required: true, message: '请输入邮箱', triggle: 'blur' }, 
        { validator: checkPhone, triggle: 'blur' }]

      }
    }
  },

  • 重置提交用户操作

    • 在添加用户输入框内，总是初始状态
    • 方法：在关闭窗口（Dialog关闭事件）的时候，重置表单（添加到methods方法内）
      • 第一步：为el-dialog添加事件@close="closeDialogEvent"
      • 第二步：在el-form中添加引用ref="addFormRef"
      • 第二步：重置 需要ref的引用，调用resetFields()重置表单方法
     <el-dialog title="添加用户"
 			@close="closeDialogEvent">
 			
 	<el-form ref="addFormRef">	//表单需要引用
 </el-dialog>
 
 <script>
export default {
	methods:{
		// 监听关闭dialog事件 就触发
		closeDialogEvent(){
			this.$refs.addFormRef.resetFields()	//引用的表单调用resetFields()重置表单方法
		}
	}
}

  • 在提交表单的时候进行预验证

    • 为提交按钮，绑定事件处理函数@click='addUser'
    • 写在methods内，同样也需要引用表单.validate方法【valid是判断是否正确，符合规则】
     <el-button type="primary"
                   @click="addUser">确 定</el-button>

<script>
export default {
 methods: {
    addUser () {
      this.$refs.addFormRef.validate(valid => {
        console.log(valid)
        if (!valid) return this.$message.error('预验证失败！')
        this.$message.success('预验证成功')
      })
    }
 }

  • 修改用户数据

    • 点击弹出dialog
    • 绑定事件
      • 在模板template中 slot-scope="scope" 传递给方法一个ID值
      • 根据 ID查询用户信息 有API 根据API获取信息
    • 添加事件、规则
    <template>
  <div>
	<!-- 编辑用户dialog -->
    <el-dialog title="编辑用户"
               :visible.sync="editUserDialog">
      <el-form :model="editForm"			
               :rules="editFormRules"		//★★el-form中有rules规则对象
               ref="editFormRef"			//★★el-form中有ref引用对象
               label-width="70px">
        <!-- 【弹出对话框--用户名】 -->
        <el-form-item label="用户名">
          <el-input v-model="editForm.username"
                    disabled></el-input>
        </el-form-item>
        <!-- 【弹出对话框--邮箱】 -->
        <el-form-item label="邮箱"
                      prop="email">			//★★el-form-item中有prop传入对象
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <!-- 【弹出对话框--手机号】 -->
        <el-form-item label="手机号"
                      prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer">
        <el-button @click="editUserDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="editUser">确 定</el-button>		//修改数据，点击后修改
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
data () {
// 验证邮箱的规则
	var checkEmail = (rule, value, callback) => {
// 通过正则表达式
const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
	if (regEmail.test(value)) {
		return callback() // 校验成功
	}
	callback(new Error('请输入合法的邮箱'))
}

// 校验手机号的规则
var checkMobile = (rule, value, callback) => {
// 通过正则表达式
const regMobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
	if (regMobile.test(value)) {
		return callback() // 校验成功
	}
	callback(new Error('请输入合法的手机号'))
}

     return {
// 编辑用户表单
editForm: {},
// 编辑用户验证规则
editFormRules: {
email: [{ required: true, message: '请输入邮箱', triggle: 'blur' }, 
		{ validator: checkEmail, triggle: 'blur' }],
mobile: [{ required: true, message: '请输入手机号', triggle: 'blur' }, 
		{ validator: checkMobile, triggle: 'blur' }]
      }
    }
},
  
methods: {
// 展示编辑用户的对话框
async showEditUserDialog (id) {
	this.editUserDialog = true
},
// 监听关闭编辑dialog事件 重置 就触发
closeEditDialogEvent () {
	this.$refs.editFormRef.resetFields()
},
editUser (editInfo) {
	this.$refs.editFormRef.validate(async valid => {
	if (!valid) return
	const { data: res } = await this.$http.put('users/' + this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile })		//axios请求地址，id为this.editForm对应的id 后面传入的是参数
	if (res.meta.status !== 200) return this.$message.error('更新用户数据失败！')
// 关闭dialog对话框
	this.editUserDialog = false
// 获取列表
	this.getUserList()
// 提示信息成功
	this.$message.success('更新用户数据成功！')
	})
},
// 调用接口获取信息
const { data: res } = await this.$http.get(`users/${id}`)
if (res.meta.status !== 200) return this.$message.error('查询用户信息失败！')
this.$message.success('获取用户信息成功！')
	this.editForm = res.data
    }
  }
}

  • 删除用户

    • 弹出MessageBox 弹框

    • Vue项目刷新弹出空白框

      其中 Message组件与MessageBox组件全局使用比较频繁，挂在到Vue的原型上比较方便，不要使用use。

    • 取消按钮，取消删除操作 确认按钮，进行删除操作(对删除按钮添加事件 并且注册方法)

    //挂载$confirm
//导入Element-UI
import { MessageBox } from 'element-ui'
Vue.prototype.$confirm = MessageBox.confirm

<!-- 删除 -->
<el-tooltip effect="dark"
			content="删除"
			placement="top-start"
			:enterable="false">
<el-button type="danger"
		@click="removeUserById(scope.row.id)"			//获取这个需要删除的ID值
		icon="el-icon-delete"
		size="mini"></el-button>
</el-tooltip>

方法内
// 删除数据 提示框
async removeUserById (id) {
	const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
	confirmButtonText: '确定',
	cancelButtonText: '取消',
	type: 'warning'
}).catch(err => err) // .catch用来捕获之前的所有错误
// 用户确认删除 返回值为confirm
// 用户取消删除 返回值为报错信息.catch(err=>err) 这个捕获到错误信息后，并且return回去，留下的只有cancel
if (confirmResult !== 'confirm') return this.$message.info('用户取消了删除操作')
const { data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) return this.$message.error('删除信息失败！')
this.$message.success('成功删除！')
this.getUserList()
}
2.2 用户列表数据
  • 首先进行梳理整体的data()，created()，methods()
  • 在created()完后就应该调用相应的方法getUserList()
  • 写方法，通过get请求 携带参数params这个参数的内容需要写到data数据内
  • get方法得到的是Promise函数 需要async await 并且解构赋值
  • 解构赋值出来的res可以看到所有get请求到的数据
  • 在data数据内添加 用户列表userList和总数total 并且通过res赋值
<script>
export default {
  data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      userList: [],
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      // get参数用params传递
      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
      this.total = res.data.total
      console.log(res)
    }
  }
}
</script>
2.3 数据改造 true 改为开关

★slot-scope作用域插槽是用来传递这个作用域内的数据
<el-table-column prop="mg_state" label="状态">
	<template slot-scope="scope">
	          <el-switch v-model="scope.row.mg_state"	//获取这个数据
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
		{{scope.row}}	//当前这行的数据
	</template>
</el-table-column>

  • switch在页面刷新的时候不会进行改变

    • 第一步：监听switch状态的改变[change]
    <el-switch v-model="scope.row.mg_state"
				active-color="#13ce66"
				inactive-color="#ff4949"
				@change="userStateChanged(scope.row)">	//把数据也传入进来
</el-switch>
    
    // 监听到
    userStateChanged (userinfo) {
      console.log(userinfo)		//可以监听到数据的改变
    }
    • 第二步：调用对应的API接口 保存到数据库内
    // 当switch改变的时候进行同步到数据库
async userStateChanged (userinfo) {
	console.log(userinfo)
	const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
	if (res.meta.status !== 200) {
		userinfo.mg_state = !userinfo.mg_state
		return this.$message.error('更改状态失败!')
	}
	this.$message.success('更改状态成功！')
}
2.4 操作框

  • 操作很多按钮的时候，要在template中实现
  • slot-scope作用域插槽
<template slot-scope="scope">
<!-- 修改 -->
              <el-button type="primary"
                         icon="el-icon-edit"></el-button>
<!-- 删除 -->
              <el-button type="danger"
                         icon="el-icon-delete"></el-button>
<!-- 设置 -->
              <el-button type="warning"
                         icon="el-icon-setting"></el-button>
</template>
  • 点击修改按钮 进行信息【用户名（禁止改变）、邮箱、手机】的修改
 <!-- 修改 -->
            <el-tooltip class="item"
                        effect="dark"
                        content="修改"
                        placement="top-start"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-edit"
                         size="small"
                         @click="editUserInfo(scope.row.id)"></el-button>
            </el-tooltip>


 <!-- 修改用户信息的对话框 -->
    <el-dialog title="修改信息"
               :visible.sync="editUserInofVisiable"
               width="50%">
      <!-- 修改用户信息的表单 -->
      <el-form ref="editUserInfoRef"
               :rules="editUserInfoRules"
               :model="editUserInfoForm"
               label-width="80px">
        <!-- 用户名 禁止修改 -->
        <el-form-item label="用户名:"
                      prop="username">
          <el-input v-model="editUserInfoForm.username"
                    disabled></el-input>
        </el-form-item>
        <!-- 邮箱 可以修改 -->
        <el-form-item label="邮箱:"
                      prop="email">
          <el-input v-model="editUserInfoForm.email"></el-input>
        </el-form-item>
        <!-- 手机 可以修改 -->
        <el-form-item label="手机:"
                      prop="mobile">
          <el-input v-model="editUserInfoForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="resetEditUserInfo">取 消</el-button>
        <el-button type="primary"
                   @click="submitEditUserInfo">确 定</el-button>
      </span>
    </el-dialog>


// methods方法
// 修改用户信息
    async editUserInfo (id) {
      console.log(id)
      const { data: res } = await this.$http.get(`users/${id}`)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.editUserInfoForm = res.data
      this.editUserInofVisiable = true
    },
    // 提交修改用户信息
    submitEditUserInfo () {
      this.$refs.editUserInfoRef.validate(async valid => {
        console.log(valid)
        if (!valid) return this.$message.error('预校验失败！')
        // this.$message.success('预校验成功！')
        const { data: res } = await this.$http.put('users/' + this.editUserInfoForm.id, { email: this.editUserInfoForm.email, mobile: this.editUserInfoForm.mobile })
        console.log(res)
        if (res.meta.status !== 200) return this.$http.error(res.meta.msg)
        this.$http.success(res.meta.msg)
      })
      this.editUserInofVisiable = false
      this.getUserList()
      this.$message.success('更新用户信息成功！')
    },
    // 重置修改用户信息的表单
    resetEditUserInfo () {
      this.$refs.editUserInfoRef.resetFields()
      this.editUserInofVisiable = false
    },
  • 删除此行用户信息
   <!-- 删除 -->
            <el-tooltip class="item"
                        effect="dark"
                        content="删除"
                        placement="top-start"
                        :enterable="false">
              <el-button type="danger"
                         icon="el-icon-delete"
                         size="small"
                         @click="deleteUserInfo(scope.row.id)"></el-button>
            </el-tooltip>
            
            
            
// 删除用户信息
    async deleteUserInfo (id) {
      console.log(id)
      const confirmResult = await this.$confirm('此操作将永久该用户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      const { data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getUserList()
    }
2.5 分页
  • Element-UI套入
<!-- 分页 -->
//@size-change 代表的是当每页显示的个数（分页内的下拉框选择的每页显示个数）发生改变时候触发的事件
<el-pagination @size-change="pageSizeChange"
//@current-change 代表的是当前是第几页
			   @current-change="pageCurrentChange"
//在data数据库内定义的每页显示的数目
			   :current-page="queryInfo.pagenum"
//下拉框内可以选择的每页显示个数
			   :page-sizes="[ 1, 2, 5, 10]"
//当前每页显示的数据
			   :page-size="queryInfo.pagesize"
			   layout="total, sizes, prev, pager, next, jumper"
//数据总数 在调用API数据库内可以看到
			   :total="total">
</el-pagination>

<script>
  methods: {
    // 页面数据发生变化时
    pageSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    // 当前页面发生变化时
    pageCurrentChange (newNum) {
      console.log(newNum)
      this.queryInfo.pagenum = newNum
      this.getUserList()
    },
    }
</script>


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 Vue电商后台管理系统项目第3篇-首页用户列表增删改查功能 React后台管理系统-用户列表页面 vue后台管理系统——用户管理模块 vue后台管理系统 vue后台管理系统 Vue项目练习--电商后台管理系统的功能---用户管理模块 vue后台管理系统项目 基于VUE实现的新闻后台管理系统-一 vue后台管理系统权限处理 vue + element搭建后台管理系统
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM