登录
当前位置： 首页 > 工具软件 > Fly Template > 使用案例 >

express、body-parse、express-art-template模块基础使用详解（use、route、路径匹配、响应方法、托管静态文件、官网）

师冥夜
2023-12-01

目录

express 

app.use

app.route

路径匹配

字符匹配

正则匹配

express.Router()

响应方法

托管静态文件

官网

body-parser

art-template

express-art-template

前端使用

引入

 使用文档

express 

基于 Node.js 平台，快速、开放、极简的 web 开发框架。以下app=express()。

app.use

访问http://localhost:8080/api/apple/yf，由于4的回调函数函数中没有执行next()故不会往下匹配。该代码日志输出localhost:8080  0  1  2  3  4；网页输出end。

const express = require("express");
const app = express();
const middlewares = [
  (req, res, next) => {
    console.log(0);
    next();
  },
  (req, res, next) => {
    console.log(1);
    next();
  },
];//middlewares为一个数组，数组里为回调函数，当第一个回调函数中的next（）执行时，后面的会调函数才会继续执行。
app.use("/", middlewares);//匹配请求路径包含http://localhost:8080/。
//app.use会从上到下依次匹配，当匹配到路径时，如果该路径的回调函数里没有next()执行，则不会向下继续匹配了（即结束了）。
app.use(
  "/api",
  (req, res, next) => {
    console.log(2);
    next();
  },
  (req, res, next) => {
    console.log(3);
    res.send("end");
    next();
  }
);

app.use("/api/apple", (req, res) => {
  console.log(4);
});
app.use("/api/apple/yf", (req, res) => {
  console.log(5);
});
app.listen(8080, () => {
  console.log("localhost:8080");
});//访问http://localhost:8080/api/apple/yf，由于4的回调函数函数中没有执行next()故不会往下匹配。该代码日志输出localhost:8080  0  1  2  3  4；网页输出end。

app.route

可使用 app.route() 创建路由路径的链式路由句柄。由于路径在一个地方指定，这样做有助于创建模块化的路由，而且减少了代码冗余和拼写错误。

下面这个示例程序使用 app.route() 定义了链式路由句柄。

app.route('/book')
  .get(function(req, res) {
    res.send('Get a random book');
  })
  .post(function(req, res) {
    res.send('Add a book');
  })
  .put(function(req, res) {
    res.send('Update the book');
  });

路径匹配

字符匹配

可以使用正则表达式式中的？、+、*和（）进行匹配，除*号外其它意义和正则相同。

// ？表示出现一次或零次，匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');
});
// +表示出现一次及以上，匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});
// *表示任意字符，匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});
// （）表示一个整体，匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');
});

正则匹配

可以直接使用正则表达式进行匹配。

// 匹配任何路径中含有 a 的路径：
app.get(/a/, function(req, res) {
  res.send('/a/');
});
// 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
app.get(/.*fly$/, function(req, res) {//注意由于有$符号，匹配的字符必须在除参数外链接的尾部。
  res.send('/.*fly$/');
});

express.Router()

访问http:localhost:8080/index?id=1网页，由于是get请求故网页输出index page，然后匹配的/index中next()执行，故会app.use会继续匹配输出0。

注意router.post\put\patch\delete\all中只会匹配一个。

const express = require('express')
const router = express.Router()
//router.get只匹配get请求
router.get('/',(req,res,next)=>{
  res.send('1')
})
router.get('/index',(req,res,next)=>{
  console.log(req.query)//输出get请求中带的参数对象{id:1}
  res.send('index pages')
  next()
})
//router.post匹配post请求
router.post('/index',(req,res,next)=>{
  res.send(req.body)//post请求携带的参数在req.body中，但是需要使用body-parser模块解析，这里输出为空，见下面模块。
})
//router中会根据请求路径精准匹配，访问http://localhost:8080/index?id=1，故网页只会输出index page，然后匹配的/index中next()执行，故会app.use会继续匹配输出0。
router.put('/index',(req,res,next)=>{
  res.send(req.body)
})//匹配put请求用于覆盖式修改数据
router.patch('/index',(req,res,next)=>{
  res.send('patch')
})//匹配patch请求用于增量修改数据
router.delete('/index',(req,res,next)=>{
  res.send('delete')
})//匹配delete请求，用于删除数据
router.all('/index',(req,res,next)=>{
  res.send('hello')
  next()
})//匹配post、get、put、patch、delete等所有请求方式。
app.use('/',router)
app.use(()=>{
  console.log(0)
})
app.listen(8080,()=>{
  console.log('localhost:8080')
})

响应方法

下表中响应对象（res）的方法向客户端返回响应，终结请求响应的循环。如果在路由句柄中一个方法也不调用，来自客户端的请求会一直挂起。

方法描述
res.download()提示下载文件。
res.end()终结响应处理流程。
res.json()发送一个 JSON 格式的响应。
res.jsonp()发送一个支持 JSONP 的 JSON 格式的响应。
res.redirect()重定向请求。
res.render()渲染视图模板。
res.send()发送各种类型的响应。
res.sendFile以八位字节流的形式发送文件。
res.sendStatus()设置响应状态代码，并将其以字符串形式作为响应体的一部分发送。

托管静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。

将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如，假设在 public 目录放置了图片、CSS 和 JavaScript 文件，你就可以：

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

现在，public 目录下面的文件就可以访问了。

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

所有文件的路径都是相对于存放目录的，因此，存放静态文件的目录名不会出现在 URL 中。

如果你的静态资源存放在多个目录下面，你可以多次调用 express.static 中间件：

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

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

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟（virtual）”目录（即目录根本不存在）下面，可以通过为静态资源目录指定一个挂载路径的方式来实现，如下所示：

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

现在，你就可以通过带有 “/static” 前缀的地址来访问 public 目录下面的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

官网

Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

body-parser

用于解析express模块中post请求参数。

const express = require('express')
const router = express.Router()
const bodyParser = require('body-parser')
router.post('/index',(req,res,next)=>{
  res.send(req.body)//post请求携带的参数在req.body中，使用body-parser模块解析，这里输出为post请求中的参数。
})
//router中会根据请求路径精准匹配，访问http://localhost:8080/index?id=1，故网页只会输出index pages，但匹配的/index中next()执行，故会app.use会继续匹配输出0。

//解析post请求头中Content-Type为application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended:false}))
//解析post请求头中Content-Type为application/json
// app.use(bodyParser.json())
app.use('/',router)
app.listen(8080,()=>{
  console.log('localhost:8080')
})

art-template

express-art-template

一个简单且超快的模板引擎，通过预先声明范围的技术优化模板渲染速度，从而实现接近 JavaScript 极限的运行时性能。同时，它同时支持 NodeJS 和浏览器。

const express = require("express");
const path = require("path");
const app = express();
app.engine("art", require("express-art-template")); // 查看引擎设置
app.set("view options", {
  debug: process.env.NODE_ENV !== "production",
  escape: false,//是否对符号进行转译，默认是true
});
app.set("views", path.join(__dirname, "contentFile")); //设置返回内容的文件
app.set("view engine", "art");
app.get("/", function (req, res) {
  res.header("Content-Type", "application/json;charset=utf-8"); //注意根据返回的内容，设置返回头，当返回json字符串时设置。不设置时，默认是text/html。
  res.render("index.art", {
    user: 'yf'
  }); //将位于contentFile下的index.art文件内容返回， 并且在index.art文件下可以通过双大括号引用user变量。
});
{
    name:{{user}}
}

 访问http:localhost:8080/返回内容为{'name':'yf'}。

前端使用

引入

https://unpkg.com/art-template@4.13.2/lib/template-web.js

let templateStr = `
  <ul>
    {{each data}}
      <li>{{$value}}</li>
    {{/each}}
  </ul>
  <div>{{name}}</div>
`;
let html = template.render(templateStr, {
  data: [{ value: 1 }, { value: 2 }],
  name: "yf",
});
//html为下面的字符串
// <ul>
//   <li>1</li>
//   <li>2</li>
// </ul>
// <div>yf</div>

 使用文档

 Introduction - art-template

 类似资料：

相关阅读

Express静态节点详解js模板引擎art template数组渲染的方法托管Apache的Django静态文件Node.js Express 框架 POST方法详解node.js基于express使用websocket的方法

相关文章

C++文件类（文件流类）及用法详解什么是文件路径，Python中如何书写文件路径？Java 静态同步方法Node.js Express 框架Python实例方法、静态方法和类方法

相关问答

尝试使用C#Regular Express匹配文本文件中的特定模式和模式序列使用Express/Node和MongoDB响应POST请求基于严格匹配的spring zuul路径匹配Apache 2.2 phpinfo（）配置文件（php.ini）路径与httpd不匹配。形态GAE上托管的静态文件加载缓慢

相关文档

Art-template 中文文档Express 中文文档Express 实战使用 Express + MongoDB 搭建多人博客Electron 官方文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.