express入门|青训营笔记

米迦
140 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第11天

初识Express

一、初识Express

官方给出的概念:Express是基于Node.js 平台，快速、开放、极简的Web开发框架。 通俗的理解:Express 的作用和Node.,js内置的 http模块类似，是专门用来创建Web服务器的。Express的本质:就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。

1.什么是 Express

官方给出的概念:Express是基于Node.js 平台，快速、开放、极简的Web开发框架。 通俗的理解:Express 的作用和Node.,js内置的 http模块类似，是专门用来创建Web服务器的。Express的本质:就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。

官方给出的概念:Express是基于Node.js 平台，快速、开放、极简的Web开发框架。 通俗的理解:Express 的作用和Node.,js内置的 http模块类似，是专门用来创建Web服务器的。Express的本质:就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。

2.理解express的一些问题

  • 思考:不使用Express能否创建Web服务器? 答案:能，使用Node.js提供的原生http模块即可。

  • 思考:既生瑜何生亮(有了http内置模块，为什么还有用Express)? 答案: http内置模块用起来很复杂，开发效率低;Express是基于内置的 http模块进一步封装出来的，能够极大的提高开发效率。

  • 思考: http 内置模块与Express是什么关系? 答案:类似于浏览器中Web API和jQuery的关系。后者是基于前者进一步封装出来的。

3.Express能做什么

对于前端程序员来说，最常见的两种服务器，分别是:

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

使用Express，我们可以方便、快速的创建Web 网站的服务器或 API接口的服务器。

二、Express 的基本使用

1.安装

npm i express@4.17.1

2.创建基本的web服务器

//1.导入express
const express=require("express")
//2.创建web服务器
const app=express()
//3.启动web服务器
app.listen(80,()=>[
    console.log("express server running at http://127.0.0.1")
])

3.监听get请求

通过app.get()方法，可以监听客户端的GET请求

参数1:客户端请求的URL地址 参数2:请求对应的处理函数3 req:请求对象(包含了与请求相关的属性与方法) res:响应对象(包含了与响应相关的属性与方法) app.get( '请求URL '， function( req,res) {/处理函数/ })

4.监听post请求

参数1∶客户端请求的URL地址 参数2:请求对应的处理函数 req:请求对象(包含了与请求相关的属性与方法) res:响应对象（包含了与响应相关的属性与方法) app.post('请求URL'，function(req，res) {/处理函数/ })

5.把内容响应给客户端

//1.导入express
const express=require("express")
//2.创建web服务器
const app=express()

//4.监听客户端的
app.get('/user',(req,res)=>{
    //嗲用哦那个express提供的res.send()方法，像客户端响应一个JSON对象
    res.send({name:'mijia',age:'99',gendr:'男'})
})

app.post("/user",(req,res)=>{
    //调用express提供的res.send()方法，向客户端响应一个文本字符串
    res.send("请求成功")
})


//3.启动web服务器
app.listen(80,()=>[
    console.log("express server running at http://127.0.0.1")
])

image.png

image.png

6.获取URL中携带的查询参数

通过req.query对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数:

app.get( ' / ', (req,res) => {
//req.query默认是一个空对象
//客户端使用?name=mijia&age=99这种查询字符串形式，发送到服务器的参数
//可以通过req.query对象访问到，例如:
//req.query.name    req.query.age
console.log(req.query)
7 })

image.png

客户端使用?name=mijia&age=99这种查询字符串形式，发送到服务器的参数 image.png

7.获取URL中的动态参数

通过req.params对象，可以访问到URL中，通过：匹配到的动态参数；

这里面 : 是固定的写法 id是自己去的属性名

 URL地址中，可以通过:参数名的形式，匹配动态参数值
 app.get( ' /user/ :id', (req，res) => {
 req.params 默认是一个空对象里面存放着通过:动态匹看配到的参数值 console.log(req.params)
 })

image.png

也可以同时写多个 ' /user/ :id/:name' 在postcode（或者postman中）get请求写成 http://127.0.0.1//user/ 3/mijia

三、express中托管静态资源

express.static()

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

现在，你就可以访问public目录中的所有文件了http://localhost:3000/images/bg.jpg http://localhost:3000/css/style.css http://localhost:3000/js/login.js

**注意:Express在指定的静态目录中药找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在URL中。 ** (不出现'public'这个名称)

⒉托管多个静态资源目录

如果要托管多个静态资源目录，请多次调用express.static)函数:

1 app.use( express.static( ' public'))
2 app.use(express.static('files'))

访问静态资源文件时，express.static()函数会根据目录的添加顺序查找所需的文件。

3.挂载路径前缀

如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式:

注意 有一个/ app.use('/public',express.static("public") 现在，你就可以通过带有/public前缀地址来访问public目录中的文件了: http://localhost:3000/public/images/kitten.jpg http://localhost:3000/public/css/style.css http://localhost:3000/publicljs/app.js

avatar
文章
阅读
粉丝