⭐ 作者简介:码上言
⭐ 代表教程: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 }) }