满天鑫

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

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'& ...

打包之前的路由模式**目标**配置打包之前的路由模式 在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 我们会发现，其实域名 ...

封装一个通用的工具栏**目标**：封装一个通用的工具栏供大家使用 通用工具栏的组件结构 在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装 组件 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&q ...

Node 第 1 天1. 学习目标◆ 能够知道什么是 Node.js◆ 能够知道 Node.js 可以做什么◆ 能够说出 Node.js 中的 JavaScript 的组成部分◆ 能够使用 fs 模块读写操作文件◆ 能够使用 path 模块处理路径◆ 能够使用 http 模块写一个基本的 web 服务器 2. 回顾和思考2.1 为什么 JavaScript 可以在浏览器中执行2.1.1 已经掌握了哪些技术 2.1.2 浏览器中的 JavaScript 的组成部分 2.1.3 为什么 JavaScript 可以在浏览器中被执行 2.2 JavaScript 可以操作 DOM 和 BOM 每个浏览器都内置了 DOM、BOM 这样的 API 函数，因此，浏览器中的 JavaScript 才可以调用它们。 2.3 浏览器中的 JavaScript 运行环境运行环境是指代码正常运行所需的必要环境 总结： V8 引擎负责解析和执行 JavaScript 代码 内置 API 是由运行环境提供的特殊接口，只能在所属的运行环境中被调用 2.4 ...

DAY01-可视化项目01-项目介绍​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。 ​ 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 … 02-使用技术完成该项目需要具备以下知识： div + css 布局 flex 布局 css3动画 css3渐变 css3边框图片 原生js + jquery 使用 rem适配 echarts基础 粗略代码统计： css 580行 html 450行 js 400行 (有效) 03-Echarts-介绍 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性 ...

ES6语法目标 能够说出使用let关键字声明变量的特点 能够使用解构赋值从数组中提取值 能够说出箭头函数拥有的特性 能够使用剩余参数接收剩余的函数参数 能够使用拓展运算符拆分数组 能够说出模板字符串拥有的特性 ES6相关概念（★★）什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了程序运行时的不可预测性 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码 ES6新增语法let（★★★）ES6中新增了用于声明变量的关键字 let声明的变量只在所处于的块级有效 if (true) { let a = 10; }console.log(a) // a is not defined 注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。 不存在变量提升console.log(a); // a is ...

JavaScript高级第04天笔记1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。 其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。 1.2 正则表达式的特点 灵活性、逻辑性和功能性非常的强。 可以迅速地用极简单的方式达到字符串的复杂控制。 对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$/ ...

JavaScript高级第02天笔记1.构造函数和原型1.1对象的三种创建方式–复习 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12); 1.2静态成员和实例成员1.2.1实例成员实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); }}var ldh = new Star ...

JavaScript高级第03天笔记1.函数的定义和调用1.1函数的定义方式 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn = function(){} 方式3 new Function() var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function 里面参数都必须是字符串格式第三种方式执行效率低，也不方便书写，因此较少使用所有函数都是 Function 的实例(对象) 函数也属于对象*/ 1.2函数的调用/* 1. 普通函数 */function fn() { console.log('人生的巅峰');} fn(); ...

JavaScript高级第01天笔记1.面向过程与面向对象1.1面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 1.2面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 1.3面向过程与面向对象对比 面向过程 面向对象 优点 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。 易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护 缺点 不易维护、不易复用、不易扩展 性能比面向过程低 2.对象与类2.1对象对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中用方法来表示（常用动词） 2.1.1创建对象//以下代码是对对象的复习//字面量创建对象var ldh = { name: '刘德华', age: 18}console ...

day07 - Web APIs 学习目标: 能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage 数据的存储以及获取能够写出 localStorage 数据的存储以及获取能够说出它们两者的区别 1.1. 触屏事件1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下： 1.1.2 触摸事件对象（TouchEvent）TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等 touchstart、touchmove、touchend 三个事件都会各自有 ...