1. 文档结构
2. code 代码 aap.js
//app application 应用程序
//把当前模块所有的依赖项都声明在文件模块的最上面
//为了保持目录结构保持统一,html文件,都放到views(视图)文件夹里。
//lib第三方的包放到里面
//静态资源放到public里面
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url')
var comments = [{
name: '张四',
message: '今天是个好日子',
dataTime: '2020.03.03'
},
{
name: '张三',
message: '今天是个好日子',
dataTime: '2020.03.03'
}
]
http
.createServer(function(req, res) {
var parseObj = url.parse(req.url, true)
var pathname = parseObj.pathname //单独获取url?后面的路径
if (pathname == '/') {
fs.readFile('./views/index.html', function(err, data) {
if (err) {
return res.end('404 not found')
} else {
var htmlstr = template.render(data.toString(), {
comments: comments
})
res.end(htmlstr)
}
})
} else if (pathname === '/post') {
//其他的都处理成404找不到
fs.readFile('./views/post.html', function(err, data) { //注意路径 服务器里面都用绝对路径
if (err) {
return res.end("404 non found")
}
res.end(data)
})
} else if (pathname === '/pinglun') {
// 注意:一次请求,对应一次响应. 只会返回第一个碰到的end, 它就带着数据返回浏览器了
//注意:这个是偶偶无论评论?后面是什么都不用担心了,因为使用url方法,只获取路径。
// console.log(JSON.stringify(parseObj).query);
// 我们已经使用url模块的parse方法把请求路径中的查询字符串解析成了一个对象.
// 所以接下来要做的就是:
// 1.获取表单提交的数据 parseobj.query
// 2.生成日期到数据对象中,然后存储到数组中.
// 3.让用户重定向跳转到首页
// 当用户重新请求/de 时候,我数组中的数据已经发生变化了,所以用户看到的时候,已经变化.
var comment = parseObj.query
comment.dataTime = '2020-11-02'
comment.message = (comment.message).trim()
comments.unshift(comment)
//服务端这个时候已经把数据存储好了,接下来就是让用户重新请求/首页。就可以看到列表了。
//如何通过服务器让客户端重定向?
// 1.状态码设置为302临时重定向.
//statusCode
//2. 在响应头中通过Location 告诉客户端该往哪里重定向。
//如果客户端发现收到服务端的响应状态码是302就会自动去响应头中找location.
//所以你就会自动看到客户端自动跳转
res.statusCode = 302
res.setHeader('Location', "/") // /就是http://127.0.0.1:3000/
// return res.end(JSON.stringify(parseObj.query))
res.end()
} else if (pathname.indexOf('/public/') === 0) {
fs.readFile('.' + pathname, function(err, data) {
if (err) {
return res.end("404 non found")
}
res.end(data)
})
} else {
return res.end("404 non found")
}
})
.listen(3000, function() {
console.log("running...");
})
// 1.idnex.html
// 2.开放public中的静态资源 当请求/public/xxx的时候,读取响应public目录中的具体资源
// 3./post post.html
// 4. /pinglun
// 4.1 接受变淡提交数据
// 4.2 存储变淡提交的数据
// 4.3 让变淡重定向到/
// statusCode
// setHeader
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/public/css/bootstrap.css" />
</head>
<body>
<!-- http://127.0.0.1:3000/node/feedback/node_modules/bootstrap/dist/css/bootstrap.css -->
<div class="page-header">
<h1>请输入留言</h1>
<a href="/post">发表留言</a>
</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.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/public/css/bootstrap.css" />
</head>
<body>
<div class="page-header">
<h1>请输入评论</h1>
<a href="/">回到首页</a>
</div>
<div class="header container">
<!-- //表单提交默认必须有name属性
1.表单提交分为两种
默认的提交 和表单异步提交
action 就是表单提交的地址, 就是请求的url地址
method请求的方法 get post
-->
<form action="/pinglun" method="get">
<div class="form-group">
<label for="input_name"> 你的大名:</label>
<input type="text" name='name' class="form-control" id="ecampleInputEmaill" placeholder="请写入你的姓名">
</div>
<div class="form-group">
<label for="textarea_message"> 留言内容:</label>
<textarea class="form-control" name='message' rows="10" cols="80" id="textarea_message" required minlength='5'>
</textarea>
</div>
<button type="submit" class="btn btn-default">发表</button>
</form>
</div>
</body>
</html>
注意: 这里依赖使用了 art-template Bootstrap(这个不是必要,可以自己写)
^-^ 笔记仅作为学习交流使用,如有异议请私信楼主删除。