一、ToDoList介绍
1.1 ToDoList简介
ToDoList，一个使用 HTML、CSS、Vanilla JavaScript 构建的动态且美观的待办事项列表网站。
1.2 ToDoList特点
- 用户友好: ToDoList应用程序应该有一个直观且易于使用的用户界面，使用户能够轻松添加、编辑和删除任务。
- 支持本地存储: ToDoList应用程序应该支持将任务保存到本地设备，以便用户可以在没有互联网连接的情况下访问和管理任务。
- 显示当前日期和时间: ToDoList应用程序应该显示当前日期和时间，以帮助用户跟踪任务的截止日期和时间。
- 在所有设备上响应: ToDoList应用程序应该是响应式的，可以在不同的设备和屏幕尺寸上正确显示和操作。
- 主题选择: ToDoList应用程序应该提供不同的主题选择，让用户可以根据自己的喜好和风格进行个性化设置。
1.3 ToDoList使用场景
- 个人备忘录
- 个人简单任务管理
- 个人轻量级笔记本
- 个人本地工具库的一员
二、本地环境介绍
2.1 本地环境规划
本次实践为个人测试环境，操作系统版本为centos7.6。
| hostname | 本地P地址 | 操作系统版本 | 内核版本 | node版本 |
|---|---|---|---|---|
| jeven | 192.168.3.166 | centos 7.6 | 3.10.0-957.el7.x86_64 | —— |
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"
AI 代码解读
3.2 检查系统内核版本
检查系统内核版本，当前内核版本为3.10.0-957.el7.x86_64。
[root@jeven ~]# uname -r
3.10.0-957.el7.x86_64
AI 代码解读
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))
AI 代码解读
四、安装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.repoAI 代码解读
sed -i -e '/mirrors.cloud.aliyuncs.com/d' -e '/mirrors.aliyuncs.com/d' /etc/yum.repos.d/CentOS-Base.repo
AI 代码解读
- 检查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
AI 代码解读
4.3 安装httpd
使用yum直接安装httpd服务
yum install httpd -yAI 代码解读
4.4 设置防火墙和selinux
关闭防火墙或放行相关监听端口，如果想要开启防火墙，需放行80端口。
systemctl disable firewalld && systemctl stop firewalld
AI 代码解读
执行以下命令，关闭selinux。
setenforce 0
sed -i 's/SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config
AI 代码解读
4.5 启动httpd服务
- 启动httpd服务
systemctl enable --now httpd
AI 代码解读
- 重启httpd服务
systemctl restart httpdAI 代码解读
- 查看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.
AI 代码解读
五、下载ToDoList软件包
5.1 下载ToDoList
进入网站目录/var/www/html/
[root@jeven ~]# cd /var/www/html/
[root@jeven html]#
AI 代码解读
下载ToDoList源码
git clone https://github.com/tusharnankani/ToDoList.git
AI 代码解读
查看ToDoList源码目录内容
[root@jeven html]# ls ToDoList
assets CODE_OF_CONDUCT.md CONTRIBUTING.md CONTRIBUTORS.md CSS index.html JS LICENSE README.md
AI 代码解读
5.2 重启httpd服务
重启httpd服务
systemctl restart httpdAI 代码解读
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.
AI 代码解读
六、访问ToDoList服务
6.1 访问ToDoList首页
6.2 新建任务
填写任务名称，确定即可，可以对任务进行勾选完成和删除操作。
七、总结
ToDoList是一款简单的任务管理工具，部署非常简单，只需一个web服务器即可在本地快速访问。其界面简洁，操作简单，页面点击反应也十分迅速，使用体验非常好。我们可以将它部署在个人本地服务器上，作为工具库中的一员，以充实自己的工具库。ToDoList适用于日常任务记录和简单的笔记，是一个非常不错的小工具！
