node.js如何实现留言板功能?

一、实现效果如下:

20240422_160404

二、前提配置:

配置:需要安装并且导入underscore模板引擎

安装:在控制台输入npm install underscore -save

文件目录配置:

1》在文件里建一个data文件夹,此文件夹下建一个conmments.json文件,专门用来存放留言数据

2》将页面的css样式全写入public文件夹下的bootstrap下的bootstrap.css文件下

3》建一个view文件夹专门用来存放我的静态html页面。此案例中我有一个index.html留言展示主页和post.html发表留言表单页

4》我将运行代码写在app.js里

三、代码实现:

3-1》知识补充

get请求处理方法有:

(1)querystring.parse(req.url.query)

(2)url.parse(req.url,true)  第二个参数true,直接将查询字符串转化为了对象

3-2》index.html首页代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><link rel="stylesheet" href="../public/bootstrap/bootstrap.css">
</head><body><div class="header container"><div class="header"><h1>留言本<small>谢谢你的留言</small></h1><a href="/post" class="btn">发表留言</a></div><hr></div><div class="middle-container"><ul class="middle-ul"><% for(item of comments){ %><li><%= item.name%>说:<%= item.message%><span class="floatright"><%= item.dataTime%></span></li><% } %></ul></div>
</body></html>

post.html 发表留言表单如下: 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言页</title>
</head><body><div class="header container"><div class="header"><h1><a href="/">留言</a><small>发表评论</small></h1></div><hr></div><div><form action="/a" method="get"><!-- action提交的路径、method提交的方法 --><p style="font-size: large;">你的大名</p><input type="text" name="name"><p style="font-size: large;">留言内容</p><textarea name="message" id="" cols="30" rows="10">
</textarea><br><button type="submit">发表</button></form></div>
</body></html>

3-4》data下的comment.json储存数据页如图:

{"comments": [{"name": "555","message": "5555","dataTime": "2024/4/22 16:04:15"},{"name": "小一","message": "我是小一","dataTime": "2024/4/19 15:54:43"},{"name": "小米","message": "我爱node","dataTime": "2024/4/16 下午9:11:32"}]
}

3-5》app.js运行代码如下:

//一、引入http、fs、path、url内置模块
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
//二、导入underscore渲染模板
const _ = require('underscore');
//三、声明一个变量comments,用来存放留言数据
var comments;
//四、异步读取文件,读取user.json存放用户数据的文件
fs.readFile(path.join(__dirname, 'data/comments.json'), (err, data) => {if (err) {//错误处理comments = {};} else {//如果读取正确就将读到的内容转换为一个对象存到comments里comments = JSON.parse(data.toString());}
})
//五、创建服务器
const server = http.createServer();
//六、服务器做出请求响应
server.on('request', (req, res) => {let urls = url.parse(req.url, true);  //解析get请求法二:第二个参数true,直接将查询字符串转为对象let pathname = urls.pathname;
//七、利用if分支对不同的pathname做不同处理if (pathname == '/') { //展示留言首页 index.htmlfs.readFile(path.join(__dirname, 'view/index.html'), (err, data) => {if (err) { //错误处理res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });res.end('访问的资源不存在')} else {//使用underscore渲染模板let complied = _.template(data.toString());let html = complied(comments);res.end(html);}})//请求静态资源进行处理 此处就是我的图片资源  startsWith方法,以什么开头} else if (pathname.startsWith('/public')) {fs.readFile(path.join(__dirname, pathname), (err, data) => {if (err) {res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });res.end('访问的资源不存在')} else {// 资源存在则写入json文件fs.writeFile(path.join(__dirname, 'data/comments.json'), JSON.stringify(comments), (err) => {if (err) {res.end('写入失败');} else {res.end(data);}})}})
//八、对post.html表单的留言进行读取和处理//点击发表留言按钮进入发表留言页面。发表留言按钮的href为/post} else if (pathname == '/post') { //读取留言fs.readFile(path.join(__dirname, 'view/post.html'), (err, data) => {if (err) {res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });res.end('访问的资源不存在')} else {res.end(data);}})//form表单的action为'/a'} else if (pathname == '/a') { //处理留言//将url查询字符串解析结果urls.query赋值给自定义变量postcommentsvar postcomments = urls.query; var data = new Date();// 调用Date对象的toLocaleString方法,将当前的日期和时间转换为一个本地化的字符串格式,并将其赋给变量now。var now = data.toLocaleString();// 给postcomments添加dataTime属性,并且将now变量的值添加到postcomments对象中postcomments.dataTime = now;// 将一个名为comments的对象中的comments数组的第一个位置插入postcomments对象。comments.comments.unshift(postcomments);// 重新发送请求// 状态码设置为302,临时重定向res.statusCode = 302;// 设置HTTP响应头中的Location字段为/,表示服务器希望浏览器重定向到网站的根URL。res.setHeader('Location', '/')res.end()}
});
//九、启动监听
server.listen(3000, '127.0.0.1', () => {console.log('http://127.0.0.1:3000');
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/827313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ContextMenuStrip内容菜单源对象赋值学习笔记(含源码)

一、前言 MetroTileItem属于第三方控件,无法定义ContextMenuStrip属性 想实现某子项点击菜单时,与源控件(按钮metroTileItem)的某值对应,用于动态控制按钮的状态或方法 1.1 效果 二、实现方法 2.1 方法1 (代码,说明见注释) private void metroTileItem_MouseDown(o…

【排序算法】快速排序

快速排序&#xff08;Quick Sort&#xff09;是一种常用的排序算法&#xff0c;它采用分而治之的策略来对一个序列进行排序。快速排序的基本思想是选择一个基准元素&#xff08;通常是序列中的第一个元素&#xff09;&#xff0c;然后将序列中的其他元素分为两个子序列&#xf…

微信小程序 如何在组件中实现 上拉加载下一页和下拉触底

通过在父页面中使用selectComponent来调用子组件的方法来实现 1、在component中配置好方法 子页面homePage/index/index.js // homePage/index/index.js var total 0 var pageNo 1 const pageSize 20 Component({/*** 组件的属性列表*/properties: {},lifetimes: {create…

【题解】AB5 点击消除(栈)

https://www.nowcoder.com/practice/8d3643ec29654cf8908b5cf3a0479fd5?tpId308&tqId40462&ru/exam/oj 把string当栈用&#xff0c;扫一遍就可以了&#xff0c;时间复杂度O(n) #include <iostream> #include <string> using namespace std;int main() {…

深度学习基础之《TensorFlow框架(13)—二进制数据》

一、CIFAR10二进制数据集介绍 1、CIFAR-10数据集 CIFAR-10数据集由10个类别的60000个32x32彩色图像组成&#xff0c;每个类别有6000个图像。有50000个训练图像和10000个测试图像 2、数据集分为五个训练批次和一个测试批次&#xff0c;每个批次有10000个图像 3、data_batch_1…

向量的点积和叉积的几何意义

1. 点积 点积(dot product)&#xff0c;又称标量积&#xff08;scalar product&#xff09;。结果等于。 可用于 判断的是否垂直求投影长度求向量是抑制作用还是促进作用 2. 叉积 叉积(cross product)&#xff0c;又称为向量积(vector product)。模长等于&#xff0c;方向…

Golang | Leetcode Golang题解之第43题字符串相乘

题目&#xff1a; 题解&#xff1a; func multiply(num1 string, num2 string) string {if num1 "0" || num2 "0" {return "0"}m, n : len(num1), len(num2)ansArr : make([]int, m n)for i : m - 1; i > 0; i-- {x : int(num1[i]) - 0fo…

详细说说,中介怎么做!CLHLS数据库探索抑郁症状的中介作用发文二区

零基础CHARLS发论文&#xff0c;不容错过&#xff01; 长期回放更新指导&#xff01;适合零基础&#xff0c;毕业论文&#xff0c;赠送2011-2020年CHARLS清洗后的数据全套代码&#xff01; 2024年3月28日&#xff0c;中国学者用CLHLS数据库最新数据&#xff08;2018年&#xff…

java-Arrays

一、Arrays的概述 Arrays是操作数组的工具类 二、Arrays的常用方法 Arrays的常用方法基本上都被static静态修饰&#xff0c;因此在使用这些方法时&#xff0c;可以直接通过类名调用 1.toString 语法&#xff1a;Arrays.toString(数组) 用于将数组的元素转换为一个字符串&a…

代码随想录:链表

移出链表元素 lc203.移除链表元素 题目lc203思路&#xff1a;注意这里的头节点也有val&#xff0c;所以分两种情况&#xff0c;头节点和非头结点代码如下&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* …

蓝桥杯第17169题——兽之泪II

问题描述 在蓝桥王国&#xff0c;流传着一个古老的传说&#xff1a;在怪兽谷&#xff0c;有一笔由神圣骑士留下的宝藏。 小蓝是一位年轻而勇敢的冒险家&#xff0c;他决定去寻找宝藏。根据远古卷轴的提示&#xff0c;如果要找到宝藏&#xff0c;那么需要集齐 n 滴兽之泪&#…

go | 切片的长度和容量

其实这也不算什么重难点了&#xff0c;只是想想&#xff0c;也就记录下来吧。对了&#xff0c;有一段时间没在这上面更了然后那个排名就有点在掉&#xff0c;感觉这个机制不太好&#xff0c;更过于频繁很可能只是写流水账&#xff0c;内容质量会大打折扣 好的&#xff0c;我们步…

Git | 分支管理

Git | 分支管理 文章目录 Git | 分支管理1、理解分支2、创建分支&&切换分支3、合并分支4、删除分支5、合并冲突6、分支管理策略合并分支模式实际工作中分支策略bug分支删除临时分支 1、理解分支 分支就类似分身。 在版本回退中&#xff0c;每次提交Git都会将修改以git…

asio之地址

address address作为address_v4和address_v6的包装器 #mermaid-svg-XZWMK64K5NucyHdI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XZWMK64K5NucyHdI .error-icon{fill:#552222;}#mermaid-svg-XZWMK64K5NucyHdI …

简单学量化——pandas的应用26——sort_values函数5

简单学量化——pandas的应用26——sort_values函数5 sort_values是pandas中的排序函数&#xff0c;语法如下&#xff1a; DataFrame.sort_values(by,axis0,ascendingTrue,inplaceFalse,kindquicksort,na_positionlast, ignore_indexFalse,keyNone) 前面我们学习了by、axis、a…

C++之写时复制(CopyOnWrite)

设计模式专栏&#xff1a;http://t.csdnimg.cn/4j9Cq 目录 1.简介 2.实现原理 3.QString的实现分析 3.1.内部结构 3.2.写入时复制 4.示例分析 5.使用场景 6.总结 1.简介 CopyOnWrite (COW) 是一种编程思想&#xff0c;用于优化内存使用和提高性能。COW 的基本思想是&am…

go的编译以及运行时环境

开篇 很多语言都有自己的运行时环境&#xff0c;go自然也不例外&#xff0c;那么今天我们就来讲讲go语言的运行时环境&#xff01; 不同语言的运行时环境对比 我们都知道Java的运行时环境是jvm &#xff0c;javascript的运行时环境是浏览器内核 Java -->jvm javascript…

postgresql 存储过程 批量插入(根据插入的值 动态判断需要插入的字段) 以及 批量更改(根据更改的值 动态判断需要更改的字段)

postgresql 存储过程 循环插入 根据插入的值判断插入相应的字段 在PostgreSQL中&#xff0c;您可以使用PL/pgSQL语言编写函数&#xff0c;该函数可以在循环中执行插入操作&#xff0c;并根据插入的值判断应该插入哪些字段。但是&#xff0c;请注意&#xff0c;PostgreSQL通常不…

FastWiki一分钟本地离线部署本地企业级人工智能客服

介绍 FastWiki是一个开源的企业级人工智能客服系统&#xff0c;它使用了一系列先进的技术和框架来支持其功能。 技术栈 前端框架&#xff1a;React LobeUI TypeScript后端框架&#xff1a;MasaFramework 基于 .NET 8动态函数&#xff1a;基于JavaScript V8引擎实现向量搜索…

物联网配网工具多元化助力腾飞——智能连接,畅享未来

随着物联网技术的迅猛发展&#xff0c;智能插座、蓝牙网关作为其中常见的智能物联设备&#xff0c;无论是功能还是外观都有很大的改进&#xff0c;在智能化越来越普遍的情况下&#xff0c;它们的应用场景也在不断拓宽。对于智能设备而言&#xff0c;配网方式的选择对于设备的成…