前面几节显示的列表，看不到事项创建时间，完成时间，数据显示比较少。本节增加表格显示这些结构化数据

定义服务器返回的 json 数据

1. 一行数据例子

 		{
            "itemName": "1111",
            "createTime": "2022-11-19 22:06:15",
            "completeTime": "2022-11-19 22:06:29",
            "todoStatus": "已完成"
        }
1
2
3
4
5
6

2. 多行数据放入列表

[
    {
        "itemName": "1111",
        "createTime": "2022-11-19 22:06:15",
        "completeTime": "2022-11-19 22:06:29",
        "todoStatus": "已完成"
    },
    {
        "itemName": "en1111",
        "createTime": "2022-11-19 22:06:20",
        "completeTime": "2022-11-19 22:06:33",
        "todoStatus": "已完成"
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 完整的json 示例

{
    "code": 1,
    "data": [
        {
            "itemName": "1111",
            "createTime": "2022-11-19 22:06:15",
            "completeTime": "2022-11-19 22:06:29",
            "todoStatus": "已完成"
        },
        {
            "itemName": "en1111",
            "createTime": "2022-11-19 22:06:20",
            "completeTime": "2022-11-19 22:06:33",
            "todoStatus": "已完成"
        }
    ],
    "msg": "查询成功"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

前端绘制动态表格

1. 前端增加表格

<table id="todo_table" cellpadding="0" cellspacing="0" border="1">
        <tr id ="todo_header">
            <th>待办事项th>
            <th>创建时间th>
            <th>完成时间th>
            <th>是否已完成th>
            <th>操作th>
        tr>  
table>
1
2
3
4
5
6
7
8
9

2. JQuery 绘制动态表格

      function initUlData(result) {
            if (result.code == '0') {
                alert(result.msg);
            } else {
                if (result.data == null) {
                    alert('服务器返回数据为空');
                    return ;
                }
                var todoHeader = $('#todo_header');
                $('#todo_table').empty();
                $('#todo_table').append(todoHeader);
                result.data.forEach(item => {
                    // $('#todo_ul').append( $('
').html(a));
                    var tr = $('');
                    tr.append($('').html(item.itemName));
                    tr.append($('').html(item.createTime));
                    tr.append($('').html(item.completeTime));
                    tr.append($('').html(item.todoStatus));
                    var delButton = $('');
                    if (item.todoStatus = '已完成') {
                        delButton[0].disabled = true;
                    } else {
                        delButton.on('click', function(){
                            var tdNodes = this.parentNode.childNodes;
                            if (tdNodes.length > 1) {
                                complete(tdNodes[0].textContent);
                            }
                        });
                    }
                    tr.append(delButton);
                    $('#todo_table').append(tr);
                });
                focusItemText();
            }
        }
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

2.1 创建表格行

 var tr = $('');
1

2.2 创建单元格，填充单元格html数据，再添加至行中，最后一个单元格放入按钮

tr.append($('').html(item.itemName));
tr.append($('').html(item.createTime));
tr.append($('').html(item.completeTime));
tr.append($('').html(item.todoStatus));
var delButton = $('');
tr.append(delButton);
1
2
3
4
5
6

2.3 如果该待办事项已完成，按钮设置禁用

if (item.todoStatus = '已完成') {
   delButton[0].disabled = true;
}
1
2
3

2.4 表格添加行数据

$('#todo_table').append(tr);
1

4. 完整的 index.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

后端返回列表数据

后端返回的数据都在 doQuery 接口中封装的，只需要修改该方法

function doQuery(response) {
	db.query('select item_name,create_time,complete_time,' + 
	'case todo_status when 0 then \'未完成\' when 1 then \'已完成\' end as todo_status from t_todo_list', (err, result) => {
		if (err) {
			console.log(err);
			var data = buildData(CODE_ERROR, [], '查询数据库失败');
			sendMsg(response, JSON.stringify(data));
			return;
		}
		var itemList = [];
		for (var i in result) {
			let item = {
				'itemName':'',
				'createTime':'',
				'completeTime':'',
				'todoStatus':''
			}
			item.itemName = result[i].item_name;
			item.createTime = formatDate(result[i].create_time);
			item.completeTime = formatDate(result[i].complete_time);
			item.todoStatus = result[i].todo_status;
			itemList.push(item);
		}
		var data = buildData(CODE_SUCCESS, itemList, '查询成功');
		sendMsg(response, JSON.stringify(data));
	});
}
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

1. 列表需要展示的数据有创建时间、完成时间、事项状态，修改查询SQL

select item_name,create_time,complete_time, case todo_status when 0 then '未完成' when 1 then '已完成' end as todo_status from t_todo_list
1

2. 一行数据的模型如下

			let item = {
				'itemName':'',
				'createTime':'',
				'completeTime':'',
				'todoStatus':''
			}
1
2
3
4
5
6

3. 数据需要格式化处理

function formatDate(date) {
	if (date == null) {
		return "";
	}
	return silly.format(date, 'YYYY-MM-DD HH:mm:ss');
}
1
2
3
4
5
6

调试窗口 中第一行显示的是未格式化之前的 date

完整的 server.js

const http = require('http');
const fs = require('fs');
const parse = require('url').parse;
const mysql = require('mysql');
const silly = require('silly-datetime');
const db = mysql.createPool({
    host: "127.0.0.1",
    port: 3306,
    user: 'root',
    password: 'shootercheng',
    database: "test"
});

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

const CODE_ERROR = 0;
const CODE_SUCCESS = 1;

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('