blue 发布的文章

nginx踩坑记和一些使用总结

前两天,有一个需求,在同一域名下,通过不同的路径去访问完全独立的项目,大概就是这样

// 访问项目一
http://abc.com
//访问项目二
http://abc.com/admin

由于之前对nginx的一些匹配理解不对,花了点时间才搞定,还是要记录一下。

- 阅读剩余部分 -

vue的SSR方案探讨

最近有一个项目要求SEO,于是摸索了一下vue的ssr方案,顺便总结一下。

先简单说一下ssr(Server-Side Rendering),官方是这样说的:

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序

其实也就是说把在客户端生成的HTML节点,改成在服务端生成

这样做的好处是,可以加快首屏的渲染(加快内容到达时间),对seo更友好。缺点是开发条件所限,需要更多的服务器端负载等,详情内容请移步官网https://ssr.vuejs.org/zh

本文总结了四种ssr方案,各有利弊

- 阅读剩余部分 -

记一次http/1.1升级http/2

刚刚在知乎看到一篇分析http/3的文章,发现自己的博客还停留在http/1.1的阶段,起了折腾的心。嗯,http/1.1→http/2

关于http/2

先简单的说一下http/1.1http/2的区别,http/2主要的是实现了多路复用,也就是说对同一个域的服务器只建立一次TCP连接,加载多个资源,使用二进制帧传输,同时会对http头部进行压缩,还有server push。

相对于http/1.1http/2只建立一次TCP的链接,当网站资源多的时候,速度的提升越明显。这里有一个demo,可以很直观的看到两者之间加载速度的差别https://http2.akamai.com/demo

关于HTTP2.0的多路复用和HTTP1.X中的长连接复用的区别,借用一张图

- 阅读剩余部分 -

关于JavaScript预解析的一些理解

昨天一个师弟面试遇到一道题,对于输出的结果不太理解,问我为什么是这样,题目如下

console.log(a);
var a = 1;
console.log(a);
function a() {
    console.log(2);
}
console.log(a);
var a = 3;
console.log(a);
function a() {
    console.log(4);
}
console.log(a);

上面代码运行输出的结果是

- 阅读剩余部分 -

MySQL数据库简单的增删改查

先create一个简单的students表,包含的字段有id,name,sex,age和tel

create table students
    (
      id int unsigned not null auto_increment primary key,
      name char(8) not null,
      sex char(4) not null,
      age tinyint unsigned not null,
      tel char(13) null default "-"
    ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

记得建表的时候把字符集设置为utf8或者gbk,因为这里之前踩过坑,默认latin1,不支持中文,哈哈哈╮(╯﹏╰)╭

表建立好之后,可以通过describe students查看表结构

- 阅读剩余部分 -

css3的flex布局

最近在撸小程序,只在微信里面运行,不用考虑其他浏览器的兼容性,flex布局超级好使,在这里总结一波。

只要在支持flex布局的浏览器下声明display:flex即可,在这个容器下的子元素就会自动成为容器的成员。容器有6个属性,分别是

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

flex-direction属性

flex-direction属性控制子元素的排列方向

flex-direction: row | row-reverse | column | column-reverse;

四个属性值表现如下

  • row(默认值):水平方向排列,起点在左端。
  • row-reverse:水平方向排列,起点在右端。
  • column:垂直方向排列,起点在上沿。
  • column-reverse:垂直方向排列,起点在下沿。

- 阅读剩余部分 -

ES6(七)--class的继承

关键字extends

在ES6下,class的继承可以通过关键字extends实现,比如

class A {
    constructor(a) {
        console.log(a);
    }
}

class B extends A {}

new A("aaa");//aaa
new B("aaa");//aaa

1.上面定义了一个a类,b类使用关键字extends继承了a类所有的属性和方法。b类此时没有定义任何方法,也就是说b类把a类复制了一遍,所以new a("aaa")new b("aaa")结果完全一样

2.a类的constructor方法就是a的构造函数

3.如果类本身不需要接收参数,那么可以省略构造函数,当省略了构造函数,这个constructor函数会自动添加

- 阅读剩余部分 -

ES6(六)--class的基本使用

js的传统方法是通过构造函数,定义并生成新对象,是一种基于原型的面向对象系统,在ES6中新增了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象。

生成实例对象的传统方法

const Obj = function (a, b) {
    this.a = a;
    this.b = b;

    return this;
}

Obj.prototype = {
    constructor: Obj,
    print: function () {
        console.log(this.a + " " + this.b);
    }
}

new Obj(1, 2).print();//1 2

- 阅读剩余部分 -

ES6(五)--iterator和for-of循环

什么是Iterator

Iterator是一种接口,为不同的数据结构提供统一的访问机制。任何数据结构只要部署了Iterator接口,就可以完成遍历,而且这种遍历操作是依次遍历该数据结构的所有成员

Iterator遍历器的作用

1.为各种数据结构提供一个统一的,简便的访问接口

2.使得数据结构的成员能够按照某种次序排列

3.ES6新增的遍历for...of循环,Iterator接口主要供for...of消费

- 阅读剩余部分 -