若依框架Vue版本的应用

熊孩子依旧调皮
841 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

前言

若依框架它是基于Spring Boot Vue的前后端分离式框架，支持更多的插件，自带响应式，最大的亮点是可以一键生成前后端代码，几乎是不用大的改动，即可便携式上线和维护

使用

  • 安装 把项目克隆到本地，并进入到项目目录
git clone https://gitee.com/y_project/RuoYi-Vue
cd ruoyi-ui
  • 依赖和文件结构 文件结构和普通的vue项目，没有明显的区别，注意！如果npm下载慢的话，可以使用taobao.org安装

image.png 以上是启动之后的效果

路由

启动登录并拉去完当前用户的信息后，调用store内的action方法GenerateRoutes

  store.dispatch('GenerateRoutes').then(accessRoutes => {})

请求接口后端返回并存储到store里，并以promise的形式返回，生成一个可根据自身权限访问的路由表，并把该表添加到roter里，页面路径：sotre->module->permission

router.addRoutes(accessRoutes)
next({ ...to, replace: true })

在store中，向服务器请求路由接口，请求成功后并将它通过commit提交mutations

GenerateRoutes({ commit }) {
    return new Promise(resolve => {
        getrouter().then((response)=>{
          const sdata = JSON.parse(JSON.stringify(res.data))
          const rdata = JSON.parse(JSON.stringify(res.data))
          commit('SET_TOPBAR_ROUTES', sdata)
          commit('SET_ROUTES', rdata)
        })
    })
})

和router.js内的公共路由合并，和将顶部的菜单栏展示首页，注意！在此之前需要把请求回来的路由数据，转换成组件对象

SET_ROUTES: (state, routes) => {
  state.addRoutes = routes
  state.routes = constantRoutes.concat(routes)
}

代码生成

登录之后在系统工具菜单栏中，有代码生成模块，在内有编辑，生成代码，查看代码按钮，列表内的每条数据，是一张表（需要后端去创建） image.png

  • 编辑 打开后有三个模块，基本信息、字段信息、生成信息
  1. 基本信息 这张表的概括信息设置，表的名称、概述、备注等 image.png
  2. 字段信息

在内可以编辑该页面的一些字段、字段名称、该字段在java内的类型，提供插入、编辑、列表、查询 如果全选则不管是在列表还是在查询修改都会有改字段 image.png 比较有趣的是显示类型，它提供该字段查询时所有的表单显示方式，比如下拉框，输入框

  1. 生成信息 这个模块是配置改模块页面的名称、路由地址、和权限，配置主包的生成模板是单表或树表（增删改查），上级菜单、生成代码的方式 image.png

总结

目前是把用的最多的功能给总结了下，其他的还有角色权限验证，操作权限验证等，不过这些都已集成好，无需在修改，只要是路由配置没问题这些都可不用二次修改，文档如下： RuoYi-Vue

avatar
文章
阅读
粉丝