Node.js简介

1. 什么是Node.js
Node.js是一个基于 Chrom V8 引擎的 JavaScript 运行环境。

2.Node.js中的JavaScript 运行环境
注意:① 浏览器是JavaScript的前端运行环境。
② Node.js 是 JavaScript 的后端运行环境。
③ Node.js 中无法调用DOM和BOM等浏览器内置API

3.Node.js可以做什么
在这里插入图片描述

Node.js环境的安装

1.区分LTS版本和Current版本的不同
在这里插入图片描述

2. 查看已安装的Node.js的版本号
在这里插入图片描述

3.什么是终端

在这里插入图片描述

4.在Node.js环境中执行JavaScript代码
① 打开终端
② 输入 node 要执行的js文件的路径

在Node.js环境中执行JavaScript代码

1.终端中的快捷键
在这里插入图片描述

fs文件系统模块

1. 什么是fs文件系统模块
在这里插入图片描述

2.fs.readFile()的语法格式

在这里插入图片描述
2.1 fs.readFile()的示例代码

在这里插入图片描述

2.2判断文件是否读取成功

在这里插入图片描述

3. 向指定的文件中写入内容

在这里插入图片描述

3.1 fs.writeFile() 的示例代码

在这里插入图片描述

3.2 判断文件是否写入成功

在这里插入图片描述

整理成绩案例

  1. 成绩.js代码
// 导入fs模块
const fs = require('fs');

fs.readFile('./files/成绩.txt', 'utf-8', function (err, dataStr) {
    if (err) {
        return console.log('读取文件失败' + err.message)
    }
    // console.log('成绩读取成功' + dataStr)

    // 4.1先把成绩的数据,按照空格进行分割
    const arrOld = dataStr.split('')

    // 4.2循环分割后的数组,对每一项数据,进行字符串的替换操作
    const arrNew = []
    arrOld.forEach(item => {
        arrNew.push(item.replace('=', ':'))
    })

    // 把新数组中的每一项,进行合并,得到一个新的字符串
    const newStr = arrNew.join('\n')
    console.log(newStr)

    //调用fs.writeFile()方法,把处理完毕的成绩,写入到新文件中
    fs.writeFile('./files/成绩.txt',newStr,function(err){
        if(err){
            return console.log('写入文件失败' + err.message)
        }
        console.log('成绩写入成功!')
    })
})

  1. 相关需求文件
    在这里插入图片描述

fs模块-路径动态拼接的问题

在这里插入图片描述

在这里插入图片描述
解决方法 1:
在这里插入图片描述

  • 注意:这种方法因为目录冗长,所以移植性非常差、不利于维护

解决方法 2:

在这里插入图片描述

path路径模块

在这里插入图片描述
1 path.join()的格式代码示例

在这里插入图片描述

  • 注意 ’ …/ ’ 这个字符串在 path.join()方法中会抵消它前面的一层路径

2 获取路径中的文件名

在这里插入图片描述

  • 代码示例:

    在这里插入图片描述

获取路径中的文件扩展名

在这里插入图片描述

  • 代码示例:
    在这里插入图片描述

http模块

1.什么是http模块

在这里插入图片描述

2. 进一步理解http模块的作用

在这里插入图片描述

3. 1服务器相关概念

在这里插入图片描述

3.2域名和域名服务器

在这里插入图片描述

3.3端口号

在这里插入图片描述

4. 1创建web服务器

在这里插入图片描述

4.2创建web服务器步骤

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4.2 req请求对象

在这里插入图片描述

4.3 res响应对象

在这里插入图片描述

4.4解决中文乱码问题

在这里插入图片描述

4.5 根据不同的url响应不同的html内容

在这里插入图片描述
在这里插入图片描述

模块化的基本概念

1.1什么是模块化

在这里插入图片描述

2.1Node.js中模块的分类

在这里插入图片描述

2.2加粗样式

在这里插入图片描述

  • 注意:
    1. 使用require()方法加载其他模块时,会执行被加载模块中的代码
    2. 加载用户自定义模块期间可以省略 .js 的后缀名

2.3Node.js中的模块作用域

在这里插入图片描述

2.3.2模块作用域好处

在这里插入图片描述

  • 例如:
    在这里插入图片描述
    2.4向外共享模块作用域中成员

在这里插入图片描述

2.4.1module.exports对象

在这里插入图片描述

2.4.2向外共享模块作用域中的成员

在这里插入图片描述

  • 例如这个例子,最后 module.exports={}指向什么 才会导出什么

在这里插入图片描述

2.4.3 exports对象

在这里插入图片描述

  • 实例:
    在这里插入图片描述

2.3.4 exports 和 module.exports的使用误区

在这里插入图片描述

2.5Nod3.js中的模块化规范

在这里插入图片描述

3npm与包

1.1什么是包

在这里插入图片描述

1.2包的来源

在这里插入图片描述

1.3为什么要包

在这里插入图片描述

1.4从哪下载包

在这里插入图片描述

1.5如何下载包

在这里插入图片描述

2.1npm使用方法实例

在这里插入图片描述
2.2在项目中安装包的命令

在这里插入图片描述

2.3初次安装包后多了那些文件

在这里插入图片描述

2.4安装指定版本的包

在这里插入图片描述
2.5包的语义化版本规范

在这里插入图片描述
3.1包管理配置文件

在这里插入图片描述
3.2如何记录项目中安装了哪些包

在这里插入图片描述

3.3快速创建package.json

在这里插入图片描述

  • 注意:这个文件夹指的是项目存放的父文件夹,父亲的父亲及以上文件夹名称不用管

3.4dependencies节点

在这里插入图片描述

3.5一次性安装所有的包

在这里插入图片描述

  • 注意: 一次性安装所有的包后不要跟任何包名称,如果跟了就表示要安装指定的包

3.6卸载包

在这里插入图片描述

3.7 devDependencies节点

在这里插入图片描述

  • 注意: 包名 和 --save-dev(-D) 书写位置顺序可以调换

4.1为什么下包速度慢

在这里插入图片描述

4.2淘宝NPM镜像服务器解决下包慢

在这里插入图片描述

4.3 切换npm的下包镜像源

在这里插入图片描述
4.4 nrm

在这里插入图片描述
3.5包的分类!!!

5.1项目包分类

在这里插入图片描述

5.2全局包

在这里插入图片描述

5.3 i5ting_toc
在这里插入图片描述

6.1包的结构规范

在这里插入图片描述

3.7 开发属于自己的包

3.7.1初始化包的基本结构
在这里插入图片描述
3.7.2初始化package.json
在这里插入图片描述

  • “main” : 是主文件入口

3.7.3在index.js中定义转义HTML方法

  • 该方法的作用是防止用户在提交表单的时候填写html字符串
function htmlEscape(htmlStr){
 return htmlStr.replace(/<|>|"|&/g,(match)=>{
        switch(match){
               case'<':
                    return '&lt';
               case'>':
                    return '&gt';
               case'"':
                    return '&quot';
               case'&':
                    return '&amp';
          }
   })
}

3.7.4在index.js中定义还原HTML方法

function htmlUnEscape(str){
     return str.replace(/&lt;|&gt;|&quot;|&amp;/g,(match) => {
              switch(match){
              case'&lt':
                    return '<';
               case'&gt':
                    return '>';
               case'&quot':
                    return '"';
               case'&amp':
                    return '&';
                }
       })
}

3.7.5将不同功能进行模板化拆分

在这里插入图片描述

  • 例如:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 这里运用了es6新特性 模板字符串的功能,比如把date中dateFormat中所有属性展开共 test.js 使用。注意:如果不去展开在 test.js 是识别不到dateFormat.js文件的。

在这里插入图片描述

3.7.6编写包的说明文档

在这里插入图片描述

3.8发布包

3.8.1注册npm账号

在这里插入图片描述

3.8.2 登录npm账号
在这里插入图片描述

3.8.3 把包发布到 npm 上
在这里插入图片描述

3.8.4 删除已发布的包
在这里插入图片描述

模块加载机制

4.1.1 优先从缓存中加载

在这里插入图片描述
4.1.2 内置模块的加载机制
在这里插入图片描述

4.1.3 自定义模块的加载机制

在这里插入图片描述

4.1.4 第三方模块的加载机制
在这里插入图片描述

4.1.5 目录作为模块

在这里插入图片描述

Express学习

1.1Express简介

1.1.1 什么是express

在这里插入图片描述

1.1.2 Express能做什么

在这里插入图片描述
1.1.2 安装express框架

  1. 创建一个express工作目录

$ mkdir myapp
$ cd myapp

  1. 通过npm init 命令创建一个 package.json ,即进行项目初始化

$ npm init

  1. 在 myappa目录下安装 Express

$ npm install express --save

  1. 如果只是临时安装 Express ,不想把它添加到依赖列表中,可执行如下命令。

$npm install express --no-save

1.1.3 搭建运行Express服务器

  1. 在 1.1.2中 myapp 文件夹下主入口文件中写入代码:
//创建express服务器
const express = require('express');
const app = express()
const port = 80
//发送get请求
app.get('/',(req,res)=>{
    //发出响应
    res.send('hello wolrd')
})

//listen监听启动服务器
app.listen(80,()=>{
       console.log('80端口监听中...')
})
  1. 在终端执行命令:

$ node myapp.js

  1. 在浏览器中打开网址

https://127.0.0.1:80

1.1.4 监听GET请求
在这里插入图片描述

1.1.4 监听POST请求
在这里插入图片描述

1.1.5 把内容响应给客户端

 v从vvvvvvvvvv从vcv

1.2 Express 的基本使用

1.2.1 获取 URL 中携带的查询参数

在这里插入图片描述

// req.query参数获取测试
app.get('/',(req,res)=>{
    console.log(req.query);
    res.send(req.query);
})

在这里插入图片描述

1.2.2 获取 URL 中的动态参数

在这里插入图片描述

  • 实例:
// req.params参数获取测试
app.get('/user/:id',(req,res)=>{
    // req.params是动态匹配到的 URL 参数,默认也是一个空对象
    console.log(req.params)
    res.send(req.params)
})

在这里插入图片描述

  • 注意:如果请求url 中后缀为 ‘/user/:id/:name’ 则在 postman 中输入两个参数才行!

1.3托管静态资源

1.3.1 express.static()

在这里插入图片描述

  • 注意:上图中在浏览器中访问的时候,端口后的参数并没偶携带文件夹名 public 。

1.3.2 托管多个静态资源目录

在这里插入图片描述

  • 注意:谁写在前边,如果访问两个文件夹中都有默认的 index.html 则就是访问是谁的,除非写在前边的找不到,就找第二个的。

1.3.3 挂载路径前缀

在这里插入图片描述

  • 这种加前缀的更加精确!

1.4nodemon的使用

nodemon

  1. 安装nodemon:

$ npm install nodemon -g

  1. 取消电脑默认配置让nodemon可以运行
  1. 管理员身份打开 powershell
  2. 输入set-ExecutionPolicy RemoteSigned
  3. 输入 Y 或者 A ,回车
  1. 在项目终端运行nodemon

$ nodemon index.js

2 Express路由

2.1 路由的概念

2.1.1 什么是路由

  • 路由就是一种对映的映射关系

2.1.2 Express 中的路由

在这里插入图片描述

2.1.3 路由的匹配过程
在这里插入图片描述

2.2路由的使用

2.2.1 模块化路由步骤

在这里插入图片描述

2.2.2 创建路由模块
在这里插入图片描述

2.2.3 注册路由模块

在这里插入图片描述

2.2.4 为路由模块添加前缀

在这里插入图片描述

3. Express 中间件

3.1 中间件概念

3.1.1 什么是中间件

  • 中间件:特指业务流程的中间处理环节。

3.1.2 Express中间件的调用流程在这里插入图片描述

3.1.3 Express中间件的格式

在这里插入图片描述

3.1.4 next函数的作用

在这里插入图片描述

3.2 Express 中间件的初体验

3.2.1 定义中间件函数

在这里插入图片描述

3.2.2 全局生效的中间件
在这里插入图片描述

3.2.3 定义全局中间件的简化形式

在这里插入图片描述

3.2.4 中间件的作用

在这里插入图片描述

在这里插入图片描述

3.2.5 定义多个全局中间件

在这里插入图片描述

3.2.6 局部生效中间件
在这里插入图片描述

3.2.7 定义多个局部中间件

在这里插入图片描述

3.2.8 中间件五个使用事项

在这里插入图片描述

3.3 中间件的分类

在这里插入图片描述

3.3.1 应用级别的中间件
在这里插入图片描述

3.3.2 路由级别的中间件

在这里插入图片描述

3.3.3 错误级别的中间件

在这里插入图片描述
在这里插入图片描述

3.3.4 Express内置的中间件

在这里插入图片描述

3.3.4.1 JSON格式中间件

在这里插入图片描述

3.3.4.2 URL-encoded格式中间件

在这里插入图片描述

3.3.3 第三方的中间件

在这里插入图片描述

在这里插入图片描述

3.4自定义中间件

3.4.1 需求与实现步骤

在这里插入图片描述

3.4.2 监听req的 data 事件

在这里插入图片描述

3.4.3 监听req的end事件

在这里插入图片描述

3.4.3 使用 querystring 模块解析请求体数据
在这里插入图片描述

3.4.5 将自定义中间件 封装 为模块
**3.4.4 将解析出来的数据挂载为 req.body**

在这里插入图片描述

  • 模块
    在这里插入图片描述
  • js:
    在这里插入图片描述

4 使用 Express 写接口

4.1创建API路由模块

在这里插入图片描述

4.2 编写 GET 接口

在这里插入图片描述

4.3 编写POST接口

在这里插入图片描述

4.4 CORS跨域问题

4.4.1 接口的跨域问题

在这里插入图片描述

4.4.2 接口的跨域问题

在这里插入图片描述

4.4.3 什么是CORS

在这里插入图片描述

4.4.3 CORS 的注意事项在这里插入图片描述

4.5 CORS跨域资源共享

4.5.1 CORS响应头部: Acess-Control-Allow-Origin

在这里插入图片描述
在这里插入图片描述

4.5.2 CORS 响应头部:Access-Control-Allow-Headers

在这里插入图片描述

4.5.3 CORS 响应头部:Access-Control-Allow-Methods

在这里插入图片描述

4.5.4 简单请求
在这里插入图片描述

4.5.5 预检请求

在这里插入图片描述

4.5.6 简单请求和预检请求区别
在这里插入图片描述

4.6 JSONP 接口

4.6.1 JSONP 的概念与 特点

在这里插入图片描述

4.6.2 创建 JSONP 接口的注意事项
在这里插入图片描述

4.6.3 实现 JSONP 接口的步骤

在这里插入图片描述

4.6.4 实现 JSONP 接口的具体代码
在这里插入图片描述

5. 数据库的基本概念

5.1 什么是数据库

在这里插入图片描述

5.2 常见的数据库及分类

在这里插入图片描述

5.3 传统型数据库的数据组织结构

  • 注: 数据的组织结构:指的就是数据以什么杨的结构进行存储。
    传统型数据的数据组织结构,与Excel 中数据的组织结构比较相似。

5.3.1 Excel 的数据组织结构

在这里插入图片描述

5.3.2 传统型数据库的数据组织结构

在这里插入图片描述

5.3.3 传统型数据库的数据组织结构

在这里插入图片描述

5.4 安装并配置MySQL

5.4.1 了解需要安装哪些MySQL 相关的软件

在这里插入图片描述

5.5 MySQL 的基本使用 (使用workbench)

5.5.1 了解主界面的组成部分

在这里插入图片描述

5.5.2 创建数据库
在这里插入图片描述

  • 注意:数据库的名字不能有 空格、中文。

5.5.3 创建数据表

在这里插入图片描述

5.5.4 向表中写入数据
在这里插入图片描述

5.6 使用SQL管理数据库

5.6.1 什么是数据库

在这里插入图片描述

5.6.2 SQL 能做什么

在这里插入图片描述

5.6.3 SQL 的 SELECT 语句 语法
在这里插入图片描述

  • 方式一:
    在这里插入图片描述

  • 方式二:
    在这里插入图片描述

5.6.4 SQL 的 INSERT INTO 语句 语法

在这里插入图片描述

5.6.4 SQL 的 UPDATE 语句 语法

在这里插入图片描述

  • 示例:
    在这里插入图片描述

5.6.5 SQL 的 DELETE 语句 语法
在这里插入图片描述

5.6.6 SQL 的 WHERE 语句 语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.6.7 SQL 的 AND 和 OR 运算符
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.6.8 SQL 的 ORDER BY 子句

在这里插入图片描述

  • 升序排序示例:
    在这里插入图片描述
  • 降序排序示例:
    在这里插入图片描述

5.6.8.1 ORDER BY 子句 - 多重排序

在这里插入图片描述

5.6.9 SQL的COUNT(*)函数

在这里插入图片描述

5.6.10 使用 AS 为列( count(*) ) 设置别名

在这里插入图片描述

5.7 在项目中操作 MySQL

5.7.1 在项目中操作数据库的步骤

在这里插入图片描述

5.7.2 安装mysql 模块
在这里插入图片描述

5.7.3 配置mysql 模块

在这里插入图片描述

5.7.4 测试 mysql 模块能否正常工作
在这里插入图片描述

  • 注意 在这里’select 1’ 这个参数没有实质性作用只是用来检测mysql模块是否可以正常工作

5.7.5 使用mysql模块操作MySQL数据库

  1. 语法
    在这里插入图片描述

  2. 插入数据

在这里插入图片描述

  • 示例:
    在这里插入图片描述
    在这里插入图片描述
  • 注意:现在插入这个 id 之所以为 8 ,是因为我们之前创建过 id 为4,5,6,7的列,即使被删除了,新创建的也不能占用那个id了。
  1. 简便方式插入数据
    在这里插入图片描述
    • 示例:

在这里插入图片描述
在这里插入图片描述

  1. 更新数据
    在这里插入图片描述

  2. 更新数据的简便方式
    在这里插入图片描述

  3. 删除数据
    在这里插入图片描述

  4. 标记删除
    在这里插入图片描述

5. 前后端身份认证

5.1 Web开发模式

5.1.1服务端渲染的Web开发模式
在这里插入图片描述

5.1.2 服务端渲染的优缺点
在这里插入图片描述

5.1.3 前后端分离的Web开发模式
在这里插入图片描述

5.1.4 前后端分离的优缺点
在这里插入图片描述
5.1.5 如何选择Web开发模式

在这里插入图片描述

5.2 身份认证

5.2.1 什么是身份认证
在这里插入图片描述

5.2.2 为什么要身份认证
在这里插入图片描述

5.2.3 不同开发模式下的身份认证
在这里插入图片描述

5.3 Session 认证机制

5.3.1 HTTP 协议的无状态性
在这里插入图片描述

5.3.2 如何突破HTTP 协议的无状态性的限制
在这里插入图片描述

5.3.3 什么是cookie
在这里插入图片描述

5.3.4 cookie 在身份认证中的作用
在这里插入图片描述

5.3.5 cookie 不具有安全性
在这里插入图片描述

5.3.6 提高身份认证的安全性
在这里插入图片描述

5.3.7 Session的工作原理
在这里插入图片描述

5.4 在Express 中使用 Session 中认证

5.4.1 安装express-session

  • npm install express-session

5.4.2 配置 express-session 中间件

在这里插入图片描述

5.4.3 向session中存数据
在这里插入图片描述

5.4.4 从session中取数据
在这里插入图片描述

5.4.5 清空 session
在这里插入图片描述

5.5JWT认证机制

5.5.1 了解 Session 认证的局限性
在这里插入图片描述

5.5.2 什么是 JWT
在这里插入图片描述

5.5.3 JWT 的工作原理
在这里插入图片描述

5.5.4 JWT 的组成部分
在这里插入图片描述

  • 注意: 点号(.) 只起到 分隔的作用

5.5.5 JWT的三个部分各自代表的含义
在这里插入图片描述

5.5.6 JWT的使用方式
在这里插入图片描述

5.6 在Express 中使用 JWT

5.6.1 安装 JWT 相关的包
在这里插入图片描述

5.6.2 导入 JWT 相关的包
在这里插入图片描述

5.6.3 定义 secret 密钥
在这里插入图片描述

5.6.4 在登录成功后生成JWT字符串
在这里插入图片描述

**5.6.5 将JWT字符串还原为 JSON 对象 **
在这里插入图片描述

**5.6.6 使用req.user 获取用户信息 **
在这里插入图片描述

  • 注意只要配置成功了 express-jwt 这个中间件,就可以把解析出来的用户信息,挂载到 req.user 属性上:

app.use(expressJWT({ secret:secretKey}).unless({ path:[/^/api//]}))

**5.6.7 捕获解析 JWT 失败后产生的错误 **
在这里插入图片描述

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐