模板过滤器与模板继承关系-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 [email protected]
// 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}`);
})

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

猜你喜欢

转载自blog.csdn.net/qq_53087870/article/details/120171264