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

目录

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值