Node18.x基础使用总结(二)

news2025/4/3 16:18:37

Node18.x基础使用总结

  • 1、Node.js模块化
    • 1.1、模块暴露数据
    • 1.2、引入模块
  • 2、包管理工具
    • 2.1、npm
    • 2.2、npm的安装
    • 2.3、npm基本使用
    • 2.4、搜索包
    • 2.5、下载安装包
    • 2.6、生产环境与开发环境
    • 2.7、生产依赖与开发依赖
    • 2.8、全局安装
    • 2.9、修改windows执行策略
    • 2.10、安装包依赖
    • 2.11、安装指定版本的包
    • 2.12、删除依赖
    • 2.13、配置命令别名
  • 3、cnpm
    • 3.1、安装cnpm
    • 3.2、操作命令
    • 3.2、npm配置淘宝镜像
      • 3.2.1、直接配置
      • 3.2.2、工具配置
  • 4、yarn
    • 4.1、yarn安装
    • 4.2、yarn常用命令
    • 4.3、yarn配置淘宝镜像
    • 4.4、npm 和 yarn 选择
  • 5、nvm
    • 5.1、下载安装
    • 5.2、常用命令
  • 6、Express框架
    • 6.1、下载使用
    • 6.2、express路由
    • 6.3、获取请求参数
    • 6.4、获取路由参数
    • 6.5、express响应设置
    • 6.6、express中间件
      • 6.6.1、定义全局中间件
      • 6.6.2、定义路由中间件
      • 6.6.3、静态资源中间件
    • 6.7、获取请求体
    • 6.8、Router
    • 6.9、模板引擎EJS
      • 6.9.1、分离用法
    • 6.10、express-generator
      • 6.10.1、补充知识

配套视频： 尚硅谷2023版Node.js零基础视频教程，nodejs新手到高手
配套代码： https://gitee.com/Augenstern-creator/kuang-study-nodejs
在这里插入图片描述

1、Node.js模块化

1.1、模块暴露数据

  1. 创建 me.js
//声明函数
function tiemo(){
console.log('贴膜....');
}
//暴露数据
module.exports = tiemo;
  1. 创建 index.js
//导入模块
const tiemo = require('./me.js');

//调用函数
tiemo();

模块暴露数据的方式有两种：

  1. module.exports = value
  2. exports.name = value

使用时有几点注意：

  • module.exports 可以暴露任意数据

1.2、引入模块

在模块中使用 require 传入文件路径即可引入文件

//导入模块
const tiemo = require('./me.js');

require 使用的一些注意事项：

  1. 对于自己创建的模块，导入时路径建议写相对路径，且不能省略./ 和../

  2. 导入 node.js 内置模块时，直接 require 模块的名字即可，无需加 ./ 和../

  3. js 和 json 文件导入时可以不用写后缀

  4. 如果导入其他类型的文件，会以 js文件进行处理

  5. 如果导入的路径是个文件夹，则会首先检测该文件夹下 package.json 文件中 main 属性对应的文件，如果存在则导入，反之如果文件不存在会报错。如果 main 属性不存在，或者 package.json 不存在，则会尝试导入文件夹下的 index.js 和 index.json，如果还是没找到，就会报错

2、包管理工具

下面列举了前端常用的包管理工具：

  • npm
  • yarn
  • cnpm

2.1、npm

npm 全称 Node Package Manager ，翻译为中文意思是 Node 的包管理工具

2.2、npm的安装

node.js 在安装时会自动安装 npm ，所以如果你已经安装了 node.js，可以直接使用 npm，可以通过 npm -v 查看版本号测试，如果显示版本号说明安装成功，反之安装失败

查看版本时与nodejs版本号不一样是正常的

2.3、npm基本使用

创建一个空目录，然后以此目录作为工作目录启动命令行工具，执行 npm init

  • npm init 命令的作用是将文件夹初始化为一个包，交互式创建 package.json 文件
  • package.json 是包的配置文件，每个包都必须要有
  • package.json 内容示例：
{
    "name": "01_npm",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    	"test": "echo \"Error: no test specified\" && exit 1"
	},
    "author": "",
    "license": "ISC"
}

翻译：

{
    "name": "1-npm",   #包的名字
    "version": "1.0.0", #包的版本
    "description": "", #包的描述
    "main": "index.js", #包的入口文件
    "scripts": { #脚本配置
    	"test": "echo \"Error: no test specified\" && exit 1"
	},
    "author": "", #作者
    "license": "ISC" #开源证书
}

初始化的过程中还有一些注意事项：

  1. package name ( 包名) 不能使用中文、大写，默认值是文件夹的名称，所以文件夹名称也不能使用中文和大写
  2. version ( 版本号)要求 x.x.x 的形式定义， x 必须是数字，默认值是 1.0.0
  3. package.json 可以手动创建与修改
  4. 使用 npm init -y 或者 npm init --yes 极速创建 package.json

在这里插入图片描述

2.4、搜索包

网址搜索：https://www.npmjs.com/

2.5、下载安装包

我们可以通过 npm install 和 npm i 命令安装包，例如我们要使用 unqi 包

在这里插入图片描述

# 格式
npm install <包名>
npm i <包名>

# 示例
npm install uniq
npm i uniq

步骤如下：

  1. 首先要执行 npm init -y 初始化包
  2. npm i uniq 安装uniq包

在这里插入图片描述

可以参照 npm 的 uniq 官网使用说明进行使用：

// 1.导入 uniq 包
const uniq = require('uniq');

// 2.使用函数
let arr = [1,2,3,4,5,4,3,2,1];

// [ 1, 2, 3, 4, 5 ]
console.log(uniq(arr));

这里说一下注意点：

  • 注意更换淘宝源码
  • npm cache clean --force 可以清楚npm缓存

运行之后文件夹下会增加两个资源：

  • node_modules 文件夹 :存放下载的包
  • package-lock.json 包的锁文件 : 用来锁定包的版本

安装 uniq 之后， uniq 就是当前这个包的一个依赖包，有时会简称为依赖

思考：require 到底导入的是什么？require的工作流程如下：

  1. 在当前文件夹下 node_modules 中寻找同名的文件夹
  2. 在上级目录中下的 node_modules 中寻找同名的文件夹，直至找到磁盘根目录

2.6、生产环境与开发环境

  • 开发环境是程序员专门用来写代码的环境，一般是指程序员的电脑，开发环境的项目一般只能程序员自己访问
  • 生产环境是项目代码正式运行的环境，一般是指正式的服务器电脑，生产环境的项目一般每个客户都可以访问

2.7、生产依赖与开发依赖

我们可以在安装时设置选项来区分依赖的类型，目前分为两类：

类型命令补充
生产依赖npm i --save uniq
npm i -S uniq		-S 等效于 --save， -S 是默认选项
包信息保存在 package.json 中 dependencies 属性
开发依赖npm i --save-dev less
npm i -D less		-D 等效于 --save-dev
包信息保存在 package.json 中 devDependencies 属性

所以开发依赖是只在开发阶段使用的依赖包，而生产依赖是开发阶段和最终上线运行阶段都用到的依赖包

在这里插入图片描述

因为 uniq 和 less 包都是局部安装，并不是全局安装，所以只能在 06_npm 文件夹下使用

2.8、全局安装

我们可以执行安装选项 -g 进行全局安装

npm i -g nodemon

在这里插入图片描述

全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令，该命令的作用是 自动重启 node 应用程序

说明：

  • 全局安装的命令不受工作目录位置影响
  • 可以通过 npm root -g 可以查看全局安装包的位置
  • 不是所有的包都适合全局安装， 只有全局类的工具才适合，可以通过查看包的官方文档来确定安装方式

在这里插入图片描述

Tips：可能碰到如下问题的解决方案

  • nodemon : 无法加载文件 C:\Users\User\AppData\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。_nodemon : 无法加载文件 c:\users\x\appdata\roaming\npm\no_薛定谔的猫87的博客-CSDN博客
  • 下方 2.9 也就是解决办法

在这里插入图片描述

2.9、修改windows执行策略

windows 默认不允许 npm 全局命令执行脚本文件，所以需要修改执行策略

  1. 以管理员身份打开 powershell 命令行
  2. 键入命令 set-ExecutionPolicy remoteSigned
  3. 键入 A 然后敲回车
  4. 如果不生效，可以尝试重启 vscode/webstrom

2.10、安装包依赖

在项目协作中有一个常用的命令就是 npm i ，通过该命令可以依据 package.json 和 packagelock.json 的依赖声明安装项目依赖

npm i

npm install

node_modules 文件夹大多数情况都不会存入版本库

2.11、安装指定版本的包

项目中可能会遇到版本不匹配的情况，有时就需要安装指定版本的包，可以使用下面的命令：

## 格式
npm i <包名@版本号>

## 示例
npm i jquery@1.11.2

2.12、删除依赖

项目中可能需要删除某些不需要的包，可以使用下面的命令：

## 局部删除
npm remove uniq
npm r uniq

## 全局删除
npm remove -g nodemon

2.13、配置命令别名

通过配置命令别名可以更简单的执行命令：配置 package.json 中的 scripts 属性

{
    "scripts": {
        "server": "node server.js",
        "start": "node index.js",
    }
}

配置完成之后，可以使用别名执行命令:

npm run server

npm run start

不过 start 别名比较特别，使用时可以省略run ： npm start

  • npm start 是项目中常用的一个命令，一般用来启动项目
  • npm run 有自动向上级目录查找的特性，跟 require 函数一样
  • 对于陌生的项目，我们可以通过查看 scripts 属性来参考项目的一些操作

3、cnpm

cnpm 是一个淘宝构建的 npmjs.com 的完整镜像，也称为 淘宝镜像，网址：https://npmmirror.com/

  • cnpm 服务部署在国内阿里云服务器上， 可以提高包的下载速度
  • 官方也提供了一个全局工具包 cnpm ，操作命令与 npm 大体相同

3.1、安装cnpm

我们可以通过 npm 来安装 cnpm 工具

npm install -g cnpm --registry=https://registry.npmmirror.com

3.2、操作命令

功能命令
初始化cnpm init
安装包cnpm i uniq
cnpm i -S uniq
cnpm i -D uniq
cnpm i -g nodemon
安装项目依赖cnpm i
删除uniq依赖cnpm r uniq

3.2、npm配置淘宝镜像

用 npm 也可以使用淘宝镜像，配置的方式有两种：

  • 直接配置
  • 工具配置

3.2.1、直接配置

执行如下命令即可完成配置：

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

3.2.2、工具配置

使用 nrm 配置 npm 的镜像地址 npm registry manager

  1. 安装 nrm
npm i -g nrm
  1. 修改镜像
# 查看所有的镜像
nrm ls 

# 选择淘宝镜像
nrm use taobao

# 切换到官方地址
nrm use npm
  1. 检查是否配置成功
npm config list

检查 registry 地址是否为 https://registry.npmmirror.com/ , 如果是则表明成功

  1. 建议使用第二种方式进行镜像配置，因为后续修改起来会比较方便
  2. 虽然 cnpm 可以提高速度，但是 npm 也可以通过淘宝镜像进行加速，所以npm 的使用率还是高于 cnpm

4、yarn

yarn 是由 Facebook 在 2016 年推出的新的 Javascript 包管理工具，官方网址： https://yarnpkg.com/

4.1、yarn安装

我们可以使用 npm 安装 yarn

npm i -g yarn

4.2、yarn常用命令

功能命令
初始化yarn init / yarn init -y
安装包yarn add uniq 生产依赖
yarn add less --dev 开发依赖
yarn global add nodemon 全局安装
删除包yarn remove uniq 删除项目依赖包
yarn global remove nodemon 全局删除包
安装项目依赖yarn
运行命令别yarn <别名> # 不需要添加 run

4.3、yarn配置淘宝镜像

可以通过如下命令配置淘宝镜像：

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

可以通过 yarn config list 查看 yarn 的配置项

4.4、npm 和 yarn 选择

大家可以根据不同的场景进行选择：如果是公司要根据项目代码来选择，可以通过锁文件判断项目的包管理工具

  • npm 的锁文件为 package-lock.json
  • yarn 的锁文件为 yarn.lock

5、nvm

nvm 全称 Node Version Manager 顾名思义它是用来管理 node 版本的工具，方便切换不同版本的Node.js

5.1、下载安装

  1. 进入下载地址：https://github.com/coreybutler/nvm-windows/releases
  2. 选择 nvm-setup.exe 下载

在这里插入图片描述

5.2、常用命令

命令说明
nvm list available显示所有可以下载的 Node.js 版本
nvm list显示已安装的版本
nvm install 18.17.1安装 18.12.1 版本的 Node.js
nvm install latest安装最新版的 Node.js
nvm uninstall 18.17.1删除某个版本的 Node.js
nvm use 18.17.1切换 18.12.1 的 Node.js

Tips： 很鬼扯，安装了 nvm 后 node -v 提示报错，并且 nvm list 提示没有已安装的node版本，安装 nvm 时没有给我提示要管理已安装的 node 版本的指示，所以这里我是将 node 卸载后，先装 nvm ，之后通过 nvm 装 node 18.17.1

在这里插入图片描述

在这里插入图片描述

  1. 安装完成后找到 nvm的安装路径 - 找到 settings.txt 文件 - 配置下载源
root: D:\Develop\nvm
path: D:\Develop\nodejs


node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
  1. 然后打开命令行窗口
# 显示所有可以下载的 Node.js 版本
nvm list available

# 安装 18.12.1 版本的 Node.js
nvm install 18.17.1

在这里插入图片描述

  1. 使用这个版本的 node
nvm use 18.17.1

# 查看node版本
node -v

# 查看 npm 版本
npm -v

# 全局安装 nrm
npm i -g nrm

# 查看所有的镜像
nrm ls 

# 选择淘宝镜像
nrm use taobao

# 全局安装nodemon
npm i -g nodemon

6、Express框架

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 (expressjs.com.cn)

  • 简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用（HTTP 服务）

6.1、下载使用

  1. 通过 npm 安装
# 先对一个空文件夹进行初始化
npm init -y
# 安装express包
npm i express 
# 查看express版本
npm list express
  1. 创建 JS 文件
// 1.导入 express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
app.get('/home', (req, res) => {
  res.end('hello express server');
});

//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});
  1. 命令行下执行该脚本
node <文件名>
# 或者
nodemon <文件名>
  1. 然后在浏览器就可以访问 http://127.0.0.1:3000/home

6.2、express路由

路由确定了应用程序如何响应客户端对特定端点的请求，一个路由的组成有请求方法， 路径和回调函数组成，使用格式如下：

app.<method>(path，callback)

示例：

// 1.导入 express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建get路由
app.get('/', (req,res) => {
  res.send('首页路由');
});

app.get('/home', (req, res) => {
  res.end('home页路由');
});

//创建 post 路由
app.post('/login', (req, res) => {
  res.send('登录成功');
});

//匹配所有的请求方法(请求方法无所谓,只要路径是 /test)
app.all('/search', (req, res) => {
  res.send('1 秒钟为您找到相关结果约 100,000,000 个');
});

//自定义 404 路由
app.all("*", (req, res) => {
  res.send('<h1>404 Not Found</h1>')
});





//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

在这里插入图片描述

6.3、获取请求参数

express 框架封装了一些 API 来方便获取请求报文中的数据，并且兼容原生 HTTP 模块的获取方式:

  • 访问： http://127.0.0.1:3000/request?usernmae=qinxiaolin&age=21 ，如下注释即为获取的请求参数
// 1.导入 express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 获取请求的路由规则
app.get('/request', (req,res) => {
      //1. 获取报文的方式与原生 HTTP 获取方式是兼容的
      console.log(req.method); // get
      console.log(req.url); // /request
      console.log(req.httpVersion); // 1.1
      console.log(req.headers);

      //2. express 独有的获取报文的方式
      //获取查询字符串
      console.log(req.query); // 『相对重要』 { usernmae: 'qinxiaolin', age: '21' }
      // 获取指定的请求头
      console.log(req.get('host')); // 127.0.0.1:3000
  res.send('请求报文的获取');
});



//自定义 404 路由
app.all("*", (req, res) => {
  res.send('<h1>404 Not Found</h1>')
});





//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

6.4、获取路由参数

路由参数指的是 URL 路径中的参数

// 1.导入 express
const express = require('express');

//2. 创建应用对象
const app = express();

// 获取路由参数
app.get('/:id.html', (req, res) => {
  console.log(req.params.id); // 123
  res.send('商品详情' );
});

//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

我们访问：

  • http://127.0.0.1:3000/123.html，req.params.id 为 123
  • http://127.0.0.1:3000/456.html ，req.params.id 为 456

​

6.5、express响应设置

express 框架封装了一些 API 来方便给客户端响应数据，并且兼容原生 HTTP 模块的获取方式

// 1.导入 express
const express = require('express');

//2. 创建应用对象
const app = express();

// 获取路由参数
app.get('/response', (req, res) => {
  //1. express 中设置响应的方式兼容 HTTP 模块的方式
  res.statusCode = 404;
  res.statusMessage = 'xxx';
  res.setHeader('abc','xyz');
  res.write('响应体');
  res.end('xxx');

  //2. express 的响应方法
  res.status(500); //设置响应状态码
  res.set('xxx','yyy');//设置响应头
  res.send('中文响应不乱码');//设置响应体
  //连贯操作
  res.status(404).set('xxx','yyy').send('你好朋友')

});

//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

express的其他响应方法：

// 1.导入 express
const express = require('express');

//2. 创建应用对象
const app = express();

// 获取路由参数
app.get('/other', (req, res) => {

  //跳转响应
  //res.redirect('http://atguigu.com')//重定向
  下载响应
  //res.download(__dirname + './package.json');
  //JSON响应
  //res.json({
  //  username : "秦晓",
  //  age: 21
  //});
  响应文件内容,把 home.html 响应
  res.sendFile(__dirname + '/home.html')



});

//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

  • res.redirect('http://atguigu.com') 跳转响应，若访问 http://127.0.0.1:3000/response 则会跳转到 http://atguigu.com

  • res.download(__dirname + './package.json') 下载响应，若访问 http://127.0.0.1:3000/response 则会下载 项目工程的package.json 文件

  • json 响应到浏览器

  • 将home.html网页响应到浏览器

在这里插入图片描述

在这里插入图片描述

6.6、express中间件

中间件（Middleware）本质是一个回调函数，中间件函数可以像路由回调一样访问请求对象（request） ， 响应对象（response）

  • 中间件的作用就是使用函数封装公共操作，简化代码

  • 中间件的类型

    • 全局中间件
    • 路由中间件

6.6.1、定义全局中间件

每一个请求到达服务端之后都会执行全局中间件函数

全局中间件就相当于 进站口，而路由中间件就相当于 检票口

先进 进站口，再进 检票口

例如我们下面的代码是访问任何路由时我们都对url和id作记录，并写入 access.log 文件中：

// 1.导入 express
const express = require('express');
const fs = require('fs');
const path = require('path');

//2. 创建应用对象
const app = express();

// 声明中间件函数(函数名随便写)
// req是请求报文的对象,res是响应报文的对象
function recordMiddleware(req,res,next){
  // 获取url 和 id
  let {url,ip} = req;
  // 将信息保存在文件的 access.log
  // path.resolve() 第一个参数是文件的绝对路径,第二个参数是写入文件的内容
  fs.appendFileSync(path.resolve(__dirname,'./access.log'),`${url} ${ip}\r\n`);
  //调用next(当如果希望执行完中间件函数之后，仍然继续执行路由中的回调函数，必须调用next)
  next();
}

//使用中间件函数
app.use(recordMiddleware);

//3. 创建路由规则
app.get('/home', (req, res) => {
  res.send('前台首页');
});

app.get('/admin', (req, res) => {
  res.send('后台首页');
});

app.all('*', (req, res) => {
  res.send('<h1>404</h1>>');
});



//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});
  • 依次访问：
    • http://127.0.0.1:3000/home
    • http://127.0.0.1:3000/admin
    • ``http://127.0.0.1:3000/1234`

在这里插入图片描述

所以定义全局中间件的步骤如下：

  1. 声明中间件函数
function recordMiddleware(req,res,next){
    // 实现功能的代码
    ...
    // 执行next函数
    next();
}
  1. 应用中间件
app.use(recordMiddleware);

// 或者如下写法
app.use(function recordMiddleware(req,res,next){
    // 实现功能的代码
    ...
    // 执行next函数
    next();
})

6.6.2、定义路由中间件

如果只需要对某一些路由进行功能封装，则就需要路由中间件,调用格式如下：

app.get('/路径',中间件函数1,中间件函数2,(request,response) => {
    
})

例如：

// 1.导入 express
const express = require('express');


//2. 创建应用对象
const app = express();

// 声明中间件函数
let recordMiddleware = (req,res,next) => {
  // 判断url中是否code参数等于521,若满足条件,则进行路由回调
  if(req.query.code === '521'){
    next();
  }else{
    res.send('暗号错误')
  }
}

//使用中间件函数
app.use(recordMiddleware);

//3. 创建路由规则
app.get('/home',recordMiddleware, (req, res) => {
  res.send('前台首页');
});

app.get('/admin',recordMiddleware, (req, res) => {
  res.send('后台首页');
});


//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

6.6.3、静态资源中间件

express 内置处理静态资源的中间件

// 1.导入 express
const express = require('express');


//2. 创建应用对象
const app = express();

// 静态资源中间件的设置，将当前文件夹下的public目录作为网站的根目录
app.use(express.static(__dirname + './public'));


//3. 创建路由规则
app.get('/index.html', (req, res) => {
  res.send('前台首页');
});



//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

这样我们就可以访问 public 下的资源文件了

  • http://127.0.0.1:3000/css/app.css
  • http://127.0.0.1:3000/index.html

注意事项：

  1. index.html 文件为默认打开的资源
    • 访问public/index.html，既可以http://127.0.0.1:3000/index.html ，也可以 http://127.0.0.1:3000
  2. 如果静态资源与路由规则同时匹配，谁先匹配谁就响应
    • 如果路径规则是一个 / , 则路由规则和静态资源都可以匹配
  3. 路由响应动态资源，静态资源中间件响应静态资源

6.7、获取请求体

express 可以使用 body-parser 包处理请求体

  1. 安装
npm i body-parser
  1. 导入包
const bodyParser = require('body-parser');
  1. 获取中间件函数
    • 一个是解析 querystring 格式请求体的中间件
    • 另一个是解析 JSON 格式请求体的中间件
    • 需要使用哪个就用哪个中间件
//解析 querystring 格式请求体的中间件
let urlParser = bodyParser.urlencoded({extended:false}));
//解析 JSON 格式请求体的中间件
let jsonParser = bodyParser.json();
  1. 设置路由中间件，然后使用 request.body 来获取请求体数据
// 1.导入 express
const express = require('express');
const bodyParser = require('body-parser');


//2. 创建应用对象
const app = express();

// 声明中间件函数
//解析 querystring 格式请求体的中间件
let urlParser = bodyParser.urlencoded({extended:false});
//解析 JSON 格式请求体的中间件
let jsonParser = bodyParser.json();



//3. 创建路由规则
// 使用解析 querystring 格式请求体的中间件
app.post('/login',urlParser,(request,response) => {
  // 获取请求体数据
  console.log(request.body);
  // 用户名
  console.log(request.body.username);
  // 密码
  console.log(request.body.password);
  response.send('获取请求体数据');
})


//4. 监听端口 启动服务
app.listen(3000, () =>{
  console.log('服务已经启动, 端口监听为 3000...');
});

6.8、Router

express 中的 Router 是一个完整的中间件和路由系统，可以看做是一个小型的 app 对象。Router的作用是对路由进行模块化，更好的管理路由。

  1. 创建独立的Js文件：homeRouter.js
//1. 导入 express
const express = require('express');

//2. 创建路由器对象
const router = express.Router();

//3. 在 router 对象身上添加路由
router.get('/', (req, res) => {
  res.send('首页');
})
router.get('/cart', (req, res) => {
  res.send('购物车');
});

//4. 暴露
module.exports = router;
  1. 在其他文件引用
const express = require('express');
const app = express();
//引入子路由文件
const homeRouter = require('../router/homeRouter');
//设置和使用中间件
app.use(homeRouter);
app.listen(3000,()=>{
  console.log('3000 端口启动....');
})

这样依然可以像之前访问一样

  • http://127.0.0.1:3000/cart

6.9、模板引擎EJS

  • 中文站：EJS – 嵌入式 JavaScript 模板引擎 | EJS 中文文档 (bootcss.com)
  • 官网：EJS – Embedded JavaScript templates
  1. 下载安装EJS
npm i ejs --save
  1. 引入包
// 导入ejs
const ejs = require('ejs');

// 字符串
let china = '中国';
let str = '我爱你 <%= china%>'
// 使用ejs渲染
let result = ejs.render(str,{china: china});
console.log(result); // 我爱你 中国

6.9.1、分离用法

// 导入ejs
const ejs = require('ejs');
const fs = require('fs');

// 字符串
let china = '中国';

let str = fs.readFileSync('./00_ejs.html').toString();
// 使用ejs渲染
let result = ejs.render(str,{china: china});
console.log(result); // 我爱你 中国

我们的00_ejs.html 的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2> <%= china%> </h2>
</body>
</html>

这样运行 js ，就会渲染

在这里插入图片描述

以此来达到 html 和 js 进行分离

6.10、express-generator

  • 官网：Express 应用程序生成器 - Express中文文档 | Express中文网 (expressjs.com.cn)
  1. 下载 Express 应用程序生成器
npx express-generator
  1. 生成代码骨架后安装依赖
npm i
  1. 运行项目
npm start
  1. 浏览器访问：http://127.0.0.1:3000/

在这里插入图片描述

6.10.1、补充知识

  • app.use() 也可以设置路由前缀
// 设置路由前缀
app.use('/users', users.js);

// users.js 如下
router.get('/test', function(req, res, next) {
  res.send('用户测试');
});

如上代码，由于加了 /users 前缀，所以访问url就变成了 http://127.0.0.1:3000/users/test

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1055302.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

架构师习题--嵌入式习题

架构师习题--嵌入式习题

架构师习题--嵌入式习题 可靠度&#xff1a;是单个系统的可靠性 避错和容错 N版本程序设计是静态 恢复块是动态 恢复块是主机坏了调用备用机&#xff0c;每次只有单机运行 N版本是N机器同时运行 恢复块是主机坏了调用备用机&#xff0c;后向恢复到之前的状态 N版主直接向前走
阅读更多...
【深度学习】RNN循环神经网络和LSTM深度学习模型

【深度学习】RNN循环神经网络和LSTM深度学习模型

1. 循环神经网络 RNN&#xff08; Recurrent Neural Network&#xff09; 循环神经网络的一个核心是可以把前面的序列数据用到后面的结果预测里面。怎么样实现这一点呢。RNN 结构如下图所示。 前部序列的信息经处理后&#xff0c;作为输入信息传递到后部序列。 数学模型&…
阅读更多...
C++ 强制类型转换(int double)、查看数据类型、自动决定类型、三元表达式、取反、

C++ 强制类型转换(int double)、查看数据类型、自动决定类型、三元表达式、取反、

强制类型转换&#xff08; int 与 double&#xff09; #include <iostream> using namespace std;int main() {// 数据类型转换char c1;short s1;int n 1;long l 1;float f 1;double d 1;int p 0;int cc (int)c;// 注意&#xff1a;字符 转 整形时 是有问题的// “…
阅读更多...
CTFSHOW SSTI

CTFSHOW SSTI

目录 web361 【无过滤】 subprocess.Popen os._wrap_close url_for lipsum cycler web362 【过滤数字】 第一个通过 计算长度来实现 第二个使用脚本输出另一个数字来绕过 使用没有数字的payload web363 【过滤引号】 使用getitem 自定义变量 web364 【过…
阅读更多...
深度学习 二：COVID 19 Cases Prediction (Regression)

深度学习 二：COVID 19 Cases Prediction (Regression)

Deep Learning 1. 回归算法思路2. 代码2.1 基础操作2.2 定义相关函数2.3.1 定义图像绘制函数2.3.2 数据集加载及预处理2.3.3 构造数据加载器2.3.4 构建前馈神经网络&#xff08;Feedforward Neural Network&#xff09;模型2.3.5 神经网络的训练过程2.3.6 模型评估2.3.7 模型测…
阅读更多...
【转存】 fluent mybatis 与Mybatis 简答介绍

【转存】 fluent mybatis 与Mybatis 简答介绍

感谢&#xff1a;IT码徒 提供 原文请关注 前言 使用fluent mybatis也可以不用写具体的 xml 文件&#xff0c;通过 java api 可以构造出比较复杂的业务 sql 语句&#xff0c;做到代码逻辑和 sql 逻辑的合一。不再需要在 Dao 中组装查询或更新操作&#xff0c;或在 xml 与 mappe…
阅读更多...
云安全之HTTP协议介绍

云安全之HTTP协议介绍

HTTP的基本概念 什么是网络协议 网络协议是计算机之间为了实现网络通信而达成的一种“约定”或者”规则“&#xff0c;有了这种”约定不同厂商生产的设备&#xff0c;以及不同操作系统组成的计算机之间&#xff0c;就可以实现通信。 网络协议由三个要素构成&#xff1a;1、语…
阅读更多...
＜C++＞ 哈希表模拟实现STL_unordered_set/map

＜C++＞ 哈希表模拟实现STL_unordered_set/map

哈希表模板参数的控制 首先需要明确的是&#xff0c;unordered_set是K模型的容器&#xff0c;而unordered_map是KV模型的容器。 要想只用一份哈希表代码同时封装出K模型和KV模型的容器&#xff0c;我们必定要对哈希表的模板参数进行控制。 为了与原哈希表的模板参数进行区分…
阅读更多...
IntelliJ IDEA配置Cplex12.6.3详细步骤

IntelliJ IDEA配置Cplex12.6.3详细步骤

Cplex12.6.3版IntelliJ IDEA配置详细步骤 一、Cplex12.6.3版下载地址二、Cplex安装步骤三、IDEA配置CPLEX3.1 添加CPLEX安装目录的cplex.jar包到项目文件中3.2 将CPLEX的x64_win64文件夹添加到IDEA的VM options中 四、检查IDEA中Cplex是否安装成功卸载Cplex 一、Cplex12.6.3版下…
阅读更多...
案例题真题-数据库系统

案例题真题-数据库系统

案例题真题-数据库系统 真题 扩展方式和水平扩展是一个东西 关系数据库向上扩展强&#xff0c;水平扩展弱&#xff08;向外扩展&#xff09; NoSQL模式向上扩展弱&#xff0c;水平扩展强&#xff08;向外扩展&#xff09; 向上扩展就是增加数据库 向外扩展就是将数据库划分开&a…
阅读更多...
SmartX 边缘计算解决方案：简单稳定，支持各类应用负载

SmartX 边缘计算解决方案：简单稳定，支持各类应用负载

在《一文了解近端边缘 IT 基础架构技术需求》文章中&#xff0c;我们为大家分析了边缘应用对 IT 基础架构的技术要求&#xff0c;以及为什么超融合架构是支持边缘场景的最佳选择。值得一提的是&#xff0c;IDC 近日发布的《中国软件定义存储&#xff08;SDS&#xff09;及超融合…
阅读更多...
Halcon中灰度直方图的使用与学习

Halcon中灰度直方图的使用与学习

目录 第一步：当前打开窗口的显示灰度图或者mono图片第二步：激活后，我们可以去调整调整右边直方图灰阶值的中蓝色和红色竖线，获取左边图上的灰阶值的范围内的特征显示。第三步：插入代码：总结：它的直观目的，就是查看灰度的分布情况！灰度直方图，是我们经常使用，抓取不同…
阅读更多...
objective-c 基础学习

objective-c 基础学习

目录 第一节&#xff1a;OC 介绍 ​​第二节&#xff1a;Fundation 框架 ​第三节&#xff1a;NSLog 相对于print 的增强 ​第四节&#xff1a;NSString ​第五节&#xff1a;oc新增数据类型 第六节&#xff1a; 类和对象 ​类的方法的声明与实现 ​第七节&#xff1a;类…
阅读更多...
思维模型 冷热水效应

思维模型 冷热水效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。冷热水效应可以改变你90%的人际关系。对于技术人员的沟通大有助益。 1 冷热水效应的应用 1.1 生活中的冷热水效应 恋爱和恋爱关系&#xff1a;在恋爱关系中&#xff0c;一对情侣可能会经历…
阅读更多...
【人工智能导论】机器学习环境配置

【人工智能导论】机器学习环境配置

一、Anaconda 1、安装Anaconda Anaconda的安装&#xff1a;https://www.anaconda.com/ Anaconda-国内镜像站 在terminal上看到(base)说明安装已完成 2、conda换源 添加中科大源 conda config --add channels https://mirrors.ustc.edu.cn/anaconda/pkgs/main/ conda confi…
阅读更多...
Secureboot从入门到精通

Secureboot从入门到精通

关键词&#xff1a;trustzone视频、tee视频、ATF视频、secureboot视频、安全启动视频、selinux视频&#xff0c;cache视频、mmu视频&#xff0c;armv8视频、armv9视频 FF-A视频、密码学视频、RME/CCA视频、学习资料下载、免费学习资料、免费 周贺贺&#xff0c;baron&#xff0…
阅读更多...
zemax对称式目镜

zemax对称式目镜

两个几乎对称的双胶合透镜相对放置&#xff0c;可以达到25度的半视场 为了加工方便&#xff0c;这两个透镜组采用相同的结构 对称式目镜要求各组透镜自行校正色差&#xff0c;这样倍率色差也随之而校正。 它还能校正两种像差&#xff0c;慧差和象散。 对称目镜的结构更紧&…
阅读更多...
QGIS文章一——实现天地图加载

QGIS文章一——实现天地图加载

无论是农业科学还是海洋科学&#xff0c;对地图的处理和数值模型的计算是少不了的&#xff0c;地图是可视化的基础&#xff0c;先有了基础再进行开始某些复杂处理&#xff0c;进而开始模拟推演&#xff0c;最后进行数值模拟和计算。 QGIS&#xff08;原称Quantum GIS&#xff0…
阅读更多...
黑豹程序员-架构师学习路线图-百科：Git/Gitee（版本控制）

黑豹程序员-架构师学习路线图-百科：Git/Gitee（版本控制）

文章目录 1、什么是版本控制2、特点3、发展历史4、SVN和Git比较5、Git6、GitHub7、Gitee&#xff08;国产&#xff09;8、Git的基础命令 1、什么是版本控制 版本控制系统&#xff08; Version Control &#xff09;版本控制是一种管理和跟踪软件开发过程中的代码变化的系统。它…
阅读更多...
力扣设计循环队列

力扣设计循环队列

1.使用了数组来表达循环 typedef struct {int k;//数据个数int *a;//数组int rear;//尾int front;//头 } MyCircularQueue;2.循环队列是否为空 bool myCircularQueueIsEmpty(MyCircularQueue* obj) {return obj->rear obj->front; }3.循环队列是否已满。 bool myCircula…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023