NodeJs学习（二）_node 学习(二)-CSDN博客

本文链接：https://blog.csdn.net/wangdong_244829031/article/details/85177681

1.简化的http核心模块

针对NodeJs学习（一），本次学习中，简化了对http核心模块的代码，如下：

//加载http核心模块

var http = require('http')

/*创建http服务器，简化var server = http.createServer();
*server.on('request',function(req,res){})
*server.listen(3000,function(){})
/

http.createServer(function(req,res){
    
}).listen(3000,function(){
    console.log('Server running ......')
})

2.利用art-template模板引擎渲染HTML文件

首先可以通过npm,在cmd中找寻到需要的文件位置，输入命令行npm install art-template命令，就可以在所在文件的位置直接在线下载最新的art-template模板引擎，例如：

下载完成后就可以看见文件目录下已经多了个node_modules的包

然后可以根据需求创建一个HTML文件，然后创建一个js文件开始利用art-template模板引擎渲染。

首先需要加载art-template核心模块，至于为什么，因为npm install art-template下载的是什么，就以什么为核心模块加载。

下面则是一个留言本的简单小例子，练手用而已：

app.js

//加载art-template核心模块,变量名可以随意起，但最好和核心模块一样
var template = require('art-template')
var fs = require('fs')//用来读取文件并渲染
var http = require('http')
var url = require('url')//用已解析的请求路径

//创建一个数组
var comments = [
	{
		name:'小红',
		message:'这个世界真的好美！',
		dateTime:'2018-10-12'
	},
	{
		name:'小明',
		message:'是吗，我怎么觉得明天更美',
		dateTime:'2018-10-13'
	},
	{
		name:'老师',
		message:'你们好好学习，将来回报祖国',
		dateTime:'2018-10-14'
	}
]

http.createServer(function(req,res){
    //获取到请求路径，true表示将请求路径pathname和参数query分开，
    //一般请求路径为127.0.0.1:8080/路径?参数
	var pathObject = url.parse(req.url,true)
	var path = pathObject.pathname//路径
	if(path == '/'){
		fs.readFile('./views/index.html',function(err,data){
			if(err){
				return res.end('404 not found !')
			}
            //render(字符串，对象)
			var datas = template.render(data.toString(),{
                //用来传值到html界面中的<each comments>.....</each>
				comments:comments
			})
			res.end(datas)
		})
	}else if(path == '/post'){
		fs.readFile('./views/post.html',function(err,data){
			if(err){
				return res.end('404 not found')
			}
			res.end(data)
		})
	}else if(path == '/pinglun'){
		var comment = pathObject.query//接收到的参数
        //创建当前时间
		var date = new Date()
		var time =date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
		comment.dateTime = time
        //将数据放到comments数组的第一个
		comments.unshift(comment)
        //设置状态码并重定向到初始页面，index.html
		res.statusCode = 302
		res.setHeader('Location','/')
		res.end()
	}else{
        //如果请求其他未知路径，则跳转到404错误提示页面
		fs.readFile('./views/404.html',function(err,data){
			if(err){
				return res.end('404 not found')
			}
			res.end(data)
		})
	}
}).listen(3000,function(){
	console.log('Server running ......')
})

index.html

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

<head>
  <meta charset="UTF-8">
  <title>留言本</title>
</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">
</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" 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,url,fs,art-template四个核心模块的综合使用，实现了一个简单留言本功能。通过http创建服务器并接收请求做相应的处理，首先由url模块接收请求路径并拆分为路径和参数，其次利用art-template模板引擎进行信息的传递，最后利用fs核心模块跳转到指定页面，并传值。