使用Express处理请求和托管静态资源方式

目录
  • Express
    • Express对比Http模块
    • Express的主要作用
  • Express安装
  • Express静态资源处理
    • express.static()
    • 托管多个静态资源目录
    • 挂载路径前缀

Express

Express时基于Node.js平台，快速、开放、极简的Web开发框架。

通俗的理解：

Express的作用和Node.js内置的http模块类似，是专门用来创建Web服务器的。

Express的本质：

就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法

点击前往 Express–Node.js Web应用程序框架

Express对比Http模块

http内置模块用起来很复杂，开发效率低。Express是基于内置的http模块进一部封装出来的，能够极大的提高开发效率。

Express的主要作用

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

1.Web网站服务器：专门对外提供Web网页资源的服务器

2.API接口服务器：专门对外提供API接口的服务器

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

Express安装

npm i express

创建Web服务器：

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

// 4. 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容
// req:请求对象（包含了与请求相关的属性与方法）
// res:响应对象（包含了与响应有关的属性和方法）
app.get('/user', (req, res) => {
  // 调用 express 提供的 res.send() 方法，向客户端响应一个 JSON 对象
  res.send({ name: 'zs', age: 20, gender: '男' })
})
app.post('/user', (req, res) => {
  // 调用 express 提供的 res.send() 方法，向客户端响应一个 文本字符串
  res.send('请求成功')
})
app.get('/', (req, res) => {
  // 通过 req.query 可以获取到客户端发送过来的 查询参数
  // 注意：默认情况下，req.query 是一个空对象
  console.log(req.query)
  res.send(req.query)
})
// 注意：这里的 :id 是一个动态的参数
app.get('/user/:ids/:username', (req, res) => {
  // req.params 是动态匹配到的 URL 参数，默认也是一个空对象
  console.log(req.params)
  res.send(req.params)
})

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

Express静态资源处理

express.static()

express提供了一个非常好用的函数，叫做express.static()通过它，我们可以非常方便地创建一个静态资源服务器

例如，通过如下代码就可以将public目录下的图片、CSS文件、JavaScript文件对外开放访问了：

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

可以访问如下public目录中的所有文件了(在浏览器通过本地ip访问)：

const express = require('express')
const app = express()

// 在这里，调用 express.static() 方法，快速的对外提供静态资源
app.use('/files', express.static('./files'))
app.use(express.static('./clock'))
//当相对路径报错的时候，换成绝对路径即可
//app.use(express.static(path.join(__dirname, './clock')))

app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

注意：Express在指定的静态目录下查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在URL中

托管多个静态资源目录

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

app.use('/files', express.static('./files'))
app.use(express.static('./clock'))

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

挂载路径前缀

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • nodejs中express入门和基础知识点学习

    初始化 新建一个目录myapp,项目初始化 $ npm init 安装express $ npm install express --save 创建一个hello world实例 进入myapp目录,创建一个名为app.js var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('Hello World!'); }); var server = app.l

  • Express之托管静态文件的方法

    中间件express.static 我们使用express初始化一个目录的时候,会在app.js中看到一大推的app.use. 其中一个主要的中间件是express.static(4.0版本依旧保留的中间件) var express = require('express'); var app = express(); app.use('/static',express.static('public')); 通过express.static可以帮助我们托管静态文件,js,css,img等. exp

  • 在Express中提供静态文件的实现方法

    为了提供诸如图像.CSS 文件和 JavaScript 文件之类的静态文件,请使用 Express 中的 express.static 内置中间件函数. 将包含静态资源的目录的名称传递给 express.static 中间件函数,以便开始直接提供这些文件.例如,使用以下代码在名为 public 的目录中提供图像.CSS 文件和 JavaScript 文件: app.use(express.static('public')); 现在,可以访问位于 public 目录中的文件: http://loc

  • 使用Express处理请求和托管静态资源方式

    目录 Express Express对比Http模块 Express的主要作用 Express安装 Express静态资源处理 express.static() 托管多个静态资源目录 挂载路径前缀 Express Express时基于Node.js平台,快速.开放.极简的Web开发框架. 通俗的理解: Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的. Express的本质: 就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法 点击前往 Ex

  • nginx 多个location转发任意请求或访问静态资源文件的实现

    本文主要介绍了nginx 多个location转发任意请求或访问静态资源文件的实现,分享给大家,具体如下: server { #监听的端口 listen 80; #监听的域名 server_name localhost; #监听带后缀的url location ^~\.txt { #文件放到/html文件夹下 root /; } #监听所有url,没有特殊需求就用这一个location就够了 #使用通配符只有在没有匹配上其他location的情况下会进入 location / { #去掉了只有u

  • 详解利用 Express 托管静态文件的方法

    通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片.CSS.JavaScript 文件等. 将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了.例如,假设在 public 目录放置了图片.CSS 和 JavaScript 文件,你就可以: app.use(express.static('public')); 现在,public 目录下面的文件就可以访问了. http://localhost:3000

  • 用Nodejs搭建服务器访问html、css、JS等静态资源文件

    为了测一个附近门店的功能,需要配置一下服务器进行测试.本来打算用apache的,后来想自己是做前端的,好久没有用过Nodejs了何不用所学的知识自己配一下呢,说动手就手. 第一步,俗话说的好,工欲善其事,必先利其器.既然要用node+express配置服务器,如果电脑上没有的话自然要先安装这两个大宝贝啦. 1.安装node.到Node官网下载安装即可,直接下一步下一步就完成了. 2.npm初始化项目.打开终端,输入npm init -y即可.注意:如果不输入-y要自己写一些配置,写了-y会默认直

  • struts2静态资源映射代码示例

    在struts2框架中有一些它所需要的公共的静态内容,比如说js文件和一些css文件.当框架需要这些静态内容的时候,FilterDidpatcher会自动提供给我们.那么FilterDidpatcher是如何知道我们在请求静态内容的呢?任何请求只要以"/struts/"开头,那么FilterDidpatcher就会认为它是在请求静态内容.在识别出请求是请求静态资源后FilterDidpatcher如何去匹配寻找静态资源呢?这里有两个关键点: 1．确定所要请求的资源路径.FilterDi

  • Spring Boot2.0实现静态资源版本控制详解

    写在最前面 犹记毕业第一年时,公司每次发布完成后,都会在一个群里通知[版本更新,各部门清理缓存,有问题及时反馈]之类的话.归根结底就是资源缓存的问题,浏览器会将请求到的静态资源,如JS.CSS等文件缓存到用户本地,当用户再次访问时就不需要再次请求这些资源了,以此也是提升了用户体验.但是也正是因为这些资源缓存,导致客户端的静态文件往往不是当前最新版本.后来有同事增加了时间戳.随机数等,确实这也解决了客户端缓存的问题,但是却又带来了新的麻烦,导致每次访问都要请求服务器,无形中增加了服务器的压力. 那

  • Tomcat中对静态资源的处理教程

    Tomcat中对静态资源的处理教程

    前言 Tomcat 中的请求都是由 Servlet 处理,静态资源也不例外.在默认的 web.xml 中,配置了一个 DefaultServlet 用于处理静态资源,它支持缓存和断点续传. DefaultServlet 的基本处理过程如下: 查找资源是否存在缓存 检查是否满足可选 If 头域指定的条件 设置响应头域,如 Content-Type.Content-Length.ETag.Last-Modified 检查是否满足 Sendfile 的条件,否则将内容拷贝到输出流中 接下来主要分析资源

  • 如何解决flask修改静态资源后缓存文件不能及时更改问题

    run.py from flask import url_for @app.context_processor # 上下文渲染器,给所有html添加渲染参数 def inject_url(): data = { "url_for": dated_url_for, } return data def dated_url_for(endpoint, **values): filename = None if endpoint == 'static': filename = values.g

  • 详解js静态资源文件请求的处理

    本文实例为大家分享了js静态资源文件请求的处理,供大家参考,具体内容如下 html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css" type=

随机推荐