day33内容回顾及node入门

前面内容

基础内容

1.变量命名(关键词)

2.循环语句(for while do while)及 控制语句 (switch case if else)break退出这个执行过程

continue 跳过这一次的执行过程return返回

3.函数(arguments数组 this指向当前调用者)

4.数祖(增删改查方法)

5.字符串(增删改查 字符串不能变化(常量不能改变) )

6.对象(对象的定义 对象的属性操作 json格式数据)

7.math的相关方法

8.面向对象的内容(如何构建对象 以及如何分析对象)

重点内容

1.es5(数组 高阶函数 语法 严格模式 字符串 比对方法 对象的this指向更改 (bind apply call)…)

2.es6 (数组(Array.from Array.of array.find array.findindex) 字符串(endwith startwith include repate) 扩展运算符 …解构 箭头函数(默认参数) 对象的简写及函数的简写 对象的相关的方法 新增的基础数据类型(symbol bigint)新增对象类型 (set map) for in 遍历对象 for of 遍历数组)

class(类 extends继承 构造器construct 原型 构造函数 prototype 对象 __proto__)

promise (解放回调地狱then处理成功 catch处理失败 resolve 成功 reject失败 all执行所有的pomise race得到一个最先执行完的promise对象 finally 执行成功还是失败都会执行的)

3.es7新增内容

async await对于promise的增强 async修饰函数(修饰的函数返回的是一个pronmise对象 这个函数里面的return相对于promise里面的  resolve) await修饰对象的promise对象且必须存在于async修饰的函数内(awiat修饰的promise对象会获取当前的执行的线程并锁定 等待这个promise执行完下面的内容才能继续执行)

3.es7新增内容

async awiat 对于promise的增强 async 修饰的函数（修饰的函数返回的是一个promise对象 这个函数
里面的return 相对于promise里面的resolve）awiat修饰对象的promise对象且必须存在于async修饰
的函数内（awiat修饰的promise对象会获取当前的执行线程并锁定 等待这个promise执行完下面的内
容才能继续执行）
proxy 代理对象（代理模式）
proxy的构造函数里面要传俩个参数（target 目标对象 handler 处理）
handler的属性 get函数 set 函数
4.闭包 （防抖 节流 函数的柯里化）

 

弹窗（js本身的弹窗方法太过于简单）
1.自己写js（工作量比较大）
2.使用其他的内容（cv）
其他的人开发很好用的一些插件（js库 组件（ bootstrap easyui layui jquery写的 ）element-ui
antd…）一般的使用的方式 都是固定
2.1 导入文件 cdn（下载安装 npm的形式）

<script src="./jquery.js"></script>
<script src="./bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>

2.2 导入对应的css文件

<link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">

2.3 去复制粘贴

<!-- 指定触发切换方式data-bs-toggle="modal" 指定目标里面为选择器 data-bs-
target=
"
#exampleModal" -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-
bs-target="#exampleModal">
触发的按钮
</button>
<!-- Modal 弹出层 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!--主体内容-->
<div class="modal-content">
<!--头部内容-->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">我的世界</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<!--主体内容-->
<div class="modal-body">
登录成功
</div>
<!--底部内容-->
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">知
道了</button>
<!-- <button type="button" class="btn btn-primary">Save
changes</button> -->
</div>
</div>
</div>
</div>

node 

环境安装

下载

 

 

安装（msi文件 压缩的zip文件 解压完需要配置）按流程走到底
环境安装测试

 

 

-v 表示的版本 –version
node （执行对应的文件 js）
npm （称为包管理器 管理对应的包（打包好的写好的js文件）的）
npm命令细讲
初始化模块（新建一个文件 pack.json (使用的模块都需要在里面进行配置才能导入)）

npm init

 

 第三方模块的引入（安装） （简写为npm i）

npm install 模块名 修饰符

–save 保存生产环境
简写 -S
–develop 保存在开发环境 简写 -D
–global 全局保存
简写 -g
当你安装成功以后 会出现俩个文件（第一次安装的时候 pack-lock.json 根据pack.json生成的文件
node-modules 存储所有的模块源码）

卸载

npm uninstall 模块名 修饰符

更新

npm update 模块名 修饰符

查看对应的模块 npm list（列表查看）

npm list 修饰符

发布模块

npm publish

添加用户

npm adduser

配置

npm config

入门模块
node的内置模块
1.http （网络交互的 接口）
2.fs （fliesystem 文件系统）
3.events（事件）
4.path （路径）
5.url （地址）
6.querystring （将对应的url参数字符串转为对象）
7.mysql （数据库交互）
…..
第三方模块（安装）
模块化（一个模块想被导入 必须先被导出）
将对应的功能封装为一个模块（抽取对应的代码 js代码 css代码 html代码（一个））
Amd (全局 优先加载)
Cmd（局部 使用的时候加载）
comment.js （使用对应的comment组件化技术）
ES5 （ES3） 借助了comment.js 来实现对应的导入导出操作 require 导入 modules.export 导出
ES6 import 导入 export 导出（需要babel.js来解析）
入门案例

const http = require("http") //对应导入的模块直接写对应的模块名
//创建服务
const server = http.createServer((req,res)=>{
//req 请求 res响应
res.end("hello") //表示响应结束
})
//监听 默认的形式 地址localhost 端口号 3000
server.listen(8888,"127.0.0.1",3,function(){
console.log("服务器已经启动");
})

内置模块讲解
events 模块（观察者模式 on off emit）
events模块的主要使用的对象是eventEmitter

//导入模块 默认events里面导出一个主要类eventEmitter
const EventEmitter = require('events');
const myEmitter = new EventEmitter();
//实例方法（观察者模式的核心 vue组件传参里面的子传父）
//on方法做监听
let fn = function(param){
console.log("hello 你来了"+param);
}
// myEmitter.on("hello",function(param){
// console.log("hello 你来了"+param);
// })
myEmitter.on("hello",fn)
//off方法取消监听 对象比对是地址 而这俩个不是一个对象
myEmitter.off("hello",fn)
//emit方法 执行对应的事件
myEmitter.emit("hello","张三")

HTTP模块 （网络交互的后台接口书写）
采用事件监听的写法

const http = require("http")
//parse主要是得到对应的一个绝对路径地址
const { parse } = require("url")
//导入querystring模块 他是将对应的字符串变成对象
const {decode} = require("querystring")
//新建一个服务对象 createServer
const server = http.createServer()
//对于请求进行处理 （监听请求的进入）
server.on("request",(req,res)=>{
//设置响应头 指定对应的编码格式及返回内容
res.setHeader("Content-type","application/json; charset=utf-8")
//打印请求的地址 做成不同接口
// console.log(req.url)
let router = parse(req.url).pathname
//准备好的数据
let responseText = "hello"
//登录接口 login 采用的请求方式post(以表单方式进行提交)
if(router=="/login" && req.method == "POST"){
let params = ""
//获取post请求的数据
req.on("data",function(chunk){
params += chunk.toString()
})
req.on("end",()=>{
const {username,password} = decode(params)
let obj = new responseJSON(200)
if(username!='张三' || password!='123'){
obj.message = "登录失败"
obj.data = {
}
}else{
obj.message = "登录成功"
obj.data = {
username:
"
张三"
}
}
res.write(JSON.stringify(obj))
res.end()
})
}
//注册接口 register
if(router=="/register" && req.method == "POST"){
responseText =
"
注册"
res.write(responseText) //写出去的东西会乱码
res.end()
}
//购物车接口 car
if(router=="/car" && req.method == "GET"){
let obj = new responseJSON(200)
let params = parse(req.url,true).query
if(params.id == 1){
obj.message = "成功"
obj.data = {
shopid:1,
shopName:'旺旺小小酥',
userid:1
}
}else{
obj.message = "成功"
obj.data = {}
}
res.write(JSON.stringify(obj)) //写出去的东西会乱码
res.end()
}
//监听请求的结束
req.on("end",function(){
})
})
//监听服务对象的端口号
server.listen(8080,()=>{
console.log("服务器启动成功");
})
//封装好的响应对象 code 状态码 message 响应信息 data数据
class responseJSON{
constructor(code,message,data){
this.code = code
this.message = message
this.data = data
}
}

get获取数据 (url模块的parse方法)

parse(req.url).query //返回的是一个对象

post获取数据 （使用querystring 进行格式化）

req.on("data",(chunk)=>{
params+=chunk
})
//拼接的字符串需要转为对象
const {username,password} = decode(params)

后端解决跨域

//解决跨域问题 设置响应头 Access-Control-Allow-Origin
res.setHeader("Access-Control-Allow-Origin",'*')
res.setHeader("Access-Control-Allow-Origin-Method",'*')

fs模块（fileSystem 文件系统）
文件增删改查（读写）

const fs = require('fs')
//文件的读取 里面的方法是异步 文件读取都是异步操作
//文件路径 处理函数(err错误 data数据)
fs.readFile('./test.txt',function(err,data){
if(err){
throw new Error('文件读取出错'+err)
}
//返回的是一个buffer(流文件) toString
console.log(data.toString());
})
//写内容进去 路径 写的内容 选项（文件属性） 回调（报错）（他没有这个文件会被创建）
fs.writeFile("./hello.txt","哈哈哈",function(err){
if(err){
throw new Error('文件创建失败'+err)
}
console.log("写入完成");
})
//改名 路径 新的名字 回调函数
fs.rename('./test.txt','./good',function(err){
if(err){
throw new Error('文件重命名失败'+err)
}
console.log("改名卡减一");
})