使用Go語言開發(fā)任務(wù)待辦清單Web應(yīng)用
更新時間：2025年09月16日 08:19:15 作者：程序員愛釣魚
在學(xué)習(xí) Go 的過程中,一個非常適合入門的 Web 項(xiàng)目就是 TodoList（任務(wù)待辦清單）,本文將為大家詳細(xì)介紹一下具體實(shí)現(xiàn)方法,希望對大家有所幫助
在學(xué)習(xí) Go 的過程中，一個非常適合入門的 Web 項(xiàng)目就是 TodoList（任務(wù)待辦清單）。它功能簡單，但涵蓋了 HTTP 路由、數(shù)據(jù)存儲、前后端交互 等核心知識點(diǎn)。本篇我們將實(shí)現(xiàn)一個基于 Go 標(biāo)準(zhǔn)庫 + HTML 模板 的 TodoList 應(yīng)用。
一、項(xiàng)目目標(biāo)
實(shí)現(xiàn)一個簡易的 任務(wù)待辦清單 Web 應(yīng)用：
- 查看任務(wù)列表
- 添加任務(wù)
- 刪除任務(wù)
- 標(biāo)記任務(wù)完成/未完成
- 數(shù)據(jù)持久化（存儲在 JSON 文件）
二、系統(tǒng)設(shè)計(jì)
數(shù)據(jù)結(jié)構(gòu)
type Task struct {
ID int `json:"id"`
Title string `json:"title"`
Completed bool `json:"completed"`
}
路由設(shè)計(jì)
| 路徑 | 方法 | 功能 |
|---|---|---|
| / | GET | 展示任務(wù)列表 |
| /add | POST | 添加任務(wù) |
| /delete?id= | GET | 刪除任務(wù) |
| /toggle?id= | GET | 切換完成狀態(tài) |
存儲方式
- 使用 JSON 文件存儲所有任務(wù) (
tasks.json) - 每次操作時更新文件，保證數(shù)據(jù)持久化
三、完整代碼示例
文件名：main.go
package main
import (
"encoding/json"
"html/template"
"net/http"
"os"
"strconv"
"sync"
)
type Task struct {
ID int `json:"id"`
Title string `json:"title"`
Completed bool `json:"completed"`
}
var (
tasks []Task
dataFile = "tasks.json"
mutex sync.Mutex
)
// 加載任務(wù)
func loadTasks() {
file, err := os.ReadFile(dataFile)
if err != nil {
tasks = []Task{}
return
}
_ = json.Unmarshal(file, &tasks)
}
// 保存任務(wù)
func saveTasks() {
data, _ := json.MarshalIndent(tasks, "", " ")
_ = os.WriteFile(dataFile, data, 0644)
}
// 首頁：顯示任務(wù)列表
func indexHandler(w http.ResponseWriter, r *http.Request) {
tmpl := `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo List</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.done { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<h1>任務(wù)待辦清單 ?</h1>
<form method="POST" action="/add">
<input type="text" name="title" placeholder="輸入任務(wù)..." required>
<button type="submit">添加</button>
</form>
<ul>
{{range .}}
<li>
<a href="/toggle?id={{.ID}}" rel="external nofollow" >
<span class="{{if .Completed}}done{{end}}">{{.Title}}</span>
</a>
<a href="/delete?id={{.ID}}" rel="external nofollow" style="color:red;">[刪除]</a>
</li>
{{end}}
</ul>
</body>
</html>`
t := template.Must(template.New("index").Parse(tmpl))
_ = t.Execute(w, tasks)
}
// 添加任務(wù)
func addHandler(w http.ResponseWriter, r *http.Request) {
if r.Method == http.MethodPost {
title := r.FormValue("title")
if title != "" {
mutex.Lock()
id := 1
if len(tasks) > 0 {
id = tasks[len(tasks)-1].ID + 1
}
tasks = append(tasks, Task{ID: id, Title: title, Completed: false})
saveTasks()
mutex.Unlock()
}
}
http.Redirect(w, r, "/", http.StatusFound)
}
// 刪除任務(wù)
func deleteHandler(w http.ResponseWriter, r *http.Request) {
idStr := r.URL.Query().Get("id")
if id, err := strconv.Atoi(idStr); err == nil {
mutex.Lock()
for i, t := range tasks {
if t.ID == id {
tasks = append(tasks[:i], tasks[i+1:]...)
break
}
}
saveTasks()
mutex.Unlock()
}
http.Redirect(w, r, "/", http.StatusFound)
}
// 切換任務(wù)完成狀態(tài)
func toggleHandler(w http.ResponseWriter, r *http.Request) {
idStr := r.URL.Query().Get("id")
if id, err := strconv.Atoi(idStr); err == nil {
mutex.Lock()
for i, t := range tasks {
if t.ID == id {
tasks[i].Completed = !tasks[i].Completed
break
}
}
saveTasks()
mutex.Unlock()
}
http.Redirect(w, r, "/", http.StatusFound)
}
func main() {
loadTasks()
http.HandleFunc("/", indexHandler)
http.HandleFunc("/add", addHandler)
http.HandleFunc("/delete", deleteHandler)
http.HandleFunc("/toggle", toggleHandler)
println("服務(wù)器啟動：http://localhost:8080")
_ = http.ListenAndServe(":8080", nil)
}
四、運(yùn)行效果
啟動服務(wù)
go run main.go
瀏覽器訪問 http://localhost:8080
- 輸入任務(wù) → 點(diǎn)擊“添加” → 列表中出現(xiàn)
- 點(diǎn)擊任務(wù)文字 → 切換完成狀態(tài)（加刪除線 ?）
- 點(diǎn)擊
[刪除]→ 刪除任務(wù)
數(shù)據(jù)保存在 tasks.json 文件，重啟服務(wù)數(shù)據(jù)仍然存在。
五、擴(kuò)展方向
- 任務(wù)編輯功能：修改任務(wù)標(biāo)題
- 增加截止日期 / 優(yōu)先級
- 搜索 & 分類：已完成 / 未完成分組
- 使用前端框架：Vue/React + Go 后端 API
- 替換存儲：SQLite/MySQL/Postgres
六、總結(jié)
這個 TodoList Web 應(yīng)用示例，涵蓋了：
- Go 標(biāo)準(zhǔn)庫 net/http 的基本用法
- HTML 模板 渲染動態(tài)頁面
- JSON 文件持久化
- 簡單的 并發(fā)控制（sync.Mutex）
是非常好的 Go Web 開發(fā)入門實(shí)戰(zhàn)案例。
到此這篇關(guān)于使用Go語言開發(fā)任務(wù)待辦清單Web應(yīng)用的文章就介紹到這了,更多相關(guān)Go任務(wù)待辦清單應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了go語言心跳超時的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要為大家介紹了Go逃逸分析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Golang 中的 interface 是一種非常重要的特性，可以讓我們寫出更加靈活的代碼。在本篇文章中，我們將深入探討 Golang 中interface 的原理和使用技巧，感興趣的可以了解一下2023-04-04
golang實(shí)現(xiàn)整型和字節(jié)數(shù)組之間的轉(zhuǎn)換操作
這篇文章主要介紹了golang實(shí)現(xiàn)整型和字節(jié)數(shù)組之間的轉(zhuǎn)換操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要介紹了解決golang json解析出現(xiàn)值為空的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要介紹了詳解Golang 中的并發(fā)限制與超時控制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了詳解go語言json的使用技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
cobra既是一個用于創(chuàng)建強(qiáng)大現(xiàn)代CLI應(yīng)用程序的庫，也是一個生成應(yīng)用程序和命令文件的程序。cobra被用在很多go語言的項(xiàng)目中，比如 Kubernetes、Docker、Istio、ETCD、Hugo、Github CLI等等2022-12-12
這篇文章主要為大家介紹了GO文件創(chuàng)建及讀寫操作示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
Golang unsafe.Sizeof函數(shù)代碼示例使用解析
這篇文章主要為大家介紹了Golang unsafe.Sizeof函數(shù)代碼示例使用解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12