一、ToDoList介绍

1.1 ToDoList简介

ToDoList，一个使用 HTML、CSS、Vanilla JavaScript 构建的动态且美观的待办事项列表网站。

1.2 ToDoList特点

• 用户友好: ToDoList应用程序应该有一个直观且易于使用的用户界面，使用户能够轻松添加、编辑和删除任务。
• 支持本地存储: ToDoList应用程序应该支持将任务保存到本地设备，以便用户可以在没有互联网连接的情况下访问和管理任务。
• 显示当前日期和时间: ToDoList应用程序应该显示当前日期和时间，以帮助用户跟踪任务的截止日期和时间。
• 在所有设备上响应: ToDoList应用程序应该是响应式的，可以在不同的设备和屏幕尺寸上正确显示和操作。
• 主题选择: ToDoList应用程序应该提供不同的主题选择，让用户可以根据自己的喜好和风格进行个性化设置。

1.3 ToDoList使用场景

• 个人备忘录
• 个人简单任务管理
• 个人轻量级笔记本
• 个人本地工具库的一员

二、本地环境介绍

2.1 本地环境规划

本次实践为个人测试环境，操作系统版本为centos7.6。

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境；
2.在centos7.6环境下部署ToDoList任务管理工具。

三、检查本地环境

3.1 检查本地操作系统版本

检查本地操作系统版本，当前版本为centos 7.6。

[root@jeven ~]# cat /etc/os-release
NAME="CentOS Linux"
VERSION="7 (Core)"
ID="centos"
ID_LIKE="rhel fedora"
VERSION_ID="7"
PRETTY_NAME="CentOS Linux 7 (Core)"
ANSI_COLOR="0;31"
CPE_NAME="cpe:/o:centos:centos:7"
HOME_URL="https://www.centos.org/"
BUG_REPORT_URL="https://bugs.centos.org/"

CENTOS_MANTISBT_PROJECT="CentOS-7"
CENTOS_MANTISBT_PROJECT_VERSION="7"
REDHAT_SUPPORT_PRODUCT="centos"
REDHAT_SUPPORT_PRODUCT_VERSION="7"

3.2 检查系统内核版本

检查系统内核版本，当前内核版本为3.10.0-957.el7.x86_64。

[root@jeven ~]# uname -r
3.10.0-957.el7.x86_64

3.3 检查端口占用情况

检查默认的80端口，确保80端口没有其它服务占用。

• 例：检查80端口

[root@jeven ~]# ss -tunlp |grep 80
udp    UNCONN     0      0      fe80::8a83:7297:7cb8:9934%ens33:546                  :::*                   users:(("dhclient",pid=119624,fd=5))
tcp    LISTEN     0      128    127.0.0.1:3880                  *:*                   users:(("fastgithub",pid=8948,fd=131))
tcp    LISTEN     0      128       *:6000                  *:*                   users:(("X",pid=10807,fd=6))
tcp    LISTEN     0      128     ::1:3880                 :::*                   users:(("fastgithub",pid=8948,fd=132))
tcp    LISTEN     0      128      :::6000                 :::*                   users:(("X",pid=10807,fd=5))

四、安装httpd软件

4.1 httpd服务介绍

httpd是一个开源的，跨平台的Web服务器软件，全称是HyperText Transfer Protocol Daemon。它是Apache软件基金会的旗舰产品之一，提供了一个稳定、可靠和高效的Web服务器环境，被广泛用于建设和管理各种类型的Web应用。

4.2 检查本地yum仓库

• 配置阿里云的yum仓库镜像源

curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo

sed -i -e '/mirrors.cloud.aliyuncs.com/d' -e '/mirrors.aliyuncs.com/d' /etc/yum.repos.d/CentOS-Base.repo

• 检查yum仓库状态

[root@jeven tmp]# yum repolist all |grep enable
!base/7/x86_64                               CentOS-7 - Base - m enabled: 10,072
!extras/7/x86_64                             CentOS-7 - Extras - enabled:    518
!mysql-connectors-community/x86_64           MySQL Connectors Co enabled:    227
!mysql-tools-community/x86_64                MySQL Tools Communi enabled:    100
!mysql80-community/x86_64                    MySQL 8.0 Community enabled:    425
!updates/7/x86_64                            CentOS-7 - Updates  enabled:  5,061

4.3 安装httpd

使用yum直接安装httpd服务

yum install httpd -y

4.4 设置防火墙和selinux

关闭防火墙或放行相关监听端口，如果想要开启防火墙，需放行80端口。

systemctl disable firewalld && systemctl stop  firewalld

执行以下命令，关闭selinux。

setenforce 0
sed -i 's/SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config

4.5 启动httpd服务

• 启动httpd服务

 systemctl enable --now httpd

• 重启httpd服务

systemctl restart httpd

• 查看httpd服务状态

[root@jeven ~]# systemctl status httpd
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
   Active: active (running) since Wed 2024-01-17 00:22:27 CST; 1h 30min ago
     Docs: man:httpd(8)
           man:apachectl(8)
 Main PID: 27312 (httpd)
   Status: "Total requests: 31; Current requests/sec: 0; Current traffic:   0 B/sec"
    Tasks: 11
   Memory: 4.5M
   CGroup: /system.slice/httpd.service
           ├─27312 /usr/sbin/httpd -DFOREGROUND
           ├─27313 /usr/sbin/httpd -DFOREGROUND
           ├─27314 /usr/sbin/httpd -DFOREGROUND
           ├─27316 /usr/sbin/httpd -DFOREGROUND
           ├─27317 /usr/sbin/httpd -DFOREGROUND
           ├─27524 /usr/sbin/httpd -DFOREGROUND
           ├─27527 /usr/sbin/httpd -DFOREGROUND
           ├─27528 /usr/sbin/httpd -DFOREGROUND
           ├─27529 /usr/sbin/httpd -DFOREGROUND
           ├─27530 /usr/sbin/httpd -DFOREGROUND
           └─27540 /usr/sbin/httpd -DFOREGROUND

Jan 17 00:22:26 jeven systemd[1]: Starting The Apache HTTP Server...
Jan 17 00:22:27 jeven systemd[1]: Started The Apache HTTP Server.

五、下载ToDoList软件包

5.1 下载ToDoList

进入网站目录/var/www/html/

[root@jeven ~]# cd /var/www/html/
[root@jeven html]#

下载ToDoList源码

 git clone https://github.com/tusharnankani/ToDoList.git

查看ToDoList源码目录内容

[root@jeven html]# ls ToDoList
assets  CODE_OF_CONDUCT.md  CONTRIBUTING.md  CONTRIBUTORS.md  CSS  index.html  JS  LICENSE  README.md

5.2 重启httpd服务

重启httpd服务

systemctl restart httpd

5.3 查看httpd服务状态

查看httpd服务状态

[root@jeven html]# systemctl status httpd
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
   Active: active (running) since Wed 2024-01-17 02:07:31 CST; 36s ago
     Docs: man:httpd(8)
           man:apachectl(8)
  Process: 28945 ExecStop=/bin/kill -WINCH ${MAINPID} (code=exited, status=0/SUCCESS)
 Main PID: 28954 (httpd)
   Status: "Total requests: 0; Current requests/sec: 0; Current traffic:   0 B/sec"
    Tasks: 6
   Memory: 2.9M
   CGroup: /system.slice/httpd.service
           ├─28954 /usr/sbin/httpd -DFOREGROUND
           ├─28955 /usr/sbin/httpd -DFOREGROUND
           ├─28956 /usr/sbin/httpd -DFOREGROUND
           ├─28957 /usr/sbin/httpd -DFOREGROUND
           ├─28958 /usr/sbin/httpd -DFOREGROUND
           └─28959 /usr/sbin/httpd -DFOREGROUND

Jan 17 02:07:31 jeven systemd[1]: Starting The Apache HTTP Server...
Jan 17 02:07:31 jeven systemd[1]: Started The Apache HTTP Server.

六、访问ToDoList服务

6.1 访问ToDoList首页

访问地址：http://192.168.3.166/ToDoList，将IP地址替换为自己服务器的IP地址。如果无法访问到ToDoList首页，检查下本地防火墙和selinux是否配置，云服务器则需要配置安全组。

6.2 新建任务

填写任务名称，确定即可，可以对任务进行勾选完成和删除操作。

七、总结

ToDoList是一款简单的任务管理工具，部署非常简单，只需一个web服务器即可在本地快速访问。其界面简洁，操作简单，页面点击反应也十分迅速，使用体验非常好。我们可以将它部署在个人本地服务器上，作为工具库中的一员，以充实自己的工具库。ToDoList适用于日常任务记录和简单的笔记，是一个非常不错的小工具！