TrailBase + Drogon + SolidJS 全栈开发指南

1

环境准备与项目初始化

# 安装 Drogon（需 vcpkg）
vcpkg install drogon drogon[ctl] sqlite3
# 创建 SolidJS 项目（TypeScript 模板）
npx degit solidjs/templates/ts web-frontend
cd web-frontend && npm install
# 下载 Trailbase（v0.4.0+ 支持实时 API）
git clone https://github.com/trailbase/trailbase
cd trailbase && make build

2

后端开发（Drogon + TrailBase）

1. 创建Drogon项目并集成TrailBase

drogon_ctl create project server
cd server/controllers
drogon_ctl create controller -h ApiController

编辑 ApiController.h 定义RESTful路由

2. 实现数据交互逻辑

查询TrailBase数据（通过SQLite API）

void ApiController::asyncHandleHttpRequest(...) {
auto db = drogon::app().getDbClient();// SQLite 连接
auto result = db->execSqlSync("SELECT * FROM data_table");
auto jsonResp = formatResultToJson(result);// 结果转 JSON
callback(HttpResponse::newHttpJsonResponse(jsonResp));
}

实时数据推送（WebSocket + CDC）

void ApiController::handleNewWebSocket(const HttpRequestPtr& req) {
auto ws = WebSocketConnection::newWebSocket();
TrailBase::subscribe("data_table", [ws](const Json::Value& change) {
ws->send(change.toStyledString());// 通过 CDC 推送变更
});
}

3. 启用CORS支持

drogon::app().registerPostHandlingAdvice(
[](const HttpRequestPtr&, const HttpResponsePtr& resp) {
resp->addHeader("Access-Control-Allow-Origin", "*");
resp->addHeader("Access-Control-Allow-Methods", "GET,POST");
}
);

3

前端开发（SolidJS + Solid Router）

1. 配置路由与实时数据绑定

import { Route, Router } from "@solidjs/router";
import { lazy, createSignal, onCleanup } from "solid-js";
const DataView = lazy(() => import("./pages/DataView"));

const routes = [
{ path: "/", component: lazy(() => import("./pages/Home")) },
{ path: "/realtime", component: DataView }
];

// 在入口文件渲染路由
render(() => {routes}, document.getElementById("app"));

2. 实现实时数据订阅组件

export default function DataView() {
const [data, setData] = createSignal([]);
let ws: WebSocket;

onMount(() => {
ws = new WebSocket("ws://localhost:8080/api/subscribe");
ws.onmessage = (e) => {
const change = JSON.parse(e.data);
setData(prev => [...prev, change]);// 增量更新
};
});

onCleanup(() => ws.close());// 清理连接

return {item => {item.message}
};
}

3. 调用Drogon RESTful API

// 查询初始数据
const fetchData = async () => {
const res = await fetch("http://localhost:8080/api/data");
setData(await res.json());
};

4

联调与优化

性能调优

Drogon：设置线程数 app().setThreadNum(std::thread::hardware_concurrency())
TrailBase：启用SQLite WAL模式提升并发：
```
PRAGMA journal_mode=WAL;
```
SolidJS：使用 createMemo 缓存计算密集型结果

实时性验证

修改TrailBase数据，观察前端自动更新（亚毫秒级延迟）

5

部署方案

1. 编译与打包

# Drogon 后端
cd server/build
cmake -DCMAKE_TOOLCHAIN_FILE=[vcpkg]/scripts/buildsystems/vcpkg.cmake ..
make -j$(nproc)

# SolidJS 前端
npm run build# 生成 dist 静态文件

2. 整合运行

# 启动 TrailBase（数据层）
./trailbase --db-path ./data.db

# 启动 Drogon（托管前端静态文件）
./server/bin/server -d ./web-frontend/dist

3. 生产环境建议

Nginx反向代理：配置WebSocket转发（Upgrade头）
进程管理：用systemd或Supervisor守护进程
安全加固：
- Drogon启用HTTPS（app().setSSLFiles("cert.pem", "key.pem")）
- TrailBase配置RBAC列级权限

TrailBase + Drogon + SolidJS 全栈开发指南

技术栈优势

开发步骤详解

环境准备与项目初始化

后端开发（Drogon + TrailBase）

1. 创建Drogon项目并集成TrailBase

2. 实现数据交互逻辑

3. 启用CORS支持

前端开发（SolidJS + Solid Router）

1. 配置路由与实时数据绑定

2. 实现实时数据订阅组件

3. 调用Drogon RESTful API

联调与优化

性能调优

实时性验证

部署方案

1. 编译与打包

2. 整合运行

3. 生产环境建议

扩展功能

类型安全

身份验证

自动化测试

性能基准

技术栈分工