⭐ 作者简介：码上言
⭐ 代表教程：Spring Boot + vue-element 开发个人博客项目实战教程
项目部署视频
https://www.bilibili.com/video/BV1sg4y1A7Kv/?vd_source=dc7bf298d3c608d281c16239b3f5167b
文章目录
前言
接下来，我们主要还剩下前端页面的编写工作，对于vue不了解的同学到这基本上后端的东西说完了，下面的可以选学，学一学vue再来看，其实也没什么，希望大家一鼓作气学习完。
一、修改
1、修改错误信息
我们之前写的登录的代码，现在可能大家会发现登录进来还有错误信息的提示，我们先暂时把那个提示去掉。
打开views/login/index.vue文件，修改handleLogin()方法，去掉以下代码。
this.$notify.error({ title: '登录失败', message: '请输入正确的用户名或密码！' })
完整代码：
handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true this.$store.dispatch('Login', this.loginForm).then(() => { this.loading = false this.$router.push({ path: this.redirect || '/' }) }).catch(() => { this.loading = false }) } else { console.log('error submit!!') return false } }) }
如果你点击登录控制台出现302错误，请检查一下前端的代码中headers是否正确。
2、主页页面修改
我们修改完，然后运行项目打开页面，会看到如下页面。
我们可以看一下vue-element-admin框架的页面，首页为控制台，我们可以放一些大的标题、图表等信息，美化一下我们的后台网站。
打开src/router/index.js文件，然后我们配置一下路由，将以下的代码注释掉。
{ path: '/', component: Layout, redirect: '/dashboard', name: 'Dashboard', hidden: true, children: [{ path: 'dashboard', component: () => import('@/views/dashboard/index') }] },
然后我们自己添加dashboard路由，其中icon的图表可以从https://www.iconfont.cn/进行下载，或者我是下载的vue-element-admin的src/icons/svg中找的。
{ path: '/', component: Layout, redirect: '/dashboard', name: 'Dashboard', children: [{ path: 'dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } }] },
然后我们再打开项目，就会看到我们一进来就是项目的控制台首页了。
这时我们会注意到左侧的导航栏都是英文，我们如何改成自己的导航的文字呢，也是在src/router/index.js这个文件中，我们会看到meta属性，然后修改title的名称即可。
二、导航栏改造
现在我们开始改造一下左侧的导航栏，我们将原来的导航栏都删除掉，只留下dashboard控制台。如何删除呢？我们先把src/router/index.js里面的删除掉，然后再去views里面找到对应的文件删除掉，如果你不会，可以去https://gitee.com/xyhwh/personal_vue下载。
搭建一个新的页面导航要做以下操作。
1、添加路由
首先我们还是打开src/router/index.js文件，然后我们新添加一个导航的路由。其中icon的图标可以在https://www.iconfont.cn/下载，格式为svg。下载完放到src/icons/svg文件中。
{ path: '/operation', component: Layout, redirect: '/operation/list', name: 'Operation', meta: { title: '日志中心', icon: 'operationlog' }, children: [ { path: 'list', name: 'OperationList', component: () => import('@/views/operation/index'), meta: { title: '操作日志', icon: '' } }, { path: 'loginlog', name: 'LoginLogList', component: () => import('@/views/operation/loginlog'), meta: { title: '登录日志', icon: '' } } ] },
这里我要说一下，路由和侧边栏是组织起一个后台应用的关键骨架。这个框架项目的侧边栏和路由是绑定在一起的，所以你只有在 @/router/index.js 下面配置对应的路由，侧边栏就能动态的生成了。大大减轻了手动重复编辑侧边栏的工作量。当然这样就需要在配置路由的时候遵循一些约定的规则。
例如：
{ path: '/permission', component: Layout, redirect: '/permission/index', //重定向地址，在面包屑中点击会重定向去的地址 hidden: true, // 不在侧边栏显示 alwaysShow: true, //一直显示根路由 meta: { roles: ['admin','editor'] }, //你可以在根路由设置权限，这样它下面所有的子路由都继承了这个权限 children: [{ path: 'index', component: ()=>import('permission/index'), name: 'permission', meta: { title: 'permission', icon: 'lock', //图标 roles: ['admin','editor'], //或者你可以给每一个子路由设置自己的权限 noCache: true // 不会被 <keep-alive> 缓存 } }] }
前端这个东西要多自己动手看效果，不行就修改，不要记忆，大脑是用来思考的，不是用来记忆的。
2、添加页面
在rcs/views文件下，我们新建一个operation文件夹，然后再里面新建index.vue和loginlog.vue两个文件，我们先创建一些模板。
index.vue文件：
<template> <div class="operationlog"> <q>这是操作日志页面</q> </div> </template> <script> export default { name: 'Operationlog', computed: { } } </script> <style rel="stylesheet/scss" lang="scss" scoped> </style>
loginlog.vue文件：
<template> <div class="operationlog"> <q>这是登录日志页面</q> </div> </template> <script> export default { name: 'Operationlog', computed: { } } </script> <style rel="stylesheet/scss" lang="scss" scoped> </style>
然后我们再运行项目，打开浏览器看一下。然后我们可以在右侧开发我们的功能了。
看下我们的后台系统，是不是看着也挺好看的，还是开始的目标，我们知道开发的流程和具体的操作即可，有些安全性的东西和页面美化就不太多的描述，作为毕设系统和初学的项目完全足够了。
三、操作日志页面开发
在开发的过程中，这个前端框架使用了eslint校验代码，虽然是限制我们规范化写代码，但是特别的烦，动不动就报红色，所以我们先不用这个了，我设置一下就不让它检验src目录下的文件了。打开项目的这个文件，然后加入/src保存即可。
现在开始写页面，我们先加一下操作日志的接口，也就是我们后端写的Controller的api接口，首先打开src/api，然后创建一个operation.js文件，然后写入我们的api接口，和原来的login登录一样，可以参考登录的api。
import request from '@/utils/request' export function fetchLogList(query) { return request({ url: '/log/operationLog/list', method: 'post', data: query }) }
