深圳php电商网站开发,上门做指甲哪个网站,2022年明星百度指数排行,品牌展示设计网站目录结构如下 app.js
// 一.引入模块
var http require(http);// 用于创建 HTTP 服务器和处理 HTTP 请求
var fs require(fs);// 用于读取和写入文件
var url require(url);// 用于解析URL// 创建留言数据对象
var msgs [{ name: 牛二, content: 我是妞儿, cr…目录结构如下 app.js
// 一.引入模块
var http require(http);// 用于创建 HTTP 服务器和处理 HTTP 请求
var fs require(fs);// 用于读取和写入文件
var url require(url);// 用于解析URL// 创建留言数据对象
var msgs [{ name: 牛二, content: 我是妞儿, create_at: 2024-1-04 06:12 },{ name: 张三, content: 我是张三, create_at: 2024-1-22 09:32 },{ name: 里斯, content: 我是里斯, create_at: 2024-2-23 12:28 },{ name: 王五, content: 我是王五, create_at: 2024-4-14 17:11 }
];// 二.创建 HTTP 服务器实例
var server http.createServer();// 三.监听用户请求
server.on(request, function (req, res) {// 获取当前请求地址var currentUrl req.url;//判断页面if (currentUrl /) {// 首页fs模块fs.readFile(./views/index.html, utf8, function (err, data) {if (err) {console.log(err);return;}// res.end(data);// data 是首页所有的 html 代码// 1.将上面的变量数据组装到htmlvar html ;msgs.forEach(function (item, index) {html li classlist-group-item styledisplay: flex; justify-content: space-between; align-items: center;${item.name}: ${item.content}span ${item.create_at}/spanbutton classbtn btn-danger btn-sm onclickdeleteMessage(${index})删除/button/li;});// console.log(html);// 2.重点替换 data 的占位符var htmlData data.replace(^_^, html);// 3.响应替换后的数据res.end(htmlData);// 结束响应并向客户端发送最终的响应内容})} else if (currentUrl /add) {// 添加页fs.readFile(./views/add.html, utf8, function (err, data) {if (err) {console.log(err);return;}res.end(data);})} else if (currentUrl.indexOf(/doadd) 0) {// get 提交 /doadd?namexxxcontentxxx req.url 请求路径需用url模块var parsedUrl new URL(req.url, http://localhost:8080);// 创建新的 URL 对象解析 req.url 来获取客户端请求的 URL如 /add// ht...80 是基础 URL用于解析相对 URL从而得到完整的 URL 地址var paramsObj parsedUrl.searchParams;// 从解析后的 URL 对象中获取查询参数// 格式化日期时间var date new Date();var hours date.getHours();var minutes date.getMinutes();var hoursStr (hours 10 ? 0 : ) hours;var minutesStr (minutes 10 ? 0 : ) minutes;var dateStr date.getFullYear() - (date.getMonth() 1) - date.getDate() hoursStr : minutesStr;var msg {name: paramsObj.get(name),content: paramsObj.get(content),create_at: dateStr};// 理论上是给数据库添加一条数据现在是向数组中压入一条数据msgs.push(msg); // 添加留言对象到留言数组中// 插入成功重定向到首页res.statusCode 302; // 声明重定向res.setHeader(location, /); //设置响应头指定重定向到网站的根目录res.end() // 结束响应并将其发送给客户端} else if (currentUrl.startsWith(/delete)) { // 当前请求的 URL 以 /delete 开头// 解析并删除对应索引var index parseInt(currentUrl.split(/).pop());msgs.splice(index, 1);// 删除成功重定向到首页res.statusCode 302;res.setHeader(location, /);res.end();}else {// 404fs.readFile(./views/404.html, utf8, function (err, data) {if (err) {console.log(err);return;}res.end(data);})}
})// 四.启动服务
server.listen(8080, function () {console.log(启动成功访问http://localhost:8080)
})// 注意
// 终端需要cd转到当前message目录下再node app.js// currentUrl.indexOf(/doadd) 0
// 通过 indexOf() 方法检查当前请求的 URL 是否以 /doadd 开头
// 如果返回 0则表示当前 URL 的开头与 /doadd 完全匹配
// 如果匹配成功条件语句将返回 true否则返回 false
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title留言板/title!-- 引入 Bootstrap 样式表 --link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
/headbody!-- 头部容器 --div classheader container!-- 页面标题栏 --div classpage-headerh1留言板/h1a classbtn btn-success href/add发表留言/a!-- 创建按钮链接到“/add”页设置 Bootstrap 中的成功按钮 --/div/div!-- 留言容器 --div classcomments containerul classlist-group^_^!-- 占位符表示在这里显示留言列表 --/ul/divscriptfunction deleteMessage(index) {if (confirm(确定要删除这条留言吗)) {fetch(/delete/${index}, { method: DELETE }).then(response {if (response.ok) {window.location.reload(); // 删除成功后刷新页面} else {console.error(删除留言失败);}}).catch(error {console.error(删除留言失败, error);});}}// 接受一个要删除的留言的索引参数 index// 函数首先弹出确认对话框询问用户是否确定要删除该留言。// 如果确认则通过 fetch 函数向服务器发送一个 DELETE 请求// 该请求的路径包含了要删除的留言的索引。// 删除成功即响应状态码为 200 OK则刷新页面以展示更新后的留言列表// 删除失败在控制台输出错误信息。/script/body/html
add.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title发表留言/title!-- 将 Bootstrap 的 CSS 文件引入到 HTML 页面中 --link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css/headbody!-- 头部容器 --div classheader container!-- 页面标题栏 --div classpage-headerh1a href/首页/a small发表留言/small/h1/div/div!-- 评论容器 --div classcomments container!-- 创建表单GET 提交到“/doadd”页 --form action/doadd methodgetdiv classform-grouplabel forinput_name昵称/label!-- 昵称输入框设置类型为“name”输入内容的最小和最大长度 --input typename classform-control idinput_name placeholder请输入姓名 minlength2 maxlength10namename/divdiv classform-grouplabel forinput_message留言内容/label!-- 留言内容输入框设置宽度30高度10必填输入内容的最小和最大长度 --textarea classform-control namecontent cols30 rows10 required minlength5maxlength20/textarea/div!-- 提交按钮 --button typesubmit classbtn btn-default发表/button/form/div
/body/html
404.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title404/title
/headbodyh1 styletext-align: center;404!!!!/h1
/body/html
演示图片
