当前位置: 首页 > news >正文

入门基础项目-前端Vue_02

文章目录

  • 1. 用户信息
    • 1.1 整体设计
    • 1.2 完整代码 User.vue
      • 1.2.1 数据加载
      • 1.2.2 表格 el-table
        • 1.2.2.1 多选
        • 1.2.2.2 自定义列的内容 Slot
        • 1.2.2.3 图片 el-image
        • 1.2.2.4 分页 el-pagination
      • 1.2.3 编辑
        • 1.2.3.1 弹出框 el-dialog
        • 1.2.3.2 上传 el-upload
      • 1.2.4 新增
      • 1.2.5 删除
      • 1.2.6 批量删除
      • 1.2.7 批量导出
      • 1.2.8 批量导入

1. 用户信息

1.1 整体设计

1.2 完整代码 User.vue

<template><div><div><el-input style="width: 200px" placeholder="查询用户名" v-model="username"></el-input><el-input style="width: 200px; margin: 0 5px" placeholder="查询姓名"  v-model="name"></el-input><el-button type="primary" @click="load(1)">查询</el-button><el-button type="info" @click="reset">重置</el-button></div><div style="margin: 10px 0"><el-button type="primary" plain @click="handleAdd">新增</el-button><el-button type="danger" plain @click="delBatch">批量删除</el-button><el-button type="info" plain @click="exportData">批量导出</el-button><el-upload :action="$baseUrl + '/user/import'" :headers="{token: user.token}" :on-success="handleImport" style="display: inline-block; margin-left: 10px" :show-file-list="false"><el-button type="primary" plain>批量导入</el-button></el-upload></div><el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column prop="id" label="序号" width="70" align="center"></el-table-column><el-table-column prop="username" label="用户名"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="phone" label="手机号"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="头像"><template v-slot="scope"><div style="display: flex; align-items: center"><el-image style="width: 50px; height: 50px; border-radius: 50%" v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image></div></template></el-table-column><el-table-column prop="role" label="角色"></el-table-column><el-table-column label="操作" align="center" width="180"><template v-slot="scope"><el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button></template></el-table-column></el-table><div style="margin: 10px 0"><el-pagination@current-change="handleCurrentChange":current-page="pageNum":page-size="pageSize"layout="total, prev, pager, next":total="total"></el-pagination></div><el-dialog title="用户信息" :visible.sync="fromVisible" width="30%"><el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" placeholder="用户名"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="form.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="form.phone" placeholder="电话"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="邮箱"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input type="textarea" v-model="form.address" placeholder="地址"></el-input></el-form-item><el-form-item label="角色" prop="role"><el-radio-group v-model="form.role"><el-radio label="管理员"></el-radio><el-radio label="用户"></el-radio></el-radio-group></el-form-item><el-form-item label="头像"><el-uploadclass="avatar-uploader":action="$baseUrl + '/file/upload'":headers="{ token: user.token }":file-list="form.avatar? [{url: form.avatar}] : []"list-type="picture":on-success="handleAvatarSuccess"><el-button type="primary">上传头像</el-button></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="fromVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></div>
</template><script>
export default {name: "User",data() {return {tableData: [],  // 所有的数据pageNum: 1,   // 当前的页码pageSize: 5,  // 每页显示的个数username: '',name: '',total: 0,fromVisible: false,form: {},user: JSON.parse(localStorage.getItem('honey-user') || '{}'),rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur' },]},ids: []}},created() {this.load()},methods: {handleImport(res, file, fileList) {if (res.code === '200') {this.$message.success("操作成功")this.load(1)} else {this.$message.error(res.msg)}},exportData() {   // 批量导出数据if (!this.ids.length) {   // 没有选择行的时候,全部导出  或者根据我的搜索条件导出window.open(this.$baseUrl + '/user/export?token=' + this.user.token + "&username="+ this.username + "&name=" + this.name)} else {      // [1,2,3] => '1,2,3'let idStr = this.ids.join(',')window.open(this.$baseUrl + '/user/export?token=' + this.user.token + '&ids=' + idStr)}},delBatch() {if (!this.ids.length) {this.$message.warning('请选择数据')return}this.$confirm('您确认批量删除这些数据吗?', '确认删除', {type: "warning"}).then(response => {this.$request.delete('/user/delete/batch', { data: this.ids }).then(res => {if (res.code === '200') {   // 表示操作成功this.$message.success('操作成功')this.load(1)} else {this.$message.error(res.msg)  // 弹出错误的信息}})}).catch(() => {})},handleSelectionChange(rows) {   // 当前选中的所有的行数据this.ids = rows.map(v => v.id)},del(id) {this.$confirm('您确认删除吗?', '确认删除', {type: "warning"}).then(response => {this.$request.delete('/user/delete/' + id).then(res => {if (res.code === '200') {   // 表示操作成功this.$message.success('操作成功')this.load(1)} else {this.$message.error(res.msg)  // 弹出错误的信息}})}).catch(() => {})},handleEdit(row) {   // 编辑数据this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据this.fromVisible = true   // 打开弹窗},handleAdd() {   // 新增数据this.form = { role: '用户' }  // 新增数据的时候清空数据this.fromVisible = true   // 打开弹窗},save() {   // 保存按钮触发的逻辑  它会触发新增或者更新this.$refs.formRef.validate((valid) => {if (valid) {this.$request({url: this.form.id ? '/user/update': '/user/add',method: this.form.id ? 'PUT' : 'POST',data: this.form}).then(res => {if (res.code === '200') {  // 表示成功保存this.$message.success('保存成功')this.load(1)this.fromVisible = false} else {this.$message.error(res.msg)  // 弹出错误的信息}})}})},reset() {this.name = ''this.username = ''this.load()},load(pageNum) {  // 分页查询if (pageNum)  this.pageNum = pageNumthis.$request.get('/user/selectByPage', {params: {pageNum: this.pageNum,pageSize: this.pageSize,username: this.username,name: this.name}}).then(res => {this.tableData = res.data.recordsthis.total = res.data.total})},handleCurrentChange(pageNum) {this.load(pageNum)},handleAvatarSuccess(response, file, fileList) {// 把user的头像属性换成上传的图片的链接this.form.avatar = response.data},}
}
</script><style scoped></style>

1.2.1 数据加载

created() {this.load()
}load(pageNum) {  // 分页查询if (pageNum)  this.pageNum = pageNumthis.$request.get('/user/selectByPage', {params: {pageNum: this.pageNum,pageSize: this.pageSize,username: this.username,name: this.name}}).then(res => {this.tableData = res.data.recordsthis.total = res.data.total})
}

created 钩子在实例创建完成后被调用。此时实例已完成数据、事件配置。

1.2.2 表格 el-table

  • data:显示的数据,此处绑定数据加载返回的 tableData
  • stripe:是否为斑马纹 table,默认 false。
  • header-cell-style:表头单元格的 style
  • selection-change:当选择项发生变化时会触发该事件,用于实现多选。手动添加一个 el-table-column,设 type 属性为 selection 即可
  • prop:对应列内容的字段名
  • label:显示的标题
1.2.2.1 多选

增加多选项:

<el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"></el-table-column>...
</el-table>

@selection-change回调方法:

handleSelectionChange(rows) {   // 当前选中的所有的行数据this.ids = rows.map(v => v.id)
}

rows 为当前选中的所有的行数据。

1.2.2.2 自定义列的内容 Slot

通过 v-slot="scope" 作用域插槽 Slot 可以插入自定义内容,scope.row 获取行数据,然后操作行数据编辑自定义内容。比如,插入头像格式化时间插入操作按钮等等。

<el-table-column label="头像"><template v-slot="scope"><div style="display: flex; align-items: center"><el-image style="width: 50px; height: 50px; border-radius: 50%" v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image></div></template>
</el-table-column><el-table-column label="操作" align="center" width="180"><template v-slot="scope"><el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button></template>
</el-table-column>
1.2.2.3 图片 el-image
<el-image style="width: 50px; height: 50px; border-radius: 50%" v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
  • src:图片源
  • preview-src-list:图片预览功能
1.2.2.4 分页 el-pagination
<div style="margin: 10px 0"><el-pagination@current-change="handleCurrentChange":current-page="pageNum":page-size="pageSize"layout="total, prev, pager, next":total="total"></el-pagination>
</div>handleCurrentChange(pageNum) {this.load(pageNum)
}
  • current-page:当前页数
  • page-size:每页显示条目个数
  • layout:组件布局,子组件名用逗号分隔。sizes, prev, pager, next, jumper, ->, total, slot
  • total:总条目数
  • current-changecurrentPage 改变时会触发

1.2.3 编辑

handleEdit(row) {   // 编辑数据this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据this.fromVisible = true   // 打开弹窗
}

点击 “编辑”,打开弹窗,弹窗内 el-form 表单数据对象赋值为传入的行数据,这就是 “回显” 功能。

在这里插入图片描述

1.2.3.1 弹出框 el-dialog
<el-dialog title="用户信息" :visible.sync="fromVisible" width="30%"><el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" placeholder="用户名"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="form.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="form.phone" placeholder="电话"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="邮箱"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input type="textarea" v-model="form.address" placeholder="地址"></el-input></el-form-item><el-form-item label="角色" prop="role"><el-radio-group v-model="form.role"><el-radio label="管理员"></el-radio><el-radio label="用户"></el-radio></el-radio-group></el-form-item><el-form-item label="头像"><el-uploadclass="avatar-uploader":action="$baseUrl + '/file/upload'":headers="{ token: user.token }":file-list="form.avatar? [{url: form.avatar}] : []"list-type="picture":on-success="handleAvatarSuccess"><el-button type="primary">上传头像</el-button></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="fromVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div>
</el-dialog>
  • visible:是否显示 Dialog,支持 .sync 修饰符
  • title:Dialog 的标题,也可通过具名 slot 传入
  • footer:Dialog 按钮操作区的内容,通过具名 slot 传入
1.2.3.2 上传 el-upload
handleAvatarSuccess(response, file, fileList) {// 把user的头像属性换成上传的图片的链接this.form.avatar = response.data
}

图片上传成功后,将服务返回的文件存储的服务器地址,赋值给 form 表单数据对象,用于保存用户信息。

1.2.4 新增

新增和编辑共用同一个 el-dialog 弹出框,区别在于:新增需要清空 form 表单数据对象。还有一点,保存按钮触发请求时,需要根据 this.form.id 是否为空,判断发送新增(为空)还是编辑(不为空)

handleAdd() {   // 新增数据this.form = { role: '用户' }  // 新增数据的时候清空数据this.fromVisible = true   // 打开弹窗
}

1.2.5 删除

del(id) {this.$confirm('您确认删除吗?', '确认删除', {type: "warning"}).then(response => {this.$request.delete('/user/delete/' + id).then(res => {if (res.code === '200') {   // 表示操作成功this.$message.success('操作成功')this.load(1)} else {this.$message.error(res.msg)  // 弹出错误的信息}})}).catch(() => {})
}

$confirm(message, title, options) 确认消息弹出框进行删除提示,操作成功后调用 this.load(1) 刷新表格。

1.2.6 批量删除

delBatch() {if (!this.ids.length) {this.$message.warning('请选择数据')return}this.$confirm('您确认批量删除这些数据吗?', '确认删除', {type: "warning"}).then(response => {this.$request.delete('/user/delete/batch', { data: this.ids }).then(res => {if (res.code === '200') {   // 表示操作成功this.$message.success('操作成功')this.load(1)} else {this.$message.error(res.msg)  // 弹出错误的信息}})}).catch(() => {})
}

根据当前选中的所有的行数据 this.ids,进行批量操作,操作成功后调用 this.load(1) 刷新表格。

1.2.7 批量导出

1.2.8 批量导入


http://www.mrgr.cn/news/94525.html

相关文章:

  • UE4-UE5虚幻引擎,前置学习一--Console日志输出经常崩溃,有什么好的解决办法
  • MySQL开发陷阱与最佳实践:第1章:MySQL开发基础概述-1.2 MySQL开发环境搭建
  • 链表·简单归并
  • 【技术支持】记一次mac电脑换行符差异问题
  • 精通游戏测试笔记(持续更新)
  • 【云原生技术】容器技术的发展史
  • 高频面试题(含笔试高频算法整理)基本总结回顾48
  • 高频面试题(含笔试高频算法整理)基本总结回顾43
  • 【Linux内核系列】:文件系统收尾以及软硬链接详解
  • AI Agent 时代开幕-Manus AI与OpenAI Agent SDK掀起新风暴
  • sentinel限流算法
  • Python教程(三):类对象、闭包、装饰器、类型注解、MRO
  • C++进阶——map和set的使用
  • 便捷搞定计算机名、IP 与 Mac 地址修改及网卡问题的软件
  • RxSwift 学习笔记第二篇之Observables
  • RxSwift 学习笔记之RxSwift的调试
  • 阿里巴巴发布 R1-Omni:首个基于 RLVR 的全模态大语言模型,用于情感识别
  • Linux内核实时机制18 - RT调度器1 - 数据结构
  • 【深度学习与大模型基础】第3章-张量
  • 探针泄露(WEB)