项目结构如下：
app.js
const exp = require(‘express‘),
bodyParser = require(‘body-parser‘),
fs = require(‘fs‘),
multer = require(‘multer‘),
app = exp(),
multipart = multer();
// 用来创建对象的方法如上面的exp()/multer()
// 可以称为工厂方法
app.use(exp.static(‘static‘))
app.use(bodyParser.urlencoded())
app.post(‘/add‘, multipart.array(), (req, res) => {
console.log(multipart.array());
// content留言内容
var content = req.body.content
// message是JSON数据格式
var message = {
content:content,
time: new Date(),
ip: req.ip
};
// 异步判断文件是否存在
fs.exists(‘data‘, (exists) => {
if (!exists) {
// 如果文件不存在，则同步创建文件
// 即文件创建成功后才继续执行后续代码
fs.mkdirSync(‘data‘);
}
fs.appendFile(‘data/message.txt‘, JSON.stringify(message) + ‘,‘, (error) => {
if (error) {
// %s称为占位符
console.error(‘保存文件时发生错误：%s‘, error)
}
})
})
// 文件后缀名决定操作系统用什么图标显示文件
// 决定操作系统用什么程序打开文件
// appendFile可以将数据附加到文件的末尾，
// 如果文件不存在，它会自动创建文件
// 判断文件或文件夹是否存在 fs.exists
// 创建文件夹 fs.mkdir
// 删除文件 fs.unlink
// 删除文件夹 fs.rmdir 必须是空文件夹才能删除
// 读取文件 fs.readFile
res.status(200).json({ message: ‘感谢您的留言！‘ })
})
//
app.get(‘/messages‘, (req, res) => {
fs.exists(‘data/message.txt‘, (exists) => {
if (exists) {
fs.readFile(‘data/message.txt‘, (error, data) => {
if (!error) {
var result = ‘[‘ + data;
result = result.substr(0, result.length - 1);
result = result + ‘]‘;
// console.log(result);
res.status(200).send(result);
}
})
}
else {
res.status(200).send(‘[]‘);
}
})
})
app.listen(3000, () => console.log(‘Server Running..‘));
add.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta name="author" content="张强">
<title>留言</title>
<style>
</style>
<link rel="stylesheet" href="alert.css">
<script src="alert.js"></script>
</head>
<body>
<form action="add" method="POST">
<textarea name="content" id="content" cols="60" rows="10" placeholder="亲，说点什么吧..."></textarea><br>
<input type="submit" value="提交">
</form>
<script src="add.js"></script>
</body>
</html>
index.js
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// responseText响应文本
console.log(xhr.responseText);
var arr = JSON.parse(xhr.responseText);
// arr数组
console.log(arr);
//
var messages = ‘‘;
// 反向循环一个数组,使最新的留言出现最上面
for(var i = arr.length - 1; i > -1; i--){
var message = arr[i];
// 使用DOM向页面添加留言数据
// var box = document.createElement(‘div‘)
// document.body.appendChild(box)
// var content = document.createElement(‘p‘)
// content.innerText = message.content
// box.appendChild(content)
// var time = document.createElement(‘span‘)
// time.innerText = formatDateTime(new Date(message.time))
// box.appendChild(time)
// var ip = document.createElement(‘span‘)
// ip.innerText = formatIP(message.ip)
// box.appendChild(ip)
// 使用拼字符串的方法向页面添加留言
messages += ‘<section>‘
messages += ‘<p>‘
messages += message.content
messages += ‘</p>‘
messages += ‘<span>‘
messages += formatDateTime(new Date(message.time));
messages += ‘</span>‘
messages += ‘<span>‘
messages += formatIP(message.ip);
messages += ‘</span>‘
messages += ‘</section>‘
}
document.querySelector(‘article‘).innerHTML = messages
}
}
xhr.open(‘GET‘, ‘messages‘)
xhr.send()
function formatDateTime(t){
var M = t.getMonth() + 1,
d = t.getDate(),
h = t.getHours(),
m = t.getMinutes()
// js区分大小写！所以可以使用M、m表示两个不同的变量
M = M < 10 ? ‘0‘ + M : M
d = d < 10 ? ‘0‘ + d : d
h = h < 10 ? ‘0‘ + h : h
m = m < 10 ? ‘0‘ + m : m
return t.getFullYear() + ‘-‘ + M + ‘-‘ + d + ‘ ‘ + h + ‘:‘ + m
}
function formatIP(ip){
if(ip.startsWith(‘::1‘)){
return ‘127.0.0.1‘
}
if(ip.startsWith(‘::ffff:‘)){
return ip.substr(7)
}
}
最终数据以json格式储存在message.txt
时间： 2024-10-18 02:50:15