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("收到客户端请求，请求路径是："+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代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>评 论 区title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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