初始化-前端后台管理-Saas多租户平台开发

初始化-前端后台管理-Saas多租户平台开发

目录




内容

1、框架选择

目前我们做的是前端后台管理模块,很适合做SPA应用,选择vue+element-ui。在github上找了个不错的集成框架,vue-element-admin,下面给出github地址,关于详细介绍自己去查看。

2、初步简介及改造计划

2.1、项目启动

  • 步骤
    1. 下载项目到本地,解压
    2. 进入目录,在命令行执行命令:npm i
    3. 启动项目:npm run dev 或者vue ui
    4. 登录

2.2、关注模块

项目结构如图:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgQkUvcz-1606291237857)(./images/2020-11-25_structure.png)]需要我们关注的模块或者文件:

  • api: 统一向后端发送的接口
  • route: 路由模块
    • constantRoutes:公用路由
    • asycRoutes:异步路由(非公用路由)
  • store:vuex模块
  • views:路由组件
  • permission.js:与main.js同级,路由导航守卫

2.3、异步组件

这里发送异步请求用到的是axios,简单封装在@/utils/request.js中。

  • 因为项目中所有的数据都是通过mock生成的,他的request.js自然不适合向后端发请求。
  • 因为涉及登录token验证以及路由导航守卫验证权限等等,复制一份request.js中的内容,生成一个新的文件http.js。

2.4、路由

  • 汉化:我们看到项目启动之后,左侧菜单都是英文

    • 找到@/route/index…js里面菜单对应的路由
    • 把路由对象meta里面的tiltle改为中文即可
    • 效果图示:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MQhAl5yT-1606291237875)(./images/2020-11-25_route-hans.png)]
  • 路由添加

    • 位置:添加到asyncRoutes对象中,可复制原有的路由对象,适当改造,具体应用见功能模块部分
  • 路由组件

    • 位置:@/views/下面 创建对应功能模块的文件夹及路由文件(vue文件)

2.5、api

  • @/api下位我们要向后端发送请求,获取数据的接口
  • 每个功能页面都可能发送很多请求,而且请求路径不尽相同,我们在api下面创建相应的文件夹,具体使用参考功能模块部分

路由添加及api接口方法部分,下面我们已具体的功能模块示例

2.6、store

store模块位vuex相关内容,其中很大一部分存储的和前端权限控制相关的内容,包括,token、角色、权限等等。

2.7、权限控制

前端权限控制包括:权限、权限(菜单与按钮)的显示与隐藏以及权限控制。

  • 权限包括3方面

    • 一、是否登录 二、路由菜单权限。三、按钮权限(向后端发送请求的按钮,非普通按钮)
    • 是否登录:登录后返回的token存储在前端,token种存储的为SESSIONID
      • 因为我们后端权限控制使用shiro框架,shiro通过session校验权限
    • 路由菜单:当前路由菜单为固定的,后面我们需要根据登录用户角色的不同,动态生成菜单。
    • 按钮权限:同样的会根据用户是否有改权限用来显示或者隐藏改按钮
  • 权限的显示与隐藏

    • 菜单的显示:通过登录用户登录的时候, 查询具有的菜单权限,动态生成路由,完成初始化渲染
    • 按钮:
      • 通过登录用户登录的时候, 查询具有的按钮权限
      • 在页面跳转之后,通过按钮权限列表判断是否有改页面按钮权限,来显示或者隐藏按钮
  • 权限控制

    • 路由导航守卫
      • 页面跳转的时候,判断是否登录,跳转登录页面,提示为登录
      • 已登录
        • 如果用户手动在地址栏输入没有权限的路由,提示没有权限访问
    • token处理请求拦截器
      • 如果token有值,在请求头中携带改token
    • 点击权限按钮
      • 如果用户或者非法用户通过拦截请求发送没有权限的请求,这个通过后端校验。

2.8、登录

目前登录信息也是固定的,不是通过后端查询数据库获取的真实用户信息,这个部分等我们做权限控制的时候在讲解。

3、后续

下面通过添加功能模块,讲解从数据库表设计->API接口->后端接口实现->前端后台管理页面数据获取与渲染全过程,文档分为3份:

  1. 数据库表与API接口
  2. 后端接口实现
  3. 前端页面数据获取与渲染

后记

本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785

    后端JAVA源代码地址:https://gitee.com/gaogzhen/ihrm-parent    // 后端项目
前端项目源代码地址:https://gitee.com/gaogzhen/ihrm-vue    // 前端后台管理系统
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值