web学习笔记(四十九)

目录

1. 初识 Express

1.1 什么是 Express

1.2 Express 能做什么

1.3 Express 的基本使用

1.4  如何把内容响应给客户端

2. 托管静态资源 

2.1  express.static()


1. 初识 Express

1.1 什么是 Express

之前我们有讲过可以通过node.js内置的http模块来创建服务器,但是http创建服务器的过程比较繁琐而且开发效率比较低,而 Express就是npm上用来创建wdb服务器的一个包,通过 Express包我们可以快速创建 Web 服务器。Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架。Express就是基于http模块封装出来的一个包。

1.2 Express 能做什么

Express可以用来快速创建web网站服务器和apl接口服务器。

  • Web 网站服务器:专门对外提供 Web 网页资源的服务器。
  • API 接口服务器:专门对外提供 API 接口的服务器。

1.3 Express 的基本使用

1.初始化项目

通过下面的命令行可以进行初始化项目,

npm init -y 
//或者npm init 

推荐在每一次拿到一个新项目后都先进行项目的初始化,进行完项目的初始化后一般会多出图中橙色的三个文件。

2. 安装 Express包

在控制台输入下面的这个命令就可以进行下载Express包的操作。

npm i express

3. 启动服务

参数一端口号
参数二回调函数
app.listen('8080', () => {console.log('服务已启动 http://127.0.0.1:8080');
})

4.  解析表单

app.use(express. urlencoded({extended: false
}));

5. 监听请求

可以监听get请求,也可以监听post请求。

(1)监听get请求,get请求中包含两个参数。

参数一

url(前端请求的路径)

参数二

回调函数()

在回调函数中也有两个参数: 

参数一

请求体req

参数二响应体 res

在使用get请求时,如果前端发生请求。需要携带参数,那可以加一个查询字符串 eg:  url?username=tom&pwd=123456,然后在后端就可以通过req.query来拿到前端发过来的信息。

app.get('/user', (req, res) => {// 请求体 reqconsole.log(req.url, req.method, req.query); ///user GET {}res.send({code: 0,msg: '成功',data: req.query})});

(2) 监听post请求,post请求中包含两个参数。

参数一

url(前端请求的路径)

参数二

回调函数()

 

在回调函数中也有两个参数: 

参数一

请求体req

参数二响应体 res

post请求中传递参数是不可以通过查询字符串来传递的,post请求中获取前端传过来的数据需要用req.body。

app.post('/login', (req, res) => {console.log(req.body);res.send({code: 0,msg: "登录成功",data:req.body})
})

(3) 动态接口

在动态接口中如果想要动态获取某个参数的数值那就需要用到:  例如:/delete/:id可以动态获取id1的值。req是请求体, req获取的数据最后在后端显示,在动态接口中可以通过req.params来获取数据

app.get('/delete/:Id', (req, res) => {// req是请求体 数据最后在后端显示console.log(req.url, req.method);console.log(req.query,req.body);//结果是{ }{ },拿不到数据console.log(req.params);//动态接口中用req.params 来拿数据 拿到的是动态参数// res是响应体  res.send({code:0,msg:'删除成功',data:req.params})
})

1.4  如何把内容响应给客户端

通过 res.send() 方法,可以把处理好的内容,发送给客户端:

 res.send({code: 0,msg: '成功',data: req.query})

 

2. 托管静态资源 

2.1  express.static()

express 提供了一个非常好用的函数,叫做 express.static(),通过它,我们可以非常方便地创建一个静态资源服务器,此时,在地址栏输入http://127.0.0.1:8080/pages/login.html就可以进入登录页面。

app.use(express.static('public'))

也可以挂载路径前缀,当挂载完路径前缀后 在浏览器中输入路径时也要将挂载路径里面的那部分路径加载到地址栏内。当添加完挂载路径后得输入http://127.0.0.1:8080/public/pages/login.html才能进入登录页面。

app.use('/public',express.static('public'))

在项目中并不是只能托管一个静态资源,我们可以通过多次编写 app.use(express.static('文件名'))语句来托管多个文件夹。

app.use('/public', express.static('public'))
app.use('/lib', express.static('lib'))
app.use('/js',express.static('js'))

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迭代器模式(统一对集合的访问方式)

目录 前言 UML plantuml 类图 实战代码 Iterator ArrayList Client 自定义迭代器 TreeNode TreeUtils Client 前言 在实际开发过程中,常用各种集合来存储业务数据并处理,比如使用 List,Map,Set 等等集合来存储业务数…

Ubuntu下使用vscode进行C/C++开发:进阶篇

在vscode上进行C/C++开发的进阶需求: 1) 编写及调试源码时,可进行断点调试、可跨文件及文件夹进行函数调用。 2) 可生成库及自动提取对应的头文件和库文件。 3) 可基于当前工程资源一键点击验证所提取的库文件的正确性。 4) 可结合find_package实现方便的调用。 对于第一…

【C语言】预处理常见知识详解(宏详解)

文章目录 1、预定义符号2、define2.1 define 定义常量2.2 define 定义宏 3、#和##3.1 **#**3.2 **##** 4、条件编译(开关) 1、预定义符号 在C语言中内置了一些预定义符号,可以直接使用,这些符号实在预处理期间处理的,…

ES6 学习(三)-- es特性

文章目录 1. Symbol1.1 使用Symbol 作为对象属性名1.2 使用Symbol 作为常量 2. Iterator 迭代器2.1 for...of循环2.2 原生默认具备Interator 接口的对象2.3 给对象添加Iterator 迭代器2.4 ... 解构赋值 3. Set 结构3.1 初识 Set3.2 Set 实例属性和方法3.3 遍历3.4 相关面试题 4…

C/C++ ③ —— C++11新特性

1. 类型推导 1.1 auto auto可以让编译器在编译期就推导出变量的类型 auto的使⽤必须⻢上初始化,否则⽆法推导出类型auto在⼀⾏定义多个变量时,各个变量的推导不能产⽣⼆义性,否则编译失败auto不能⽤作函数参数在类中auto不能⽤作⾮静态成员…

【科技素养题】少儿编程 蓝桥杯青少组科技素养题 信息素养真题及解析第26套

少儿编程 科技素养 信息素养真题第26套 1、本次考试名称STEMA是STEM Assessment 的缩写。在保持第一个和最后一个字母不变的情况下,将 STEMA 的字母排列组合,一共可以组成()个与原先不同的组合。 A、5 B、6 C、12 D、20 答案&#xff1a…

基础算法-去重字符串,辗转相除法,非递归前序遍历二叉树题型分析

目录 不同子串 辗转相除法-求最大公约数 二叉树非递归前序遍历 不同子串 从a开始,截取 a aa aaa aaab 从第二个下标开始a aa aab 从第三个 a ab 从第四个 b 使用set的唯一性,然后暴力遍历来去去重,从第一个下标开始截取aaab a aa aaa aaab…

激光是如何产生的?

激光产生的原理 美国于1960年成功研制出世界上第一台红宝石激光器,我国也于1961年成功研制出第一台国产红宝石激光器(诞生于中国科学院长春光学精密机械研究所),激光技术被认为是第二个20世纪,继量子物理、无线电技术、…

实时数仓之实时数仓架构(Hudi)

目前比较流行的实时数仓架构有两类,其中一类是以FlinkDoris为核心的实时数仓架构方案;另一类是以湖仓一体架构为核心的实时数仓架构方案。本文针对FlinkHudi湖仓一体架构进行介绍,这套架构的特点是可以基于一套数据完全实现Lambda架构。实时数…

element-ui 自定义点击图标/文本/按钮触发el-date-picker时间组件,不使用插槽

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1. 图片预览 2.上代码 2.1html <el-button class"hide_input" size"small"><svg t"1711608996149" class"icon" viewBox"0 0 1024 1024" version"1.1"…

Linux第85步_EXTI外部中断

1、在stm32mp157d-atk.dts文件中添加“led0”和“key0”节点 打开虚拟机上“VSCode”&#xff0c;点击“文件”&#xff0c;点击“打开文件夹”&#xff0c;点击“zgq”&#xff0c;点击“linux”&#xff0c;点击“atk-mp1”&#xff0c;点击“linux”&#xff0c;点击“my_l…

【opencv】教程代码 —ShapeDescriptors

检测和显示图像的轮廓 在图像中搜索并显示轮廓边缘多边形、轮廓矩形和包围圆 获取包含检测到的轮廓的椭圆和旋转的矩形 图像轮廓检测和轮廓凸包 计算图像中的轮廓的矩&#xff08;包括面积、重心等&#xff09;并进行显示 创建和绘制一个多边形图像然后计算并显示图像上每个点到…