Express框架知识——art-template模板、cookie、session

Express框架

搭建一个服务器

const express = require('express')

const app = express();


app.get('/',(request,respone)=>{
  respone.end('hello express!!')
})



app.listen(3000,() => {
  console.log('Express web server is listen at 3000 port!');
})

获取post、get请求参数

获取get参数，是通过request.query

获取post参数，使用

const app = express()
app.use(express.urlencoded({ extended: false }))
app.use(express.json())

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

app.use(express.urlencoded({ extended: false }))
app.use(express.json())

app.get('/register',(request,respone)=>{
  let filepath = path.join(__dirname,'register.html')

  let content = fs.readFileSync(filepath,'utf-8')

  respone.send(content)

  // console.log(request.query);
})


app.get('/',(request,respone)=>{
  respone.end('hello express!!')
})

app.post('/register',(request,respone) => {
  let {username,email,password,repassword} = request.body


})


app.listen(3000,() => {
  console.log('Express web server is listen at 3000 port!');
})

获取静态资源

在项目根目录下创建一个文件夹public作为根，在pubilc中创建image文件夹，文件夹中放入静态资源

在后端文件中写入app.use(express.static(path.join(__dirname,'public')))

开启服务器，输入http://localhost:3000/image/1.png

就可以获取静态资源的路径，在前端html的img标签写入<img src="/image/1.png" alt="">

就可以展示在页面上了

art-template模板

可以代替上方的打开文件的方式。

// 这四句代码， 模板引擎的初始化工作
// 引入express-art-template, 使用对应的引擎
app.engine('html', require('express-art-template'));
//  项目环境的设置：
//  生产环境(线上)  production
//  开发环境  development
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});
// 设置在哪一个目录下查找模板文件
app.set('views', path.join(__dirname, 'views'));
// 设置模板的后缀名为html
app.set('view engine', 'html');


app.get('/register',(request,respone)=>{
  respone.render('register')//核心代码
})

art-template模板传输数据

//服务器代码
app.get('/register',(request,respone)=>{
  let data = {num:1,num2:3,books:["《西游记》","《红楼梦》","《水浒传》","《三国演义》"]};
  respone.render('register',data)
})

 <div>
      <p>{{num}}</p>
      <p>{{num2}}</p>
 </div>
  <ul>
    {{each books}}
      <li>{{$value}}</li>
    {{/each}}
  </ul>
 {{if num > num2}}
  <p>p标签不一定显示</p>
{{/if}}

页面效果：

处理请求前的钩子函数
在服务器端代码：

function checklogin(req,res,next){
  console.log("执行代码前先执行这个");
  next();
}

app.use(checklogin)

获取动态路由的参数

    <h1>List页面</h1>
    <hr>
    <ul>
      <li><a href="/detali/1">新闻1</a></li>
      <li><a href="/detali/2">新闻2</a></li>
      <li><a href="/detali/3">新闻3</a></li>
      <li><a href="/detali/4">新闻4</a></li>
    </ul>

服务器代码：

app.get('/register',(request,respone)=>{
    respone.render('register')
})


app.get('/detali/:id',(request,respone)=>{
  console.log(request.params);
})

//{ id: '1' }

模板继承的语法格式
子模板继承父模板

<!--父模板-->
<h1>List页面</h1>
<hr>
{{block 'content'}}
<ul>
  <li><a href="/detali">新闻1</a></li>
  <li><a href="/detali">新闻2</a></li>
  <li><a href="/detali">新闻3</a></li>
  <li><a href="/detali">新闻4</a></li>
</ul>
{{/block}}

<!--子模板-->
{{extend './register.html'}}

{{block 'content'}}
<p>detali页面</p>

{{/block}}

模板过滤器

const express = require('express')
const template = require('art-template')
const app = express();

template.defaults.imports.haha = function(value){
  return value * 200
}

app.get('/register',(request,respone)=>{
  let data = {
    num:1
  }
  respone.render('register',data)
})

<h1>Register</h1>

{{num | haha}}

cookie

设置与获取cookie
需要先安装cookie-parser模块

const express = require('express')
const cookieParser = require('cookie-parser')
const app = express();

app.use(cookieParser())


app.get('/set_cookie',(request,response)=>{
  response.cookie('name','node',{maxAge:60000}) //设置cookie的保存时间
  response.cookie('age',11)//没有设置就是默认关闭会话，就销毁
  response.send('设置了cookie信息');
})

app.get('/get_cookie',(request,response)=>{

  let name = request.cookies['name'];
  let age = request.cookies['age'];

  console.log(name);
  console.log(age);

  response.send(`设置的cookie信息为：${name},${age}`)
})


app.listen(3000,() => {
  console.log('Express web server is listen at 3000 port!');
})

session

特点：
1、session数据保存在服务器端
2、session是以键和值的形式进行存储
3、session依赖于cookie，每个session信息对应的客户端的标识保存在cookie中

使用：

先安装和引入：cookie-session

const cookieSession = require('cookie-session');

注册到app中：

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

设置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}`);
})