❤ 若依框架vue2版本（springboot-vue前后分离--前端部分-全面解析）

林太白

已于 2024-08-05 17:10:31 修改

阅读量8.8k

点赞数 11

分类专栏：前端文章标签： vue.js 前端 spring boot

于 2023-08-17 16:08:48 首次发布

林太白

本文链接：https://blog.csdn.net/weixin_43615570/article/details/132339055

版权

前端专栏收录该内容

24 篇文章

订阅专栏

❤ 解析若依框架之前台修改

1、ruoyi修改页面标题-网页logo-页面标题-登录名称

一般在vue项目public文件夹下命名为“favicon.ico”

❤ 处理步骤

第1步：将图标重命名为“favicon.ico”，并放在项目根目录下。
第2步：然后在index.html中引入，title中修改页面标题。
第3步：修改build文件夹下 webpack .dev.conf.js和webpack.prod.conf.js文件中的内容。
第五步：重新已经成功

修改网页上的logo

ruoyi-ui --> public --> favicon.ico，把这个图片换成你自己的logo

修改网页标题

根目录下的vue.config.js

const name = process.env.VUE_APP_TITLE || ‘若依管理系统’ // 网页标题

换成自己网站标题

修改页面中的logo

ruoyi-ui --> src --> assets --> logo --> logo.png，把这个图片换成你自己的logo

修改页面标题

ruoyi-ui --> src --> layout --> components --> Sidebar --> Logo.vue

title: ‘若依管理系统’, 换成自己网站的名称（或者全局搜索）

修改登录页面名称

ruoyi-ui --> src -->views 下的login.vue文件中的

<h3 class="title">若依后台管理系统</h3> 修改成自己的管理后台名称

修改注册系统页面显示名称

ruoyi-ui --> src -->views 下的register.vue 文件中的

<h3 class="title">若依后台管理系统修改成自己管理后台名称

配置文件名称

将这个名称 VUE_APP_TITLE = 若依管理系统
换成自己网站名称

2、首页右上角源码地址 & 文档地址头部管理

在ruoyi-ui=> src => layout => Navnar.vue 下找到 Navbar.vue 这个文件

3、更改面包屑

注意components =》 Breadcrumb=》 index.vue

isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim() === 'Index'
 },
 
 //判别 name.trim() === 'Index' 是否和路由名称对应

4、发布服务器，点击刷新、退出报404和nginx欢迎页面问题解决

layout => Navbar

监听多次刷新时是否重新载入或者跳转到index

async logout () {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$store.dispatch('LogOut').then(() => {
        //   location.reload()
        // })
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
    }

//【解决结果】无效

5、若依 ruoyi 修改默认布局设置

代码 ruoyi-ui/src/settings.js

6、开启网页的动态标题

在这里插入图片描述

标题与路由呼应
在这里插入图片描述

7、自己设定当前标题

直接挂载到mounted 里面即可
在这里插入图片描述

mounted(){
    document.title ='测试权限';
  }

8、若依对于Element主题色的配置

在main.js中配置了Element 主题色配置
在这里插入图片描述

更改以后的效果
在这里插入图片描述

9、修改若依的加载页面

在这里插入图片描述

找到ruoyi-ui目录中的public目录下的index.html文件

然后按照自己想要的进行更改就可以

10、删除方法

removerty(row) {
      let _this = this;

       _this.$confirm('您是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
      // 更改之前
        return deleteArchives(row.userId);
       // 更改之后
       deleteArchives(row.userId).then(res => {
        	 if(res.code==200){
        	    console.log(res,'正确信息');
        	 }else{
        	 	console.log(res,'错误信息');
        	 }
      });

      }).then(() => {
        _this.handleQuery();
       // _this.msgSuccess("删除成功");// 隐藏掉
      }).catch(function() {});

    },

功能实现

获取当前时间

在若依框架中实现获取当前时间并在前端页面中正确显示前端实现

import {parseTime} from "@/utils/ruoyi";
let stime=parseTime(new Date().getTime(), '{y}-{m}-{d}')
console.log('现在时间',stime);

登录重新出现弹窗优化

在老版本的若以项目之中全局请求方法尚未优化的时候会出现一种情况，就是弹窗不段重复出现

在这里插入图片描述

这里我们看看他优化的整个过程

文件夹位于这个部分：
src\utils\request.js

// 是否显示重新登录
export let isRelogin = { show: false };


// 相应响应拦截器部分
if (code === 401) {
      if (!isRelogin.show) {
        isRelogin.show = true;
        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
          isRelogin.show = false;
          store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
      }).catch(() => {
        isRelogin.show = false;
      });
    }
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    }