在express中配置使用art-template

雨点打透心脏的1/2处 2022-10-30 15:27 134阅读 0赞

### 文章目录 ###

*   *  1.安装
     *  2.配置
     *  3.使用
     *   *  render（'html模板名', \{模板数据\}）
         *  修改默认的 views 目录
         *  express重定向
         *  express处理post请求参数
     *  4.使用express和art-template重写留言本案例
     *   *  项目链接
         *  代码
         *   *  app.js
             *  index.html （主界面）
             *  post.html （发表留言界面）

--------------------

*  官方文档：[http://aui.github.io/art-template/zh-cn/express/index.html\#Install][http_aui.github.io_art-template_zh-cn_express_index.html_Install]

## 1.安装 ##

npm install --save art-template 
    npm install --save express-art-template

## 2.配置 ##

// 配置使用 art-template 模板引擎
    // 第一个参数，表示，当渲染以 .art 结尾的文件的时候，使用 art-template 模板引擎
    // express-art-template 是专门用来在 Express 中把 art-template 整合到 Express 中
    // 虽然外面这里不需要记载 art-template 但是也必须安装
    // 原因就在于 express-art-template 依赖了 art-template
    app.engine('html', require('express-art-template'))

## 3.使用 ##

### render（‘html模板名’, \{模板数据\}） ###

参数

*  第一个参数不能写路径，默认会去项目中的 views 目录查找该模板文件（也就是说 Express 有一个约定：开发人员把所有的视图文件都放到 views 目录中）
 *  第二个参数为模板数据，传入第一个参数的html中，供其使用

// Express 为 Response 相应对象提供了一个方法：render
    // render 方法默认是不可以使用，但是如果配置了模板引擎就可以使用了
    res.render('html模板名', { 模板数据})

例如：

app.get('/', function (req, res) { 
      res.render('index.html', { 
        title : ‘我是标题’
      })
    })

### 修改默认的 views 目录 ###

// 如果想要修改默认的 views 目录，则可以
    app.set('views', render函数的默认路径)

### express重定向 ###

将

res.statusCode = 302
    res.setHeader('Location', '/')

替换成

res.redirect('/')

用一行代码在express中接即可解决

### express处理post请求参数 ###

参考博文：  
[https://yangyongli.blog.csdn.net/article/details/113884136][https_yangyongli.blog.csdn.net_article_details_113884136]

## 4.使用express和art-template重写留言本案例 ##

### 项目链接 ###

[https://download.csdn.net/download/weixin\_45525272/15382274][https_download.csdn.net_download_weixin_45525272_15382274]

### 代码 ###

#### app.js ####

var express = require('express')
    var bodyParser = require('body-parser')
    
    var app = express()
    
    app.use('/public/', express.static('./public/'))
    app.use('/node_modules/', express.static('./node_modules/'))
    
    // 配置使用 art-template 模板引擎
    app.engine('html', require('express-art-template'))
    
    // 配置 body-parser 中间件（插件，专门用来解析表单 POST 请求体）
    app.use(bodyParser.urlencoded({  extended: false }))
    app.use(bodyParser.json())
    
    var comments = [{ 
        name: '张三',
        message: '今天天气不错！',
        dateTime: '2022-10-16'
      },
      { 
        name: '张三2',
        message: '今天天气不错！',
        dateTime: '2022-10-16'
      },
      { 
        name: '张三3',
        message: '今天天气不错！',
        dateTime: '2022-10-16'
      },
      { 
        name: '张三4',
        message: '今天天气不错！',
        dateTime: '2022-10-16'
      },
      { 
        name: '张三5',
        message: '今天天气不错！',
        dateTime: '2022-10-16'
      }
    ]
    
    app.get('/', function (req, res) { 
      res.render('index.html', { 
        comments: comments
      })
    })
    
    app.get('/post', function (req, res) { 
      res.render('post.html')
    })
    
    // 当以 POST 请求 /post 的时候，执行指定的处理函数
    // 这样的话我们就可以利用不同的请求方法让一个请求路径使用多次
    app.post('/post', function (req, res) { 
    
      // req.query 只能拿 get 请求参数
      // console.log(req.query)
      var comment = req.body
      comment.dateTime = '2017-11-5 10:58:51'
      comments.unshift(comment)
    
      res.redirect('/')
    })
    
    
    
    app.listen(3000, function () { 
      console.log('running...')
    })

#### index.html （主界面） ####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>留言本</title>
      <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    </head>
    
    <body>
      <div class="header container">
        <div class="page-header">
          <h1>Example page header <small>Subtext for header</small></h1>
          <a class="btn btn-success" href="/post">发表留言</a>
        </div>
      </div>
      <div class="comments container">
        <ul class="list-group">
          {
       {each comments}}
          <li class="list-group-item">{
       { $value.name }}说：{
       { $value.message }} <span class="pull-right">{
       { $value.dateTime }}</span></li>
          {
       {/each}}
        </ul>
      </div>
    </body>
    
    </html>

#### post.html （发表留言界面） ####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
      <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
      
    </head>
    
    <body>
      <div class="header container">
        <div class="page-header">
          <h1><a href="/">首页</a> <small>发表评论</small></h1>
        </div>
      </div>
      <div class="comments container">
        <form action="/post" method="post">
          <div class="form-group">
            <label for="input_name">你的大名</label>
            <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名">
          </div>
          <div class="form-group">
            <label for="textarea_message">留言内容</label>
            <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea>
          </div>
          <button type="submit" class="btn btn-default">发表</button>
        </form>
      </div>
    </body>
    
    </html>

[http_aui.github.io_art-template_zh-cn_express_index.html_Install]: http://aui.github.io/art-template/zh-cn/express/index.html#Install
[https_yangyongli.blog.csdn.net_article_details_113884136]: https://yangyongli.blog.csdn.net/article/details/113884136
[https_download.csdn.net_download_weixin_45525272_15382274]: https://download.csdn.net/download/weixin_45525272/15382274