Nodejs基础之Express框架和art-template引擎(四)

1.3.3、绑定对象

我们也可以绑定对象中的数据并将其渲染到 html 页面。

例如：

const express = require(“express”);

const app = express()

//配置模板引擎

app.set(“view engine”, “ejs”)

app.get(“/news”, (req, res) => {

let userinfo = {

username: “张三”,

age: 20

};

res.render(“news”, {

userinfo: userinfo, // 绑定 userinfo 对象数据

})

})

app.listen(3000);

接下来我们去 views 文件夹下新建 news.ejs

绑定对象中的数据

<%=userinfo.username%>—<%=userinfo.age%>

1.3.4、输出 HTML标签

我们也可以输出 HTML标签，既可以原格式输出，又可以解析 HTML 标签输出。

• <%= %>输出标签(原文输出 HTML 标签)

• <%- %>输出标签(HTML会被浏览器解析)

const express = require(“express”);

const app = express()

//配置模板引擎

app.set(“view engine”, “ejs”)

app.get(“/news”, (req, res) => {

let article = “

我是一个h3

”

res.render(“news”, {

article: article,

})

})

app.listen(3000);

<%=article%>

<%-article%>

1.3.5、条件判断

/*

1、安装 cnpm install ejs --save

2、app.set(“view engine”,“ejs”)

3、使用 (默认加载模板引擎的文件夹是views)

res.render(“index”,{

})

*/

const express = require(“express”);

const app = express()

//配置模板引擎

app.set(“view engine”,“ejs”)

app.get(“/”,(req,res)=>{

let title = “你好ejs”;

res.render(“index”,{

title:title

})

})

app.get(“/news”,(req,res)=>{

res.render(“news”,{

flag:true,

score:60,

})

})

//监听端口 端口号建议写成3000以上

app.listen(3000)

条件判断

<%if(flag==true){%>

flag=true

<%}%>

<%if(score>=60){%>

及格

<%}else{%>

不及格

<%}%>

1.3.6、循环遍历

/*

1、安装 cnpm install ejs --save

2、app.set(“view engine”,“ejs”)

3、使用 (默认加载模板引擎的文件夹是views)

res.render(“index”,{

})

*/

const express = require(“express”);

const app = express()

//配置模板引擎

app.set(“view engine”, “ejs”)

app.get(“/”, (req, res) => {

let title = “你好ejs”;

res.render(“index”, {

title: title

})

})

app.get(“/news”, (req, res) => {

let list = [“1111”, “22222”, “3333333”]

let newsList = [{

title: “新闻1111”,

},

{

title: “新闻122222”,

},

{

title: “新闻33331”,

},

{

title: “新闻44444”,

}

]

res.render(“news”, {

list: list,

newsList: newsList

})

})

//监听端口 端口号建议写成3000以上

app.listen(3000)

循环遍历

<%for(let i=0;i<list.length;i++){%>

• <%=list[i]%>

  <%}%>

  
  

  <%for(let i=0;i<newsList.length;i++){%>

• <%=newsList[i].title%>

  <%}%>

  

  1.3.7、引入模板

  <%- include(‘footer.ejs’) %>

  1.3.8、ejs后缀修改为html

  这是一个小技巧，看着.ejs 的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。

  1. 在 app.js 的头上定义ejs

  var ejs = require(‘ejs’);

  2. 注册html 模板引擎代码如下

  app.engine(‘html’,ejs__express)

  3. 将模板引擎转换成 html 代码如下

  app.set(‘view engine’,‘html’)

  4. 修改模板文件的后缀为 .html 即可

  1.3.9、Express.static托管静态文件

  我们的静态资源 img、css 等要如何引入呢？

  1. 调用 express.static 中间件

  app.use(express.static(‘static’))

  现在，static 目录下面的文件就可以访问了

  2. 在 ejs 里面正常引入css 即可

  1.4、Express中间件

  ---

  通俗的讲：中间件就是匹配路由之前或者匹配路由完成做的一系列的操作。中间件如果想往下匹配的话，那么需要写 next()

  中间件可以用来做权限判断：没有登录 跳转到登录页面，登录以后就显示登录以后的页面

  如果我的get、post 回调函数中，没有next 参数，那么就匹配上第一个路由，，就不会往下匹配了。如果想往下匹配的话，那么需要写 next()

  Express 应用可使用如下几种中间件

  • 应用级中间件

  • 路由级中间件（用的少）

  • 错误处理中间件

  • 内置中间件

  • 第三方中间件

  1.4.1、应用级中间件

  const express = require(“express”);

  const app = express()

  //1、应用级中间件 (用于权限判断)

  app.use((req,res,next)=>{ // 匹配任何路由

  console.log(new Date());

  next(); // 表示匹配完成这个中间件之后程序继续向下执行

  })

  app.get(“/”,(req,res)=>{

  res.send(“首页”)

  })

  app.get(“/login”,(req,res)=>{

  res.send(“执行登录”)

  })

  app.listen(3000);

  1.4.2、路由中间件

  const express = require(“express”);

  const app = express()

  //2、路由级中间件(用的比较少)

  app.get(“/news/add”,(req,res,next)=>{

  // res.send(“执行增加新闻”)

  console.log(“执行增加新闻”)

  next()

  })

  app.get(“/news/:id”,(req,res)=>{

  res.send(“新闻动态路由”)

  })

  app.listen(3000);

  1.4.3、错误处理中间件

  const express = require(“express”);

  const app = express()

  //3、错误处理中间件

  app.use((req,res,next)=>{

  res.status(404).send(“404”)

  })

  app.listen(3000);

  1.4.4、内置中间件

  // 内置服务

  app.use(‘/static’,express.static(‘./static’))

  内置中间件一般用于 css、img 等静态资源的加载访问。

  1.4.5、第三方中间件

  1.4.6、获取GET请求参数

  • GET 请求的参数在 URL 中，在原生 Node中，需要使用 url 模块来识别参数字符串。在 Express 中，不需要使用 url模块了，可以直接使用 req.query 对象

  const express = require(“express”);

  const app = express()

  app.get(“/”, (req, res) => {

  // http://127.0.0.1:3000/?name=zhangsan&age=20

  let query = req.query;

  console.log(query);

  console.log(query.name);

  console.log(query.age);

  res.send(req.query);

  })

  app.listen(3000);

  

  1.4.7、获取POST请求参数

  获取 POST 请求参数需要加载第三方中间件 body-parser

  1. 首先下载 body-parse

  npm install body-parser --save

  2. 引入中间件

  var bodyParser = require(‘body-parser’)

  3. 配置中间件

  app.use(bodyParser.urlencoded({ extended: false }))

  app.use(bodyParser.json())

  4. 接收 post 数据

  req.body

  ---

  const express = require(“express”);

  const bodyParser = require(‘body-parser’)

  const app = express()

  //配置第三方中间件

  app.use(bodyParser.urlencoded({ extended: false }))

  app.use(bodyParser.json())

  app.post(“/doLogin”, (req, res) => {

  // req.body 获取post传值

  var body = req.body;

  res.send(body);

  })

  //监听端口 端口号建议写成3000以上

  app.listen(3000)

  

  1.5、Express Cookie

  ---

  1.5.1、Cookie简介

  • cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。

  • HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。

  • Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行HTTP 报文中，命令浏览器存储一个字符串; 浏览器再访问同一个域的时候，将把这个字符串携带到上行HTTP 请求中。第一次访问一个服务器，不可能携带cookie。必须是服务器得到这次请求，在下行响应报头中，携带cookie 信息，此后每一次浏览器往这个服务器发出的请求，都会携带这个cookie。

  1.5.2、Cookie的特点

  • cookie 保存在浏览器本地

  • 正常设置的cookie 是不加密的，用户可以自由看到

  • 用户可以删除cookie，或者禁用它

  • cookie 可以被篡改

  • cookie 可以用于攻击

  • cookie 存储量很小。未来实际上要被localStorage 替代，但是后者IE9 兼容。

  1.5.3、Cookie的使用

  Express 中要使用Cookie 的话，我们需要使用 cookie-parser 模块来实现

  1. 安装

  npm install cookie-parser --save

  2. 引入

  var cookieParser = require(‘cookie-parser’)

  3. 设置中间件

  app.use(cookieParser())

  4. 设置 cookie

  res.cookie(“username”,“zhangsan”,{maxAge:10006060})

  5. 获取 cookie

  req.cookies.username

  ---

  const express = require(‘express’)

  const cookieParser = require(‘cookie-parser’)

  const app=express()

  //配置cookieParser中间件

  app.use(cookieParser())

  app.get(“/”,(req,res)=>{

  // 设置cookie 如果cookie没有过期的话，关闭浏览器后重新打开,cookie不会销毁

  res.cookie(“username”,“zhangsan”,{maxAge:10006060});

  res.send(“你好 Cookie”);

  })

  app.get(“/article”,(req,res)=>{

  //获取cookie

  let username=req.cookies.username;

  res.send(“新闻页面–”+username)

  })

  app.get(“/user”,(req,res)=>{

  //获取cookie

  let username=req.cookies.username;

  res.send(“用户–”+username);

  })

  app.listen(3000);

  设置Cookie

  

  获取Cookie

  

  1.5.4、Cookie属性说明

  | 属性 | 描述 |

  | — | — |

  | domain🔥 | 域名 name = value:，是键值对，可以设置要保存 key/Value，注意这里的 name 不能和其他属性项的名字一样 |

  | Expires | 过期时间（ 秒） ， 在设置的某个时间点后该Cookie 就会失效， 如 expires=Wednesday, 09-Nov-99 23:12:40 GMT |

  | maxAge | 最大失效时间（毫秒），设置在多少后失效 |

  | secure | 当secure 值为true 时，cookie 在HTTP 中是无效，在HTTPS 中才有效 |

  | Path🔥 | 表示cookie 影响到的路径，如path=/。如果路径不能匹配时，浏览器则不发送这个Cookie |

  | httpOnly | 是微软对COOKIE 做的扩展。如果在COOKIE 中设置了“httpOnly”属性，则通过程序（JS 脚本、applet 等）将无法读取到COOKIE 信息，防止XSS 攻击产生 |

  | singed | 表示是否签名cookie, 设为true 会对这个cookie 签名， 这样就需要用res.signedCookies 而不是res.cookies 访问它。被篡改的签名cookie 会被服务器拒绝，并且cookie 值会重置为它的原始值 |

  • 多个域名共享 cookie：aaa.itying.com bbb.itying.com 下的二级域名都可以访问这个 cookie

  // 多个域名共享cookie aaa.itying.com bbb.itying.com

  res.cookie(“username”,“zhangsan1111”,{maxAge:10006060,domain:“.itying.com”})

  • 中文 cookie

  res.cookie(“username”,“张三”,{maxAge:10006060})

  • 设置只有 /article 路由可以访问这个cookie

  res.cookie(“username”,“zhangsan”,{maxAge:10006060,path:“/article”})

  1.5.5、Cookie的加密

  1. 配置中间件的时候需要传入加密的参数

  app.use(cookieParser(“itying”))

  2. 设置加密 Cookie

  res.cookie(“username”,“zhangsan”,{maxAge:10006060,signed:true})

  3. 获取加密的cookie

  req.signedCookies

  1.6、Express Session

  ---

  1.6.1、Session简介

  • session 是另一种记录客户状态的机制，不同的是Cookie 保存在客户端浏览器中，而session 保存在服务器上。

  • Cookie 数据存放在客户的浏览器上，Session 数据放在服务器上。Session 相比Cookie 要更安全一些

  • 由于Session 保存到服务器上，所以当访问量增多的时候，会比较占用服务器的性能。

  • 单个cookie 保存的数据大小不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。Session 没有这方面的限制。Session 是基于Cookie 进行工作的。

  1.6.2、Session的工作流程

  当浏览器访问服务器并发送第一次请求时，服务器端会创建一个session 对象，生成一个类似于key,value

  的键值对， 然后将key(cookie)返回到浏览器(客户)端，浏览器下次再访问时，携带key(cookie)，找到对应

  的session(value)。

  1.6.3、express-session

  1. 安装

  npm install express-session --save

  2. 引入

  var session = require(‘express-session’)

  3. 设置官方文档提供的中间件

  app.use(session({

  secret: ‘keyboard cat’,

  resave: false,

  saveUninitialized: true,

  cookie: { secure: true }

  }))

  4. 使用

  // 设置值

  req.session.username = “张三”

  // 获取值

  req.session.username

  1.6.4、express-session的常用参数

  app.use(session({

  secret: ‘keyboard cat’,

  resave: false,

  saveUninitialized: true,

  cookie: { secure: true }

  }))

  | 参数 | 作用 |

  | — | — |

  | secret | 一个String 类型的字符串，作为服务器端生成session 的签名 |

  | name | 返回客户端的key 的名称，默认为connect.sid,也可以自己设置。 |

  | resave | 强制保存session 即使它并没有变化, 。默认为false 。don’t save session if unmodified |

  | saveUninitialized | 强制将未初始化的session 存储。当新建了一个session 且未设定属性或值时，它就处于未初始化状态。在设定一个cookie 前，这对于登陆验证，减轻服务端存储压力，权限控制是有帮助的。（默认：true）。建议手动添加。 |

  | cookie | 设置返回到前端key 的属性，默认值为{ path: ‘/’, httpOnly: true, secure: false,maxAge: null }。 |

  | rolling | 在每次请求时强行设置cookie，这将重置cookie 过期时间（默认：false） |

  const express = require(‘express’)

  const session = require(‘express-session’)

  const app = express()

  //配置session的中间件

  app.use(session({

  secret: ‘this is session’, //服务器端生成 session 的签名

  name: “itying”, //修改session对应cookie的名称

  resave: false, //强制保存 session 即使它并没有变化

  saveUninitialized: true, //强制将未初始化的 session 存储

  cookie: {

  maxAge: 1000 * 60 * 30,

  secure: false // true 表示只有https协议才能访问cookie

  },

  rolling: true //在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默认：false）

  }))

  app.get(“/”, (req, res) => {

  //获取seesion

  if (req.session.username || req.session.age) {

  res.send(req.session.username + “–” + req.session.age + “-已登录”)

  } else {

  res.send(“没有登录”)

  }

  })

  app.get(“/login”, (req, res) => {

  //设置seesion

  req.session.username = “张三”;

  req.session.age = 20;

  res.send(“执行登录”);

  })

  app.listen(3000)

  

  1.6.5、express-session的常用方法

  1. 设置session的过期时间为 0(它会把所有的session都销毁)

  req.session.cookie.maxAge=0

  2. 销毁指定session

  req.session.username=“”

  3. 销毁session

  req.session.destroy()

  ---

  app.get(“/loginOut”,(req,res)=>{

  //1、设置session的过期时间为0 (它会把所有的session都销毁)

  // req.session.cookie.maxAge=0

  //2、销毁指定session

  // req.session.username=“”

  //3、销毁session destroy

  req.session.destroy();

  res.send(“退出登录”)

  })

  2、art-template模板

  ==================================================================================

  模板引擎是第三方模块,art-template模板引擎官方网址：https://aui.github.io/art-template/zh-cn/index.html

  1. 下载

  npm install art-template --save

  2. 引入

  const template = require(‘art-template’);

  3. 告诉模板引擎要拼接的数据和模板在哪

  const html = template(‘模板路径’, 数据);

  4. 使用

  2.1、示例

  ---

  // 导入模板引擎

  const template = require(‘art-template’);

  const path = require(‘path’);

  const views = path.join(__dirname, ‘views’, ‘index.art’);

  // template方法是用来拼接字符串的

  // 1. 模板路径 绝对路径

  // 2. 要在模板中显示的数据 对象类型

  // 返回拼接好的字符串

  const html = template(views, {

  name: ‘张三’,

  age: 20

  })

  console.log(html);

  用模板引擎在 index.art 中接收

  {{ name }} {{ age }}

  

  2.2、模板语法

  ---

  • art-template同时支持两种模板语法：标准语法和原始语法

  • 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力

  2.2.1、输出

  将某项数据输出在模板中，标准语法和原始语法如下：

  • 标准语法：{{ 数据 }}

  • 原始语法：<%=数据 %>

  {{value}}

  {{a ? b : c}}

  {{a + b}}

  <%= value %>

  <%= a ? b : c %>

  <%= a + b %>

  2.2.2、原文输出

  如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。

  • 标准语法：{{@} value}

  • 原始语法：<%- 数据%>

  {{@ value }}

  <%- value %>

  例如我们在 app.js 中放入数据：

  // 导入模板引擎

  const template = require(‘art-template’);

  const path = require(‘path’);

  const views = path.join(__dirname, ‘views’, ‘index.art’);

  // template方法是用来拼接字符串的

  // 1. 模板路径 绝对路径

  // 2. 要在模板中显示的数据 对象类型

  // 返回拼接好的字符串

  const html = template(views, {

  name: ‘张三’,

  age: 20,

  content: ‘

  我是标题

  ’

  })

  console.log(html);

  使用模板语法在 index.art 中接收

  {{ name }}

  {{ 1 + 1 }}

  {{ 1 + 1 == 2 ? '相等' : '不相等' }}

  {{ content }}

  {{@ content }}

  <%= name %>

  <%= 1 + 2%>

  <%= 1 + 1 == 2 ? '相等' : '不相等' %>

  <%= content%>

  <%- content%>

  

  2.2.3、条件判断

  {{if 条件}} … {{/if}}

  {{if 条件1}} … {{else if 条件2}} … {{/if}}

  <% if (value) { %> … <% } %>

  <% if (条件1) { %> … <% } else if (条件2) { %> … <% } %>

  例如：

  {{if age > 18}}

  年龄大于18

  {{else if age < 15 }}

  年龄小于15

  {{else}}

  年龄不符合要求

  {{/if}}

  <% if (age > 18) { %>

  年龄大于18

  <% } else if (age < 15) { %>

  年龄小于15

  <% } else { %>

  年龄不符合要求

  <% } %>

  2.2.4、循环

  • 标准语法：{{each 数据}}{{/each}}

  • 原始语法：<% for() {%><%} %>

  {{each target}}

  {{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} {{value}}

  {{/each}}

  <% for(var i = 0; i < target.length; i++){ %>

  <%= i %> <%= target[i] %>

  <% } %>

  例如我们在 app.js 中放入数据：

  const template = require(‘art-template’);

  const path = require(‘path’);

  const views = path.join(__dirname, ‘views’, ‘index.art’);

  const html = template(views, {

  users: [{

  name: ‘张三’,

  age: 20,

  sex: ‘男’

  }, {

  name: ‘李四’,

  age: 30,

  sex: ‘男’

  }, {

  name: ‘玛丽’,

  age: 15,

  sex: ‘女’

  }]

  });

  console.log(html);

  使用模板语法在 index.art 中接收

  {{each users}}

• {{$value.name}}

  {{$value.age}}

  {{$value.sex}}

  {{/each}}

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

  什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

  ) { %> … <% } else if (条件2) { %> … <% } %>

  例如：

  {{if age > 18}}

  年龄大于18

  {{else if age < 15 }}

  年龄小于15

  {{else}}

  年龄不符合要求

  {{/if}}

  <% if (age > 18) { %>

  年龄大于18

  <% } else if (age < 15) { %>

  年龄小于15

  <% } else { %>

  年龄不符合要求

  <% } %>

  2.2.4、循环

  • 标准语法：{{each 数据}}{{/each}}

  • 原始语法：<% for() {%><%} %>

  {{each target}}

  {{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} {{value}}

  {{/each}}

  <% for(var i = 0; i < target.length; i++){ %>

  <%= i %> <%= target[i] %>

  <% } %>

  例如我们在 app.js 中放入数据：

  const template = require(‘art-template’);

  const path = require(‘path’);

  const views = path.join(__dirname, ‘views’, ‘index.art’);

  const html = template(views, {

  users: [{

  name: ‘张三’,

  age: 20,

  sex: ‘男’

  }, {

  name: ‘李四’,

  age: 30,

  sex: ‘男’

  }, {

  name: ‘玛丽’,

  age: 15,

  sex: ‘女’

  }]

  });

  console.log(html);

  使用模板语法在 index.art 中接收

  {{each users}}

• {{$value.name}}

  {{$value.age}}

  {{$value.sex}}

  {{/each}}

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-Hgbn9bWL-1712467861271)]

  [外链图片转存中…(img-a8Cw2j3S-1712467861273)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  [外链图片转存中…(img-ohgfC0S3-1712467861274)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

  什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

  资料领取方式：戳这里获取