模板过滤器与模板继承关系-cookie与session状态保持--node.js学习（七）

模板过滤器和模板继承的使用

        过滤器的使用：

        如要使用过滤器，在app.js中：

const template = require('art-template');
template.defaults.imports.过滤器名字 = function(value){    //value接收html中“|”前面的值
    return value * 1000
};

        而在html模板页面中要用"|"隔开：

<p>num1是：{{num1 | 过滤器名字}}</p>

        模板继承的使用：

        我们知道，我们在一个项目中有很多页面，这些页面都有着一些相同的结构代码，如相同的页头和页尾，我们除了可以把公共模块写成一个模块，但是我们也可以令一个页面为父模板，从而对其他页面进行处理：

        例如：在父模板中：

<h1>头部</h1>
{{block 'content'}}
<div>父内容</div>
{{/block}}
<div>尾部</div>

        在子模板中：

{{extend './parent.html'}} 
<!-- 与父模板一样的内容通过extend关键字继承过来 -->

<!-- 与父模板不一样的内容通过block关键字来区分 -->
{{block 'content'}}
    <div>子内容</div>
{{/block}}

        在入口文件app.js中：

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

app.engine('html', require('express-art-template'));
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'html');


app.get("/", (req,res)=>{
    //注意：！！这里渲染子模板
    res.render("child");
})


app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
});

        简单来说，这就相当于什么，就是我们利用index.html复制出了一个父模板，我们在父模板中对父与子页面不相同的代码进行挖坑，就是上面block代码，block后面为这一个坑定义了一个名字，在子页面中，就可以将专属于子页面的那一部分代码填到对应的坑中，达到预期的继承效果。

---

状态保持技术cookie和session

        我们应该理解，http是一种无状态的协议，浏览器请求服务器是无状态的，在这里为什么是无状态的呢？这是因为在每次用户发起请求的时候，无论是浏览器还是服务器都无法知道之前这个用户做过什么，每一次请求都是一次新的请求。具体的原因呢，是因为浏览器与服务器是使用socket进行通信的，服务器将请求结果返回给浏览器后，会关闭当前的socket连接，而且服务器也会在处理页面完毕之后销毁页面对象。

        而有时我们必须保持用户的某些状态，比如是否登录，浏览过什么。

        我们实现状态保持主要有两种方式：

        1、在客户端存储信息使用Cookie

        2、在服务器端存储信息使用Session

cookie

特点：

1、cookie是由服务器生成，保存在浏览器端的一小段文本信息

2、cookie是以键和值的形式进行存储的

3、浏览器在访问一个网站的服务器时，会自发的在请求头中把和本网站相关的所有cookie发送到服务器。

4、cookie是基于域名安全的

5、cookie有过期时间，默认关闭浏览器之后过期，这个可以自己设置

使用

1、先安装和引入cookie-parser

2、再注册到app.js中：

const cookieParase = require('cookie-parser');
app.use(cookieParase());

设置cookie：

res.cookie('name', "node", {maxAge: 1000 * 60 * 60 * 2 }); 

获取cookie：

let name = req.cookies["name"]

完整使用代码：

/ 1、安装cookie-parser
// 2、引入cookie-parser并注册到app中
const cookieParase = require('cookie-parser');
app.use(cookieParase());

app.get("/setCookie",(req,res)=>{
    //设置cookie
    res.cookie('name', "node", {maxAge: 1000 * 60 * 60 * 2 });    // 过期时间：单位毫秒
    res.cookie('age', 11); 
    res.send("设置了cookie")
})

app.get("/getCookie",(req,res)=>{
    //获取cookie信息
    let name = req.cookies["name"];
    let age = req.cookies["age"];
    res.send(`获取cookie, ${name}, ${age}`);
})

session

特点：

1、session数据保存在服务器端

2、session跟cookie一样是以键和值的形式进行存储

3、session依赖于cookie，每个session信息对应的客户端标识保存在cookie中

使用

1、安装和引入：cookie-session

2、注册到app.js:

app.use(cookieSession({
    name:"my_session",  //name为session名，自己起一个字符串就行
    keys:["$^%%&^&%$RT%&TYGSGSFRR554785432$#@$$#%$@#%"],  // 内部加密需要的keys， keys为随机字符串
    maxAge: 1000 * 60 * 60 * 24   // 过期时间
}))

注意注册session要有key

设置session：

req.session["name"] = "session_node"

获取session：

let name = req.session["name"]

完整代码：

// 1、先安装：yarn add cookie-session     
//    如果报错，后面添加版本号，然后一直回车就好    yarn add cookie-session@2.0.0
// 2、设置到app中  
const cookieSession = require('cookie-session');
app.use(cookieSession({
    name:"my_session",  //name为session名，自己起一个字符串就行
    keys:["$^%%&^&%$RT%&TYGSGSFRR554785432$#@$$#%$@#%"],  // 内部加密需要的keys， keys为随机字符串
    maxAge: 1000 * 60 * 60 * 24   // 过期时间
}))

app.get("/setSession",(req,res)=>{
    //设置session
    req.session["name"] = "session_node"
    req.session["age"] = 11 
    
    res.send("设置了Session")
})

app.get("/getSession",(req,res)=>{
    //获取session信息
    let name = req.session["name"]
    let age = req.session["age"]
    res.send(`获取Session, ${name}, ${age}`);
})

---

        这些都是比较简单但是又必须得会的东西。