留言板项目的后台部署思路以及4实现方法和一些“坑“及解决方案
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了留言板项目的后台部署思路以及4实现方法和一些“坑“及解决方案相关的知识，希望对你有一定的参考价值。
搭建简易后端服务器
var http = require('http')
var fs = require('fs')
var path = require('path')
var server = http.createServer();
server.on('request', function (req, res)
// 第二个参数为true的话，直接将查询字符串转化Wie对象
var reqObj = url.parse(req.url, true);
//这里的pathname就是解析后的纯请求路径，不带表单
var pathname = reqObj.pathname;
// 获取首页
if (pathname == '/')
fs.readFile(path.join(__dirname, './views/index.html'), function (err, data)
if (err)
return res.end(err.message);
var compiled = _.template(data.toString());
var htmlStr = compiled(
comments: comments
)
res.setHeader('Content-Type', 'text/html;charset = utf-8');
res.end(htmlStr)
)
)
server.listen(3000, function ()
console.log('server running ……');
)
这里是对get表单的一个后端处理环节。
这里比较有意思的就是对，表单的请求和处理，点击提交按钮，将会把内容提交给一个from指向，也即是/pinglun,再在后面接着把数据跟随上，但是路由处理的特别的恰当，直接转化Wie一个对象实现，所以通过对象的点调用，获取表单对象。
然后给这个对象附加一个时间属性并赋值，将这个对象通过UNshift（）方法添加到这个comments的数组当中的最前面，然后后端重新渲染循环遍历数组就会把数据体现在页面上。
整个js代码实现
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
var _ = require('underscore')
//留言数据
var comments = [
name: '小明',
message: 'Node.js 是一个基于Chrome javascript 运行时建立的一个平台',
dataTime: '2020-2-28'
,
name: '哈哈',
message: '我要认真学习node.js',
dataTime: '2020-2-28'
,
name: '嘻嘻',
message: 'Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎',
dataTime: '2020-2-28'
,
name: 'levi',
message: 'Node.js中采用了非阻塞型异步I/O机制',
dataTime: '2020-2-28'
,
name: 'jack',
message: '好好学习，天天向上',
dataTime: '2020-2-28'
]
var server = http.createServer();
server.on('request', function (req, res)
// 第二个参数为true的话，直接将查询字符串转化Wie对象
var reqObj = url.parse(req.url, true);
var pathname = reqObj.pathname;
// 获取首页
if (pathname == '/')
fs.readFile(path.join(__dirname, './views/index.html'), function (err, data)
if (err)
return res.end(err.message);
var compiled = _.template(data.toString());
var htmlStr = compiled(
comments: comments
)
res.setHeader('Content-Type', 'text/html;charset = utf-8');
res.end(htmlStr)
)
else if (pathname == '/post')
fs.readFile(path.join(__dirname, './views/post.html'), function (err, data)
if (err)
return res.end(err.message)
res.setHeader('Content-Type', 'text/html;charset = utf-8');
res.end(data)
)
else if (pathname.startsWith('/public'))
fs.readFile(path.join(__dirname, pathname), function (err, data)
if (err)
return res.end(err.message)
res.end(data)
)
else if (pathname == '/pinglun')
var postcomment = reqObj.query
var data = new Date();
var now = data.toLocaleDateString();
postcomment.dataTime = now;
comments.unshift(postcomment);
res.statusCode = 302
res.setHeader('Location', '/')
res.end()
)
server.listen(3000, function ()
console.log('server running ……');
)
index,html代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet" href="../public/bootstrap/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>留言本<small>谢谢你的留言</small></h1>
<a class="btn btn-success" href="/post">发表留言</a>
</div>
</div>
<div class="comments container">
<ul class="list-group">
<% comments.forEach(function(value) %>
<li class="list-group-item">
<%= value.name%>说:<%= value.message %>
<span class="pull-right">
<%= value.dataTime %>
</span>
</li>
<% ) %>
</ul>
</div>
</body>
</html>
post.html
注意路由和请求路径不要混淆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post界面</title>
<link rel="stylesheet" href="../public/bootstrap/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="100"></textarea>
</div>
<button type="submit" class="btn btn-default">发表</button>
</form>
</div>
</body>
</html>
以上是关于留言板项目的后台部署思路以及4实现方法和一些“坑“及解决方案的主要内容，如果未能解决你的问题，请参考以下文章