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

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

---

目录

---

---

内容

---

1、框架选择

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

• github地址：https://github.com/PanJiaChen/vue-element-admin

2、初步简介及改造计划

2.1、项目启动

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

2.2、关注模块

项目结构如图：

• 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改为中文即可
  • 效果图示：

• 路由添加

  • 位置：添加到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    // 前端后台管理系统