四、用户功能
首先我们在src/api目录下新建一个user.js，这里面放的是和后端controller层对接的请求接口，增删改查之类的，上边写日志的时候说过，不会的小伙伴去上一篇看看。
下面一共是四个接口，大家应该从接口地址上就能看出大概是什么接口，我这里不多少了。
import request from '@/utils/request' export function userList(query) { return request({ url: '/user/list', method: 'post', data: query }) } export function addUser(data) { return request({ url: '/user/create', method: 'post', data }) } export function updateUser(data) { return request({ url: '/user/update', method: 'post', data }) } export function deleteUser(id) { return request({ url: '/user/delete', method: 'post', params: { id } }) }
接口创建完之后，我们接下来可以写页面了。
打开src/views/user目录下的list.vue，还是和以前的套路一样，基本的数据展示相信大家基本上已经会了，这里为我们要比日志多了删除，添加和修改这三个功能，展示的部分基本上是一致的，我就不过多的解释了。
下面是基础的代码，展示的功能。
1、列表
<template> <el-card class="box-card"> <el-table v-loading="listLoading" :data="list" fit highlight-current-row style="width: 98%; margin-top:30px;"> <el-table-column align="center" label="ID" > <template slot-scope="scope"> <span>{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column align="center" label="用户名"> <template slot-scope="scope"> <span>{{ scope.row.userName}}</span> </template> </el-table-column> <el-table-column align="center" label="邮箱"> <template slot-scope="scope"> <span>{{ scope.row.email}}</span> </template> </el-table-column> <el-table-column align="center" label="手机号"> <template slot-scope="scope"> <span>{{ scope.row.phone}}</span> </template> </el-table-column> <el-table-column align="center" label="昵称"> <template slot-scope="scope"> <span>{{ scope.row.nickname}}</span> </template> </el-table-column> <el-table-column align="center" label="上次登录时间"> <template slot-scope="scope"> <span>{{ scope.row.lastLoginTime}}</span> </template> </el-table-column> <el-table-column align="center" label="创建时间"> <template slot-scope="scope"> <span>{{ scope.row.createTime}}</span> </template> </el-table-column> <el-table-column align="center" label="操作" width="180"> <template slot-scope="scope"> </template> </el-table-column> </el-table> </el-card> </template> <script> import { userList, deleteUser } from '@/api/user' export default { name: 'UserList', created() { this.getList() }, data() { return { list: null, listLoading: true, listQuery: { } } }, methods: { getList() { this.listLoading = true var body = this.listQuery; userList({body}).then(response => { this.list = response.data this.listLoading = false }) }, } } </script> <style rel="stylesheet/scss" lang="scss" scoped> </style>
我们完成了展示的功能，这时我们运行打开页面看一下。
看到这里，我们的用户展示功能已经完成了，然后我们看到上次登录时间和创建时间不对，我们先去后端改一下。
打开User.java，然后在创建时间上边添加注解。然后再将上次登录时间的属性修改一下类型。
/** * 创建时间 */ @JsonFormat(timezone = "GMT+8",pattern="yyyy-MM-dd HH:mm:ss") private LocalDateTime createTime; /** * 上次登录时间 */ @JsonFormat(timezone = "GMT+8",pattern="yyyy-MM-dd HH:mm:ss") private LocalDateTime lastLoginTime;
上次登录时间我们还要修改一下。
我们需要写个修改上次登录时间的方法，打开UserService.java，然后添加一个接口。
/** * 更新上次登录时间 * @param userId */ void updateLoginTime(Integer userId);
再写一个实现方法
@Override public void updateLoginTime(Integer userId) { User user = new User(); user.setId(userId); user.setLastLoginTime(LocalDateTime.now()); userMapper.updateById(user); }
我们上边调用了UserMapper.java中的updateById，这个需要我们自己加一个
/** * 更新上次登录时间 * @param user */ void updateById(User user);
紧接着去写一下xml的sql语句。
这里传的参数如果不判断为空的话，只修改某个字段的值的话，其余不修改的会变成null。
<update id="updateById" parameterType="com.blog.personalblog.entity.User"> update person_user <set> <if test="userName!=null"> username = #{userName}, </if> <if test="passWord!=null"> password = #{passWord}, </if> <if test="email!=null"> email = #{email}, </if> <if test="lastLoginTime!=null"> last_login_time = #{lastLoginTime}, </if> <if test="phone!=null"> phone = #{phone}, </if> <if test="nickname!=null"> nickname = #{nickname} </if> </set> where id = #{id} </update>
完成之后，我们将在登录的时候进行修改这个时间点，打开UserController.java类，然后再login的方法中添加以下代码：
//修改上个登录的时间 User user = userService.getUserByUserName(loginModel.getUsername()); userService.updateLoginTime(user.getId());
我们运行项目，再次看一下效果。现在已经都修改好了。
接下来我们完成列表最右边操作栏里面的功能，实现添加修改和删除功能。
2、删除
这里我们首先修改一下我们之前请求的接口地址：
/** * 删除 * @return */ @ApiOperation(value = "删除用户") @PostMapping("/delete") @OperationLogSys(desc = "删除用户", operationType = OperationType.DELETE) public JsonResult<Object> userDelete(@RequestParam(value = "id") int id) { userService.deleteUser(id); return JsonResult.success(); }
然后在页面的操作中添加一个删除的按钮。这里面我们定义了一个删除的deleteUser方法。
<el-button type="danger" size="small" icon="el-icon-delete" @click="deleteUser(scope.row.id)">删除</el-button>
我们先引入接口的方法
import { userList, deleteUser } from '@/api/user'
添加方法，在我们点击删除按钮时，要提示是否要删除该用户的提示。
deleteUser (id) { this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { deleteUser(id).then(response => { this.$message({ type: 'success', message: '删除成功!' }) this.getList() }).catch(() => { console.log('error') }) }).catch(() => { this.$message({ type: 'error', message: '你已经取消删除该用户！' }) }) },
我们去页面上先点击删除按钮
然后点击确定，删除成功会提示一下信息，这样我们就删除完成了。
3、添加和修改
完成了删除，然后紧接着完成添加和修改，我们需要添加一个添加按钮，点击添加则跳出一个对话框进行填写数据操作。
<el-button type="primary" size="small" icon="el-icon-plus" @click="openModel(null)" > 新增 </el-button>
在页面操作的那一列中添加一个编辑按钮：
<el-table-column align="center" label="操作" width="180"> <template slot-scope="scope"> <el-button type="primary" size="mini" icon="el-icon-edit" @click="openModel(scope.row)">编辑</el-button> <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteUser(scope.row.id)">删除</el-button> </template> </el-table-column>
此时看一下这两个按钮，同时调用了一个点击事件openModel()，但是传的参数却不同，这个主要是区分是添加还是修改，因为我将这两个功能的对话框放到了一起，所以这里多加了一层调用。我们往下看：
既然写到了这个方法，接下来我们来写这个方法：
先写返回参数：
data() { return { list: null, listLoading: true, listQuery: { }, addOrupdateDialogVisible: false, userForm: { id: null, userName: "", email: "", passWord: "", phone: "", nickname: "" }, } },
下面是如果选择的是添加按钮，则走else语句，因为我们在上边可以看到我们选择的添加按钮传入的值为null，编辑的话走if语句。最后的这个addOrupdateDialogVisible是对话框的控制，我们接下来就写这个对话框。
openModel(user) { if (user != null) { this.userForm = JSON.parse(JSON.stringify(user)); this.$refs.userTitle.innerHTML = "修改用户"; } else { this.userForm.id = null; this.userForm.userName = ""; this.userForm.email = ""; this.userForm.phone = ""; this.userForm.passWord = ""; this.userForm.nickname = ""; this.$refs.userTitle.innerHTML = "添加用户"; } this.addOrupdateDialogVisible = true; },
我们在页面中写一下对话框，这个再Element官方文档中也可以看到具体的案例，大家可以去学习一下：https://element.eleme.cn/#/zh-CN/component/dialog
<!-- 添加编辑对话框 --> <el-dialog :visible.sync="addOrupdateDialogVisible" width="30%"> <div class="dialog-title-container" slot="title" ref="userTitle" /> <el-form label-width="80px" size="medium" :model="userForm"> <el-form-item label="用户名"> <el-input v-model="userForm.userName" style="width:220px" /> </el-form-item> <el-form-item label="密码"> <el-input v-model="userForm.passWord" style="width:220px" /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="userForm.email" style="width:220px" /> </el-form-item> <el-form-item label="手机号"> <el-input v-model="userForm.phone" style="width:220px" /> </el-form-item> <el-form-item label="昵称"> <el-input v-model="userForm.nickname" style="width:220px" /> </el-form-item> </el-form> <div slot="footer"> <el-button @click="addOrupdateDialogVisible = false">取 消</el-button> <el-button type="primary" @click="addOrEditUser"> 确 定 </el-button> </div> </el-dialog>
接下来我们还有一个对接后端的方法没写，就是上边点击确定的addOrEditUser方法。还是和分类的方式基本上差不多。首先引入添加用户和更新用户的方法：
import { userList, deleteUser, addUser, updateUser } from '@/api/user'
然后写下添加方法：
addOrEditUser() { var body = this.userForm; if(body.id == null){ addUser(body).then(response => { this.$message({ type: 'success', message: '添加分类成功!' }) this.getList() }).catch(() => { console.log('error') }) } else { updateUser(body).then(response => { this.$message({ type: 'success', message: '修改分类成功!' }) this.getList() }).catch(() => { console.log('error') }) } this.addOrupdateDialogVisible = false; }
写完之后，我们测试一下所有的功能：
添加：
修改：
完整代码：
<template> <el-card class="box-card"> <el-button type="primary" size="small" icon="el-icon-plus" @click="openModel(null)" > 新增 </el-button> <el-table v-loading="listLoading" :data="list" fit highlight-current-row style="width: 98%; margin-top:30px;"> <el-table-column align="center" label="ID" > <template slot-scope="scope"> <span>{{ scope.row.id }}</span> </template> </el-table-column> <el-table-column align="center" label="用户名"> <template slot-scope="scope"> <span>{{ scope.row.userName}}</span> </template> </el-table-column> <el-table-column align="center" label="邮箱"> <template slot-scope="scope"> <span>{{ scope.row.email}}</span> </template> </el-table-column> <el-table-column align="center" label="手机号"> <template slot-scope="scope"> <span>{{ scope.row.phone}}</span> </template> </el-table-column> <el-table-column align="center" label="昵称"> <template slot-scope="scope"> <span>{{ scope.row.nickname}}</span> </template> </el-table-column> <el-table-column align="center" label="上次登录时间"> <template slot-scope="scope"> <span>{{ scope.row.lastLoginTime}}</span> </template> </el-table-column> <el-table-column align="center" label="创建时间"> <template slot-scope="scope"> <span>{{ scope.row.createTime}}</span> </template> </el-table-column> <el-table-column align="center" label="操作" width="180"> <template slot-scope="scope"> <el-button type="primary" size="mini" icon="el-icon-edit" @click="openModel(scope.row)">编辑</el-button> <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteUser(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 添加编辑对话框 --> <el-dialog :visible.sync="addOrupdateDialogVisible" width="30%"> <div class="dialog-title-container" slot="title" ref="userTitle" /> <el-form label-width="80px" size="medium" :model="userForm"> <el-form-item label="用户名"> <el-input v-model="userForm.userName" style="width:220px" /> </el-form-item> <el-form-item label="密码"> <el-input v-model="userForm.passWord" style="width:220px" /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="userForm.email" style="width:220px" /> </el-form-item> <el-form-item label="手机号"> <el-input v-model="userForm.phone" style="width:220px" /> </el-form-item> <el-form-item label="昵称"> <el-input v-model="userForm.nickname" style="width:220px" /> </el-form-item> </el-form> <div slot="footer"> <el-button @click="addOrupdateDialogVisible = false">取 消</el-button> <el-button type="primary" @click="addOrEditUser"> 确 定 </el-button> </div> </el-dialog> </el-card> </template> <script> import { userList, deleteUser, addUser, updateUser } from '@/api/user' export default { name: 'UserList', created() { this.getList() }, data() { return { list: null, listLoading: true, listQuery: { }, addOrupdateDialogVisible: false, userForm: { id: null, userName: "", email: "", phone: "", passWord: "", nickname: "" }, } }, methods: { getList() { this.listLoading = true var body = this.listQuery; userList({body}).then(response => { this.list = response.data this.listLoading = false }) }, deleteUser (id) { this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { deleteUser(id).then(response => { this.$message({ type: 'success', message: '删除成功!' }) this.getList() }).catch(() => { console.log('error') }) }).catch(() => { this.$message({ type: 'error', message: '你已经取消删除该用户！' }) }) }, openModel(user) { if (user != null) { this.userForm = JSON.parse(JSON.stringify(user)); this.$refs.userTitle.innerHTML = "修改用户"; } else { this.userForm.id = null; this.userForm.userName = ""; this.userForm.passWord = ""; this.userForm.email = ""; this.userForm.phone = ""; this.userForm.nickname = ""; this.$refs.userTitle.innerHTML = "添加用户"; } this.addOrupdateDialogVisible = true; }, addOrEditUser() { var body = this.userForm; if(body.id == null){ addUser(body).then(response => { this.$message({ type: 'success', message: '添加分类成功!' }) this.getList() }).catch(() => { console.log('error') }) } else { updateUser(body).then(response => { this.$message({ type: 'success', message: '修改分类成功!' }) this.getList() }).catch(() => { console.log('error') }) } this.addOrupdateDialogVisible = false; } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .box-card { width: 98%; margin: 1%; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .clearfix span { font-weight: 600; } </style>
好啦，分类管理和用户的所有的功能全部写完了，这篇写的很长了，我们再用一两篇将剩下的写完基本上这个教程就结束了。
