node

NodeJS

介绍：基于服务端的js运行环境

相关网址：

●https://nodejs.org/zh-cn/

●http://nodejs.cn/

Nodejs 应用场景

1.创建应用服务
2.web开发（后端）
3.接口开发（小程序）
4.客户端应用工具 webpacck,vue,react,小程序

模块化

1.核心（内置）模块

2.第三方模块

3.自定义模块

node基础操作

node -v  查看是否安装node

node 路径  运行js

两个全局变量
__dirname  当前文件所处的文件路径（绝对路径，不包含文件名）
__filename 当前文件完整路径（绝对路径，包含文件名）

path模块（重点）

步骤：
1.导入相关模块，const xxx=require("模块名/路径")
2.本模块的核心代码(业务代码)
3.导出本模块(可能不需要导出)
module.exports = {}

path模块：
作用：用于操作路径相关的

\在编程中具备转义的作用，如果要用\写成"\\"或者改成路径分隔符"/",后者是windows及Linux及mac共同的目分割符

path.dirname():获取路径中，文件或文件夹所在的目录
path.extname():获取路径中文件扩展名(带.)
path.basename():获取路径中最后的一个文件或文件夹的名字  
path.join():将多个路径描述拼接成一个完整的路径
path.join(__dirname)
path.resolve():将多个路径描述拼接成一个完整的路径   
Windows下是"盘符:\d"
Mac/Linux下是："/d"

url类

在v16中，nodejs已经废弃了url/querystring模块，需要被URL类给替代

语法

new URL(path[,baseUrl])
new URL(地址，基础地址)
path:需要被URL类解析的路径
baseUrl:主机名，如果path中已经带有域名，则baserUrl可以不写

1.URL类不是模块，不需要导入

searchParams

fs模块

fs模块：操作文件的模块
其提供了两套语法来操作文件
同步语法风格(推荐)
异步语法风格

坑：fs模块在读写文件的时候路径往往是必须的，路径支持相对路径也支持绝对路径，相对路径容易出错，建议如果拿捏不准的话，采用绝对路径。在fs模块中相对路径并不是相对于当前的脚本文件，而是相对于命令行中执行脚本文件的路径来说的

const fs=require("fs")
读文件：
同步： fs.readFileSync(文件路径，{encoding:"utf-8"})
异步：fs.readFile(文件路径，字符集，回调函数)

写文件：
两种：1.覆盖写，2.追加写
如果要求换行，换行符不是<br/>,换行符是"\n"

1.覆盖写，同步:
fs.writeFileSync(文件路径，写入内容)
2.追加写，同步：
fs.appendFileSync(文件路径，写入内容)

判断文件是否存在：
fs.existsSync(文件路径)

获取文件的一些基本属性：
fs.statSync(文件路径)

删除文件：
fs.unlinkSync(文件路径)

http模块

http默认端口号80
Https默认端口号443

nodejs常用端口号

3000
8000
8080

http模块

1.nodejs中非常常用的内置模块，其作用是为了开发者创建代码的运行环境(服务器)
2.后续的vue和react中，运行环境虽然是最终基于http模块实现，但是不是直接基于，而是如下关系
express  ->  http
3.步骤：


  a.导入http模块
   const http=require("http")
  b.产生服务器实例对象
   const server = http.createServer()
  c.监听请求，并且做出响应(设置请求对应的回调处理)[监听事件]
   server.on("request",(req,res) => {
   //req:请求对象
   //req.url 获取请求路径
   //req.method: 获取请求类型 GET/POST/PUT/DELETE
   //req.header: 获取头信息
   .....
   //res:响应对象
   //res.end(文本):将文本内容输出到浏览器
   //res.statusCode = 404状态码
   //res.setHeader("Content-Type","text/html;charset=utf8"):设置响应头
   
   })
  d.监听指定的端口号
  server.listen(3000,() => {
    //当监听指定端口号成功后触发该回调函数
    console.log("server in running at http://localhost:3000")
  })

静态服务资源服务器

/**
 * 要求：使用本文件创建一个http服务器，当用户输入http://localhost:3000/1.jpg 能够访问第一张图片，当用户输入http://localhost:3000/2.jpg能够访问第二张图片，当用户输入其它地址，由于我们没有对应的文件，则输出404找不到的提示。
 * 提示今天的知识点：
 *      fs模块，http模块，path模块
 */

// 导入相关的模块
const http = require("http")
const fs = require("fs")
const path = require("path")

// 创建出服务器实例对象
const server = http.createServer()

// 设置请求的响应处理程序
server.on("request", (req, res) => {
    // 思路：
    // 1. 获取用户请求路径（req.url）
    // 2. 拼接地址
    // 3. 文件可能不存在的，此处需要判断
    //      3.1、如果文件存在，则读取文件，输出即可
    //      3.2、如果文件不存在，则暑促互404
    // 坑：现在的浏览器都会在请求的时候默认先访问/favicon.ico
    const url = req.url
    const filepath = path.join(__dirname, "static", url)
    if (url !== "/favicon.ico") {
        // 如果请求的地址不是网站的logo图标则处理（或者也可以不加这个判断，直接将图标也放到static目录下）
        console.log(filepath)
        if (fs.existsSync(filepath)) {
            // 文件存在（输出，输出效果=读取+输出）
            const data = fs.readFileSync(filepath)
            // 输出
            res.end(data)
        } else {
            // 文件可能不存在
            res.statusCode = 404
            res.end("<h1>404</h1>")
        }
    }
})

// 监听指定的端口号
server.listen(3000, () => {
    console.log("static files server is running at http://localhost:3000")
})

get数据获取

/**
 * 通过http模块建立服务器步骤：
 * 1. 导入http模块
 * 2. 创建server对象实例
 * 3. 监听相关的事件
 * 4. 监听指定的端口
 */

const http=require("http");
const server=http.createServer()
server.on("request",(req,res) => {
    const obj=new URL(req.url,"http://b.com")
    
  // 先获取路径
    // console.log(req.url)
    // 由于需要解析的数据在req.url中，因此基础地址域名是什么无所谓，不影响参数解析
    const obj = new URL(req.url, "http://a.com")
    // 获取指定的参数
    console.log(obj.searchParams.get("id"))
    // 循环所有的数据
    obj.searchParams.forEach((value, name, searchParams) => {
        console.log(`${name} ： ${value}`)
    })
})

const port = 3000
server.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`)
})

post数据获取

/**
 * POST请求处理：
 * 1. 与get不一样，get请求参数以地址栏“?”形式传递的，而post地址栏不可见
 * 2. 获取思路：
 *      a. 由于get与post存在比较大的区别，因为post请求体可能比较大，因此post数据可能存在分块发送的情况  800kb  80k  80k  80k  80k .... 800k。所以收数据的时候也可能存在分多次去接收。最后将全部数据按照顺序组合起来。
 *      b. 此处需要借助一些请求发送工具：postman、apifox
 */
const http=require("http")
const server=http.createServer()
server.on("request",(req,res) => {
    //定义一个“碗”用于接收每次传递来的数据片段
    let arr=[]
    //在数据传输时触发data事件，回调可以保存数据
    req.on("data",buffer =>{
        arr.push(buffer)
    })
    //在数据传输完毕后会触发end事件
    req.on("end",()=>{
        //拼接buffer
        let buffer =Buffer.concat(arr)
        //将buffer转化成可识别的字符串
        const params = buffer.toString()
        console.log(params);
        // id=1000&eid=2000&fid=3000
        const tmp=params.split("&")
        let obj={}
        tmp.forEach(el=>{
            const temp=el.split("=")
            obj[temp[0]]=temp[1]
        })
        console.log(obj);
    })

})

const port = 3000
server.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`)
})

npm包管理

npm仓库地址：https://www.npmjs.com/

mkdir demo //建文件夹

npm init -y //初始化

npm list  //查看已安装模块

npm install 模块名[@版本号 可选]
npm i 模块名[@版本号 可选]
//只要在版本不兼容的情况霞，才可能指定版本号

--save -S //安装到项目需要

--save-dev -D  //记录开发环境所需模块

-g   //安装全局

npm uninstall 模块名  //卸载

npm root -g //查看全局包

基于nodejs运行的项目的基础目录结构

• 根目录

  • src文件夹：后续代码基本都在里面

    • asets文件夹：静态文件夹

    • model文件夹

    • config文件夹

    • ......1

    • index.js：默认的入口文件(react框架 采用这个命名)

    • main.js：vue的入口文件

  • public文件夹：浏览器访问的入口文件夹

    • index.html

npm 命令

npm run 自定义指令名称

npm run server //启动开发

npm run build  //打包

自动重启应用

全局安装nodemon
npm i -g nodemon

执行node脚本
nodemon app.js

Express【重点】

介绍：

1. 基本使用

   安装
   npm init -y
   npm i -S express
   

   express创建服务器的步骤:

   /**
    * express创建服务器的步骤：
    * 1. 导包，导入express包
    * 2. 创建服务器实例
    * 3. 创建路由及响应方法（与之前的意思差不多）
    * 4. 监听端口号
    */
   
   // 1. 导包，导入express包
   const express = require("express")
   // 2. 创建服务器实例
   const app=express()
   // 3. 创建路由及响应方法
   // 语法：app.请求类型方法(地址,(req,res) => {数据处理及响应代码})
   app.get("/",(req,res) => {
       // 直接做出响应
       res.send("你好")
   })
   
   app.get("/html5",(req,res)=>{
       // 直接做出响应
       res.send("你好，h5")
   })
   
   // 4. 监听端口号
   app.listen(3000, () => {
       console.log("server is running at http://localhost:3000")
   })
   

   获取query字符串

   通过 req.query 对象，可以访问到客户端通过查询字符串的形式发送到服务器的参数：

   const express = require("express")
   const app=express()
   
   app.get("/index",(req,res) => {
       let{id,tel}=req.query
       // console.log(req);
       res.send(`输出：你传递来的id是${id}，tel是${tel}`)
   })
   
   app.listen(3000, () => {
       console.log("server is running at http://localhost:3000")
   })
   
   

   动态参数传递

   Restful规范

   这个传参方式是符合restful传参规范的。
   
   扩展Restful规范（规范不是标准！！！）：
   
   规范1：restful规范是一个接口开发的规范
   
   规范2：restful规范规定了多种请求类型来适配不同的操作，常见的如下：
   
   ​     GET请求类型：用于获取数据（获取xxx列表、获取xxx详情）
   
   ​     POST请求类型：用于数据新增（xxx添加）
   
   ​     PUT请求类型：用于数据修改（xxx修改、xxx编辑）
   
   ​     DELETE请求类型：用于数据删除（xxx删除）
   
   规范3：请求地址规范，例如如果需要实现用户管理模块，则相关的地址可以参考：
   
   用户列表：http://example.com/admin/users      GET
   
   用户详情：http://example.com/admin/users/100    GET
   
   用户添加：http://example.com/admin/users      POST
   
   用户修改：http://example.com/admin/users/100    PUT
   
   用户删除：http://example.com/admin/users/100    DELETE
   
   规范4：响应内容格式规范（后端），返回的json节点名称要有意义
   

   restuful参数传递与获取

   const express = require("express")
   const app = express()
   
   // restful地址需要有占位符
   // 两种占位符：
   //   :名        必须要传递数据，不传就不会匹配这个方法，404【居多】
   //   :名?       该数据可选，可以传递，也可以不传递
   
   // 名称是什么无所谓，只要定义的时候和使用的时候一致即可
   // 获取数据：req.params属性获取
   app.get("/film/:filmId", (req, res) => {
       console.log(req.params);
       res.send(`你访问的电影id是：${req.params.filmId}`)
   })
   
   app.listen(3000)
   

   静态资源托管

   express提供了一个非常好用的方法，叫做 express.static()，通过此方法，可以非常方便地创建一个静态web资源服务器：

   const express = require("express")
   const path = require("path")
   const app = express()
   
   /**
    * 静态资源托管在http模块中需要自己通过path、fs、http模块来实现
    * 在express中，操作得到了简化，一行搞定
    * app.use()：表示让当前的app实例使用外部的模块或者内置的方法
    *
    * express.static()是express中内置中间件【中间件的本质就是方法function】
    */
   // 基础功能
   //使用app.use()方法**一般**写在具体的路由监听之前。
   // app.use(express.static(path.join(__dirname, "assets")))
   
   // 升级功能
   // 支持地址虚拟前缀，功能两点：
   // 1. 防止别人猜测目录结构
   // 2. 对于文件可以起到归档的作用
   app.use("/vjhgkhjljnbvhjgkhnbvm", express.static(path.join(__dirname, "assets")))
   
   app.listen(3000)