web学习笔记(四十九)

2024-03-29 04:52
文章标签 学习 笔记 web 四十九

本文主要是介绍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'))

这篇关于web学习笔记(四十九)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/857647

相关文章

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;