在本教程中，我們將使用 Lithe 創(chuàng)建一個(gè)功能性的 TodoList 應(yīng)用程序。您將學(xué)習(xí)如何構(gòu)建項(xiàng)目、創(chuàng)建交互式視圖以及實(shí)施 RESTful API 來管理您的任務(wù)。該項(xiàng)目將作為如何使用 PHP 構(gòu)建現(xiàn)代 Web 應(yīng)用程序的絕佳示例。

先決條件

• PHP 7.4 或更高版本
• 已安裝作曲家
• MySQL
• PHP 和 JavaScript 基礎(chǔ)知識(shí)

項(xiàng)目結(jié)構(gòu)

首先，讓我們創(chuàng)建一個(gè)新的 Lithe 項(xiàng)目：

composer create-project lithephp/lithephp todo-app
cd todo-app

設(shè)置數(shù)據(jù)庫

使用以下配置編輯項(xiàng)目根目錄中的 .env 文件：

DB_CONNECTION_METHOD=mysqli
DB_CONNECTION=mysql
DB_HOST=localhost
DB_NAME=lithe_todos
DB_USERNAME=root
DB_PASSWORD=
DB_SHOULD_INITIATE=true

創(chuàng)建遷移

運(yùn)行命令來創(chuàng)建新的遷移：

php line make:migration CreateTodosTable

在 src/database/migrations/ 中編輯生成的遷移文件：

return new class
{
    public function up(mysqli $db): void
    {
        $query = "
            CREATE TABLE IF NOT EXISTS todos (
                id INT(11) AUTO_INCREMENT PRIMARY KEY,
                title VARCHAR(255) NOT NULL,
                completed BOOLEAN DEFAULT FALSE,
                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
            )
        ";
        $db->query($query);
    }

    public function down(mysqli $db): void
    {
        $query = "DROP TABLE IF EXISTS todos";
        $db->query($query);
    }
};

運(yùn)行遷移：

php line migrate

實(shí)施模型

生成一個(gè)新模型：

php line make:model Todo

編輯文件 src/models/Todo.php:

namespace App\Models;

use Lithe\Database\Manager as DB;

class Todo
{
    public static function all(): array
    {
        return DB::connection()
            ->query("SELECT * FROM todos ORDER BY created_at DESC")
            ->fetch_all(MYSQLI_ASSOC);
    }

    public static function create(array $data): ?array
    {
        $stmt = DB::connection()->prepare(
            "INSERT INTO todos (title, completed) VALUES (?, ?)"
        );
        $completed = false;
        $stmt->bind_param('si', $data['title'], $completed);
        $success = $stmt->execute();

        if ($success) {
            $id = $stmt->insert_id;
            return [
                'id' => $id,
                'title' => $data['title'],
                'completed' => $completed
            ];
        }

        return null;
    }

    public static function update(int $id, array $data): bool
    {
        $stmt = DB::connection()->prepare(
            "UPDATE todos SET completed = ? WHERE id = ?"
        );
        $stmt->bind_param('ii', $data['completed'], $id);
        return $stmt->execute();
    }

    public static function delete(int $id): bool
    {
        $stmt = DB::connection()->prepare("DELETE FROM todos WHERE id = ?");
        $stmt->bind_param('i', $id);
        return $stmt->execute();
    }
}

創(chuàng)建控制器

生成一個(gè)新的控制器：

php line make:controller TodoController

編輯文件 src/http/controllers/TodoController.php:

namespace App\Http\Controllers;

use App\Models\Todo;
use Lithe\Http\Request;
use Lithe\Http\Response;

class TodoController
{
    public static function index(Request $req, Response $res)
    {
        return $res->view('todo.index');
    }

    public static function list(Request $req, Response $res)
    {
        $todos = Todo::all();
        return $res->json($todos);
    }

    public static function store(Request $req, Response $res)
    {
        $data = (array) $req->body();
        $todo = Todo::create($data);
        $success = $todo ? true : false;

        return $res->json([
            'success' => $success,
            'message' => $success ? 'Task created successfully' : 'Failed to create task',
            'todo' => $todo
        ]);
    }

    public static function update(Request $req, Response $res)
    {
        $id = $req->param('id');
        $data = (array) $req->body();
        $success = Todo::update($id, $data);

        return $res->json([
            'success' => $success,
            'message' => $success ? 'Task updated successfully' : 'Failed to update task'
        ]);
    }

    public static function delete(Request $req, Response $res)
    {
        $id = $req->param('id');
        $success = Todo::delete($id);

        return $res->json([
            'success' => $success,
            'message' => $success ? 'Task removed successfully' : 'Failed to remove task'
        ]);
    }
}

創(chuàng)建視圖

創(chuàng)建src/views/todo目錄并添加index.php文件：

<!DOCTYPE html>
<html>
<head>
    <title>TodoList with Lithe</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        body {
            min-height: 100vh;
            background-color: #ffffff;
            padding: 20px;
        }

        .container {
            max-width: 680px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        h1 {
            color: #1d1d1f;
            font-size: 34px;
            font-weight: 700;
            margin-bottom: 30px;
        }

        .todo-form {
            display: flex;
            gap: 12px;
            margin-bottom: 30px;
            border-bottom: 1px solid #e5e5e7;
            padding-bottom: 30px;
        }

        .todo-input {
            flex: 1;
            padding: 12px 16px;
            font-size: 17px;
            border: 1px solid #e5e5e7;
            border-radius: 10px;
            background-color: #f5f5f7;
            transition: all 0.2s;
        }

        .todo-input:focus {
            outline: none;
            background-color: #ffffff;
            border-color: #0071e3;
        }

        .add-button {
            padding: 12px 20px;
            background: #0071e3;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .add-button:hover {
            background: #0077ED;
        }

        .todo-list {
            list-style: none;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-radius: 10px;
            margin-bottom: 8px;
            transition: background-color 0.2s;
        }

        .todo-item:hover {
            background-color: #f5f5f7;
        }

        .todo-checkbox {
            width: 22px;
            height: 22px;
            margin-right: 15px;
            cursor: pointer;
        }

        .todo-text {
            flex: 1;
            font-size: 17px;
            color: #1d1d1f;
        }

        .completed {
            color: #86868b;
            text-decoration: line-through;
        }

        .delete-button {
            padding: 8px 12px;
            background: none;
            color: #86868b;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s;
        }

        .todo-item:hover .delete-button {
            opacity: 1;
        }

        .delete-button:hover {
            background: #f5f5f7;
            color: #ff3b30;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #86868b;
        }

        .error {
            color: #ff3b30;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>



<p>Aqui está a tradu??o para o inglês:</p>


<hr>

<h2>
  
  
  Setting Up the Routes
</h2>

<p>Update the src/App.php file to include the TodoList routes:<br>
</p>

<pre class="brush:php;toolbar:false">use App\Http\Controllers\TodoController;

$app = new \Lithe\App;

// Route for the main page
$app->get('/', [TodoController::class, 'index']);

// API routes
$app->get('/todos/list', [TodoController::class, 'list']);
$app->post('/todos', [TodoController::class, 'store']);
$app->put('/todos/:id', [TodoController::class, 'update']);
$app->delete('/todos/:id', [TodoController::class, 'delete']);

$app->listen();

運(yùn)行應(yīng)用程序

要啟動(dòng)開發(fā)服務(wù)器，請運(yùn)行：

php line serve

在瀏覽器中訪問 http://localhost:8000 以查看正在運(yùn)行的應(yīng)用程序。

實(shí)現(xiàn)的功能

我們的 TodoList 具有以下功能：

1. 按時(shí)間倒序列出任務(wù)
2. 添加新任務(wù)
3. 將任務(wù)標(biāo)記為已完成/待處理
4. 刪除任務(wù)
5. 響應(yīng)靈敏且用戶友好的界面
6. 所有操作的視覺反饋
7. 錯(cuò)誤處理

結(jié)論

您現(xiàn)在擁有一個(gè)使用 Lithe 構(gòu)建的功能齊全的 TodoList 應(yīng)用程序。此示例演示了如何使用 PHP 創(chuàng)建現(xiàn)代 Web 應(yīng)用程序，包括：

• 正確的 MVC 代碼結(jié)構(gòu)
• RESTful API 實(shí)現(xiàn)
• 交互式用戶界面
• 數(shù)據(jù)庫集成
• 錯(cuò)誤處理
• 用戶反饋

從這里，您可以通過添加新功能來擴(kuò)展應(yīng)用程序，例如：

• 用戶認(rèn)證
• 任務(wù)分類
• 截止日期
• 過濾和搜索

要繼續(xù)了解 Lithe，請?jiān)L問 Linktree，您可以在其中訪問 Discord、文檔等等！

以上是使用 PHP 和 Lithe 框架創(chuàng)建 TodoList：完整指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！