NodeJs实战-待办列表(2)-待办列表增删

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量431 收藏
点赞数
分类专栏： # NodeJS 文章标签： javascript 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/modelmd/article/details/127912730
版权

NodeJs实战-待办列表-增删改查

项目结构

在这里插入图片描述

增加表单提交事件

修改 index.html

  1. 引入 jquery
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  1. 增加添加、完成按钮事件
<script type="text/javascript">
        $(function() {
            $("#add").on('click', function(){
                add();
            });
            $("#complete").on('click', function(){
                complete();
            });
        });

        function add() {
            var item = $("#item_text").val().trim();
            if (item.length == 0) {
                alert('输入数据不能为空');
            }
            $.ajax({
                url: "/add",
                method: 'GET',
                data: {
                    item: item
                },
                success: function(result) {
                    console.log(result);
                }
            });
        }

        function complete() {
            var item = $("#item_text").val().trim();
            if (item.length == 0) {
                alert('输入数据不能为空');
            }
            $.ajax({
                url: "/complete",
                method: 'GET',
                data: {
                    item: item
                },
                success: function(result) {
                    console.log(result);
                }
            });
        }
    </script>

完整的 index.html 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>待办列表</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#add").on('click', function(){
                add();
            });
            $("#complete").on('click', function(){
                complete();
            });
        });

        function add() {
            var item = $("#item_text").val().trim();
            if (item.length == 0) {
                alert('输入数据不能为空');
            }
            $.ajax({
                url: "/add",
                method: 'GET',
                data: {
                    item: item
                },
                success: function(result) {
                    console.log(result);
                }
            });
        }

        function complete() {
            var item = $("#item_text").val().trim();
            if (item.length == 0) {
                alert('输入数据不能为空');
            }
            $.ajax({
                url: "/complete",
                method: 'GET',
                data: {
                    item: item
                },
                success: function(result) {
                    console.log(result);
                }
            });
        }
    </script>
</head>
<body>
    <h1>待办列表</h1>
    <form method="post" >
        <p><input id="item_text" type="text" name="item" /></p>
        <p><input id="add" type="submit" value="添加" /></p>
        <p><input id="complete" type="submit" value="完成" /></p>
    </form>
    <ul><li>%</li></ul>
</body>
</html>
  1. 保存 index.html
  2. 给添加、完成按钮增加点击
  3. 点击添加的时候，执行待办事项添加。点击完成，完成待办事项
  4. 启动服务
F:\Github\Nodejs\todolist>node server.js
Server running at http://127.0.0.1:3000/

在这里插入图片描述

NodeJS 服务端增删改查

修改 server.js

  1. 服务端使用 set 存储待办事项
var todoSet = new Set();
  1. 如何解析 url 参数，使用 url 模块，示例代码如下
F:\Github\Nodejs\todolist>node
Welcome to Node.js v18.12.1.
Type ".help" for more information.
> require('url').parse('http://127.0.0.1:3000/')
Url {
  protocol: 'http:',
  slashes: true,
  auth: null,
  host: '127.0.0.1:3000',
  port: '3000',
  hostname: '127.0.0.1',
  hash: null,
  search: null,
  query: null,
  pathname: '/',
  path: '/',
  href: 'http://127.0.0.1:3000/'
}
> require('url').parse('http://127.0.0.1:3000/com?item=1')
Url {
  protocol: 'http:',
  slashes: true,
  auth: null,
  host: '127.0.0.1:3000',
  port: '3000',
  hostname: '127.0.0.1',
  hash: null,
  search: '?item=1',
  query: 'item=1',
  pathname: '/com',
  path: '/com?item=1',
  href: 'http://127.0.0.1:3000/com?item=1'
}
  1. 服务端处理不同 url 逻辑
    var urlParse = parse(request.url);
	var urlPath = urlParse.pathname;
	switch (urlPath) {
		case '/add':
			var itemData = findItemData(urlParse);
			if (itemData.length == 0) {
				sendMsg(response, '输入数据有误');
			}
			add(itemData);
			break;
		case '/complete':
			var itemData = findItemData(urlParse);
			if (itemData.length == 0) {
				sendMsg(response, '输入数据有误');
			}
			var res = complete(itemData);
			sendMsg(response, res);
			break;
	}
  1. 完整代码
const http = require('http');
const fs = require('fs');
const parse = require('url').parse;

const hostname = '127.0.0.1';
const port = 3000;

var todoSet = new Set();

function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    response.write('Error 404: resource not found.');
    response.end();
}

function sendMsg(response, msg) {
}

function readFile(response, filePath) {
	fs.readFile(filePath, (err, data) => {
		if (err) {
			return send404(response);
		}
		var html = data.toString();
		html = html.replace('%', Array.from(todoSet).join('</li><li>'));
		response.writeHead(200, {'Content-Type': 'text/html'});
		response.end(html);
	});
}

function add(itemData) {
	todoSet.add(itemData);
}

function complete(itemData) {
	// 判断代办事项是否已添加
	if (!todoSet.has(itemData)) {
		return itemData + '待办事项不存在';
	}
	if (todoSet.delete(itemData)) {
		return itemData + '待办事项删除成功';
	}
	return itemData + '待办事项删除失败';
}

function findItemData(urlParse) {
	if (urlParse.query.length > 0) {
		var queryArray = urlParse.query.split('=');
		if (queryArray.length >= 2) {
			return queryArray[1];
		}
	}
	return '';
}

const server = http.createServer((request, response) => {
	var urlParse = parse(request.url);
	var urlPath = urlParse.pathname;
	switch (urlPath) {
		case '/add':
			var itemData = findItemData(urlParse);
			if (itemData.length == 0) {
				sendMsg(response, '输入数据有误');
			}
			add(itemData);
			break;
		case '/complete':
			var itemData = findItemData(urlParse);
			if (itemData.length == 0) {
				sendMsg(response, '输入数据有误');
			}
			var res = complete(itemData);
			sendMsg(response, res);
			break;
	}
	var filePath = 'public/index.html';
    var absPath = './' + filePath;
	readFile(response, absPath);
});

server.listen(port, hostname, () => {
	console.log(`Server running at http://${hostname}:${port}/`)
})

效果图

index.html、server.js 保存好了之后，启动服务

F:\Github\Nodejs\todolist>node server.js
Server running at http://127.0.0.1:3000/

初始页面

在这里插入图片描述

输入 1111，点击添加

列表增加 1111
在这里插入图片描述
再继续增加一个 2222
在这里插入图片描述

输入 1111 点击完成

在这里插入图片描述

Chengdu.S
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
NodeJs-Todo-List：使用NodeJs后端和VueJs前端构建待办事项列表
02-04
项目设置 此应用程序在单个存储库中同时包含后端和前端。...$ cd NodeJs-Todo-List 启动应用程序容器 使用docker-compose启动frontend ， backend和db容器 $ docker-compose up -d 通过浏览器访问应用程序，为
ignite_todo_middlewares:火箭座-点燃-NodeJS-挑战2-使用NodeJS和Express制作的待办事项列表后端
03-22
由NodeJS，Express和Jest组成的待办事项列表后端。 入门 先决条件 node >= 12.0.0 yarn >= 1.22.0 正在安装 在本地克隆此仓库并安装所需的软件包： $ git clone ...
NodeJs实战-待办列表(5)-使用MySQL存储待办事项
modelmd的博客
11-19 526
NodeJs实战-待办列表(5)-使用MySQL存储待办事项
探索Server.js：Node.js的强力服务器解决方案
gitblog_00095的博客
05-11 277
探索Server.js：Node.js的强力服务器解决方案 项目地址:https://gitcode.com/franciscop/server 在快速发展的前端世界中，拥有一个强大且易于使用的后端框架至关重要。今天，我们要向您推荐一款专为Node.js设计的服务器库——Server.js。这个优雅的开源项目不仅简化了服务器设置，还允许开发者将精力集中在核心业务逻辑上，而不是基础设施的细节。 项目...
NodeJs实战-待办列表(3)-前端页面填充待办数据
modelmd的博客
11-18 563
NodeJs实战-待办列表(3)-前端页面填充待办数据
NodeJs实战-待办列表(6)-前端绘制表格显示待办事项详情
modelmd的博客
11-20 728
NodeJs实战-待办列表(6)-前端绘制表格显示待办事项详情
NodeJs实战-待办列表(1)-读取提交表单页面
modelmd的博客
11-16 356
NodeJs实战-待办列表(1)-读取提交表单页面
NodeJs实战-待办列表(7)-connect组件简化代码
modelmd的博客
11-21 352
NodeJs实战-待办列表(7)-connect组件简化代码
NodeJs实战-待办列表(4)-解决待办事项中文乱码问题
modelmd的博客
11-18 427
NodeJs实战-待办列表(4)-解决待办事项中文乱码问题
微信小程序开发实战（第2版）入门--【开发实战（第2版）】
dearmite的专栏
08-13 4709
本系列校训 用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！ 另外，本例中使用的鼠标指针方案是我最常用，最喜欢的方案 在这里插入图片描述 在本文后面的资源下载里 喜欢的朋友还可以自己查到本站的N多毕业设计与课程设计， 如果错误或其它需要请留言!或发邮件至8195819@qq.com
Nodejs实战 —— 测试 Node 程序
df8650171的博客
01-08 506
读 《node.js实战2.0》，进行学习记录总结。 当当网购买链接 豆瓣网1.0链接 测试 Node 程序 本章内容 用 Node 的 assert 模块测试 使用其他断言库 使用 Node 单元测试框架 用 Node 模拟并控制 Web 浏览器 在测试失败时获取更多的信息 添加到 程序中的功能越来越多，出现的 bug 的风险就越高。没经过测试的程序是不完整的，而手动测试既繁琐又容...
React + Node.js 全栈实战教程 - 手把手教你搭建「文件上传」管理后台
蒋川@卡拉云
07-11 1087
本教程手把手带领大家搭建一套通过 React + Node.js + Mongodb 上传文件的后台系统，只要你跟随本教程一步步走，一定能很好的理解整个前后端上传文件的代码逻辑。前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用。当然，本教程还会教给大家如何写一个可以限制上传文件大小、有百分比进度条、可报错、可显示服务器上文件列表、可点击下载文件的前端操作界面。最后完成的上传
rh-nodejs6-nodejs-asn1-0.2.3-2.el7.noarch.rpm
01-03
官方离线安装包，测试可用。使用rpm -ivh [rpm完整包名] 进行安装
cos-nodejs-sdk-v5:腾讯云 COS Nodejs SDK（XML API）
07-23
cos-nodejs-sdk-v5腾讯云 COS Nodejs SDK（）installnpm i cos-nodejs-sdk-v5 --savedemo// 引入模块var COS = require('cos-nodejs-sdk-v5');// 创建实例var cos = new COS({ SecretId: '...
todo-app:待办事项列表管理应用程序
04-28
待办事项列表管理器一个Web应用程序，您可以在其中创建和管理待办事项列表。 它还具有与朋友协作公共任务列表的功能。 检查应用程序。截屏建于Angular 5和Bootstrap 4-前端Node.js和Express.js-后端MongoDB-数据库套...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1138
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 172
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 155
【代码】vue el-select的下拉树形结构。
nodejs­-websocket安装
08-05
要安装nodejs-websocket模块，您可以使用npm进行安装。请按照以下步骤操作： 1. 打开终端或命令提示符，并导航到您的项目目录。 2. 运行以下命令安装nodejs-websocket： ``` npm install nodejs-websocket``` 3. 等待安装完成后，您可以在您的项目中引入和使用nodejs-websocket模块。例如，您可以创建一个名为`server.js`的文件，并编写以下示例代码： ```javascriptconst WebSocket = require('nodejs-websocket'); // 创建WebSocket服务器const server = WebSocket.createServer(function (conn) { console.log('New connection established'); // 监听连接关闭事件 conn.on('close', function (code, reason) { console.log('Connection closed'); }); // 监听接收到消息事件 conn.on('text', function (message) { console.log('Received message:', message); // 发送消息给客户端 conn.sendText('Server received message: ' + message); }); }); // 设置服务器监听的端口const PORT =8080; server.listen(PORT, function () { console.log('Server started and listening on port ' + PORT); }); ``` 这是一个简单的WebSocket服务器示例，它会在控制台上打印连接和接收到的消息，并向客户端发送回复消息。 请根据您的实际需求进行修改和扩展。祝您成功使用nodejs-websocket模块！如果有任何进一步的问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Chengdu.S

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值