终端里的同一个页面

机器翻译

本页由英文原文机器翻译而来，尚未经过母语审校，欢迎在 GitHub 上提出修改。内容如有出入，以英文原文为准。

任务： 在浏览器和终端中使用同一个页面。

yaml

# Recipe: one page, drawn in the browser (quantum start) and in a terminal (quantum console).
paths:
  components: ./components

由核心层 ui:* 标签构成的页面并不绑定于 HTML。quantum start 把它提供给浏览器； quantum console 在终端中绘制它，quantum desktop 则在本地窗口中绘制。终端向同一个服务器请求页面的视图树，并提交同样的动作：name 的规则、提示消息（flash）和会话的工作方式都一样，没有任何转换。

xml

<q:component name="GuestList">
  <q:action name="sign" method="POST">
    <q:param name="name" required="true" minlength="2" maxlength="40" />
    <!-- append to a list that does not exist yet starts one -->
    <q:set name="session.guests" operation="append" value="{name}" />
    <q:redirect url="/" flash="Welcome, {name}!" />
  </q:action>

  <q:set name="guests" type="array" value="{session.guests}" default="[]" />

  <ui:window title="Guest list">
    <ui:vbox gap="md" padding="lg">
      <q:if condition="flash">
        <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
      </q:if>
      <ui:text>{len(guests)} signed so far.</ui:text>
      <ui:form on-submit="sign">
        <ui:hbox gap="sm">
          <ui:input bind="name" placeholder="Your name" grow="true" />
          <ui:button variant="primary">Sign</ui:button>
        </ui:hbox>
      </ui:form>
      <ui:list>
        <q:loop type="array" var="guest" items="{guests}">
          <ui:item>{guest}</ui:item>
        </q:loop>
      </ui:list>
    </ui:vbox>
  </ui:window>
</q:component>

在浏览器中，用 quantum test：

xml

<q:test name="an empty list to start" page="/">
  <test:visit />
  <test:expect text="0 signed so far." />
</q:test>

<q:test name="signing adds the name" page="/">
  <test:submit action="sign" name="Ana" />
  <test:expect redirect="/" flash="Welcome, Ana!" />
  <test:expect text="1 signed so far." />
  <test:expect text="Ana" />
</q:test>

<q:test name="a name that is too short is refused on its field" page="/">
  <test:submit action="sign" name="A" />
  <test:expect error="name" message="Must be at least 2 characters" />
  <test:expect text="0 signed so far." />
</q:test>

text

tests/guests.test.q
  PASS  an empty list to start
  PASS  signing adds the name
  PASS  a name that is too short is refused on its field
3 passed, 0 failed

在终端中， tests/docs/test_cookbook_console.py 在终端渲染器中打开同一个应用。它检查这个测试套件在普通访问时期望的每段文本都出现在终端屏幕上，然后输入一个太短的名字和一个合适的名字，并按下 Sign：终端先显示字段的错误，然后显示提示消息和新名字。

bash

quantum start      # http://localhost:8080
quantum console    # the same page in this terminal

参见 UI-3 和 UI-7。

终端里的同一个页面 ​

终端里的同一个页面