牧马人的忧伤

主页的token拦截处理目标：根据token处理主页的访问权限问题 权限拦截的流程图 我们已经完成了登录的过程，并且存储了token，但是此时主页并没有因为token的有无而被控制访问权限 接下来我们需要实现以下如下的流程图 在基础框架阶段，我们已经知道src/permission.js是专门处理路由权限的，所以我们在这里处理 流程图转化代码流程图转化的代码 // 权限拦截 导航守卫 路由守卫 router import router from '@/router' // 引入路由实例 import store from '@/store' // 引入vuex store实例 import NProgress from 'nprogress' // 引入一份进度条插件 import 'nprogress/nprogress.css' // 引入进度条样式 const whiteList = ['/login', '/404'] // 定义白名单 所有不受权限控制的页面 // 路由的前置守卫 router.beforeEach(function(to, from, next ...

登录模块线上地址 本章节，我们将在现有模板的基础上，完成如图的登录模块的功能 设置固定的本地访问端口和网站名称目标: 设置统一的本地访问端口和网站title 在正式开发业务之前，先将项目的本地端口和网站名称进行一下调整 本地服务端口: 在vue.config.js中进行设置 vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，但是又不同于webpack，相当于改良版的webpack， 文档地址 如图，是开发环境服务端口的位置 我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？ 在项目下, 我们发现了.env.development和.env.production两个文件 development => 开发环境 production => 生产环境 当我们运行npm run dev进行开发调试的时候,此时会加载执行.env.development文件内容 当我们运行npm run build:prod进行生产环境打包的时候,会加载执行.env ...

路由页面整理目标 删除基础模板中附带的多余页面 基础模板帮我们提前内置了一些页面，本章节我们进行一下整理 首先，我们需要知道类似这种大型中台项目的页面路由是如何设置的。 简单项目 当前项目结构 为什么要拆成若干个路由模块呢？ 因为复杂中台项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，前端的页面中主要分为两部分，一部分是所有人都可以访问的， 一部分是只有有权限的人才可以访问的，拆分多个模块便于更好的控制 静态路由和动态路由 注意这里的动态路由并不是 路由传参的动态路由 了解完成路由设计之后，我们对当前的路由进行一下整理 删除多余的静态路由表 src/router/index.js /** * constantRoutes * a base page that does not have permission requirements * all roles can be accessed */ export const constantRoutes = [ { path: '/login', comp ...

组织架构树形结构布局目标：使用element-UI组件布局组织架构的基本布局 认识组织架构组织架构产品prd) 一个企业的组织架构是该企业的灵魂，组织架构多常采用树形金字塔式结构，本章节，我们布局出页面的基本结构 实现组织架构的头部内容首先实现头部的结构，采用element的行列布局 <el-card class="tree-card"> <!-- 用了一个行列布局 --> <el-row type="flex" justify="space-between" align="middle" style="height: 40px"> <el-col> <span>江苏传智播客教育科技股份有限公司</span> </el-col> <el-col :span="4"> <el-row type="flex" justify="end"> <!-- ...

建立公司角色页面的基本结构目标建立公司页面的基本结构 根据以上的结构，我们采用element-ui的组件实现 src/views/setting/index.vue <template> <div class="dashboard-container"> <div class="app-container"> <el-card> <el-tabs> <!-- 放置页签 --> <el-tab-pane label="角色管理"> <!-- 新增角色按钮 --> <el-row style="height:60px"> <el-button icon="el-icon-plus" size="small" type="pri ...

首页的页面结构目标： 实现系统首页的页面结构 目前，我们的页面还剩下首页，这里我们可以按照如图实现一下的结构 首页页面结构，src/views/dashboard/index.vue <template> <div class="dashboard-container"> <!-- 头部内容 --> <el-card class="header-card"> <div> <div class="fl headL"> <div class="headImg"> <img src="@/assets/common/head.jpg"> </div> <div class="headInfoTip"> <p class="firstChild">早安，管理员，祝你开心每一天！</p> ...

权限设计-RBAC的权限设计思想 首先，我们先了解下什么是传统的权限设计 从上面的图中，我们发现，传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限 基于此，RBAC的权限模型就应运而生了，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下 RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可，接下来，我们就在该项目中实施这一设想 给分配员工角色目标在员工管理页面，分配角色 新建分配角色窗体 在上一节章节中，员工管理的角色功能，我们并没有实现，此章节我们实现给员工分配角色 从上图中，可以看出，用户和角色是1对多的关系，即一个用户可以拥有多个角色，比如公司的董事长可以拥有总经理和系统管理员一样的角色 首先，新建分配角色窗体 ass ...

全模块集成目标： 将其他业务模块代码集成到该项目中 到目前为止，我们已经完成了一个基本项目框架 + 组织架构 + 公司 + 员工 + 权限的 业务联调， 时间关系，我们不可能将所有的业务都去编写一遍，这里提供大家 其余模块的集成代码，最终的目的是让大家得到一个完成的业务模块 要集成的模块业务，包括工资模块，社保模块，考勤模块，审批模块 在我们提供的资源集成模块中，我们提供了四个模块的路由/页面/*api, 按照下面的路径拷贝即可 路由 => src/router/modules 页面 => src/views api => src/api 除此之外，我们需要将 router/modules/user.js 导入到静态路由中，因为这个模块是所有模块都可以访问的 最终，我们将得到一个较为完整的系统业务。

打包之前的路由模式目标配置打包之前的路由模式 在SPA单页应用中，有两种路由模式 hash模式 ： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器 history模式：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器 开发到现在，我们一直都在用hash模式，打包我们尝试用history模式 改成history模式非常简单，只需要将路由的mode类型改成history即可 const createRouter = () => new Router({ mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部 routes: [...constantRoutes] // 改成只有静态路由 }) 假设我们的地址是这样的 www.xxxx/com/hr/a www.xxxx/com/hr/b 我们会发现，其实域名是www.xxxx/com，hr是特定的前缀地址，此时我们可以 ...

全屏插件的引用目标：实现页面的全屏功能 全屏功能可以借助一个插件来实现 第一步，安装全局插件screenfull $ npm i screenfull 第二步，封装全屏显示的插件·· src/components/ScreenFull/index.vue <template> <!-- 放置一个图标 --> <div> <!-- 放置一个svg的图标 --> <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" /> </div> </template> <script> import ScreenFull from 'screenfull' export default { methods: { // 改变全屏 changeScreen() { if (!ScreenFul ...

Element的表单校验补充 我们尝试通过一个案例对Element的表单校验进行一下补充 实现表单基本结构创建项目 $ vue create login 选择babel / eslint 安装Element 开发时依赖 ： 开发环境所需要的依赖 -> devDependencies 运行时依赖: 项目上线依然需要的依赖 -> dependencies $ npm i element-ui 在main.js中对ElementUI进行注册 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 接下来,利用Element组件完成如图的效果 代码如下 <template> <div id="app"> <!-- 卡片组件 --> <el-card class='login-card'> <!-- 登录表单 --> &l ...

封装一个通用的工具栏目标：封装一个通用的工具栏供大家使用 通用工具栏的组件结构 在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装 组件 src/components/PageTools/index.vue <template> <el-card class="page-tools"> <el-row type="flex" justify="space-between" align="middle"> <el-col> <div v-if="showBefore" class="before"> <i class="el-icon-info" /> <!-- 定义前面得插槽 --> <slot name="before" /> </div> </el-col> <el-col> ...