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

相关文章

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

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,显示如下页面输入项目名称,选择