您的位置: 首页  >  文章  >  Node.js学习笔记（四）Express框架（2）

Node.js学习笔记（四）Express框架（2）

分类: 文章 • 2023-11-19 11:52:10

Express框架（2）

文章目录

1. art-template 中的include-extend-block语法

  • include

嵌入子模版

例子：

js

var express = require("express");

var app = express();

app.engine('html', require("express-art-template"))


app.get("/",function (req,res) {
  res.render("index.html",{})
})


//监听3000端口
app.listen(3000,function () {
  console.log("http://localhost:3000 start~");
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    {{include './head.html'}}
    <h1>Body</h1>
    {{include './footer.html'}}
</body>
</html>

head.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>Head</h1>
</body>
</html>

footer.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>Footer</h1>
</body>
</html>

结果：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>Head</h1>
</body>
</html>
    <h1>Body</h1>
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>Footer</h1>
</body>
</html>
</body>
</html>
  • extend & block 模板继承

标准语法

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”，该模板可以被子类继承并在block处自行定义

例子：

js上接上个例子

public.html

<!--layout.art-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}
    	<link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

index.html

{{extend './public.html'}}

{{block 'title'}}这是title{{/block}}

{{block 'head'}}
<link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

结果：

<!--layout.art-->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>这是title</title>

  
<link rel="stylesheet" href="custom.css">

</head>
<body>

<p>This is just an awesome page.</p>

</body>
</html>

2. Express使用Cookie插件

  • 安装cookie中间件cookie-parser 
npm install cookie-parser
  • 例子
var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get("/",function (req,res) {
  res.cookie('islogin', 'sucess', { maxAge: 60000 });//设置cookie，maxAge为过期时长，毫秒为单位，此处设置一分钟
  res.send("Hello World")
})

app.get("/c",function (req,res) {
  console.log(req.cookies); //获取cookie
  res.send(req.cookies)
})

app.listen(3000)

3. Express 使用 Session插件

  • 安装session中间件express-session 
npm install express-session

文档：https://www.npmjs.com/package/express-session

  • 例子
var express = require("express");
var session = require("express-session")

var app = express();

app.engine('html', require("express-art-template"))

// 使用 session 中间件
app.use(session({
  secret :  'secret', // 对session id 相关的cookie 进行签名
  resave : true,
  saveUninitialized: false, // 是否保存未初始化的会话
  cookie : {
    maxAge : 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
  },
}));

app.get("/",function (req,res) {
  req.session.name = "hello" //往session存值
  res.send("Hello World");
})

app.get("/a",function (req,res) {
  console.log(req.session.name); //从session中取值
  res.send(req.session.name);
})


//监听3000端口
app.listen(3000,function () {
  console.log("http://localhost:3000 start~");
});

4. 中间件

类似于JavaWeb的过滤器链

官方文档：http://www.expressjs.com.cn/guide/writing-middleware.html

中间件函数是可以访问请求对象req，响应对象res以及next应用程序请求 - 响应周期中的函数的函数。该next功能是Express路由器中的一个功能，当被调用时，它将执行当前中间件之后的中间件。

如果当前的中间件函数没有结束请求 - 响应周期，则必须调用next()以将控制传递给下一个中间件函数。否则，请求将被挂起。

Node.js学习笔记（四）Express框架（2）

例子：

var express = require('express')
var fs = require("fs")

var app = express()

//Express中间件是从上到下执行的，但是若当前执行的中间件不释放资源next()，就无法进入下一个中间件
app.use(function (req,res,next) {
  console.log("this is 1 ：" + req.url);
  next();
})

app.use("/",function (req,res,next) {
  console.log("this is 2 ：" + req.url);
  next();
})

app.use("/a",function (req,res,next) {
  console.log("this is 3 ：" + req.url);
})

app.get("/a/b",function (req,res,next) {
  res.send("Hello World")
})

//读取一个无效资源，程序报错，执行错误处理，浏览器返回err
app.get("/abc",function (req,res,next) {
  fs.readFile("asdad",function (err,data) {
    if(err){
      return next(err)
    }
    console.log(data.toString());
  })
})

//404处理，当处理到无效url时执行404
app.use(function (req,res,next) {
  console.log("this is 404 ：" + req.url);
  res.send("404")
})

//错误处理，当程序出错时，next(err),立即跳出程序执行错误方法
app.use(function (err,req,res,next) {
  console.log("this is err handler ：" + req.url);
  res.send("err")
})

app.listen(3000)

5. Express 错误处理

官方文档：http://www.expressjs.com.cn/guide/error-handling.html

使用next(err)抛出错误，程序会立即跳转到错误处理函数执行

app.get("/", function (req, res, next) {
  fs.readFile("/file-does-not-exist", function (err, data) {
    if (err) {
      next(err); // Pass errors to Express.
    }
    else {
      res.send(data);
    }
  });
});

错误处理函数，通常放置于最后

function errorHandler (err, req, res, next) {
  res.status(500)
  res.render('error', { error: err })
}

相关推荐