入门基础项目-前端Vue_02

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-change：currentPage 改变时会触发

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 批量导入