李仕臣

李仕臣的博客

183
文章
87
分类
136
标签

CSS固定宽高比

HTML+CSS
  |  
 阅读次数

纯CSS实现固定宽高比

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
  <style type="text/css">
    .container {
      position: relative;
      width: 40%;
      /*触发BFC，否则内部元素撑不开container*/
      overflow: hidden;
      /*为了让大家看清楚效果加的边*/
      border: 1px solid black;
    }

    /*支架，用于按2:1的宽高比撑开父级元素，如果是4:3，那么这里改成75%即可*/
    .container::before {
      display: block;
      content: '';
      margin-top: 50%;
    }

    .target {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  </style>

<body>
  <div class="container">
    <img class="target" src="http://i2.tiimg.com/611341/b66c935ed2587806t.jpg" alt="">
  </div>
</body>

总结：

容器元素：宽度百分比，overflow：hidden; 防止与父元素margin重叠，进入BFC块级格式化上下文。相对定位，为target容器确定定位参照。

伪类元素：margin-top百分比值继承自父元素宽度,通过伪类元素撑开容器盒子,使其拥有高度.

目标元素：通过绝对定位，脱离文档流，并使 宽/高100% 继承父元素宽高值。来达到img固定宽高比。

附：原文地址

参考文献

背景色

16进制cdc转rgb(204,221,204)

深入理解JS中this

JavaScript
  |  
 阅读次数

[转]深入理解javascript之this

(2018年2月28日 16:38:18)

javascript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式。
函数有以下几种调用方式：作为对象方法调用、作为函数调用、作为构造函数调用、apply或call调用。

  • 对象方法调用
    作为对象方法调用的时候,this会被绑定到该对象。
    例：略

  • 强调:
    this是在函数执行时去获取对应的值,而不是函数定义时。即使是对象方法调用,如果该方法的函数属性以函数名的形式传入其他作用域,也会改变this的指向。我举一个例子：

  • 函数调用
    函数也可以直接被调用,这个时候this被绑定到了全局对象。

  • 构造函数调用
    在javascript中自己创建构造函数时可以利用this来指向新创建的对象上。这样就可以避免函数中的this指向全局了。

  • apply或call调用
    这两个方法可以切换函数执行的上下文环境,也就是改变this绑定的对象。apply和call比较类似,区别在于传入参数时一个要求是数组,一个要求是分开传入。所以我们以apply为例：

  • 箭头函数调用
    补充:ES6中 箭头函数的this始终指向函数定义时的this, 而非执行时。
    我们通过一个例子来理解:
    还需要注意一点的就是这个this不会改变指向对象,我们知道call和apply可以改变this的指向,但是在箭头函数中无效的。

  • 箭头函数的特性
    箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的this始终指向函数定义时的 this,而非执行时。我们通过一个例子来理解:

阅读原文

Vim大全

  |  
 阅读次数
Name Academy score
Harry Potter Gryffindor 90
Hermione Granger Gryffindor 100
Draco Malfoy Slytherin 90

Nginx+Vue实现前后端分离

Nginx
  |  
 阅读次数

Nginx+Vue.js实现前后端分离

1.nginx 是一个高性能的HTTP和反向代理服务器，常用于分布式服务器管理.

2.Es6学习地址

3.vue.js是一款前端模板渲染引擎,类似于后端的jsp,beetl等模板引擎.当然结合node环境也可作为后端渲染用.(官网已支持)

说了上述几点,让我们来回答几个为什么?

1.实现前后端分离的好处是什么?主要应用场景在哪?

2.为什么有了后端模板引擎,为什么还要用前端的模板引擎?他们的优势和劣势?

3.实现前后端分离需要怎么改？

答：

1.首先是发展的眼光看问题，以前的项目大多呈现的是PC端项目,且场景简单,固定.请求大多是有状态的.而现在我们常常是移动端项目较多,同一款app大多是原生和内嵌页面相结合的方式.并且现在的项目场景更多元化,这导致一个功能模块很可能是好几个项目的请求共同作用的结果.

2.如果还按照以前的做法,第一个问题是我只能用jsonp去解决调多个跨域请求的问题,实现起来代码太过冗余。对于同一功能,很有可能app端和PC端就有两套不同的写法。并且带宽是个很贵的东西,客户端总是去服务器端一起静态资源的请求,会导致速度慢。动静分离可以实现静态资源和动态资源分开获取,并且服务器也能动静分离,有效解决带宽问题。

3.后端开发人员对于css,js的掌握可能不如前端熟练,比如利用jsp填充数据时,往往需要后端开发人员去调样式和写js,这样会造成开发效率低下。

4.采用前端模板渲染可以释放服务器端的一部分压力,并且前端模板引擎支持的功能比后端丰富.比如用vue可以自定义组件,校验方式,深入式渐变等,这比后端模板引擎功能要更加丰富.

nginx 配置静态资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
server {
       listen       4000;
       server_name  www.test.com;
       charset utf-8;
       index /static/index.html;//配置首页

       //这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
       location = /sellingJson.html {
          proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
      }

       #配置Nginx动静分离，定义的静态页面直接从static读取。
      location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
      { 
       root /static/;
       #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力
       expires      7d; 
      }    
   }

推荐阅读

部署操作

Linux Scp命令

secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令。

sudo su 使用管理员权限

创建登录脚本

cd /usr/local/bin/
vim login // Jdyx8*5

1
2
#!/bin/bash
ssh root@47.104.231.254

创建文件上脚本

cd /usr/local/bin/
vim remoteDeploy // Jdyx8*5

1
2
#!/bin/bash
scp -r /mnt/d/Project/shrs/dist/* root@47.104.231.254:/mnt/www/shrs2006.com

sudo su 管理员权限运行

chmod a+x file-name 提升权限

第一步 使用pkg包管理工具搜索/安装Nginx

FreeBSD 安装 NGINX // done
FreeBSD 下 pkg 包管理工具

1
2
pkg search pkgName // 搜索
pkg install pkgName[必须是完整名称，可以先search关键字，后复制全称安装]

Nginx 安装完成后

1
systemctl enable nginx // 设置开机启动 注意版本，在主流Linux版本下有效 as Ubuntu、CentOS

第二步 启动后台服务

作为后台服务 启动服务

1
2
3
service nginx onestart
service nginx onerestart
service nginx onestop

Nginx总配置文件目录

1
2
3
4
/usr/local/etc/nginx

gzip  on;
    include /mnt/www/etc/nginx/*.conf;    # !* import

分配置文件

1
2
3
4
5
6
7
8
9
10
11
12
server {
        listen 80;
        server_name localhost;

        default_type 'text/html';
        charset utf-8;

        location / {
                root /mnt/www/shrs2006.com;
                index index.html;
        }
}

配置Nginx

1.总配置文件，加分配至文件目录。虚拟主机 /usr/local/etc/nginx

2.分配置文件 以域名命名 /mnt/www/etc/nginx/shrs2006.com.conf // 一个网站 对应一个配置文件

调试，修改host文件

  1. C:\Windows\System32\drivers\etc
  2. 修改host (host修改权限)
  3. 修改host

绑定假域名

www.shrs2006.test => IP windows hosts

host文件:

1
47.104.231.254          www.shrs2006.test // 末尾加入字段

// done

第三步 上传 项目文件

scp 脚本 项目生成后dist文件夹 上传指定目录下

1
2
3
/mnt/www/shrs2006.com

scp /mnt/d/Project/shrs/dist root@47.104.231.254:/mnt/www/shrs2006.com

第四步

访问 网址 检测是否部署成功

重启服务器，打开假域名、可以看到网站 算成功。

第五步

重启 Nginx 服务
命令

并且要求 开机启动 Linux的关机与重启命令