Node学习

Node学习

一.初始Node和ES6模块化语法

1.浏览器-JS的组成

ECMAScript核心语法（ES5,ES6->ES10）
WebAPI组成

2.浏览器内核

浏览器：C++编写的代码，打包成exe应用程序
内核：c++编写的代码程序，用于执行html/css/js等代码，渲染到页面

内核细分：
渲染引擎：用于解析html标签，css样式
js解析引擎：用于解释翻译js代码，获取结果

3.v8引擎

v8引擎：使用c++开发，并在谷歌浏览器中使用。可以独立运行，也可以嵌入到任何c+应用程序(例如Node)

内置API：就是V8引擎中，向外暴露的一些属性和方法，供开发者可以编写相应的业务代码

运功环境：指的是代码正常运行所需要的必要条件
在谷歌浏览器想要执行JS代码，运行环境就是V8引擎

4.node简介

1.node是一个基于Chrome V8引擎的js运行时(运行环境)
2.通俗讲：用node这个软件可以独立执行JS文件代码，脱离浏览器软件
3.node内使用语法还是js，也管它叫node.js

node作用：
1.读写和操作本地文件和路径
2.读写和操作数据库
3.基于Express/Koa框架，可以快速构建Web应用
4.基于restify框架，可以快速构建API接口项目
5.基于Electron框架，可以构建跨平台的桌面应用
6…

5.node-v8引擎

我们把v8引擎独立出来，开发了node这个软件，脱离浏览器软件，用v8引擎独立执行js文件和代码

内置API：因为不再依赖浏览器，所以V8引擎移除了相关的DOM和BOM相关的对象
注意：node环境下，无法使用DOM和BOM对象

6.模块化介绍

一个页面比较复杂，可以把大的文件拆分成若干小文件(模块)，而且还能把小文件通过特定的语法组合到一起。

总结：一个文件就是一个模块，有自己的作用域，只需要选择向外导出特定的函数或变量，然后通过特定语法按需导入到使用的地方

模块化有点：
1.提高代码复用性
2.提高代码可维护性
3.实现按需加载

7.模块化规范和分类

1.CommonJS规范：
导出语法module.exports
导入语法require

2.ES6规范：
导出语法export default
导入语法import

模块分类
1.内置模块(也叫核心模块)
安装node软件，自带的，可直接引入使用
2.自定义模块
自己创建的js文件，需先创建后引入使用
3.第三方模块
其他人创建并发布的js文件，先下载后引入

8.commonjs讲解

1.新建模块，并导出

//第一个文件导出
const baseURL = 'http://geek.itheima.net'
const getSum = (numA, numB) => numA + numB
const getArraySum = arr => {
    let sum = 0
    arr.array.forEach(item => item += sum)
    return sum
}
//语法：module.exports={}
//作用：把要导出的装入此对象内(key是外部要使用的，value是内部导出的值)
//注意：外部无法使用未导出的 变量
module.exports = {
    url:baseURL
}
//第二个文件导入
//语法：const 变量名=require('模块标识')
const obj = require('./common.js')
console.log(obj);
console.log(obj.getSum(10, 20));

9.ES6讲解

node环境：
需要前置处理，node执行的js文件，所在目录新建package.json并配置"type":“module”
浏览器环境：
需要前置处理，<script type=“module”>

//第一个文件导出
const baseURL = 'http://geek.itheima.net'
const getSum = (numA, numB) => numA + numB
const getArraySum = arr => {
    let sum = 0
    arr.array.forEach(item => item += sum)
    return sum
}
//语法：export default{}
//作用：导出对象里装入要导出的属性名和值
//注意：key和value变量名可以简写
export default {
    //url:baseURL,
    //getSum:getSum,
    //getArraySum:getArraysum
    url: baseURL,
    getSum,
    getArraySum
}
//第二个文件导入
//语法：import 变量名 from '模块标识'
import obj from './export.js'
console.log(obj)
console.log(obj.getArraySum([1,2,3]))

浏览器：
用之前的做法用script直接导入的话相当于把目标js内所有的代码复制到原地执行(如果有全局变量会污染全局环境-导致和别的/自己的js文件变量名冲突)
学习模块化语法(语法糖：会在运行时，帮你自动套用一个函数，并把导出的东西用特定的语法导出使用，不污染全局变量)

10.内置模块-fs使用

fs，即file system，文件系统，该模块可以实现对文件、文件夹的操作

特点
1.node安装内置的，无需自己创建和下载
2.模块标识不必写相对路径，直接写名字即可

使用

//1.引入fs模块
import fs from 'fs'
//2.调用它内置导出的方法，实现对应功能
//(1)判断文件是否存在
//语法：fs.access('目标文件路径',回调函数)
//作用：尝试读取指定目标文件，把结果回传给回调函数，err有值代表报错，无值成功
fs.access('路径', err => {
    if (err) {
        console.log('文件不存在')
    }
    else {
        //文件存在
        //(2)写入一些内容
        //语法：fs.writeFile('目标文件路径',要写入的字符串，回调函数)
        //作用：向目标文件，写入指定的字符串进去，回传结果给回调函数，err有值写入失败，无值成功
        fs.writeFile(filePath, 'hello,node', err => {
            if (err) {
                console.log(err)
                console.log('文件写入失败')
            } else {
                console.log('写入成功')
            }
        })
        //(3)读取内容
        fs.readFile(filePath, (err, data) => {
            if (err) {
                console.log(err)
                console.log('读取失败')
            }
            else {
                console.log(data)//<Buffer 16进制>’
                console.log(data.toString());
            }
        })
    }
})

11.内置模块-path模块

path，是node本身提供的api，专门用来处理路径

特点：
node安装内置的，无需自己创建和下载
模块标识不必写相对路径，直接写名字即可

使用

//目标：使用内置path模块，处理路径字符串本身
//注意：只处理字符串(路径有无都可以)
import path from 'path'
//(1)提取路径里拓展名
//语法：path.extname('路径字符串')
//返回值：拓展名字符串
console.log(path.extname('路径'));

//(2)拼接路径(相对路径)
//语法：path.join('路径1','路径2','路径3')
//返回值：用本系统路径拼接符，拼接起来的一个相对路径开头的字符串
console.log(path.join('a', 'b', 'c'));
console.log(path.join('a', 'b', '..', 'c'));

//(3)拼接路径(绝对路径)
//语法：path.resolve('路径1','路径2','路径3')
console.log(path.resolve('a', 'b', 'c'));
//跟上一个一样，但是在前面会出现完整的绝对地址

12.网络基础知识

URL：URL就是网络当中的地址，统一资源定位符
URL的一般语法格式为：

protocol://hostname:[:port]/path/?query#fragment
协议://主机地址:[:端口号]/路径/[?参数][#描点]

过程：
1.地址栏输入url地址，回车后，浏览器先查看内存中是否有缓存，有则返回显示，无则下一步
2.从本地hosts或者dns服务器，查询此域名对应的ip地址
3.开始与ip指定的目标服务器建立链接通道，发送请求，接收此url连接到的服务器上返回的响应内容
4.根据响应头标识的Content-Type，响应内容类型，浏览器再决定如何渲染此数据

13.http模块

http是一个node内置模块，让我们能够通过简单的流程创建一个web服务
实现步骤：
1.导入内置http模块
2.创建server服务对象(server对象负责建立连接，接收数据)
3.注册requuest事件，当浏览器发送请求到服务器执行，设置处理请求的函数，并返回响应数据
4.监听端口(一个电脑里有很多个服务，用端口区分)

//1.加载http模块
import http from 'http'

//2.创建服务对象，一般命名为server
const server = http.createServer();

//3.给server对象注册请求(request)事件，监听浏览器的请求。只要有浏览器的请求，就会触发该事件
server.on('request', (req, res)=> {
    //设置响应状态码
    res.statusCode = 200;
    //设置响应头(确保中文能正确返回，编码显示)
    res.setHeader('Content-Type', 'text/plain;charset=utf-8');
    //设置响应体
    res.end('hello,欢迎访问web服务');
})
//4.设置端口，开启服务
server.listen(3000, () => {
    console.log('服务器启动了')
})

形参req
1.形参req是request的缩写，即请求对象
2.通过req对象，可以获取到请求相关信息
3.req.url 获取请求行中的路径，从端口号往后所有路径
4.req.method 获取请求航中的请求方法
5.req.headers 获取请求头

形参res
1.形参res是response的缩写，即响应
2.做出响应，需要使用res对象
3.statusCode设置响应状态码，必须在end方法前调用
4.res.end() 把响应报文发送给浏览器，通俗的讲就是做出响应

二.npm和跨域

1.npm介绍

npm是node包管理器，管理node包的工具

npm作用：
可以下载，删除，发布包的一个工具

包：就是很多个模块文件组成的文件夹集合，可以有很多个文件夹，而且一个包默认会有一个入口

2.初始化环境

1.新建文件夹
2.终端切换到此文件夹
3.使用npm init -y命令，初始化包环境，得到package.json

3.下载axios包

#正常的下载安装
npm install 模块包名

#简写install为i
npm i 模块包名

#一次性安装多个模块
npm i 模块包名 模块包名

模块包名可以去npmjs.com查找

下载axios包

npm i axios

新建文件使用此包

import axios from 'axios'

axios({
    url: "http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html"
}).then(res => {
    console.log(res.data)
})

4.下载moment包

//目标：借助moment来格式化时间
//1.下包，npm i moment
//2.引入
import moment from 'moment'
//3.使用
let date = new Date()//获取当前系统时间对象
console.log(date)
console.log(moment(date).format('YYYY-MM-DD'))

5.删除包

npm uninstall 包名

可以简写成uni
npm会记录此第三方包，依赖的其他包，会一起安装和卸载

6.镜像地址

1.输入命令npm config list可以查看npm的配置列表，npm是从指定的registry地址下载的包
2.淘宝镜像：淘宝在国内假设的服务器(会按时从npm官网同步所有包和版本代码，映射到淘宝在国内的服务器上)，下载速度快
3.把npm切换成淘宝镜像的地址，永久方式切换命令如下

npm config set registry https://registry.npmmirror.com/

7.全局包-nodemon

和本地包的差异：
1.全局安装的模块，不能通过import加载使用
2.全局安装的模块，一般都是命令或工具
这个全局包，只有一些固定名字的菜式全局，某些是本地，例如axios

和本地模块下载命令差异：
1.本地安装的模块，npm i 模块包名
2.全局安装堆模块，npm i 模块包名 -g

下载nodemon全局模块包
此包的作用：启动js后，可以实时监测js文件变化，自动更新最新代码，不比手动重新运行

npm i nodemon -g

通过命令npm root -g 可以查看全局安装路径

8.全局模块-nrm

1.先使用npm下载nrm这个全局模块包名

npm i nrm -g

2.使用npm -V查看nrm版本
3.使用nrm ls查看全部可用的镜像地址
4.可以使用nrm use 左侧名字进行切换npm下载地址

9.开发软件包

1.软件包，必须是一个独立的文件夹
2.软件包，文件夹下必须有package.json项目清单
package.json中必须包含name，version，main这三个属性，分别代表包的名字、版本号、包的入口
name包的名字，让别人下载你的包，需要名字
version版本，1.0.0后续更新代码，需要网上累加
main入口文件，默认是index.js，如果不是，需要使用main指定
3.软件包，里面拥有相关工具代码

开始操作
1.新建文件夹
2.npm init -y，得到package.json
3.封装工具模块和方法，用index.js中转导出

接着发布：
1.注册npm网站账号
2.在软件包打开cmd终端，必须切换为npm主站下载地址，nrm use npm
3.在终端中登录npmjs网站注册的账号，npm login
4.使用npm命令发布此包到npmjs网站上，npm publish

常见错误：
1.自己的模块名不能和网站上存在的模块名同名，相似也不行
2.没有切换镜像源
3.24小时内不能重复发布
4.新注册的账号，必须先邮箱验证，才能发布

删除已发布的包：
npm unpublish 包名 --forcer
注意：
npm unpublish 删除的包，24小时内不能重复发布
发布包的时候要慎重

10.跨域

浏览器的同源策略：
作用：同源策略是浏览器的一种保护本地数据的机制
判断：网页打开时地址栏里地址，和内嵌Ajax请求url地址之间，协议，域名，端口相同
浏览器判断如果非同源，请求发送，服务器相应，但是浏览器无法接收(判断本次响应头没有开启CORS跨域资源共享机制，所以被拒绝了，于是丢弃相应的数据并在浏览器中报错)
即请求发送了，服务器相应了，但是无法被浏览器接收

11.跨域的解决方案

方案1：前端+后端，支持jsonp方式请求->仅支持GET方式(用的少，了解)

方案2：只需要后端开启CORS跨域资源共享(相应头设置一个字段)
Access-Control-Allow-Origin:* 本服务器允许任何人请求
前端正常请求，浏览发现这个接口允许跨域，所以不报错拿到数据给前端用

方案3：代理转发
本地自己node+http搭建一个web服务，用服务器去请求另外一个服务器的接口把数据请求回来，转发给自己的前端使用
前端要请求本地的这个服务器，而不能直接请求后端
后端正常提供接口，但是不开启CORS
服务器和服务器之间不存在跨域

三.webpack

1.ES6默认的导出和导入

ES6默认导出
语法：export default 要导出的东西
注意：只能在末尾写一次导出语法

export default a
export default {
	//对外属性：内部值
	a:a
	a,
	b,
	fn
}

ES6默认导入
语法：import 变量名 from ‘模块标识’

import obj from ''

2.命名导出和命名导入

语法：export 声明语句和初始值

export const a=10
export const fn=()=>{

}

命名导入
语法：import {export 后面变量名统一} from ‘模块标识’
import {a,fn} from ‘’

3.无导出和直接导入

import obj from '...'  将代码倒过来直接参与运行
多用于css文件
console.log(obj);

4.webpack概念

现代js应用程序的静态模块打包器
静态：文件资源
模块：node环境，引入文件，遵守模块化语法

除了合并代码，还可以翻译和压缩代码
less/sass->css
ES6/7/8->ES5
html/css/js->压缩合并

本质上是第三方模块包

创建步骤

1.创建文件夹
2.初始化包环境
npm init
(加-y表示默认，如果存在中文路径会报错)
3.安装依赖包
npm i webpack webpack-cli -D
4.在 package.json中，配置scripts（自定义命令）
scripts:{
	"build":"webpack"
}

5.webpack基础使用

1.新建一个src/add/add.js -定义求和函数导出

export const addFn=(a,b)=>a+b

2.新建src/index.js导入使用

//webpack打包的入口
import{addFn} from './add/add'
console.log(addFn(5,2));

3.运行打包命令

npm run build(自定义命令)

4.效果
打包自动产生dist文件夹

更新打包会替代之前的打包

6.webpack配置修改

默认入口：src/index.js
默认出口：dist/main.js
新建webpack.config.js文件添加相关信息 参考webpack网站

7.webpack插件–生成html文件

1.下载

npm install --save-dev html-webpack-plugin

2.然后可以根据网上教程来使用

8.打包css文件

webpack默认打包js代码，可以使用加载器来解决

1.安装依赖器

npm i css-loader style-loader -D

2.然后给webpack配置加载器

9.打包less文件

需要less和less-loader加载器，然后修改配置

10.打包图片

在js中引入图片需要把它作为模块引入（不能写路径）

webpack在打包时会把图片路径当作字符串打包，运行时找不到
解决：把图片当作模块，引入过来，一起打包

11.webpack开发服务器

下载webpack-dev-server，启动一个开发服务器，用于快速开发应用程序

1.下包

npm i webpack-dev-server -D

2.配置命令

scripts:{
	"build":"webpack",
	"serve":"webpack serve"
}

3.运行

npm run serve