express使用art-template模板引擎渲染数据

最新推荐文章于 2023-08-09 18:23:12 发布

Jayhodon

最新推荐文章于 2023-08-09 18:23:12 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/Jayhodon/article/details/108507760

版权

一、使用node.js来简易的搭建一个服务器

搭建流程分为简单的三个步骤：

//1.先创建一个app.js文件，加载http核心模块
var http=require('http')

/*2、使用http.createServer()方法创建一个服务器对象，同时注册request请求事件。
当客户请求过来，就会自动触发服务器的request请求事件，然后执行第二个参数：回调处理函数。*/
http.createServer(function (req, res) 
{
     console.log("收到客户端请求，请求路径是："+req.url)
     res.write("hello world")
  　 res.end()  
  })
//3、绑定端口号，启动服务器
.listen(3000,function(){
   console.log("it's running");  
 })

最后可在对应的项目目录下启动终端并且输入node app.js即可启动服务器，在浏览器地址栏输入http://127.0.0.1:3000/即可访问。

ps：由于每修改一次代码就要重启一次服务器，为了解决频繁修改代码重启服务器的麻烦，这里推荐安装一个基于node.js开发的第三方工具：nodemon

npm install --global nodemon

安装完毕后使用nodemon app.js来代替node app.js，即可在你的文件发生变化时自动帮你重启服务器。

二、关于art-template- - - - javascript 模板引擎

特性

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
支持压缩输出页面中的 HTML、CSS、JS 代码
支持 Express、Koa、Webpack
支持模板继承与子模板
兼容 EJS、Underscore、LoDash 模板语法
模板编译后的代码支持在严格模式下运行
支持 JavaScript 语句与模板语法混合书写
支持自定义模板的语法解析规则
浏览器版本仅 6KB 大小

安装

$ npm install art-template -d

使用

1.服务器代码

var http=require('http')
var fs = require('fs')
var url = require('url')
var template = require('art-template')

http
  .createServer(function (req, res) 
{
        var parseObj = url.parse(req.url, true)
        var pathname = parseObj.pathname
    
        if (pathname === '/') {
          fs.readFile('./index.html', function (err, data) {
            if (err) {
              return res.end('404 Not Found.')
            }
            fs.readFile('./comment.json',function(err,files){
              if (err) {
                return res.end('404 Not Found.')
              }
              //页面默认读取到的数据是二进制，而render 方法接收的是字符串
              //为了将二进制数据转换成字符串 所以需要toString()方法
              //同理需要将获取的files数据转换成json对象
              var htmlStr = template.render(data.toString(), {
                comments: JSON.parse(files)
              })
              res.end(htmlStr)
            })
          })
        }
      })
  .listen(3000,function(){
    console.log("服务器启动成功了，运行127.0.0.1：3000进行访问");  
})

2.index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>评 论 区</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="header container">
    <div class="page-header">
      <h1>评 论 区</h1>
    </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>
    <a class="btn btn-success" href="#">发表评论</a>
  </div>
</body>
</html>

3.comment.json数据

[
    {
      "name": "XXX",
      "message": "XXX",
      "dateTime":"XXX-XXX-XXX"
    }
]

三、art-template+express

express安装

$ npm install express -d

在express中配置使用art-template模板引擎

安装
$ npm install art-template -d
$ npm install express-art-template -d
配置

	app.engine('art', require('express-art-template')) //第一个参数art是为视图配置后缀名

express中使用art-template模板引擎渲染数据

服务器代码

var express = require('express')
var bodyParser = require('body-parser')
var fs = require('fs')

var app = express()

//将目录下的public文件开放出来
app.use('/public/', express.static('./public/'))

// 配置使用 art-template 模板引擎
app.engine('html', require('express-art-template'))

app.get('/', function (req, res) {
  fs.readFile('./comment.json',function(err,files){
    if (err) {
      return res.end('404 Not Found.')
    }
    //页面默认读取到的数据是二进制，而render 方法接收的是字符串
    //为了将二进制数据转换成字符串 所以需要toString()方法
    //同理需要将获取的files字符串数据转换成json对象
    res.render('index.html', {
      comments: JSON.parse(files)
    })
  })
})

app.listen(3000, function () {
  console.log('服务器启动成功了，运行127.0.0.1：3000进行访问')
})

express中获取表单GET和POST请求的数据

GET请求参数：
express内置了一个API，可以直接通过req.query来直接获取
post请求体数据：
由于在express 中没有内置获取表单POST请求体的API，所以我们需要使用一个第三方的包：body-parser。
安装：$ npm install body-parser -d

	//导包
	var express = require('express')
	var bodyParser = require('body-parser')

	//配置
	app.use(bodyParser.urlencoded({ extended: false }))
	app.use(bodyParser.json())

	app.use(function (req, res) {
		res.setHeader('Content-Type','text/plain')
		res.write('you posted:\n')
		//配置完后就可通过req.body来获取POST的提交的请求体数据
		res.end(JSON.stringify(req.body,null,2))
	})

参考资料：https://github.com/Jayhodon/node-test-express

Jayhodon

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
express使用art-template模板引擎渲染数据

一、使用node.js来简易的搭建一个服务器搭建流程分为简单的三个步骤：//1.先创建一个app.js文件，加载http核心模块var http=require('http')/*2、使用http.createServer()方法创建一个服务器对象，同时注册request请求事件。当客户请求过来，就会自动触发服务器的request请求事件，然后执行第二个参数：回调处理函数。*/http.createServer(function (req, res) { console.log("
复制链接

扫一扫