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

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

    项目结构

    在这里插入图片描述

    增加表单提交事件

    修改 index.html

    1. 引入 jquery
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js">script>

    • 1
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    完整的 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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    1. 保存 index.html
    2. 给添加、完成按钮增加点击
    3. 点击添加的时候，执行待办事项添加。点击完成，完成待办事项
    4. 启动服务
    F:\Github\Nodejs\todolist>node server.js
Server running at http://127.0.0.1:3000/

    • 1
    • 2

    在这里插入图片描述

    NodeJS 服务端增删改查

    修改 server.js

    1. 服务端使用 set 存储待办事项
    var todoSet = new Set();

    • 1
    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    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('
  • ')); 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}/`) })
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    效果图

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

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

    • 1
    • 2

    初始页面

    在这里插入图片描述

    输入 1111，点击添加

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

    输入 1111 点击完成

    在这里插入图片描述

  • 相关阅读:
    为什么短信验证码要设置有效期？
    【AI】如何让两个图案重叠的部分变成透明
    【网络安全产品】---下一代防火墙
    市面上哪种耳机适合跑步用、五款最适合跑步用的蓝牙耳机分享
    在simulink中提取结构体数组的成员
    linux挖矿病毒kthreaddk横行，如何灭掉它？
    线性代数学习笔记5-3：标准正交基、正交矩阵、施密特正交化、QR分解
    从0到1使用 Webpack5 + React + TS 构建标准化应用
    为什么红帽Linux值得学习？红帽Linux是什么
    SQL的语法
  • 原文地址：https://blog.csdn.net/modelmd/article/details/127912730