若依前端问题集合[前后端分离版本]-Toy模板网

这篇具有很好参考价值的文章主要介绍了若依前端问题集合[前后端分离版本]。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

1.若依前后端分离页面改变title

1.修改icon

2.修改title文字

2.若依关闭Login页面验证码

1.关闭验证码

登录杂项

3.若依前端替换代理地址

4.侧边菜单和全局样式

1.侧边菜单

2.侧边栏顶部logo替换或删除

3.全局样式
修改背景色

1.若依前后端分离页面改变title

修改浏览器title和icon图标
在项目public文件夹中有index.html文件若依前端问题集合[前后端分离版本]

1.修改icon

将icon图标替换为自己需要使用的icon后更改文件名直接使用或者将右边link中的地址替换为自己的文件名,由于不知道<%= BASE_URL %> 的地址是什么所以我是直接改的文件名

<%= BASE_URL %> 根目录
链接: <%= BASE_URL %>详解

后面通过面向百度思想开始查询,这篇博文是看的比较详细的

2.修改title文字

最初是直接修改的文字,就是下面注释的那一行,后来运行项目时发现只有login页面的title是修改成功了,后来在查询才发现全局配置title需要改 .env.development 里面的配置
若依前端问题集合[前后端分离版本]
修改之后重新启动项目就可以发现改成功了

若依前端问题集合[前后端分离版本]

若依框架更改浏览器的title和图标
链接: 若依框架更改浏览器的title和图标

2.若依关闭Login页面验证码

1.关闭验证码

为了演示是减少登录页的操作,将验证码进行关闭,找到菜单内参数设置,将账号自助-验证码开关进行修改,参数键值设置为false
若依前端问题集合[前后端分离版本]

登录杂项

登录页面的标题和底部的一些文本,在view文件夹内login.vue中修改
若依前端问题集合[前后端分离版本]
标题在title标签内修改,底部不需要的文本可以注释掉,也可以进行替换

链接: 若依框架更改浏览器的title和图标

3.若依前端替换代理地址

若依前端问题集合[前后端分离版本]
在vue.config.js中将target内容替换成后端需要代理的IP
hearder中添加keep-alive的作用:有时和后端用的局域网但是链接一直失败,在博客中发现需要添加请求头,同事端口号需要和后端配置一致

详见
链接: Could not proxy request
链接:若依中反向代理解决跨域问题

4.侧边菜单和全局样式

1.侧边菜单

若依前端问题集合[前后端分离版本]
侧边菜单主要通过assets文件夹中style内的slidebar.sass和variables.scss两个文件进行修改,variables.scss主要是定义颜色的变量,对应的变量修改为自己需要的样式就可以了

若依前端问题集合[前后端分离版本]

slidebar.scss主要是定义侧边组件的样式,对应的变量修改为自己需要的样式就可以了,如果只是改颜色之类就不需要改动
若依前端问题集合[前后端分离版本]

**我们的需求是给被点击的菜单添加左侧一个高亮添加的border,在更改过程中发现如果是二级菜单会导致一级菜单显示高亮所有二级菜单都会显示高亮,需要找到对应的地方添加 .el-menu-item.is-active **

    // sidebar.scss
    .el-menu-item.is-active { //被点击的菜单
      color: #fff !important;
      border-left: 5px solid #ffc002;
      background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
      &:hover {
        background-color: $base-sub-menu-hover !important;
      }
    }

    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
        background-color: $base-sub-menu-hover !important;
      }
      i{
        color: #fff;
      }
    }

    & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
    & .theme-dark .el-submenu .el-menu-item {  //选中的所有二级菜单
      background-color: $base-sub-menu-background !important;
      color: #fff !important;
      background-color: #fff;
      &:hover {
        background-color: $base-sub-menu-hover !important;
      }
    }

    &.sidebar-container .theme-dark .el-submenu .is-active { //被点击的菜单
      background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
    }
  }