NodeJs实战-待办列表(3)-前端页面填充待办数据

原创 已于 2022-11-19 14:22:19 修改 · 664 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #ajax

于 2022-11-18 12:19:32 首次发布
本文介绍了一个使用Node.js实现的待办事项列表应用。该应用通过前后端分离技术，利用Ajax进行数据交互，实现了待办事项的添加、查询及完成等功能。前端采用jQuery操作DOM元素，后端提供JSON数据接口。

NodeJs实战-待办列表3-前端页面填充待办数据

为啥在前端填充待办数据？

第2节的页面数据在后台填充的，这样有个问题，每次待办列表发生变化，都需要重新返回页面，导致每次更新待办都要返回整个页面

如何在前端填充待办数据？

需要了解的知识

  1. ajax 发送http请求
  2. jQuery操作DOM元素增删改查

页面修改

    • 标签增加 id，后续操作DOM时需要使用这个id 
<ul id="todo_ul"></ul>
  1. 页面初始化的时候，使用 ajax 发送请求，获取后端服务的待办数据
        function init() {
            $.ajax({
                url: "/query",
                method: 'GET',
                success: function(result) {
                    initUlData(result);
                }
            });
        }
  1. 服务端返回 result 数据，前端页面绘制填充待办数据
        function initUlData(result) {
            if (result.code == '0') {
                alert(result.msg);
            } else {
                $('#todo_ul').empty();
                if (result.data == null) {
                    alert('服务器返回数据为空');
                    return ;
                }
                result.data.forEach(a => {
                    $('#todo_ul').append( $('<li></li>').html(a));
                });
            }
        }
  1. 页面初始化的时候调用 init() 方法
$(function() {
   init();
}
  1. 完整的 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() {
            init();
            $("#add").on('click', function(){
                add();
            });
            $("#complete").on('click', function(){
                complete();
            });
        });

        
        function init() {
            $.ajax({
                url: "/query",
                method: 'GET',
                success: function(result) {
                    initUlData(result);
                }
            });
        }

        function add() {
            var item = $("#item_text").val().trim();
            if (item.length == 0) {
                alert('输入数据不能为空');
            }
            $.ajax({
                url: "/add",
                method: 'GET',
                data: {
                    item: item
                },
                success: function(result) {
                    initUlData(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) {
                    initUlData(result);
                }
            });
        }

        function initUlData(result) {
            if (result.code == '0') {
                alert(result.msg);
            } else {
                $('#todo_ul').empty();
                if (result.data == null) {
                    alert('服务器返回数据为空');
                    return ;
                }
                result.data.forEach(a => {
                    $('#todo_ul').append( $('<li></li>').html(a));
                });
                focusItemText();
            }
        }

        function focusItemText() {
            $('#item_text').val('');
            $('#item_text').focus();
        }
    </script>
</head>
<body>
    <h1>待办列表</h1>
    <form method="post" >
        <p><input id="item_text" type="text" name="item" /></p>
        <p><input id="add" type="button" value="添加" /></p>
        <p><input id="complete" type="button" value="完成" /></p>
    </form>
    <ul id="todo_ul"></ul>
</body>
</html>

后端服务封装数据返回

后端服务用json数据返回给前端，json结构清晰，前端解析json比较方便。

server.js 修改

  1. 增加对象用于存储返回数据
let retData = {
	'code':'',
	'data': [],
	'msg':''
}

如何把对象变成字符串？
打开浏览器开发者工具 console 试试
在这里插入图片描述
2. 增加服务器输出json方法

function sendMsg(response, msg) {
	response.writeHead(200, {'Content-Type': 'application/json;charset=UTF-8'});
    response.write(msg);
    response.end();
}

注意：需要指定 Content-Type 为 application/json

  1. 修改 readFile 逻辑，不需要填充数据了，刷新才返回页面
function readFile(response, filePath) {
	fs.readFile(filePath, (err, data) => {
		if (err) {
			return send404(response);
		}
		var html = data.toString();
		response.writeHead(200, {'Content-Type': 'text/html'});
		response.end(html);
	});
}
  1. 增加 /query，/ 的执行逻辑方法
const server = http.createServer((request, response) => {
	var urlParse = parse(request.url);
	var urlPath = urlParse.pathname;
	switch (urlPath) {
		case '/':
			var filePath = 'public/index.html';
    		var absPath = './' + filePath;
			readFile(response, absPath);
			break;
		case '/query':
			sendMsg();
			break;
		case '/add':
			sendMsg();
			break;
		case '/complete':
			sendMsg();
			break;
	}
	
});

服务端修改成只有读取首页的时候才加载 HTML 页面，访问其它地址就返回 json 数据

  1. 完整的 server.js 代码
const http = require('http');
const fs = require('fs');
const parse = require('url').parse;

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

const CODE_ERROR = 0;
const CODE_SUCCESS = 1;

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) {
	response.writeHead(200, {'Content-Type': 'application/json;charset=UTF-8'});
    response.write(msg);
    response.end();
}

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 true;
	}
	return itemData + '-待办事项删除失败';
}

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

function buildData(code, data, msg) {
    // 返回数据
	let retData = {
		'code':'',
		'data': [],
		'msg':''
	}
	retData.code = code;
	retData.data = data;
	retData.msg = msg;
	return retData;
}

const server = http.createServer((request, response) => {
	var urlParse = parse(request.url);
	var urlPath = urlParse.pathname;
	var itemData;
	if (urlPath == '/add' || urlPath == '/complete') {
		itemData = findItemData(urlParse);
		if (itemData.length == 0) {
			var data = buildData(CODE_ERROR, [], '输入数据有误');
			return sendMsg(response, JSON.stringify(data));
		}
	}
	switch (urlPath) {
		case '/':
			var filePath = 'public/index.html';
    		var absPath = './' + filePath;
			readFile(response, absPath);
			break;
		case '/query':
			var data = buildData(CODE_SUCCESS, Array.from(todoSet), '页面初始化');
			sendMsg(response, JSON.stringify(data));
			break;
		case '/add':
			add(itemData);
			var data = buildData(CODE_SUCCESS, Array.from(todoSet), '添加成功');
			sendMsg(response, JSON.stringify(data));
			break;
		case '/complete':
			var res = complete(itemData)
			if (res == true) {
				var data = buildData(CODE_SUCCESS, Array.from(todoSet), '待办已完成');
				return sendMsg(response, JSON.stringify(data)); 
			}
			var data = buildData(CODE_ERROR, [], res);
			sendMsg(response, JSON.stringify(data));
			break;
	}
});

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

效果图

执行 node server.js 启动服务

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

初始化页面

在这里插入图片描述

添加待办事项

  1. 添加 111
  2. 添加 en111
  3. 添加 中文111
    在这里插入图片描述
    发现有个小问题，中文乱码了，后续处理

完成待办事项

  1. 完成 111
  2. 完成 中文111
    在这里插入图片描述
Node.js前端注册页面
CodeWhizZ的博客
10-05 108
接下来，我们创建一个新的Node.js项目，并在项目文件夹中打开终端。路由中，我们从请求的body中获取用户的姓名、电子邮件和密码，并可以在此处执行注册逻辑，例如将用户信息保存到数据库。在上面的代码中，我们创建了一个简单的HTML表单，其中包含用于输入姓名、电子邮件和密码的输入字段。在上面的代码中，我们引入了Express.js，创建了一个新的应用程序，并设置了一些中间件。，这与我们在Node.js服务器中定义的路由相对应。最后，我们设置服务器监听在端口3000上，并在控制台输出服务器的运行信息。
前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表 (To-Do List)
qq_73704268的博客
01-23 1541
实现了一个包括等操作的 To-Do List，涵盖了常见的 DOM 操作及事件绑定。目的为了掌握 JavaScript 操作 DOM 的技巧，项目还可用于实际开发中的简单任务管理工具。
待办事项列表前端
02-15
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESL
待办事项前端
03-04
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpac
NodeJs实战-待办列表(6)-前端绘制表格显示待办事项详情
modelmd的博客
11-20 932
NodeJs实战-待办列表(6)-前端绘制表格显示待办事项详情
php nodejs 前台,NodeJS之前端注册页面
weixin_39625162的博客
03-12 123
本文主要给大家介绍了NodeJS之前端注册页面的相关知识，文中通过示例代码介绍的非常详细，对大家学习具有一定的参考学习价值，希望能帮助到大家。app.js文件为：//应用程序的启动入口文件//加载模块var express = require('express'); //加载express模块var swig = require('swig'); //加载模板处理模块var app = expre...
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）前端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有...
NodeJs-Todo-List：使用NodeJs后端和VueJs前端构建待办事项列表
02-04
项目设置 此应用程序在单个存储库中同时包含后端和前端。...$ cd NodeJs-Todo-List 启动应用程序容器 使用docker-compose启动frontend ， backend和db容器 $ docker-compose up -d 通过浏览器访问应用程序，为
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）后端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有...
ignite_todo_middlewares:火箭座-点燃-NodeJS-挑战2-使用NodeJS和Express制作的待办事项列表后端
03-22
由NodeJS，Express和Jest组成的待办事项列表后端。 入门 先决条件 node >= 12.0.0 yarn >= 1.22.0 正在安装 在本地克隆此仓库并安装所需的软件包： $ git clone ...
nodejs-sample:带有 nodejs 和 angularjs 的小型待办事项应用程序
06-19
nodejs-示例 带有 nodejs 和 angularjs 的小型待办事项应用程序 网站： : 应用程序接口 ＃＃＃用户 GET : /users ，返回现有用户名列表。 响应示例： ["bapt", "roger"] POST: /user ，创建一个用户。 请求示例...
网页表单自动填报工具
02-19
风越网页表单批量自动填写工具可自动分析网页中表单已经填写的内容,保存为填表规则,以后填表时,只需调用此规则即可。
前端开发中，会遇到字符串填充的问题，padStart() 和 padEnd()
lzfengquan的博客
10-11 550
如图显示要求 原本是直接选择时间就没问题了，但是又改变了需求，就是选择时间后可以选择批次号， 有两种方法，可以做。先了解需要用到的js 语法 第一种 map 循环 定义一个方法名字，一会方便调用 const hourPici = new Array(24).fill(1).map((item,index)=>{ return { value: (index+1).toString().padStart(2,'0'), label: (index+1).toString().pad.
前端必知必会-CSS填充属性padding
qq_24018193的博客
08-13 980
本文介绍了的CSS填充属性padding使用，如有问题欢迎私信和评论。
【前端】利用JavaScript构建一个基本的待办事项应用
最新发布
L10131的博客
02-09 568
在日常生活中，人们或多或少会使用手机软件来记录自己的待办事项，今天，我们将构建一个简单但实用的待办事项应用，用户可以通过它来添加任务、删除任务，并进行任务的上下移动来进行优先级的排序。
E01-前端整合：【案例】添加数据页面
m0_58086930的博客
10-06 345
前端整合：【案例】添加数据页面
前端入门：HTML（css轮廓，填充，宽高）
yscy0801的博客
04-28 538
1.注意：outline中，out-style是必须要设置的，格式为：
47.(前端)用户列表的数据填充
m0_63953077的博客
10-22 663
前端的element-ui表格数据填充
在Vue3中实现一个简单待办事项应用
有我更精彩的博客
08-24 1383
在这篇教程中，我们使用Vue 3和setup语法糖实现了一个简单的待办事项应用。在这个过程中，我们学习了如何创建组件、使用Composition API的setup函数来管理状态，以及如何通过事件机制在组件之间进行通信。通过这个项目，您可以奠定对Vue 3开发的基本理解，未来可以扩展更多功能，例如持久化存储、编辑待办事项等。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Chengdu.S

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

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

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

打赏作者

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

抵扣说明：

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

余额充值