如何在CodeIgniter 3中使用Hotwire？求实现方法及示例

结论：完全可以在CodeIgniter 3中使用Hotwire。Hotwire本质是一套前端交互协议（Turbo + Stimulus），仅要求后端能返回符合规范的HTML响应或Turbo Stream格式内容，并不绑定特定后端框架。下面是具体实现步骤与示例：

一、引入Hotwire前端资源 #

在CodeIgniter 3的全局视图模板（比如application/views/template.php）中添加Turbo和Stimulus的CDN资源：

<!-- 引入Turbo核心库 -->
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/dist/turbo.min.js"></script>
<!-- 引入Stimulus可选，用于增强前端交互 -->
<script src="https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.min.js"></script>
<script>
// 初始化Stimulus（可选）
const application = Stimulus.Application.start()
</script>

二、配置CodeIgniter路由与控制器 #

1. 设置路由 #

在application/config/routes.php中添加相关路由：

$route['tasks'] = 'TasksController/index';
$route['tasks/add'] = 'TasksController/add';
$route['tasks/update/(:num)'] = 'TasksController/update/$1';

2. 创建基础控制器 #

新建application/controllers/TasksController.php，处理页面渲染与Hotwire请求：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class TasksController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url');
        // 模拟任务数据，实际可替换为数据库操作
        if (!isset($_SESSION['tasks'])) {
            $_SESSION['tasks'] = [
                ['id' => 1, 'title' => '完成Hotwire集成', 'completed' => false]
            ];
        }
    }

    // 渲染任务列表页面
    public function index() {
        $data['tasks'] = $_SESSION['tasks'];
        $this->load->view('tasks/index', $data);
    }

    // 添加任务（Turbo Stream响应）
    public function add() {
        if ($this->input->post()) {
            $newTask = [
                'id' => count($_SESSION['tasks']) + 1,
                'title' => $this->input->post('title'),
                'completed' => false
            ];
            $_SESSION['tasks'][] = $newTask;

            // 返回Turbo Stream格式响应，用于无刷新添加任务
            $this->output
                ->set_content_type('text/vnd.turbo-stream.html')
                ->set_output($this->load->view('tasks/add_stream', ['task' => $newTask], true));
        }
    }

    // 切换任务完成状态（Turbo Stream响应）
    public function update($id) {
        foreach ($_SESSION['tasks'] as &$task) {
            if ($task['id'] == $id) {
                $task['completed'] = !$task['completed'];
                break;
            }
        }

        // 返回Turbo Stream格式响应，更新指定任务行
        $this->output
            ->set_content_type('text/vnd.turbo-stream.html')
            ->set_output($this->load->view('tasks/update_stream', ['task' => $task], true));
    }
}

三、创建视图文件 #

1. 任务列表主视图（application/views/tasks/index.php） #

<!DOCTYPE html>
<html>
<head>
    <title>CI3 + Hotwire任务列表</title>
</head>
<body>
    <h1>任务列表</h1>

    <!-- Turbo Frame：用于无刷新提交表单 -->
    <turbo-frame id="new-task-form">
        <form action="<?= site_url('tasks/add') ?>" method="POST" data-turbo-frame="_top">
            <input type="text" name="title" placeholder="输入新任务" required>
            <button type="submit">添加任务</button>
        </form>
    </turbo-frame>

    <!-- 任务列表容器，Turbo Stream将更新此处 -->
    <div id="tasks-list">
        <?php foreach ($tasks as $task): ?>
            <?= $this->load->view('tasks/task_item', ['task' => $task], true) ?>
        <?php endforeach; ?>
    </div>
</body>
</html>

2. 任务项视图（application/views/tasks/task_item.php） #

<div id="task-<?= $task['id'] ?>" class="task-item">
    <input type="checkbox" 
           onclick="fetch('<?= site_url('tasks/update/' . $task['id']) ?>', {method: 'POST'})"
           <?= $task['completed'] ? 'checked' : '' ?>>
    <span><?= $task['title'] ?></span>
</div>

3. 添加任务的Turbo Stream视图（application/views/tasks/add_stream.php） #

<turbo-stream action="append" target="tasks-list">
    <template>
        <?= $this->load->view('tasks/task_item', ['task' => $task], true) ?>
    </template>
</turbo-stream>

4. 更新任务的Turbo Stream视图（application/views/tasks/update_stream.php） #

<turbo-stream action="replace" target="task-<?= $task['id'] ?>">
    <template>
        <?= $this->load->view('tasks/task_item', ['task' => $task], true) ?>
    </template>
</turbo-stream>

四、关键注意事项 #

• 响应格式：处理Turbo Stream请求时，必须设置Content-Type为text/vnd.turbo-stream.html，否则Hotwire无法识别响应。
• 会话处理：CodeIgniter 3的会话默认启用，确保在控制器中正确使用会话存储数据（示例中用会话模拟数据库，实际项目替换为Model操作即可）。
• Turbo表单行为：默认情况下Turbo会拦截表单提交，若需要跳转可设置data-turbo-frame="_top"或禁用Turbo（data-turbo="false"）。

内容的提问来源于stack exchange，提问作者Santo Doni Romadhoni