一、EJS

概述：前端咱们使用过的一个模板套路，是underscore的套路。接下来EJS它属于后台工程师人的模板。

https://www.npmjs.com/package/ejs 官网地址

特点：

Control flow with <% %>             流程控制语句用的是<% %>   :例如if   for循环等等

Escaped output with <%= %> (escape function configurable)     如果有赋值的操作（输出）你可以用<%= 变量名%>

//需要的模块 express  app.js

var express = require("express");

var app = express();

//设置模板引擎

app.set("view engine","ejs");

//这个是修改默认的文件夹的目录名字

app.set("views","template");

app.get("/",function  (req,res) {

       //这里需要注意的事情：不需要拼接路径

      res.render("shouye",{

            "gaoxing":"高兴",

            "dongxi":"iphoneX",

            "qian":2,

             "ouxiang":["赵本山大叔","刘德华","成龙"]

       })

});

app.listen(3000);
//template  shouye.ejs

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title></title>

</head>

<body>

     <h1>我今天好<%=gaoxing%>啊,我买了一个<%=dongxi%>,花了我<%=qian%>啊</h1>

     <select>

         <% for(var i = 1990 ; i< 2017 ; i++) {%>

              <% if (i %2 ==0) {%>

                 <option><%= i %></option>

              <% }%>

         <% } %>

     </select>

       <ul>

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

                    <li><%= ouxiang[i]%></li>

          <% } %>

       </ul>

</body>

</html>

提示：①不需要引入EJS模块，因此就不需要require(“EJS”);

②设置视图的模板引擎为ejs,app.set(“view engine” ,”ejs”),设置完模板引擎，自动回搜索views文件夹中的模板。

③如果需要重新设置views文件夹的名称，app.set(“views”,”template”);

④已经学习过的res.send  end json jsonp redirect ，今天又学习了一个render

⑤res.render(“shouye”),直接加上模板的名称，不需要拼接路径也不需要有ejs尾缀，渲染的数据用第二个参数json传递

二、cookie (cookie-parser)

概述：HTTP协议（应用层FTP）而且还是短轮询链接，发起一次请求之后，就断开连接了；

Cookie它主要做的事情，是让服务器知道谁访问了我，知道谁是谁。

注意：这里面的信物就是咱们今天学习的cookie(饼干)，cookie的下发是服务器下发；在node的学习当中有一个模块叫做，它对于cookie进行了封装。

注意：cookie是由服务器下发，用的是报文头下发，报文当中多了一个选项 set-cookie = “XXXXXXX”,

当你浏览器再次访问服务器的时候，用的是上行请求的报文头装载cookie在上去。

//app.js

var express = require("express");

//解析cookie的时候，需要他解析

var cookieParser = require('cookie-parser');

var app = express();

app.use(cookieParser());

//设置模板引擎

app.set("view engine","ejs");

//中间件

app.get("/",function  (req,res) {

     res.render("shouye",{

        "arr":req.cookies.visited||[]

     });

});

//接受的是浏览器反问的时候给咱们的城市的信息

app.get("/:city",function  (req,res) {

     var city = req.params.city;

  //这是第一次访问咱们这个中间件的时候，因为cookie还没有因此就没有visited的属性，因此走if分支

      if(!req.cookies.visited){

          var arr = [city];

      }else{

  //第二次访问这个中间件的时候，namecookie已经有了，因此在网cookie当中数组当中添加新的数据

          var arr = req.cookies.visited;

          if(arr.indexOf(city)==-1){

              arr.push(city);

          }

      }

     res.cookie("visited",arr,{maxAge:1000*60*60*24});

     res.send("<h4>你要去的地方是"+city+"</h4>");

})

app.listen(3000);
//template   shouye.ejs 模板页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title></title>

</head>

<body>

    <div>

        旅游攻略

        <a href="/北京">北京</a>

        <a href="/上海">上海</a>

        <a href="/广州">广州</a>

        <a href="/深圳">深圳</a>

        <a href="/苏州">苏州</a>

        <a href="/杭州">杭州</a>

        <a href="/成都">成都</a>

    </div>

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

             <h4><%= arr[i]%></h4>

    <% } %>

</body>

</html>

三、session(express-session)

概述：每一次用户登录的时候，服务器会给客户端下发一个乱码（session），而每一次浏览器在反问的时候，带着乱码在上去，对比的活是服务器在做。服务器当中的某一部分的内存在进行对比，它（服务器）就知道你是谁？谁来了。

上面的这些操作相当于 setCookie 与cookie已经这只好了；

但是很好的一件事情，是express，它对外暴露了一个模块，这个模块对session进行了封装，我们直接使用，这个模块的名字 express-session

案例描述：有一个form表单，有用户名和密码（123456），每个人登录之后页面显示你的用户名；

//app.js

var express = require("express");

var formidable = require("formidable");

//express-session 模块的引用

var session = require('express-session');

var app = express();

//下面的东西不需要理解，因为人家让你这么写的

app.set('trust proxy', 1) ;

app.use(session({

  secret: 'jiachenghao',

  resave: false,

  saveUninitialized: true,

  cookie: {maxAge:86400} cookie这个选项什么都可以没有但是必须要有时间的设置

}));

//设置模板引擎

app.set("view engine","ejs")

app.get("/",function  (req,res) {

      res.render("index",{

          login:req.session.login,

          yonghuming:req.session.yonghuming

      });

});

//post请求用formidable

app.post("/login",function  (req,res) {

    var form = new formidable.IncomingForm();

    form.parse(req,function  (err,fields) {

        if(fields.mima=="123456"){

            req.session.login = true;

            req.session.yonghuming = fields.yonghuming;

            //重定向：又进入主页面是发起一次请求

            res.redirect("/")

        }

    })

})

app.listen(3000);

//template  shouye.ejs  模板页面

<% if(!login) {%>

      <!-- 没有登录的情况 -->

     <form action="/login" method="post">

        <p>

             用户名:<input type="text" name="yonghuming"/>

        </p>

         <p>

             密码&nbsp;&nbsp;:<input type="text"  name="mima"/>

        </p>

            <input type="submit"/>

     </form>

     <% }else{%>

      <!-- 这里是登录的情况 -->

          <h3>欢迎你进入你的首页<%=yonghuming%></h3>

     <% }%>

node（4）express 框架 EJS模板，cookie, session的学习的更多相关文章

  1. Node.js Express 框架

    Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...

  2. Node.js Express框架

    Express 介绍 Express是一个最小的,灵活的Node.js Web应用程序框架,它提供了一套强大的功能来开发Web和移动应用程序. 它有助于基于Node Web应用程序的快速开发.下面是一 ...

  3. node之Express框架

    Express是node的框架,通过Express我们快速搭建一个完整的网站,而不再只是前端了!所以Express还是非常值得学习的! express有各种中间件,我们可以在官方网站查询其用法. Ex ...

  4. Node.js Express 框架 Express

    Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  5. 44.Node.js Express 框架--web框架

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 简介 Express 是一个简洁而灵活的 node.js W ...

  6. Node.js Express 框架学习

    转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

  7. Node的express框架安装

    第一步:在cmd命令行下执行npm install -g express,安装全局的express. 第二步:在命令行中输入express,如果出现express不是内部命令时, 输入npm inst ...

  8. 快速创建node应用[Express框架]

    安装Express npm install -g express 建立工程 express -e ejs FaceExpresscd FaceExpress && npm instal ...

  9. Node.js+Express框架+Mongo学习(一)第一个node.js实例

    1.在桌面新建一个空的文件夹,比如叫node,当然也可以在其它地方新建. 2.命令行进入到所新建的文件夹的目录,下载Express框架,再在这个文件夹里新建一个叫final的项目 3.在项目(fina ...

随机推荐

  1. 【.NET 4.5】新增的 Prefer 32-bit target platform

    这本来是一个很小的feature并且也没有什么模糊的地方,关键是VS把这个设置成了默认值,当默认为Any CPU的时候,application会被编译成32-bit mode. 下边是我遇到的问题,在 ...

  2. linux中的tar命令的使用

    参考网址: https://www.cnblogs.com/newcaoguo/p/5896975.html https://www.cnblogs.com/xccjmpc/p/6035397.htm ...

  3. win7安装docker报错：error during connect: Get http ..... the system cannot find the file specified

    因为是win7 所以使用了官方网站的dockertoolbox 安装一路顺利,结果启动就报上面的错误, 因为安装包附带安装了virtualbox 上面的错误后来排查出来是 virtualboox的问题 ...

  4. Git-基本操作(图文)

    场景一: 已经用git add 命令把文件加入到暂存区了,这个时候想退回怎么办? 添加文件到暂存区 :git add . 将单个文件撤回到工作区:git rm --cached [文件路径] 将目录撤 ...

  5. gcc 编译问题

    一般情况一句话即可: gcc -o fuck fuck.c ./fuck 直接运行了 问题 1. 报错 ld 未找到 此时,gcc编译得分布来,并且指定特定的ld gcc -c  1.c //会在目录 ...

  6. 【JQuery源码】事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  7. Mysql 断电数据损毁恢复

    error log: Database page corruption on disk or a failed 处理: /etc/my.cnf 设置 innodb_force_recovery = 6 ...

  8. gulp4.0 前端构建脚手架

    最近看了下gulp4.0的升级,感觉和3.0相比变化还是比较大的,很多3.0的写法和插件会出现一些莫名其妙的变化,详细的变化就先不说了,这里我直接把我配置好的代码拿过来吧,方便各位可以更好的学习和使用 ...

  9. 面试题27：单链表向右旋转k个节点

    Given a list, rotate the list to the right by kplaces, where k is non-negative. For example:Given1-& ...

  10. C++中虚函数的动态绑定和多态性

    目录 静态类型 vs 动态类型.静态绑定 vs 动态绑定 虚函数动态绑定实现机制.虚析构函数 多态性 一.静态 vs 动态 静态类型 VS 动态类型.静态类型指的是对象声明的类型,在编译器确定的.动态 ...