正文

千锋node.js学习笔记(代码片段)

李英俊小朋友  李英俊小朋友  2023-01-19  108

关键词：

千锋Node.js学习笔记

文章目录

千锋Node.js学习笔记

写在前面

封面 | 摘要 | 关键词

千锋Node.js学习笔记

Node.js
李英俊
前端
千锋
express

学习链接：千锋HTML5前端开发教程1000集：[P287: P427]，共141集
感想
1. [20221008] node.js 这部分讲的真的很难顶，真想直接跳到vue。这个老师思想跳跃很大，讲课基于自己而不是基于受众。且不提我，很多老师体到的东西屏幕里的学生都很懵。前面说着说着就说到一些超纲知识点，说了又不详解，只会说后面会讲，会面会讲就不要体到前面，很多知识点之间跳跃性很大，缺乏逻辑性串讲。
2. [20221010] 感觉node.js的主讲老师，很多常见的函数api都记不住，动不动就要查，跟着敲代码都要改来改去，脑阔痛。
3. [20221017] 讲到cors的时候，老师本来想要直接复制代码，还说：“如果这段代码你没有看懂，说明前面的你没有认真听。” 我：？？？直接上PUA了可还行。
4. [20221020] 讲fs.stat，这老师的基础真是一言难尽，如果不知道函数的使用和功能，你查也行啊，总不能蒙吧。。。
5. [20221025] 讲express，中间件栈？明明是队列，自己编了个名字可还行，讲得乱七八糟、不知所云。我的评价是：稀烂。不就是路由匹配的问题嘛？加个next可以使得后面的路由继续被匹配到，这么简单的东西我一看就知道要说啥，真是服了。主动增加学习难度了这是。。。
6. [20221116] 隔了一段时间了，中间学习的依然很痛苦。现在是学到了项目这一块，真的是想到哪儿写到哪儿。感觉就是做了一次项目就跑过来当老师了，啥也不懂啊这是，重构代码全靠蒙和试是吧。
7. [20221121] 讲个项目，毫无章法，毫无逻辑，随时随地想重构就重构，想到哪儿说到哪儿，行就是赚到，不行就再找找，屏幕滚来滚去，啥都看不清楚，学尼玛。
8. [20221215] 讲师的绝招：git add git commit 然后git check，合理。
摘抄
1. 父元素设置 position: relative；子元素设置 position: absolute; left: 50%; transform: translateX(-50%)，可以实现内容的居中显示
2. 激活当前元素，取消其他兄弟元素的激活：$(this).addClass('active').siblings().removeClass('active')
3. 直接启动http服务器：npx http-server -p 9000
4. 启动node.js服务器：nodemon cors.js、node cors.js
学习时遇到的问题
1. CSS中的position:relative理解
2. 『前端大白话』之 “flex:1”
3. nvm-windows安装教程
4. 查找第三方模块
5. npm 全局安装与本地安装、开发依赖和生产依赖
6. 箭头函数和function的区别
  - this的指向：使用function定义的函数，this的指向随着调用环境的变化而变化，而箭头函数中的this指向是固定不变的，一直指向定义函数的环境。
  - function是可以定义构造函数的，而箭头函数是不行的。
  - 由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let const定义的时候更不必说)关键词，而var所定义的变量不能得到变量提升，故箭头函数一定要定义于调用之前！
  - 使用function声明函数时，可以使用arguments来获取传入函数的所有参数，而使用箭头函数声明的方法无法使用arguments来获取所有参数。
PS：相关工程代码都在 Github 上

1. 认识Node.js

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

特性

Node.js可以解析JS代码，没有浏览器安全级别的限制，提供很多系统级别的API

文件的读写 File System

const fs = require('fs')

fs.writeFile('./log.text', 'hello', (err, data) => 
    if (err) 

    else
        console.log('文件创建成功');
    
)

运行上述代码：node index.js

进程的管理 Process

function main(argv)
    console.log(argv);


main(process.argv)

运行：node process.js 1 2

网络通信 HTTP/HTTPS

const http = require('http')

const server = http.createServer((request, response) => 
    let url = request.url
    response.write(url)
    response.end()
)

server.listen(8090, 'localhost', ()=>
    console.log('localhost:8090');
)

。。。

Node相关工具
1. nvm：Node Version Manager
2. npm：Node Package Manager
3. nrm：npm registry manager
4. npx：npm package extention

2. NVM

node.js的版本管理工具，windows不支持，需要安装其他的
```
nvm-windows
nodist
```
查看软件版本：npm view node versions
查看node版本：node -v
查看已安装的node版本：nvm list
切换node版本：nvm user 14.15.0
设置默认版本：nvm alias default 14.15.0

3. NPM

安装全局包：npm install jquery -g(--global)
全局安装包的目录：C:\\Users\\用户\\AppData\\Roaming\\npm\\node_modules
使用package.json可以实现本地包的安装：npm install xxx --save-dev
- --save：可以替换为 -S
- --save-dev：可以替换为 -D
- 这里如果不加 -dev （开发环境），表示的是：将包安装在生产环境中，这样该包的信息会更新到 package.json 的 dependencies 里
- 同理，开发环境的话，会把包的信息放到 devDependencies 键中
- 最后使用 node i 来安装所有的依赖包
- 查看特定名称的包：npm list | grep gulp
- 安装生产环境下的包：npm i --production
- 查看包有哪些版本：npm view jquery versions
- 安装具体版本的包：npm i jquery@2.2.4
- 安装某版本最高版本的包：npm i jquery@2
  - MAJOR：表示当前APR的主版本号，它的变化通常意味着APR的巨大的变化，比如体系结构的重新设计，API的重新设计等等，而且这种变化通常会导致APR版本的向前不兼容。
  - MINOR：称之为APR的次版本号，它通常只反映了一些较大的更改，比如APR的API的增加等等，但是这些更改并不影响与旧版本源代码和二进制代码之间的兼容性。
  - PATCH通常称之为补丁版本，通常情况下如果只是对APR函数的修改而不影响API接口的话都会导致PATCH的变化。目前为止APR的最高版本是1.2.2，最早遵循这种规则的版本号是0.9.0，不过在0.9.0之前，APR还推出了两个版本a8和a9。
    - 如果为奇数：则是不稳定的patch
    - 所以一般某个major的最高版本为偶数patch
  - ^：该配置只锁定major版本号
  - ~：锁定major和minor版本号
  - ：什么都不加是最严格的，指定版本号
  - *：最新版本
- 清空npm缓存：npm cache clean --force
loadsh介绍（与underscore是竞品）
- chunck：数组的分割

自己发布包

写一个函数 myChunk()
暴露函数的接口：module.exports = myChunk

调用：

const myChunk = require('./index.js')
console.log(myChunk([4, 5, 6, 7]));

发布

// npm登录
npm adduser
// 查看源
npm config get registry
// 切换淘宝源（样例，实际要切回官方的源）
npm config set registry https://registry.npm.taobao.org
// 切回官方源
npm config set registry https://registry.npmjs.org
// 发布
npm publish
// 查看当前项目引用了哪些包
npm ls
// 卸载包
npm unpublish --force
// 引用包
var hello = require('pg19-npm')
hello.sayHello()

package.json 描述文件
- name：包名称
- version：版本号
- description：描述
- main：暴露接口的主程序
- scripts：执行时需要执行的脚本
- respository：项目库（除了可以从npm官网安装，也可以通过github等安装）
- keywords：关键词
- author：作者
- license：证数，一般为MIT
- bugs：bug链接
- homepage：主页地址
npm脚本
- npm允许在package.json文件里面，使用scripts字段定义脚本命令
- npm运行package.json中的脚本
```
npm run runjs
```
- 如果脚本中有多个，使用 & 或 && 连接
  - &：并行运行脚本
  - &&：串行运行脚本
- 如果脚本名为 start 、 test 等特殊的名称时，可以省略 run：npm test
- 获取package.json中的信息：
  
  console.log(process.env.npm_package_config_env)
  - 其中：congfig为第一级的key，env为二级key，取到的是config.env的值
  - 注意：如果直接获取的是config，是会报错的
  - 该方法只能通过配置package.json后运行里面的脚本才生效，如果直接运行对应的js会直接显示undefined
  - 在脚本内部也可以直接获取package.json的信息
```
"scripts": 
	"build": "echo $npm_package_config_env"
```
- npm安装git上发布的包
  - npm install git+https://git@xxx
  - npm install git+ssh://git@xxx
cross-env
- windows不支持 NODE_ENV=production 的设置方式
- 解决：cross-env使得可以使用单个命令，而不必担心为平台正确设置或使用环境变量。这个迷你的包（cross-env）能够提供一个设置环境变量的scripts，让你能够以Unix方式设置环境变量，然后再Windows上也能兼容运行
- 安装：npm install --save-dev cross-env
- 可以直接在脚本中设置环境变量的值，比如说
```
"scripts": 
	"dev": "NODE_ENV=development gulp -f gulp.config.js",
	"prod": "NODE_ENV=production gulp -f gulp.config.js"
```
- 如果需要使用cross-env
```
"scripts": 
	"dev": "cross-env NODE_ENV=development gulp -f gulp.config.js",
	"prod": "cross-env NODE_ENV=production gulp -f gulp.config.js"
```

4. NRM

npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在npm源之间切换
安装：npm install -g nrm
查看可选的源：nrm ls
切换nrm：nrm use taobao
测试速度：nrm test

5. NPX

npm从5.2开始增加了npx命令，如果没有自带，可以手动安装：npm install -g npx
npx想要解决的主要问题，就是调用项目内部安装的模块
- 需要使用某个库的时候，要么配置package.json后调用里面的脚本，或者进入到node_modules文件夹中找到对应的库，再运行
- 比如：gulp -v 不行；但是 npx gulp -v 就可以了
- 如果本地没有这个库，npx会自己下载，但不会在本地/全局安装。其实是安装在临时文件夹中，使用完后自动删除
npx --no-install http-server：让npx强制使用本地模块，不下载远程模块，本地不存在就会报错
npx --ignore-existing http-server：忽略本地的同名模块，强制安装使用远程模块

6. 模块/包与CommonJS

分类
- 内置的模块
- 第三方的模块
- 自定义的模块
浏览器是没有require对象的
编写暴露的接口
```
module.exports = 
	name,
	age
```
- 可以通过这种方式，暴露多个接口
- 也可以使用如下方式，其中exports是 module.exports 的引用
```
exports.name = name
exports.age = age
```

7. 常用内置模块

1. url

url.parse(urlString[, parseQueryString[, slashesDenoteHost]])：将链接解析为一连串的信息

const url = require('url')
const urlString = 'https://www.baidu.com:443/path/index.html?id=2#tag=3'

logger.debug(url.parse(urlString));

// 输出
Url 
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'www.baidu.com:443',
  port: '443',
  hostname: 'www.baidu.com',
  hash: '#tag=3',
  search: '?id=2',
  query: 'id=2',
  pathname: '/path/index.html',
  path: '/path/index.html?id=2',
  href: 'https://www.baidu.com:443/path/index.html?id=2#tag=3'

url.format(urlObject)：将结构体的信息转为链接

logger.debug(url.format(
    
        protocol: 'https:',
        slashes: true,
        auth: null,
        host: 'www.baidu.com:443',
        port: '443',
        hostname: 'www.baidu.com',
        hash: '#tag=3',
        search: '?id=2',
        query: 'id=2',
        pathname: '/path/index.html',
        path: '/path/index.html?id=2',
        href: 'https://www.baidu.com:443/path/index.html?id=2#tag=3'
    
))

// 输出
https://www.baidu.com:443/path/index.html?id=2#tag=3

url.resolve(from, to)：实现路径的拼接，前向后向都可以

logger.debug(url.resolve('http://www.abc.com/a', '/b'))
logger.debug(url.resolve('http://www.abc.com/a', '../'))

// 输出
http://www.abc.com/b
http://www.abc.com/

URLSearchParams：解析url之后得到数据体，然后获取对应的search（search: ‘?id=2’,）

const urlParams = new URLSearchParams(url.parse(urlString).search)
logger.debug(urlParams);

// 输出
URLSearchParams  'id' => '2'

2. querystring

querystring.parse(str[, sep[, eq[, options]]])：参数的解析，将url中的参数部分解析为数据体（对象）

const querystring = require('querystring')
var qs = 'x=3&y=4'
var parsed = querystring.parse(qs)
console.log(parsed)

// 输出
[Object: null prototype]  x: '3', y: '4'

querystring.stringify(obj[, sep[, eq[, options]]])：将数据体中的参数和值解析为url的参数

const querystring = require('querystring')
var qo = 
  x: 3,
  y: 4

var parsed = querystring.stringify(qo)
console.log(parsed)

// 输出
x=3&y=4

querystring.escape(str)：对url的参数进行编码

const querystring = require('querystring')
var str = 'id=3&city=北京&url=https://www.baidu.com'
var escaped = querystring.escape(str)
console.log(escaped)

// 输出
id%3D3%26city%3D%E5%8C%97%E4%BA%AC%26url%3Dhttps%3A%2F%2Fwww.baidu.com

querystring.unescape(str)：解码

const querystring = require('querystring')
var str = 'id%3D3%26city%3D%E5%8C%97%E4%BA%AC%26url%3Dhttps%3A%2F%2Fwww.baidu.com'
var unescaped = querystring.unescape(str)
console.log(unescaped)

// 输出
id=3&city=北京&url=https://www.baidu.com

3. http

node的浏览端调试：node --inspect --inspect-brk server.js
node进程管理工具：一直监听，如果代码有修改会自动重启
- supervisor
- forever
- nodemon
- pm2
response.end()中也可以写返回的信息

get：

const http = require('http')
const querystring = require('querystring')
const https = require('https');

const server = http.createServer((request, response) => 
    // console.log(response);

    // const url = request.url
    // console.log(url);

    https.get('https://www.xiaomiyoupin.com/mtop/mf/cat/list', (result) => 
        let data = ''
        result.on('data', (chunk) => 
            data += chunk
        )
        result.on('end', () => 
            response.writeHead(200, 
                // 'content-type': 'text/html'
                'content-type': 'application/json;charset=utf-8'
            )
            // response.write('<div>hello</div>')
            // response.write('"x": 1')
            // response.end('"x": 1')
            // console.log(data);
            // response.write(`"url": "$url"`)
            response.write(JSON.stringify(querystring.parse(data)))
            response.end()
        )
    )
)

server.listen(8080, () => 
    console.log('localhost:8080');
)

post

const http = require('http');
const querystring = require('querystring');

const postData = querystring.stringify(
    province: '上海',
    city: '上海',
    district: '宝山区',
    address: '同济啊吧啊吧',
    latitude: 43.0,
    longitude: 160.0,
    message: '求购一条小鱼',
    contact: '13666666666',
    type: 'sell',
    time: 1571217561
)

const options = 
    protocol: 'http:',
    hostname: 'localhost',
    method: 'post',
    port: 3000,
    path: '/data',
    headers: 
        'content-type': 'application/x-www-form-urlencoded',
        'Content-Length': Buffer.byteLength(postData),
    


const server = http.createServer((req, res) => 
    const request = http.request(options, (result) => 

    )
    request.write(postData)
    request.end()

    res.end()
)

server.listen(8080, () => 
    console.log('localhost:8080');
)

4. 跨域

jsonp利用 script 标签加载js不跨域的特性，从后端拉取js代码运行，jsonp中的p是padding（包裹数据的函数），拿到callback后，传入数据调用函数；cors就是在后台给前端返回一个首部字段：Access-Control-Allow-Origin；middleware：通过http-proxy-middleware实现地址的代理，从而实现了跨域。

jsonp

JSON with Padding，是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为 **同源策略 ** 。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的即检查是否同源，只有和百度同源的脚本才会被执行。
核心：<script> 标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。

案例：通过访问另一个服务器的api，并通过传参的方式把当前的函数传过去，实现了跨域传参+调用函数

当前html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonp</title>
</head>

<body>
    <script>
        function getData(data) 
            console.log(data);
        
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="http://localhost:8080/api/data?cb=getData"></script>
</body>

</html>

html中引用的跨域的Node.js

const http = require('http')
const url = require('url')

const server = http.createServer((req, res) => 
    let urlstr = req.url

    // true 是为了解析 url中的query为一个字典
    let urlObj = url.parse(urlstr, true)
    switch(urlObj.pathname) 
        case '/api/data':
            res.write(`$urlObj.query.cb("hello")`)
            break
        default:
            res.write('page not found.')
    千锋django学习笔记(代码片段)
千锋Django学习笔记文章目录千锋Django学习笔记写在前面1.MVC和MTV2.Django简介3.MTV简单流程4.和Model的简单对接5.Model6.Template7.View8.会话9.迁移原理和模型关系10.静态资源11.缓存12.中间件和AOP13.分页器14.AXF项目14.1需求分析14.2一些开发时...  查看详情  
                
千锋javascript学习笔记(代码片段)
千锋JavaScript学习笔记文章目录千锋JavaScript学习笔记写在前面1.JS基础1.1变量1.2数据类型1.3数据类型转换1.4运算符1.5条件1.6循环1.7函数1.8对象数据类型1.9数组和排序1.10数组常用方法：1.11字符串常用方法1.12数字常用方法1.13时间...  查看详情  
                
node.js学习笔记(代码片段)
笔记来自于视频：尚硅谷-快速入门nodejs简介概述之前的JavaScript代码是在浏览器客户端执行的，而Node.js可以使JavaScript代码在服务器上运行。Node的用途：Web服务API，比如REST·实时多人游戏后端的Web服务，例如跨...  查看详情  
                
node.js之web学习笔记(代码片段)
http模块入门Node.js提供了系统模块http用来写服务端代码。http模块是系统核心模块，不需要下载只需要直接引入即可，引入代码如下：varhtttp=require('http');创建简单的服务端代码如下：//第一步，引入http...  查看详情  
                
node.js学习笔记(代码片段)
NoSQL简介NoSQL是对不同于传统的关系型数据库的数据库管理系统的统称。NoSQL数据库的分类列存储（HBase）：按列进行存储，属于比较高级的数据库文档存储（MongoDB）：按JSON来存储Key-value存储(Redis)：通常用于缓存也可以实现消息...  查看详情  
                
node.js之commander.js学习笔记(代码片段)
概述commander.js可以用来写命令行工具。官网地址：Commander.js安装与引入安装执行如下命令进行安装，但前提是有node环境，即能使用npm命令进行安装：npminstall--savecommander引入如果是简单使用，Commander提供了一个...  查看详情  
                
千锋flask学习笔记(代码片段)
千锋Flask学习笔记文章目录千锋Flask学习笔记写在前面1.Flask介绍2.Views3.Request4.Response5.会话技术6.模型和模板7.数据传输加密反爬8.钩子函数9.用户激活、手机、邮箱10.Flask-RESTful11.公司组成、项目架构12.淘票票13.nginx14.logging写在前面...  查看详情  
                
千锋django学习笔记(代码片段)
千锋Django学习笔记文章目录千锋Django学习笔记写在前面1.MVC和MTV2.Django简介3.MTV简单流程4.和Model的简单对接5.Model6.Template7.View8.会话9.迁移原理和模型关系10.静态资源11.缓存12.中间件和AOP13.分页器14.AXF项目14.1需求分析14.2一些开发时...  查看详情  
                
node.js学习笔记-模块化开发(代码片段)
JavaScript开发过程中存在文件依赖和命名冲突问题，因此要采用模块化开发的方式。软件当中的模块化开发每个JavaScript文件就是一个模块，模块内部的变量无法在外部进行访问。有两种方式可以实现访问。文件b中访问a中...  查看详情  
                
vue学习笔记之vuecli构建项目(代码片段)
一、环境搭建：　　1.安装node.js从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入node-v，如下图，如果出现相应的版本号，则说明安装成功因为在...  查看详情  
                
node.js笔记-node.js连接mysql与增删改查(代码片段)
最近在看一个开源项目，项目用的是node.js，在此学习下他的连接mysql与增删改查。安卓mysql包：npminstallmysql程序运行截图如下：D:\\node\\content\\node.exeMySqlDemoinsertsuccessinsertsuccess[RowDataPacketid:1,name:'小明&  查看详情  
                
node.js(尚硅谷笔记总结)(代码片段)
转载：NodeJs（尚硅谷视频学习笔记）课前了解的知识CMD基本知识1.命令行窗口（小黑屏）、CMD窗口、终端、shell-开始菜单-->运行-->CMD-->回车-Win+R-->CMD-->回车-常用的指令	dir			列出当前目录下的所有...  查看详情  
                
node.js学习笔记
1.Node.js本质上是一个JavaScript执行环境,跟Chrome的console命令行一样,可以直接在里面编写JS代码并执行两个的区别在于,都有一些自己独特的全局变量,譬如chrome中可以有window和document等,Node.js有process等全局变量   2.exports与mo...  查看详情  
                
node.js学习笔记一
node.js node是平台也是语言。它是平台或者运行环境，能够让js在服务器端运行，因为它封装V8引擎（引擎，能够将js代码解析成计算机能够懂得语言），能够让js运行在其他的平台上面，而不只是运行在浏览器上。它是服务器...  查看详情  
                
「node学习笔记」node.js的模块实现及编译
前言在计算机程序的开发过程中，随着程序代码越写越多，在一个文件里代码就会越来越长，越来越不容易维护。为了编写可维护的代码，我们把很多函数分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较少，...  查看详情  
                
系列文章--node.js学习笔记系列
Node.js学习笔记系列总索引Nodejs学习笔记（一）---简介及安装Node.js开发环境Nodejs学习笔记（二）---事件模块Nodejs学习笔记（三）---模块Nodejs学习笔记（四）---与MySQL交互（felixge/node-mysql）Nodejs学习笔记（五）---Express安装入门与模...  查看详情  
                
node-学习笔记
什么是Node.js1）Node.js是一个基于ChromeV8引擎的JavaScript运行环境2）Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效。   ①事件驱动：当触发某个事件的时候，执行事件中指定的代码。   ②非...  查看详情  
                
node.js学习笔记_模拟路由
 路由就是浏览器输入url地址，服务端根据对url地址的解析，访问对应的代码模块。var    http    =    require(‘http‘);var    url    =&nb  查看详情