在本教程中，我們將使用 Lithe 建立一個工作的 TodoList 應用程式。您將學習如何建立專案、建立互動式視圖以及實作 RESTful API 來管理您的任務。該專案將作為如何使用 PHP 建立現代 Web 應用程式的絕佳範例。
首先，讓我們建立一個新的 Lithe 專案：
composer create-project lithephp/lithephp todo-app cd todo-app
使用以下設定編輯專案根目錄中的 .env 檔案：
DB_CONNECTION_METHOD=mysqli DB_CONNECTION=mysql DB_HOST=localhost DB_NAME=lithe_todos DB_USERNAME=root DB_PASSWORD= DB_SHOULD_INITIATE=true
運行指令來建立新的遷移：
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);
}
};
運行遷移：
php line migrate
產生一個新模型：
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();
}
}
產生一個新的控制器：
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 ? 'Tarefa criada com sucesso' : 'Falha ao criar tarefa',
'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 ? 'Tarefa atualizada com sucesso' : 'Falha ao atualizar tarefa'
]);
}
public static function delete(Request $req, Response $res)
{
$id = $req->param('id');
$success = Todo::delete($id);
return $res->json([
'success' => $success,
'message' => $success ? 'Tarefa removida com sucesso' : 'Falha ao remover tarefa'
]);
}
}
建立src/views/todo目錄並加入index.php檔：
<!DOCTYPE html>
<html>
<head>
<title>TodoList com 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>
<h2>
Configurando as Rotas
</h2>
<p>Atualize o arquivo src/App.php para incluir as rotas da TodoList:<br>
</p>
<pre class="brush:php;toolbar:false">use App\Http\Controllers\TodoController;
$app = new \Lithe\App;
// Rota para a página principal
$app->get('/', [TodoController::class, 'index']);
// Rotas da API
$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();
要啟動開發伺服器，請執行：
php line serve
在瀏覽器中造訪 http://localhost:8000 查看正在執行中的應用程式。
我們的 TodoList 具有以下功能：
您現在擁有一個使用 Lithe 建立的功能齊全的 TodoList 應用程式。此範例示範如何使用 PHP 建立現代 Web 應用程序，包括：
從這裡，您可以透過添加新功能來擴展應用程序，例如：
要繼續了解 Lithe，請前往 Linktree，您可以在其中存取 Discord、文件等！
以上是使用 PHP 和 Lithe 框架建立 TodoList：完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
