快速开始
机器翻译
本页由英文原文机器翻译而来，尚未经过母语审校，欢迎在 GitHub 上提出修改。内容如有出入，以英文原文为准。
用 5 分钟构建你的第一个 Quantum 应用。
本页的每一步都在 CI 中运行（tests/docs/test_guide_quick_start.py）。
第 1 步：创建一个组件
创建一个名为 counter.q 的文件：
<q:component name="Counter" xmlns:q="https://quantum.lang/ns">
<q:function name="double">
<q:param name="n" type="number" />
<q:return value="{n * 2}" />
</q:function>
<q:set name="count" type="number" value="0" />
<q:set name="count" operation="increment" />
<q:set name="count" operation="increment" />
<q:return value="Count: {count}, doubled: {double(count)}" />
</q:component>Output: Count: 2, doubled: 4
运行它——quantum run 会打印组件返回的值：
quantum run counter.q[SUCCESS] Result: Count: 2, doubled: 4第 2 步：添加一个循环
创建 todo-list.q：
<q:component name="TodoList" xmlns:q="https://quantum.lang/ns">
<q:set name="tasks" type="array" value='["Buy groceries", "Walk the dog", "Write code"]' />
<!-- each q:return adds one item to the result -->
<q:loop type="array" var="task" items="{tasks}">
<q:return value="- {task}" />
</q:loop>
</q:component>Output: ["- Buy groceries", "- Walk the dog", "- Write code"]
循环中的 q:return 不会结束循环：每个值都会被收集起来，循环结束时组件返回这个列表（LOOP-1、LOOP-2）。 一个没有执行任何 q:return 的循环，会让执行继续到它后面的内容。
第 3 步：添加条件
创建 weather.q：
<q:component name="Weather" xmlns:q="https://quantum.lang/ns">
<q:set name="temperature" value="25" type="number" />
<q:if condition="temperature > 30">
<q:return value="It's hot! Stay hydrated." />
</q:if>
<q:elseif condition="temperature > 20">
<q:return value="Nice weather for a walk." />
</q:elseif>
<q:elseif condition="temperature > 10">
<q:return value="Bring a jacket." />
</q:elseif>
<q:else>
<q:return value="Bundle up, it's cold!" />
</q:else>
</q:component>Output: Nice weather for a walk.
第 4 步：提供一个网页
页面放在 components/ 文件夹中；文件名就是 URL。创建 components/index.q：
<q:component name="index" xmlns:q="https://quantum.lang/ns">
<q:set name="items" value='["Apple", "Banana", "Cherry"]' />
<q:set name="a" value="10" type="number" />
<q:set name="b" value="5" type="number" />
<html>
<head><title>My Quantum App</title></head>
<body>
<h1>Welcome to Quantum</h1>
<ul>
<q:loop type="array" var="item" items="{items}">
<li>{item}</li>
</q:loop>
</ul>
<p>{a} + {b} = {a + b}</p>
</body>
</html>
</q:component>在包含 components/ 的文件夹中启动服务器：
quantum start打开 http://localhost:8080。components/about.q 会对应 /about。用 quantum stop 停止服务器。
文件里不要写
<!DOCTYPE html>：.q是 XML，而 DOCTYPE 只能出现在根元素之前。 服务器会在响应中加上它。
第 5 步：读取数据库
创建一个只有一张表的 SQLite 数据库（任何 Python 都可以——Quantum 本来就需要它）：
python -c "import sqlite3, os; os.makedirs('data', exist_ok=True); c = sqlite3.connect('data/app.db'); c.execute('CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)'); c.executemany('INSERT INTO users (name, email) VALUES (?, ?)', [('Ana', 'ana@example.com'), ('Bruno', 'bruno@example.com')]); c.commit()"在 components/ 旁边的 quantum.config.yaml 中声明它：
datasources:
db:
driver: sqlite
database: ./data/app.db创建 components/users.q：
<q:component name="users" xmlns:q="https://quantum.lang/ns">
<q:query name="users" datasource="db">
SELECT id, name, email FROM users ORDER BY name
</q:query>
<html><body>
<h1>{users_result.recordCount} users</h1>
<table>
<q:loop query="users">
<tr><td>{users.name}</td><td>{users.email}</td></tr>
</q:loop>
</table>
</body></html>
</q:component>重启服务器，打开 http://localhost:8080/users。
第 6 步：处理表单
添加一个表单和一个插入一行数据的 q:action——参数都经过声明，所以 SQL 永远不会接触到原始输入。 用下面的内容替换 components/users.q：
<q:component name="users" xmlns:q="https://quantum.lang/ns">
<q:action name="add" method="POST">
<q:param name="name" required="true" minlength="2" />
<q:param name="email" type="email" required="true" />
<q:query name="inserted" datasource="db">
INSERT INTO users (name, email) VALUES (:name, :email)
<q:param name="name" value="{name}" type="string" />
<q:param name="email" value="{email}" type="string" />
</q:query>
<q:redirect url="/users" flash="Added {name}" />
</q:action>
<q:query name="users" datasource="db">
SELECT id, name, email FROM users ORDER BY name
</q:query>
<html><body>
<q:if condition="flash"><p>{flash}</p></q:if>
<table>
<q:loop query="users">
<tr><td>{users.name}</td><td>{users.email}</td></tr>
</q:loop>
</table>
<form method="POST" action="/users">
<input name="name" /> <input name="email" type="email" />
<button>Add</button>
</form>
</body></html>
</q:component>接下来？
你已经学会了基础！接下来可以看看（以下页面为英文）：