Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)1

简介: Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)1

⭐ 作者简介:码上言



⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程



⭐专栏内容:零基础学Java个人博客系统

项目部署视频

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.vueloginlog.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
  })
}
相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
12天前
|
Java 数据安全/隐私保护 Spring
Java 中 Spring Boot 框架下的 Email 开发
Java 中 Spring Boot 框架下的 Email 开发
263 2
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的个人博客系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的个人博客系统的详细设计和实现
|
3天前
|
Java Spring 容器
Spring注解开发,bean的作用范围及生命周期、Spring注解开发依赖注入
Spring注解开发,bean的作用范围及生命周期、Spring注解开发依赖注入
10 1
Spring注解开发,bean的作用范围及生命周期、Spring注解开发依赖注入
|
6天前
|
JavaScript Java 关系型数据库
博客|基于Springboot的个人博客系统设计与实现(源码+数据库+文档)
博客|基于Springboot的个人博客系统设计与实现(源码+数据库+文档)
18 0
|
12天前
|
前端开发 安全 Java
使用Spring框架加速Java开发
使用Spring框架加速Java开发
59 0
|
12天前
|
传感器 人工智能 前端开发
JAVA语言VUE2+Spring boot+MySQL开发的智慧校园系统源码(电子班牌可人脸识别)Saas 模式
智慧校园电子班牌,坐落于班级的门口,适合于各类型学校的场景应用,班级学校日常内容更新可由班级自行管理,也可由学校统一管理。让我们一起看看,电子班牌有哪些功能呢?
110 4
JAVA语言VUE2+Spring boot+MySQL开发的智慧校园系统源码(电子班牌可人脸识别)Saas 模式
|
12天前
|
Java Spring
spring boot访问接口报500
spring boot访问接口报500
16 2
|
12天前
|
IDE Java 开发工具
Spring Boot DevTools:加速开发的热部署工具
【4月更文挑战第28天】在Spring Boot的开发过程中,快速反馈和效率至关重要。Spring Boot DevTools是一个为开发者设计的模块,支持热部署(hot swapping),能够实现应用的快速重启和自动重载,极大地提高了开发效率。本篇博客将介绍Spring Boot DevTools的核心概念,并通过具体的实战示例展示如何在开发过程中利用这一工具。
29 0
|
12天前
|
Java 数据库连接 数据库
spring+mybatis_编写一个简单的增删改查接口
spring+mybatis_编写一个简单的增删改查接口
20 2
|
12天前
|
开发框架 前端开发 安全
Java从入门到精通:2.2.2学习使用Spring框架进行Web应用开发
Java从入门到精通:2.2.2学习使用Spring框架进行Web应用开发