nodejs相关2

1、模板引擎art-template用法示例：

安装方法：在指定目录下，输入npm install art-template

需要在浏览器中引用该模板

大家好，我叫：{{name}}

我今年{{age}}岁了

我来自{{province}}

我喜欢：{{each hobbies}} {{$value}} {{/each}}

</script>

扫描二维码关注公众号，回复： 3219287 查看本文章

var ret=template('tpl',{name:'Jake',age:18,province:'北京市',hobbies:[

'写代码'，'唱歌'，'打游戏'

]})

console.log(ret);

</script>

2、在node中使用art-template

node中把模板字符串存在了HTML文件中，浏览器中是把模板字符串存在了script标签中。

fs.readFile('index.html',function(err,data){

if(err){

return console.lohg('读取文件失败了');

}

//默认读取到的data是二进制数据，而模板引擎的render方法需要接收的是字符串。所以需要把data二进制数据转化为字符串才可以给模板引擎使用。

var ret =template.render(data.toString(),{

name:'Jack',

age:18,

province:'北京市'，

hobbies:[

'写代码'，‘唱歌’，‘打游戏’

]

})

console.log(ret);

})

2、Node中的模块系统

使用node编写应用程序主要就是在使用

（1）EcmaScript语言和浏览器不一样，在node中没有BOM和DOM

（2）核心模块文件操作的fs，http服务的http ，URL路径操作模块，path路径处理模块，os操作系统信息模块等

（3）第三方模块 art-template 必须通过npm下载才能使用

（4）自己写的模块自己创建的文件

模块化：有文件作用域，通信规则（加载require，导出）

CommonJS模块规范：在node中javascript还有一个很重要的概念：模块系统

模块作用域（解决变量命名冲突的问题），使用require方法用来加载模块，使用exports接口对象用来导出模块中的成员。

*如果一个模块需要直接导出某个成员，而非挂载的方式，这时必须使用module.exports='hello';(导出单个对象)

导出多个对象：exports.a="hello"; exports.b="world";

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

首先安装：npm install --save art-template express-art-template

配置：app.engine('html',require('express-art-template'))

使用：app.get('/',function(req,res){

//express默认会去项目中的views目录找index.html

res.render('index.html',{title:'hello world'})

如果希望修改默认的views视图渲染存储目录，可以

app.set('views',目录路径) //注意第一个参数views千万不要写错

})

用get请求表单提交实例：

app.js

var express=require('express');
var app=express();
//当以/public/开头的时候，去./public/目录中找对应的资源（公开资源的使用方式）
app.use('/public/',express.static('./public/'));
//当省略第一个参数的时候，则可以通过省略/public的方式来访问
// app.use(express.static('./public/'));

//可以认为a是public的
// app.use('别名/a/',express.static('./public/'));

app.engine('html',require('express-art-template'));
app.get('/haha',function(req,res){
   res.render('404.html');
});
var comments=[{
   name:'张三',
   message:'今天天气真不错',
   dataTime:'2018-09-15'
},{
   name:'张三1',
   message:'今天天气真不错',
   dataTime:'2018-09-15'
},{
   name:'张三2',
   message:'今天天气真不错',
   dataTime:'2018-09-15'
},{
   name:'张三3',
   message:'今天天气真不错',
   dataTime:'2018-09-15'
},{
   name:'张三4',
   message:'今天天气真不错',
   dataTime:'2018-09-15'
}];
app.get('/',function(req,res){
   res.render('index.html',{comments:comments});
});
app.get('/post',function(req,res){
   res.render('post.html');
});
app.get('/pinglun',function(req,res){
   var comment=req.query;
   comment.dateTime="2018-09-11 15:45:10";
   comments.unshift(comment);
   // res.statusCode=302;
   // res.setHeader('Location','/');
   res.redirect('/');//重定向，和前两行代码的作用一样
});

app.get('/login',function(req,res){
   res.send(`
           <!DOCTYPE html>
           <html lang="en">
               <head>
                   <meta charset="UTF-8" />
                   <title>Document</title>
               </head>
               <body>
                   <h1>hello login</h1>
               </body>
           </html>

index.js

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>留言本</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="header container">
   <div class="page-header">
       <h1>Example page header <small>Subtext for header</small></h1>
       <a href="/post" class="btn btn-success">发表留言</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.dataTime}}</span></li>
       {{/each}}
   </ul>
</div>
</body>
</html>

post.js

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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="/pinglun" method="get">
       <div class="form-group">
           <label for="input_name">你的大名</label>
           <input type="text" name="name" class="form-control" required minlength="2" maxlength="10" 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 class="btn btn-default" type="submit">发表</button>
   </form>
</div>
</body>
</html>

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

猜你喜欢