nodejs day04 --模板引擎 express框架

nodejs day04

1.模板引擎语法

A.简洁语法(标准语法)

{{ name }}

解析属性 {{ @content }}

B.原始语法(原生语法)

<%= name %>

解析属性 <%- name %>

2.判断语法

<!‐‐ 标准语法 ‐‐>
 {{if 条件}} ... {{/if}}
 {{if 条件1}} ... {{else if 条件2}} ... {{/if}}
 <!‐‐ 原始语法 ‐‐>
 <% if (条件) { %> ... <% } %>
 <% if (条件1) { %> ... <% } else if (条件2) { %> ... <% } %>

3.循环语法

A.标准语法

{{each 数组名}}

    <!-- 在each之间可以通过$index获取遍历的索引
          通过$value获取遍历的那个元素




-->
    索引:{{$index}}
    值: {{$value}}

{{/each}}

B.原始语法

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

    索引：<%= i %>
    值:<%= 数组[i] %>

<% } %>

4.子模板

子模板的好处就是将 多个页面中的公共部分 抽离出来形成一个单独的模板，当我们将这个模板的内容进行改变的时候，页面包含这个单独模板的地方也会随之发生变化，我们去修改页面的公共部分的时候就不需要一个一个页面去修改。

其他页面包含子模板的语法：

{{ include ‘子模板的相对路径’ }}

<% include(‘子模板的相对路径’) %>

5.模板继承

所谓的模板继承就是将页面的基本结构抽离出来形成一个新的模板文件；如果想要在这个基本结构的模板文件中填入页面中的内容，那么我们需要在这个骨架模板文件中挖坑。

模板继承（使用骨架）：

{{extend './views/layout.art'}}

如果想要往骨架的坑里填东西：

{{block 'main'}}

    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>榴莲</li>
    </ul>

{{/block}}

6.导入模板变量（开放一个变量给所有的模板）

template.defaults.imports.变量名 = 变量值;

效果就是给所有的模板设置了公共的变量，大家都可以来使用。

7.express框架

express框架的使用步骤

A.安装express

npm i express

B.引入express

const express = require('express');

C.使用express方法创建服务器对象

const app = express();

D.使用服务器对象进行路由处理

使用send方法返回结果

  app.get("/",(req,res)=>{
        res.send("呵呵，中文哟");
        // res.send({name:"jack"});
        //Cannot set headers after they are sent to the client
    })

E.开启服务器

app.listen(3001);

8.中间件

所谓的中间件就是服务器处理请求的过程中的一个环节。

其实中间件就可以认为是一个特殊的函数，我们会在接收请求之后去执行它

function(req,res,next){
    //req参数是请求对象
    //res参数是响应对象
    //next参数是一个函数，如果调用next函数将会结束本中间件
    //去执行下一个中间件

}

8.1注册中间件

//注册的use方法中如果只有一个中间件函数作为参数

//意味着浏览器发送的任何请求都会执行这个中间件

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

    ......
    next();

})

// 只有请求 /list的时候才会执行这个中间件

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

})

8.2 错误处理中间件

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

    console.log("发生错误："+error.message);
    res.send("发生错误："+error.message)

})

如果是异步处理的代码发生了错误，必须程序员自己添加代码去触发错误处理中间件，在执行async/await 异步函数的时候，需要使用try…catch来获取错误。

try{

    await ....

}catch( error ){

    .....

}

9. 路由处理

const express = require('express');

// 创建一个路由对象来处理路由

const router = express.Router();

//http://localhost:3000/test/

router.get('/',(req,res)=>{

    res.send("首页");

})

//http://localhost:3000/test/list

router.get('/list',(req,res)=>{

    

    res.send( req.query );

})

//暴露路由对象

module.exports = router;

10. 获取客户端参数数据

10.1 获取get请求参数数据的方式

express框架已经帮助我们做了处理，就将get请求的参数以对象的形式保存到了req.query当中。req.query是一个对象，对象中包含了get请求的参数。

10.2 获取post 参数数据的方式

express框架中想要获取post请求的参数数据，需要去安装第三方中间件 body-parser 来进行获取。

1).安装body-parser
npm i body-parser
2).引入
const bodyParser = require(‘body-parser’)
3).注册中间件
app.use( bodyParser.urlencoded( { extended:false } ) )
4).通过req对象中的body属性获取post请求的参数
app.post("/add",(req,res)=>{
//req.body是一个对象，对象中包含了post请求的参数数据
console.log(req.body);
})

10.3 设置，传递，获取路由参数的方式

1).设置路由参数
app.get("/list/:name/:age",(req,res)=>{
// 当客户端在地址栏中输入的get 地址为"/list/:name/:age"格式时就会接入这个路由
})
2).传递路由参数，在浏览器中输入地址，并且传递路由参数
在浏览器中访问的地址应该：
http://localhost:3000/list/jack/12

3).在服务器，要如何获取客户端传递的路由参数数据
app.get("/list/:name/:age",(req,res)=>{
//可以通过req.params属性来获取客户端传递的路由参数数据
req.params;//req.params是一个对象，对象中包含了路由参数数据
})

11. express框架中的静态资源访问

将 public 文件夹中的的内容直接放到服务器的根目录中

app.use( express.static( path.join( __dirname, “public” ) ) );

将 public 文件夹中的的内容直接放到服务器的某个一级路由中

app.use( ‘/text’ , express.static( path.join( __dirname, “public” ) ) );

12. express 框架中配置模板引擎的步骤

(1)下载模板引擎

npm i art-template express-art-template

(2)当渲染后缀为art 的模板是自动 使用 express- art-template

app.engine( ‘art’ , require( “express- art-template” ) );

(3)设置模板存放目录为 views

app.set( ‘views’ , path.join( __dirname, “views” ) )

(4)设置当渲染模板时不写后缀 默认拼接art 后缀

app.set( “views engine” , “art” )

(5)使用 render 方法进行模板引擎的渲染

app.get( “/” , ( req, res )=>{
// 渲染模板
res.render( “index” , { });
} ) ;

13. 在 express 中设置模板中的公共数据

框架中的写法

app.locals.变量名 = 变量值；
通过使用变量名就可以在各个模板中调用这个公共数据

原生服务器中的写法

template.defaults.imports.变量名 = 变量值