【RUOYI3.8.8】框架参考笔记
- 环境准备
- 具体操作
- 如何增加一个不需要登录就可以访问的页面
- 如何将后台几个文件安排到其他文件夹
- VUE知识点
- 参考
环境准备
按照官方的文档操作,期间遇到的问题
- 由于是内网,因此配置了maven的settings才能通过,通过如下链接解决
https://youyouhome.blog.csdn.net/article/details/143309109
- redis设置密码,使用客户端设置临时密码,但是可以通过在redis.windows.conf和redis.windows.conf中设置requirepass xxx就可以了
具体操作
如何增加一个不需要登录就可以访问的页面
场景:增加不登录时能查看的页面,比如访问http://127.0.0.1:81/index或者http://127.0.0.1:81时能到首页,访问/admin的时候就到后台的首页
步骤:
- 创建一个前台的页面,路径是ruoyi-ui/src/views/front/index.vue
- 修改路由
ruoyi-ui/src/router/index.js文件中增加公共路由
//前台界面{path: '/index',component: () => import('@/views/front/index'),},{path: '',component: Layout,redirect: '/index',}
同时在文件中修改后台首页的路由
{path: '/admin',component: Layout,redirect: '/admin/index',children: [{path: '/admin/index',component: () => import('@/views/admin/index'),name: 'Index',meta: { title: '首页', icon: 'dashboard', affix: true }}]},
- 修改没登录时的跳转
修改文件ruoyi-ui/src/permission.js
if (whiteList.indexOf(to.path) !== -1) {// 在免登录白名单,直接进入next()} else {// 增加首页不登录时访问const indexList = ['/index']if(indexList.indexOf(to.path) !== -1){next()}else{next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页NProgress.done()}}
如何将后台几个文件安排到其他文件夹
比如把如下文件移动到views下面的新建的admin目录中,表示admin后台相关的页面文件
index.vue
index_v1.vue
login.vue
redirect.vue
register.vue
移动后的目录为
ruoyi-ui/src/views/admin
ruoyi-ui/src/views/admin/index.vue
ruoyi-ui/src/views/admin/index_v1.vue
ruoyi-ui/src/views/admin/login.vue
ruoyi-ui/src/views/admin/redirect.vue
ruoyi-ui/src/views/admin/register.vue
需要修改的地方有
- index.vue、index_v1.vue、login.vue、redirect.vue、register.vue这个几个文件中有相对路径引用的地方都需要修改,报错主要是图片和模块引用,按报错提示修改即可
- 修改路由配置
路径是:ruoyi-ui/src/router/index.js,将公共路由的/redirect、/login、/register、index路径修改成admin目录的路径,如
{path: '/register',component: () => import('@/views/admin/register'),hidden: true},{path: '/404',component: () => import('@/views/error/404'),hidden: true},
- 修改ruoyi-ui/src/layout/components/Navbar.vue
这里主要目的是,点击退出的时候重定向的url
async logout() {this.$confirm('确定注销并退出系统吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$store.dispatch('LogOut').then(() => {location.href = '/admin/index';})}).catch(() => {});}
- 其他地方不需要修改,直接编译访问就可以了
VUE知识点
主要记录的是自己对于这个项目的要点
- route.query && route.query.redirect含义
route.query指的就是浏览器上的地址
route.query.redirect指的就是浏览器地址中的参数如:http://127.0.0.1:81/login?redirect=%2Fadmin%2Findex
参考
若依官网: https://doc.ruoyi.vip/ruoyi-vue/document/.
element-ui:https://element.eleme.cn/#/zh-CN/component/menu