牧马人的忧伤

移动端WEB开发之响应式布局响应式开发原理响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 bootstrap的介绍Bootstrap简介Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Boot ...

移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 媒体查询什么是媒体查询媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询 媒体查询语法规范 用 @me ...

初识SpringSecurity参考来源于黑马程序员： 手把手教你精通新版SpringSecurity 权限管理概念权限管理，一般指根据系统设置的安全规则或者安全策略，用户可以访问而且只能访问自己被授权的资源。权限管理几乎出现在任何系统里面，前提是需要有用户和密码认证的系统。 在权限管理的概念中，有两个非常重要的名词： 认证：通过用户名和密码成功登陆系统后，让系统得到当前用户的角色身份。 授权：系统根据当前用户的角色，给其授予对应可以操作的权限资源。 完成权限管理需要三个对象 用户：主要包含用户名，密码和当前用户的角色信息，可实现认证操作。 角色：主要包含角色名称，角色描述和当前角色拥有的权限信息，可实现授权操作。 权限：权限也可以称为菜单，主要包含当前权限名称，url地址等信息，可实现动态展示菜单。 注：这三个对象中，用户与角色是多对多的关系，角色与权限是多对多的关系，用户与权限没有直接关系，二者是通过角色来建立关联关系的。 初识SpringSecuritySpring Security是spring采用AOP思想，基于servlet过滤器实现的安全框架。它提供了完善的 ...

SpringSecurity认证过程参考来源于黑马程序员： 手把手教你精通新版SpringSecurity 设置用户状态用户认证业务里，我们封装User对象时，选择了三个构造参数的构造方法，其实还有另一个构造方法： public User(String username, String password, boolean enabled, boolean accountNonExpired, boolean credentialsNonExpired, boolean accountNonLocked, Collection<? extends GrantedAuthority> authorities) { if (username != null && !"".equals(username) && password != null) { this.username = username; this.password = password; this.enabled = enable ...

SpringSecurity在单机环境下使用参考来源于黑马程序员： 手把手教你精通新版SpringSecurity 技术选型SpringBoot2.1.3，SpringSecurity，MySQL，mybatis，jsp 初步整合认证第一版创建工程并导入jar包先只导入SpringBoot <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.3.RELEASE</version> <relativePath/> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

OAuth2.0介绍参考来源于黑马程序员： 手把手教你精通新版SpringSecurity 概念说明先说OAuth，OAuth是Open Authorization的简写。OAuth协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAuth的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此OAuth是安全的。 OAuth2.0是OAuth协议的延续版本，但不向前兼容(即完全废止了OAuth1.0)。 使用场景假设，A网站是一个打印照片的网站，B网站是一个存储照片的网站，二者原本毫无关联。如果一个用户想使用A网站打印自己存储在B网站的照片，那么A网站就需要使用B网站的照片资源才行。按照传统的思考模式，我们需要A网站具有登录B网站的用户名和密码才行，但是，现在有了OAuth2，只需要A网站获取到使用B网站照片资源的一个通行令牌即可！这个令牌无需具备操作B网站所有资源的权限，也无需永久有效，只要满足A网站打印照片需求即可。这么听来，是不是有点像单点登录？NONONO！千万不要混淆 ...

SpringSecurity在分布式环境下的使用参考来源于黑马程序员： 手把手教你精通新版SpringSecurity 分布式认证概念说明分布式认证，即我们常说的单点登录，简称SSO，指的是在多应用系统的项目中，用户只需要登录一次，就可以访问所有互相信任的应用系统。 分布式认证流程图首先，我们要明确，在分布式项目中，每台服务器都有各自独立的session，而这些session之间是无法直接共享资源的，所以，session通常不能被作为单点登录的技术方案。最合理的单点登录方案流程如下图所示： 总结一下，单点登录的实现分两大环节： 用户认证：这一环节主要是用户向认证服务器发起认证请求，认证服务器给用户返回一个成功的令牌token，主要在认证服务器中完成，即图中的A系统，注意A系统只能有一个。 身份校验：这一环节是用户携带token去访问其他服务器时，在其他服务器中要对token的真伪进行检验，主要在资源服务器中完成，即图中的B系统，这里B系统可以有很多个。 JWT介绍概念说明从分布式认证流程中，我们不难发现，这中间起最关键作用的就是token，token的安全与否，直接关系到系统的健 ...

一、ECMAScript引出1、什么是 ECMA和ECMAScriptECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制 造商协会, 这个组织的目标是评估、开发和认可电信和计算机标准. 1994 年后该 组织改名为 Ecma 国际. ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言. 2、ECMA-262Ecma 国际制定了许多标准, 而 ECMA-262 只是其中的一个, 所有标准列表查看 —点我传送 Ⅰ-ECMA-262 历史ECMA-262（ECMAScript）历史版本查看网址: —>点我传送 版数 年份 内容 第 1 版 1997 年 制定了语言的基本语法 第 2 版 1998 年 较小改动 第 3 版 1999 年 引入正则、异常处理、格式化输出等. IE 开始支持 第 4 版 2007 年 过于激进, 未发布 第 5 版 2009 年 引入严格模式、JSON , 扩展对象、数组、原型、字符串、日期方法 第 6 版 2 ...

移动web开发——flex布局传统布局和flex布局对比传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex flex布局原理 flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 父项常见属性 flex-direct ...

SassScript在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。 弱类型语言, 对语法要求没那么严格 一、注释 Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。 插值语句 (interpolation) 也可写进多行注释中输出变量值 例如： // compile scss files to css // it's ready to do it. $pink: #f3e1e1; html{ background-color: $pink; } $author: 'gdream@126.com'; /*! Author: #{$author}. */ 开发模式编译后: /* hello world! */ html{ background-col ...

一、Promise的理解与使用1、概念: ​ Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。 Pending 正在做。。。 Resolved 完成这个承诺 Rejected 这个承诺没有完成，失败了 ​ Promise 用来预定一个不一定能完成的任务，要么成功，要么失败 ​ 在具体的程序中具体的体现，通常用来封装一个异步任务，提供承诺结果 Promise 是异步编程的一种解决方案，主要用来解决回调地狱的问题，可以有效的减少回调嵌套。真正解决需要配合async/await 2、特点: ​ (1)对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当 ...

一、TypeScript安装TypeScript 的命令行工具安装方法如下： npm install -g typescript //使用ts的node npm i -g ts-node 以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。 编译一个 TypeScript 文件很简单： tsc hello.ts 我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。 二、Hello TypeScript我们从一个简单的例子开始。 将以下代码复制到 hello.ts 中： function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user)); 然后执行 tsc hello.ts 这时候会生成一个编译好的文件 hello.js： function sayHello(person) { return ...