Zephyr - Study: Nginx (1)

 1. 目录结构：

1. conf: 放nginx的主配置文件 nginx.conf，会引用别的配置文件

2. html: 默认情况的网页和静态资源

3. logs: 记录访问日志 / 错误日志 / pid号

4. sbin: 只有nginx的主程序，启动时使用

 2. Nginx多进程模型：

Master 是主进程：协调子进程

Worker 是子进程：处理业务请求

 3. Nginx配置文件（nginx.conf）：

• worker_processes：开启的子进程数量 （通常和CPU核数相同）
• mime.types：本质上是一个映射表，把后缀映射到文件类型上，服务端通过这个文件告诉浏览器用什么类型来解析对应后缀的文件
• sendfile：是否开启零复制

            不开启sendfile

                Nginx会先把文件复制到应用程序内存，然后再发给系统的网络接口

                即多一次拷贝

            

            开启sendfile

                Nginx只发送一个信号，接口直接去读取文件

• 
  

Zephyr - Study: JavaScript (2)

1. 内建对象：
        包括 object function array 等

2. 数组 Array 
        也是一个对象

        1）创建数组对象：var arr = new Array();

        2）添加元素：数组[索引] = 值

        3）长度：数组.length

        4）数组可以不连续，不连续的情况下，长度为 最大索引+1 （尽量不要用不连续）

        5）数组元素可以是任意类型

       

        方法：

            1) push() 向末尾添加元素，返回新长度

            2) pop() 删除并返回最后一个

            3) unshift() 向开头添加元素，返回新长度

            4) shift() 删除并返回开头第一个

            5) slice(开始索引，结束索引) 返回选定元素 (开始索引包含，结束索引不包含)

            6) splice(开始索引，删除个数，新增的元素) 删除指定元素并返回且加入新的元素 （会改变原数组）

            7) concat() 连接两个或多个数组，不修改原数组

            8) join(连接符) 可以将数组转化为字符串 (字符串就是把所有元素 默认用逗号连接)

            9) reverse() 倒转数组 会修改原数组

            10) sort() 排序数组 会修改原数组

                    升序：

                        arr.sort(function(a,b){

                            return a - b

                        })

                    降序：

                        arr.sort(function(a,b){

                            return b - a

                        })

            

3. 函数的方法：

        1) call()   2) apply()  这两个都会调用函数执行

            区别是：

                在调用call() 和 apply()时候，可以将一个对象指定为第一个参数，此时这个对象会成为函数执行时的this

                例子：

                    fun();                      this: window

                    fun.call(obj);            this: obj

                    fun.apply(obj);         this: obj

                

                call()方法的第一个对象后面的参数 就是 函数的实参

                apply()方法要把实惨封装到一个数组里

                fun.call(obj, 2, 3);

                fun.apply(obj, [2,3]);

4. arguments 是一个类数组对象，是调用函数时会隐含传递进去的参数 （另一个是this）

        调用函数时，传递的实参都会在arguments中

5. Date对象

        封装代码执行的时间

        格式： 月/日/年 时:分:秒

6. 正则表达式

        创建正则表达式对象 var reg = new RegExp("正则表达式", "匹配模式");

        或者直接 var reg = /正则表达式/匹配模式

        检测是否符合正则表达式：

            var result = reg.test(str);

        "匹配模式":

                i ： 忽略大小写

               g ： 全局匹配

        ｜ 表示 或者

         [] 里面的内容也是或的关系 [ab] = a | b

         [a-z] 任意小写字母

         [A-Z] 任意大写字母

         [A-z] 任意字母

         [^ ] 除了 以外还有没有

        search() 搜索并返回符合条件的内容，返回的是第一个符合的索引

        match() 提取符合条件的内容，返回的是第一个符合的内容，可设置为全局

7. DOM    （属于宿主对象）

        Document / Object / Model

        JS 通过 DOM 来对 HTML 文档进行操作

        Document：

            一个html就是一个文档

        Object：

            将网页里的每一个部分都换转为一个对象

        Model：

            使用模型来表示对象对象之间的关系

        节点 Node，是构成网页的最基本的组成部分，通常分为四种

                1）文档节点：整个html文档

                2）元素节点：html文档的html标签

                3）属性节点：元素的属性

                4）文本节点：html标签中的文本信息

        浏览器提供了文档节点，该节点对象是window的属性：document

        例：

            获取button对象

            var btn = document.getElementById("btn")

            修改按钮文字

            btn.innerHTML = "新的文字";

        

8. 事件：就是用户与浏览器之间的交互行为

            例如：点击按钮，鼠标移动，关闭窗口...

    DOM event

    btn.onclick = function(){

        alert("aaa");

};

    onload事件会在整个页面加载完成之后才触发

    window.onload = function(){

        var btn = document.getElementById("btn");

        btn.onclick = function(){

            alert("aaa");

        };

};

    * 这样就可以避免因为书写顺序导致的错误，比如先写了单击事件，后写了按钮对象

9. 获取元素节点

    通过调用document对象的

    1）getElementById                 ：通过id属性获得一个元素节点对象

    2）getElementsByTagName    ：通过标签名获得一组元素节点对象

    3）getElementsByName         ：通过name属性获得一组元素节点对象

        

        

        

        

        

        

Zephyr - Study: JavaScript (1)

 1. JavaScript

    JavaScript 包含三个部分：ECMAScript / DOM / BOM

        ECMAScript：js的标准

        DOM：文档对象模型

        BOM：浏览器对象模型

    JS 代码写的位置：

        1. 写在script标签中 （script标签放在body的最后）

        2. 写在属性中，如 href属性标签中 / onclick属性标签中 （不推荐 过于耦合）

        3. 写在外部文件，然后用script标签引用 （推荐） <script src="index.js"></script>

    alert: 弹出一个警告框

    document.write(): 向body中输出内容 

    console.log(): 向控制台输出内容

2. 语法

    1. 注释：      /*   多行注释

                        */

                     // 单行注释 

    2. JS 严格区分大小写

    3. 每一句以；结尾

    

    4. 用 var 声明变量          var a;

    5. 用typeof 检查数据类型       typeof a;

    6. typeof Null  -> object

    7. 数据类型的转换：

            转string

            1）b = a.toString() 转换结果为返回值 a不会改变

            2）b = String(a)

                区别：1）不能转 null 和 undefined       2）可以转

            转number

            3）使用 Number()

            4)  针对字符串 用 parseInt() / parseFloat()

                   讲有效的整数部分转化为数字

                   从左到右 取出数字

    8. object 对象数据类型

            var obj = new Object();

    9. JS 的变量都是保存在栈内存中的，

        基本数据类型的值直接在栈内存中保存

        值与值之间独立存在，不互相影响

        

        对象是保存在 堆内存

        栈内存里放内存地址

        如果两个变量指向同一个对象，修改对象，两个变量的都会修改

        比较基本数据类型，比的是值

        比较引用数据类型，比的是地址

    10. 创建object对象 可以直接用 {}

            var obj = {属性名:值，属性名:值...}；

    11. 函数

            function 函数名(形参) {

                

}

    12. for (var n in obj) {

            console.log(n);         // n是obj的属性名

            console.log(obj[n]);   // []可以传变量，.n 不可以

}

    13. 全局作用域中有一个全局对象 window

         代表浏览器的窗口

         当在全局作用域中创建变量的时候，都会作为window对象的属性保存

    14.    var 创建的变量会被提前声明

            function 函数名 () {} 这种方法创建的函数，会在所有代码执行前就被创建

    15. 在调用函数的时候，都会向函数内部传递一个隐含的参数 this

            this 指向一个对象 （上下文对象）

            根据调用方式不同，this 指向不同的对象

                    1） 以函数形式：指向window

                    2）以方法形式：指向调用方法的对象

    16. 构造函数 

            function Person(){

                this.name = "a";

                this.age = 16;

}

            var p1 = new Person();

        * 构造函数其实就是函数，但是与new搭配用的时候 可以用来创建对象

            习惯上 首字母大写

        * 构造函数执行过程：

            1）立刻创建一个新的对象

            2）将新建的对象设置为函数中的this

            3）逐行执行函数中的代码

            4）将新建的对象作为返回值返回

    17. 原型 prototype

            每创建一个函数，解析器就会向函数中添加一个属性 prototype

            这个属性是一个对象

            如果函数作为普通函数调用prototype没有任何作用

            当函数以构造函数调用的时候，他所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象；可以通过__proto__来访问该属性

            原型对象就相当于一个公共区域，所有同一类的实例都可以访问到这个原型对象

            所以！！我们可以将对象中共有的内容，统一设置在原型对象中

            当我们访问对象的一个属性或方法时，他会先在对象自身中寻找，如果有则直接使用，如果没有，就去原型对象中寻找

            

            好处：1）在创建对象的时候 不会新建一个对象就新建一个方法；2）也不会污染全局命名空间（因为解决 1 的另一个方法就是建一个全局函数）

    

        18. 垃圾回收 GC

            什么是垃圾：没有变量或属性对其引用的对象

            在JS中有自动的垃圾回收机制，不用手动操作

Zephyr - Study: Nextjs (1)

1. Nextjs:

    Nextjs is the React("fullstack") Framework for production

    React 注重在搭建用户的交互界面，而 Nextjs 是搭建在 React 之上的框架

    React: "library" / Nextjs: "framework"

    

2. Features:

    * server-side rendering

                服务端渲染， SSR (Server-side Rendering) ，顾名思义，就是在浏览器发起页面请求后由服务端完成页面的 HTML 结构拼接，返回给浏览器解析后能直接构建出有内容的页面。

                客户端渲染 ，CSR（Client Side Rendering），通俗的讲就是由客户端完成页面的渲染。其大致渲染流程是这样：在浏览器请求页面时，服务端先返回一个无具体内容的 HTML，浏览器还需要再加载并执行 JS，动态地将内容和数据渲染到页面中，才能完成页面具体内容的显示。

简而言之，SSR强在首屏渲染。而CSR强在用户和页面多交互的场景

    * file-based routing

            router: 仅根据监视url的变化，来呈现不同的网页，而没有向服务端发出新的请求

            直接用文件目录来呈现router

    * fullstack

            可以直接访问数据库

3. install

    npx create-next-apps

4. file-based routing

        * index.js: 这个是特殊的，不会把index作为路由名    

        * dynamic path:

               * import { useRouter } from 'next/router'

                useRouter这个库用来拿动态路由的内容

                const router = useRouter()

                router.query : 就是url的编码

                

                * import { Link } from 'next/link'

                link 用于跳转到另一个路由

                <Link href="/clients/jack">Jack</Link>

         点击就会跳转到 localhost:3000/clients/jack 而且用Link的好处是不会再发一次http请求

        * 404 page:

                创建404.js

5. Project1:

        

Zephyr - Study: Prisma (1)

1. What is Prisma: 

        

        Prisma is an open source next-generation ORM (Object Relational Mapping).

        It consists of the following parts:

• Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript (ORM) 

• Prisma Migrate: Migration system      管理数据库结构

• Prisma Studio: GUI to view and edit data in your database.

Prisma就是数据层的抽象，用简单的方式管理数据库。

2. schema.prisma:

        1. datasource:

            决定这个prisma的项目用的是什么数据库

            

        2. generator:

            和用什么语言开发有关

        3. model:

            构建数据模型的关键字

            

3. Migrate指令：

        1. npx prisma migrate dev --name init

4. Prisma Studio 指令：

        npx prisma studio

5. Prisma client 指令：

        findMany()

        create()

        update()        

        

* github: https://github.com/zephyrzhu1998/prisma_test