Spring Boot + vue-element 开发个人博客项目实战教程(二十、登录日志、用户、分类管理页面开发)
文章目录
- 前言
- 一、登录日志页面
-
- 1、设置api
- 2、页面
- 二、路由管理
-
- (1)用户管理路由
- (2)公告管理路由
- (3)标签管理
- (4)分类管理
- (5)文章管理
- 三、分类管理
-
- 1、创建api
- 2、分类列表
- 3、添加和修改
- 4、删除
- 四、用户功能
-
- 1、列表
- 2、删除
- 3、添加和修改
前言
有小伙伴开始催更了,最近我也在补充知识,我在有空的时候重新学习下Redis,有想要学的小伙伴可以来找我要笔记,后期看情况要不要分享出来,对于这个教程最基本的后端写完了,我们再搞搞前端争取快点结束掉,然后还是去重点搞java,目录我列了一些。
一、登录日志页面
上一篇我们只完成了操作日志的页面,我们首先完成剩下的登录日志。这个和我们操作日志的页面基本上差不多,我们的日志数据不支持删除,只能后台数据库进行删除。
1、设置api
在src/api
文件下找到operation.js
文件,和操作日志一个,我们加一个请求的接口,这里和我们后台写的接口地址保持一致。
export function fetchLoginLogList(query) { return request({ url: '/log/loginOperationLog/list', method: 'post', data: query })}
由于我们一开始就设置了这个的路由,所以我们现在就直接去画页面。
2、页面
在src/views/operation
目录下,找到loginlog.vue
,如果没有你就新建一个。以下是全部的代码,这里基本上和操作日志的页面一样,就改了一些展示的内容。
<template> <el-card class="box-card"> <!-- 设置标题登录日志 --> <div slot="header" class="clearfix"> <span>登录日志</span> </div> <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.loginName}}</span> </template> </el-table-column> <el-table-column align="center" label="登录IP"> <template slot-scope="scope"> <span>{{ scope.row.ipAddress}}</span> </template> </el-table-column> <el-table-column align="center" label="登录地点"> <template slot-scope="scope"> <span>{{ scope.row.loginLocation}}</span> </template> </el-table-column> <el-table-column align="center" label="浏览器类型"> <template slot-scope="scope"> <span>{{ scope.row.browserType}}</span> </template> </el-table-column> <el-table-column align="center" label="操作系统"> <template slot-scope="scope"> <span>{{ scope.row.os}}</span> </template> </el-table-column> <el-table-column align="center" label="登录状态"> <template slot-scope="scope"> <el-tag :type="tagType(scope.row.loginStatus)"> {{ map[scope.row.loginStatus ] }} </el-tag> </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> <!-- 分页 --> <el-pagination class="pagination-container" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.listQuery.pageNum" :page-size="this.listQuery.pageSize" :total="count" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" /> </el-card></template><script>import { fetchLoginLogList } from '@/api/operation'export default { name: 'LoginOperationlog', created() { this.getList() }, data() { return { list: null, listLoading: true, count: 0, listQuery: { pageNum: 1, pageSize: 10 }, map: { 0: '登录成功', 1: '登录失败' } } }, methods: { getList() { this.listLoading = true var body = this.listQuery; fetchLoginLogList({body}).then(response => { this.list = response.data.result this.count = response.data.totalSize this.listLoading = false }) }, handleSizeChange(pageSize) { this.listQuery.pageSize = pageSize this.getList() }, handleCurrentChange(pageNum) { this.listQuery.pageNum = pageNum this.getList() } }, computed: { tagType() { return function(type) { switch (type) { case 0: return "success"; case 1: return "warning"; } }; } }}</script><style rel="stylesheet/scss" lang="scss" scoped> .pagination-container { float: right; margin-top: 1.25rem; margin-bottom: 1.25rem; } .box-card { width: 98%; margin: 1%; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .clearfix span { font-weight: 600; }</style>
这里只说一下登录的状态页面展示,我们后台返回前端的数据是登录成功状态为0,失败为1,所以我在前端判断了一下这个状态的展示,使得页面更加的美观。
写到这里,我们的登录页面基本上完成了,此时日志中心也基本上完成。我们打开页面会看到这个时间有点小问题,后端返回过来的时间都带着T,这个影响我们数据的直观,所以我们在后台处理一下,只需要一个注解即可。
我们在实体类的时间上加上一下注解:
/** * 创建时间 */ @JsonFormat(timezone = "GMT+8",pattern="yyyy-MM-dd HH:mm:ss") private LocalDateTime createTime;
将操作日志和登录日志的时间都加上,重启项目即可。
二、路由管理
我想了一下接下来的开发流程,我先把整个的路由补充完整,让整个项目的框架搭起来,功能都列举出来,到时候我们直接在对应的页面中添加即可。
首先打开src/router
目录,然后打开index.js
。
(1)用户管理路由
用户管理下面我们主要分两个子菜单,一个是用户列表,这个页面里包含了对用户的增删改查操作。另一个子菜单是个人简介,这里可以自由发挥,可以写写自己的介绍等。这里的icon图表可以去阿里的矢量图库中去下载。然后放到icons/svg
目录下。
{ path: '/user', component: Layout, redirect: '/user/list', name: 'User', meta: { title: '用户管理', icon: 'user' }, children: [ { path: 'list', name: 'UserList', component: () => import('@/views/user/list'), meta: { title: '用户列表', icon: 'user' } }, { path: 'introduction', name: 'Introduction', component: () => import('@/views/user/introduction'), meta: { title: '个人介绍', icon: 'jieshao' } }, ] },
然后我们在对应的目录下(/src/views)新建一个user文件夹,然后新建一个list.vue
和introduction.vue
文件。
先将以下代码填充进去,看下页面是否有数据即可。
<template> <div> 用户管理 </div></template><script>export default { name: 'UserList', }</script><style rel="stylesheet/scss" lang="scss" scoped> </style>
(2)公告管理路由
接下来再创建公告的路由管理,和上面的用户一致,先写路由。
{ path: '/notice', component: Layout, redirect: '/notice/list', name: 'Notice', meta: { title: '公告管理', icon: 'notice' }, children: [ { path: 'list', name: 'NoticeList', component: () => import('@/views/notice/list'), meta: { title: '公告列表', icon: 'notice' } }, { path: 'add', name: 'AddNotice', component: () => import('@/views/notice/add'), meta: { title: '发布公告', icon: 'fabu' } }, ] },
然后我们在对应的目录下(/src/views
)新建一个notice文件夹,然后新建一个list.vue
和add.vue
文件。里面还是用上边用户的模板先填充即可。
(3)标签管理
{ path: '/tag', component: Layout, redirect: '/tag/list', name: 'Tag', meta: { title: '标签管理', icon: 'biaoqian' }, children: [ { path: 'list', name: 'TagList', component: () => import('@/views/tag/list'), meta: { title: '标签管理', icon: 'biaoqian' } }, ] },
然后在新建一个标签管理的目录,参照上边的方式。新建一个tag文件夹,然后建一个list.vue即可。
(4)分类管理
{ path: '/categories', component: Layout, redirect: '/categories/list', name: 'Categories', meta: { title: '分类管理', icon: 'fenlei' }, children: [ { path: 'list', name: 'CategoriesList', component: () => import('@/views/categories/list'), meta: { title: '分类管理', icon: 'fenlei' } }, ] },
然后再新建一个tag文件夹,然后建一个list.vue即可。
(5)文章管理
{ path: '/articles', component: Layout, redirect: '/articles/list', name: 'Articles', meta: { title: '文章管理', icon: 'wz' }, children: [ { path: 'list', name: 'ArticlesList', component: () => import('@/views/articles/list'), meta: { title: '文章列表', icon: 'wenzhang' } }, { path: 'add', name: 'Addrticles', component: () => import('@/views/articles/add'), meta: { title: '发布文章', icon: 'fabu' } }, ] },
然后再新建一个articles文件夹,然后建一个list.vue
和add.vue
即可。
好啦,我们将左侧的导航功能基本上全部搭建好了,有点系统的样子了。
三、分类管理
首先我们上边已经创建了路由的管理,所以我们页面也已经创建好了,接下来我们来创建一下api接口对接。
1、创建api
新建一个category.js
文件,主要是最基础的增删改查接口。
import request from '@/utils/request'export function categoryList(query) { return request({ url: '/category/list', method: 'post', data: query })}export function addCategory(data) { return request({ url: '/category/create', method: 'post', data })}export function updateCategory(data) { return request({ url: '/category/update', method: 'post', data })}export function deleteCategory(id) { return request({ url: '/category/delete', method: 'post', params: { id } })}
2、分类列表
还是老规矩,先画页面,看了一下后端代码,我们还是采用的分页展示,所以这里面还要写一个分页,和用户的基本上一致。
<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.categoryId }}</span> </template> </el-table-column> <el-table-column align="center" label="分类名称"> <template slot-scope="scope"> <span>{{ scope.row.categoryName}}</span> </template> </el-table-column><el-table-column align="center" label="创建时间"> <template slot-scope="scope"> <i class="el-icon-time" style="margin-right:5px" /> <span>{{ scope.row.createTime}}</span> </template> </el-table-column><el-table-column align="center" label="更新时间"> <template slot-scope="scope"> <i class="el-icon-time" style="margin-right:5px" /> <span>{{ scope.row.updateTime}}</span> </template> </el-table-column> </el-table> <!-- 分页 --> <el-pagination class="pagination-container" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.listQuery.pageNum" :page-size="this.listQuery.pageSize" :total="count" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" /> </el-card></template>
引入接口:
import { categoryList} from '@/api/category'
然后接收接口传来的数据
export default { name: 'CategoriesList', created() { this.getList() }, data() { return { list: null, listLoading: true, count: 0, listQuery: { pageNum: 1, pageSize: 10 }, } }, methods: { getList() { this.listLoading = true var body = this.listQuery; categoryList({body}).then(response => { this.list = response.data.result this.count = response.data.totalSize this.listLoading = false }) }, handleSizeChange(pageSize) { this.listQuery.pageSize = pageSize this.getList() }, handleCurrentChange(pageNum) { this.listQuery.pageNum = pageNum this.getList() } }}
然后再修改一下样式:
<style rel="stylesheet/scss" lang="scss" scoped> .pagination-container { float: right; margin-top: 1.25rem; margin-bottom: 1.25rem; } .box-card { width: 98%; margin: 1%; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .clearfix span { font-weight: 600; }</style>
这里面我们将分页请求的参数外边又包了一层body,所以,后端如果没有修改的话,修改一下。
@ApiOperation(value = "分类列表") @PostMapping("list") public JsonResult<Object> listPage(@RequestBody @Valid PageRequestApi<PageRequest> pageRequest) { List<Category> categoryList = categoryService.getCategoryPage(pageRequest.getBody()); PageInfo pageInfo = new PageInfo(categoryList); PageResult pageResult = PageUtil.getPageResult(pageRequest.getBody(), pageInfo); return JsonResult.success(pageResult); }
都写完之后,可以启动项目,查看是否有数据展示出来。
3、添加和修改
这两个放一起来说,因为我们这里面的功能比较简单,所以我就用了一个弹出框来作为用户输入的信息,根据id来判断是增加的还是修改的,大家应该知道,添加的数据此时还没有id值,所以用id作为区分。
接口已经写好,现在我们将接口的两个方法引进来。
import { categoryList, addCategory, updateCategory } from '@/api/category'
然后我们新建一个添加的按钮和一个编辑的按钮,这个添加的按钮我们就放到了列表的左上角即可,一般的系统都是这样设计的,编辑的则放在列表中操作,再加一个操作列,主要放编辑和删除两个功能,跟随每一条数据操作。
<el-button type="primary" size="small" icon="el-icon-plus" @click="transformation(null)">新增分类</el-button>
这里我们使用了一个点击事件,方法为transformation()
,我们等一下再创建。
然后再加一个操作的列。这里的编辑也是用了和添加一样的点击事件。
<el-table-column align="center" label="操作" width="180"> <template slot-scope="scope"> <el-button type="primary" size="mini" icon="el-icon-edit" @click="transformation(scope.row)">编辑</el-button> </template></el-table-column>
添加完之后,然后我们去写transformation()
方法。
下面这个方法就是添加和修改都调用了,这个主要的功能是什么呢?,首先我们看到,方法带了一个参数,大家去上边添加和修改中看一下调用这个传的参数有什么不同。大家会发现添加的是传了一个null,修改的则是将展示的这一行的数据传了进来。讲到这里大家,大家再看一下代码,哦哦。原来是这样区分的,修改的时候我们就会把数据给带过来,添加的话则为空。这个也主要是为了弹窗准备的,共用了一个弹窗。
transformation(category) { if (category != null) { this.categoryForm = JSON.parse(JSON.stringify(category)); this.$refs.categoryTitle.innerHTML = "修改分类"; } else { this.categoryForm.categoryId = null; this.categoryForm.categoryName = ""; this.$refs.categoryTitle.innerHTML = "添加分类"; } this.addOrupdateDialogVisible = true; },
最下面可能会看到还有一句话:this.addOrupdateDialogVisible = true
;这个主要是控制弹窗是否显示,我们需要再return中定义一下。categoryForm
也需要定义。
return { list: null, listLoading: true, count: 0, listQuery: { pageNum: 1, pageSize: 10 }, addOrupdateDialogVisible: false, categoryForm: { categoryId: null, categoryName: "" }, }
接下来我们写添加或者修改的对话框。
我先列出部分功能讲解,最后我会将完整的代码附上。
<!-- 添加或修改分类对话框 --> <el-dialog :visible.sync="addOrupdateDialogVisible" width="30%"> <div class="dialog-title-container" slot="title" ref="categoryTitle" /> <el-form label-width="100px" size="medium" :model="categoryForm"> <el-form-item label="分类名称:"> <el-input v-model="categoryForm.categoryName" style="width:220px" /> </el-form-item> </el-form> <div slot="footer"> <el-button @click="addOrupdateDialogVisible = false">取 消</el-button> <el-button type="primary" @click="addCategory"> 确 定 </el-button> </div> </el-dialog>
我们来分析一下,这个则是控制我们对话框弹不弹出的控制,接下来
categoryTitle
这个大家可以在transformation()
方法中找到对它的赋值,其实就是左上角的标题。然后还有就是取消控制和确定,点击确定则会触发addCategory事件
,对分类的修改或添加。
然后接下来我们就去写addCategory方法
。
我从上到下来说一下流程:
首先我们要判断一下页面上的输入框分类名称是不是为空,为空的话则返回错误信息,紧接着然后获取表单的信息,如果id为null则表示添加的操作,这时走添加的接口addCategory()
,否则的话会走updateCategory()
方法。
最后再设置对话框为false,基本上的操作流程就这些,都是一般的逻辑。
addCategory() { if (this.categoryForm.categoryName.trim() == "") { this.$message.error("分类名不能为空"); return false; } var body = this.categoryForm; if(body.categoryId == null){ addCategory(body).then(response => { this.$message({ type: 'success', message: '添加分类成功!' }) this.getList() }).catch(() => { console.log('error') }) } else { updateCategory(body).then(response => { this.$message({ type: 'success', message: '修改分类成功!' }) this.getList() }).catch(() => { console.log('error') }) }
下面再把删除功能做了,再一起测试。删除功能比较简单点,我们先添加一个删除按钮再操作列中。
4、删除
<el-button type="danger" size="small" icon="el-icon-delete" @click="deleteCategoryById(scope.row.categoryId)">删除</el-button>
然后调用了删除的方法,接下来去完成删除的方法。这个也是很简单的,我们只要传入一个id给后端,然后后端根据id去删除即可,调用接口。
import { categoryList, addCategory, updateCategory, deleteCategory } from '@/api/category'
deleteCategoryById (id) { this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { deleteCategory(id).then(response => { this.$message({ type: 'success', message: '删除成功!' }) this.getList() }).catch(() => { console.log('error') }) }).catch(() => { this.$message({ type: 'error', message: '你已经取消删除该分类!' }) }) },
写完这个,因为我们传入的参数格式不一致,我们要修改后端接口代码:
@ApiOperation(value = "删除分类") @PostMapping("/delete") @OperationLogSys(desc = "删除分类", operationType = OperationType.DELETE) public JsonResult<Object> categoryDelete(@RequestParam(value = "id") int id) { categoryService.deleteCategory(id); return JsonResult.success(); }
好啦,到这里在展示、添加、修改、刪除的功能基本完成,我们测试一下这几个功能。运行一下前后端项目。
添加一条数据:
修改分类:
删除分类:
分类完整代码:
<template> <el-card class="box-card"> <el-button type="primary" size="small" icon="el-icon-plus" @click="transformation(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.categoryId }}</span> </template> </el-table-column> <el-table-column align="center" label="分类名称"> <template slot-scope="scope"> <span>{{ scope.row.categoryName}}</span> </template> </el-table-column><el-table-column align="center" label="创建时间"> <template slot-scope="scope"> <i class="el-icon-time" style="margin-right:5px" /> <span>{{ scope.row.createTime}}</span> </template> </el-table-column><el-table-column align="center" label="更新时间"> <template slot-scope="scope"> <i class="el-icon-time" style="margin-right:5px" /> <span>{{ scope.row.updateTime}}</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="transformation(scope.row)">编辑</el-button> <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteCategoryById(scope.row.categoryId)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <el-pagination class="pagination-container" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.listQuery.pageNum" :page-size="this.listQuery.pageSize" :total="count" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" /> <!-- 添加或修改分类对话框 --> <el-dialog :visible.sync="addOrupdateDialogVisible" width="30%"> <div class="dialog-title-container" slot="title" ref="categoryTitle" /> <el-form label-width="100px" size="medium" :model="categoryForm"> <el-form-item label="分类名称:"> <el-input v-model="categoryForm.categoryName" style="width:220px" /> </el-form-item> </el-form> <div slot="footer"> <el-button @click="addOrupdateDialogVisible = false">取 消</el-button> <el-button type="primary" @click="addCategory"> 确 定 </el-button> </div> </el-dialog> </el-card></template><script> import { categoryList, addCategory, updateCategory, deleteCategory } from '@/api/category'export default { name: 'CategoriesList', created() { this.getList() }, data() { return { list: null, listLoading: true, count: 0, listQuery: { pageNum: 1, pageSize: 10 }, addOrupdateDialogVisible: false, categoryForm: { categoryId: null, categoryName: "" }, } }, methods: { getList() { this.listLoading = true var body = this.listQuery; categoryList({body}).then(response => { this.list = response.data.result this.count = response.data.totalSize this.listLoading = false }) }, transformation(category) { if (category != null) { this.categoryForm = JSON.parse(JSON.stringify(category)); this.$refs.categoryTitle.innerHTML = "修改分类"; } else { this.categoryForm.categoryId = null; this.categoryForm.categoryName = ""; this.$refs.categoryTitle.innerHTML = "添加分类"; } this.addOrupdateDialogVisible = true; }, addCategory() { if (this.categoryForm.categoryName.trim() == "") { this.$message.error("分类名不能为空"); return false; } var body = this.categoryForm; if(body.categoryId == null){ addCategory(body).then(response => { this.$message({ type: 'success', message: '添加分类成功!' }) this.getList() }).catch(() => { console.log('error') }) } else { updateCategory(body).then(response => { this.$message({ type: 'success', message: '修改分类成功!' }) this.getList() }).catch(() => { console.log('error') }) } this.addOrupdateDialogVisible = false; }, deleteCategoryById (id) { this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { deleteCategory(id).then(response => { this.$message({ type: 'success', message: '删除成功!' }) this.getList() }).catch(() => { console.log('error') }) }).catch(() => { this.$message({ type: 'error', message: '你已经取消删除该分类!' }) }) }, handleSizeChange(pageSize) { this.listQuery.pageSize = pageSize this.getList() }, handleCurrentChange(pageNum) { this.listQuery.pageNum = pageNum this.getList() } }}</script><style rel="stylesheet/scss" lang="scss" scoped> .pagination-container { float: right; margin-top: 1.25rem; margin-bottom: 1.25rem; } .box-card { width: 98%; margin: 1%; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .clearfix span { font-weight: 600; }</style>
四、用户功能
首先我们在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);
再写一个实现方法
@Overridepublic 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>
好啦,分类管理和用户的所有的功能全部写完了,这篇写的很长了,我们再用一两篇将剩下的写完基本上这个教程就结束了。
上一篇:Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)
下一篇:Spring Boot + vue-element 开发个人博客项目实战教程(二十一、待定)