nginx

nginx 配置路径

/etc/nginx/nginx.conf

nginx 重启

systemctl restart nginx

Mysql 忘记密码恢复

步骤1

找到 usr/local/etc/my.cnf,添加 skip-grant-tables

步骤2

重新启动服务 mysql.server start

步骤3

选择数据mysql use mysql

步骤4

设置密码为空

update user set authentication_string=’’ where user=”root”

推出

quit;

步骤5

重启mysql,并登陆

mysql.server restart

mysql -u root -p

步骤6

设置密码校验规格,及密码长度

SHOW VARIABLES LIKE ‘validate_password%’;

set global validate_password.policy=LOW;
set global validate_password.length=6;

否则报错: ERROR 1819 (HY000): Your password does not satisfy the current policy requirements

步骤7

修改密码

ALTER USER ‘root’@’localhost’ IDENTIFIED BY ‘123456’;

推出

quit;

步骤8

重新用密码登陆

JSP

指令

  1. 作用： 用于配置 JSP 页面，导入资源文件

  2. 格式：
    <%@ 指令名称 属性名 1=属性值 1 属性名 2=属性值 2 %>

  3. 分类

    1. page: 配置 JSP 页面

      • contentType: 等同于 response.setContentType()
      • import: 导包
      • errorPage: 当页面发生异常后，会自动跳转到指定的错误页面
      • isErrorPage： 标识当前是不是错误页面
        1. true: 是，可以使用内置对象 exception
        2. false: 否，默认值，不可以使用内置对象 exception

    2. include: 页面包含导入页面的资源文件

      • <%@ include filee=”top.jsp” %>

    3. taglib : 导入资源

    4. prefix: 前缀，自定义

注释

  1. html 注释

    • <!-- -->: 只能注释 html 代码片段

  2. jsp 注释：推荐使用

    • <%-- --%>: 可以注释所有

内置对象

在 JSP 页面中不需要创建，直接使用的对象

变量名 真实类型 作用
pageContext PageContext 当前页面的共享数据
request HttpServletRequest 一次请求访问的多个资源
session HttpSession 一次会话的多个请求期间
application ServletContext 所有用户间共享数据
response HttpServletReponse 响应对象
page Object 当前页面(Servelet)对象 this
out JsWriter 输出对象，数据输出到页面上
config ServletConfig Servlet 的配置对象
exception Throwable 异常对象

EL 表达式

  1. 概念: Express Language 表达式语言

  2. 作用: 替换和简化 jsp 页面中 java 代码的编写

  3. 语法: ${表达式}

  4. 注意: jsp 默认支持 el 表达式。如果要忽略 el 表达式

    1. 设置 jsp 中 page 指令中: isElIgnore="true" 忽略当前 jsp 页面中所有的 el 表达式

    2. \${表达式} : 忽略当前这个 el 表达式

  5. 使用

    1. 运算符

      • 算数运算符: + - * /(div) %(mod)
      • 比较运算符: > < >= <= == !=
      • 逻辑运算符: &&(and) ||(or) !(not)
      • 空运算符: empty
        1. 功能: 用于判断字符串、集合、数组对象是否为 null 或长度为 0
        2. ${not empty str}: 判断字符串、集合、数组对象是否不为 null 或者长度 > 0

    2. 获取值

      • el 表达式只能从与对象中获取值

      • 语法

        1. ${域名称.键名}: 从指定域中获取指定键的值

          • 域名称

            • pagescope -> pageContext
            • requestScope -> request
            • sessionScope -> session
            • applicationScope -> application(ServletContext)

          • 举例: 在 request 域中存储了 name-张

          • 获取 ${requestScope.name}

        2. ${键名}: 表示依次从最小的域中查找是否有该键对应的值，直到找到为止

        3. 获取对象，List，Map

          1. 对象: ${域名称.键名.属性名}
            • 本质上会调用对象的 getter 方法
          2. List 集合: ${域名称.键名[索引]}
          3. Map 集合: ${域名称.键名.key 名称}

Filter

  1. 当访问服务器资源的时候，过滤器可以将请求拦截下来，完成一些特殊的功能
  2. 一般完成一些通用的操作。如：登录验证、统一编码处理、敏感字符过滤
操作 命令 参数｜
ls
cd
创建文件 mkdir
复制文件 cp a.txt
查看端口 lsof -i tcp:port

常见的移动端适配方案

  1. media query
  2. flex 布局
  3. rem + viewport
  4. vh vw
  5. 百分比

Media Query

mediaQueries 的方案可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同css的代码,最终达到界面的配置

核心语法

1
2
3
4
5
6
7
8
9
10
11
12
@media only screen and (max-width: 374px) {
    /* iphone5 或者更小 */

}

@media only screen and (mix-width: 375px) {
    /* iphone 6/7/8 */
}

@media only screen and (min-width: 414px) {
    /* iphone 6p 或者更大尺寸 */
}

有点

  1. media query 可以做到设备像素比的判断, 方法简单, 成本低, 特别是正对移动端和PC端维护同一套代码的时候,.目前像Bootstrap 等框架使用这种方式布局
  2. 图片便于修改,只需要使用css文件
  3. 调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

  1. 代码量比较大, 维护不方便
  2. 为了兼容大屏幕或高清晰设备, 会造成其他设备资源浪费,特变是加载图片资源
  3. 为了兼容移动端和PC端各自响应式的展示效果, 难免会损失各自特有的交互方式

Flex 弹性布局

以天猫的实现方式进行说明

他的viewport是固定的

1
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死,宽度自适应,元素都采用 px做单位
随着屏幕宽度变化, 页面也会跟随着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调整就行(比如网易新闻),这样就实现了[适配]

rem + viewport 缩放

根据 rem 将页面放大dpr倍,然后viewport 设置 1/dpr.

  1. 如 iphone6 plus 的dpr为3,则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)
  2. 然后viewport设置为1/3,这样页面整体缩放回原始大小,从而实现高清

这样整个网页在设备内显示时的页面宽度就会等于设备的逻辑像素大小,也就是device-width.这个device-wdith的计算公式为

设备的物理分辨率/(devicePixelRatio * scale), 在scale为1的情况下, device-width= 设备的物理分辨率/devicePixelRatio

rem 实现

rem 是相对长度单位, rem方案中样式设计为相对于跟元素 font-size 计算值的倍数. 根据 屏幕宽度设置html标签的font-size, 在布局时使用rem 单位布局,达到自适应的目的

viewport 是固定的 

1
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

通过一下代码来控制rem基准值(设计搞以 720px 宽度量取实际尺寸)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
!(function (d) {
    var c = d.document;
    var a = d.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
        var h = a.getBoundingClientRect().width, g;

        if(b===1) {
            h = 720;
        }
        if(h>720) h = 720;

        g= h/7.2

        a.style.fontSize = g + 'px';
    }

    if(b>2) {
        b = 3;
    } else {
        if(b>1) {
            b = 2;
        } else {
            b = 1;
        }
    }

    a.setAttribute('data-dpr',b);
    d.addEventListener("resize", function () { 
        clearTimeout(f);
        f = setTimeout(e,200);
    },false)
    e();
})(window)

css 通过sass预编译,设置取的px值转化rem的变量 $px: (1/100) + rem;

优点

  1. 兼容性好, 页面不会因为伸缩发生变形, 自适应效果更佳

缺点

  1. 不是纯css移动适配方案,需要在头部嵌入一段js脚本监听分辨率的变化来动态改变根元素的字体大小,css样式和js代码又一定耦合性,并且必须改变 font-size 的代码放在css样式之前
  2. 小数像素问题, 浏览器渲染最小的单位是像素, 元素根据屏幕宽度自适应,通过rem 计算后可能会出现小数像素, 浏览器会对这部分小数四舍五入,按照整数渲染,有可能没那么准确

纯vw方案

视口是浏览器中用于呈现网页的区域

  1. vw: 1vw等于视口宽度的1%
  2. vh: 1vh等于视口宽度的1%
  3. vmin: 取 vw和vh中最小的那个
  4. vmax: 取 vw和vh中最大的那个

虽然vw能更优雅的适配, 但是还是有点小问题, 就是宽,高没法限定

1
2
3
4
$base_vw = 375;
@function vw($px) {
    return ($px/$base_vw) * 100vw;
}

优点

  1. 纯 css 移动端适配方案, 不存在脚本依赖问题
  2. 相对于rem 以根元素字体大小的倍数定义元素大小,逻辑清晰简单

缺点

  1. 存在一些兼容性问题,浏览器不支持

vw + rem 方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 设置html根元素的大小, 750px -> 75 640px -> 64
// 将屏幕分成10分, 每分作为根元素的大小
$vw_fontsize: 75;
@function rem($px) {
    @return ($px/$vw_fontsize) * 1rem;
}

$base_design: 750;
html {
    font-size: ($vw_fontsize/($base_design/2))* 100vw;
    

    // 同时,通过Media Queries 限制根元素最大最小值
    @media screen and (max-width:320px) {
        font-size: 64px;
    }

    @media screen and(min-width: 540px) {
        font-size: 108px;
    }

}
// body 也增加最大最小宽度限制, 避免默认100%宽度的block元素跟随body而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

百分比

使用百分比%定义宽度,高度用px固定, 根据可视区域实时尺寸进行调整, 尽可能适应各种分辨率,通常使用max-wdith/min-width 控制尺寸范围过大或过小

优点

  1. 原理简单,不存在兼容性问题

缺点

  1. 如果屏幕尺寸跨度太大, 相对设计搞过大或者过小的屏幕不能正常显示, 在大屏幕手机或横屏竖屏切换场景可能会导致页面元素被拉伸变形, 字体大小无法随屏幕大小发生变化
  2. 设置盒模型的不同属性时, 其百分比设置参考元素不唯一, 容易使布局问题变得复杂.

浏览器端渲染

页面展示指标

  1. FP (First Paint) 第一帧渲染出来

  2. FCP (First Contentful Paint) 首次内容绘制

  3. FMP (First Meaningful Paint)

preload

prefetch

preContent