XQuery FLWOR + HTML

likuolei2025年11月27日2025年11月27日

用 XQuery FLWOR 直接生成完整、可直接打开的 HTML 页面（2025 最实用写法）

下面所有例子 直接复制到 BaseX、eXist-db、Saxon 或在线编辑器，执行后得到的就是一个完整的 .html 文件，丢到浏览器里立刻好看！

通用 XML 数据（全程使用）

<!-- books.xml -->
<bookstore>
  <book category="web" year="2020">
    <title>XQuery 实战</title>
    <author country="CN">张三</author>
    <author country="CN">李四</author>
    <price>88.00</price>
  </book>
  <book category="web" year="2003">
    <title>XQuery Kick Start</title>
    <author country="US">James McGovern</author>
    <price>49.99</price>
  </book>
  <book category="cooking" year="2005">
    <title>Everyday Italian</title>
    <author country="IT">Giada</author>
    <price>30.00</price>
  </book>
  <book category="children" year="2005">
    <title>Harry Potter</title>
    <author country="UK">J.K. Rowling</author>
    <price>29.99</price>
  </book>
</bookstore>

1. 最简洁完整 HTML 页面（推荐背下来）

xquery version "3.1";
declare namespace output = "http://www.w3.org/2010/xslt-xquery-serialization";
declare option output:method "html";
declare option output:html-version "5.0";
declare option output:include-content-type "yes";

<html>
  <head>
    <title>我的书店 - XQuery 生成</title>
    <style>
      table {{ border-collapse: collapse; width: 100%; font-family: Arial; }}
      th, td {{ border: 1px solid #3498db; padding: 12px; text-align: left; }}
      th {{ background-color: #3498db; color: white; }}
      tr:nth-child(even) {{ background-color: #f2f2f2; }}
      .web {{ background-color: #e8f4fc; }}
      .price-high {{ color: red; font-weight: bold; }}
    </style>
  </head>
  <body>
    <h1>图书列表（共 {count(doc("books.xml")//book)} 本）</h1>

    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>书名</th>
          <th>作者</th>
          <th>分类</th>
          <th>年份</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
      {
        for $book at $i in doc("books.xml")//book
        let $authors := string-join($book/author, " / ")
        order by xs:decimal($book/price) descending
        return
          <tr class="{ $book/@category }">
            <td>{ $i }</td>
            <td>{ $book/title/text() }</td>
            <td>{ $authors }</td>
            <td>{ $book/@category/string() }</td>
            <td>{ $book/@year/string() }</td>
            <td class="{ if ($book/price > 50) then 'price-high' else '' }">
              ￥{ $book/price/text() }
            </td>
          </tr>
      }
      </tbody>
    </table>

    <p style="margin-top:30px; color:gray;">
      本页面完全由 XQuery FLWOR 实时生成于 {current-dateTime()}
    </p>
  </body>
</html>

2. 响应式 + Bootstrap 5（生产最常用）

xquery version "3.1";
declare option output:method "html";
declare option output:html-version "5";

<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>XQuery 生成的 Bootstrap 图书表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body class="bg-light">
    <div class="container py-5">
      <h1 class="mb-4">图书管理系统 <small class="text-muted">— XQuery 驱动</small></h1>

      <div class="row mb-3">
        <div class="col">
          <span class="badge bg-primary fs-6">总计 {count(doc("books.xml")//book)} 本</span>
          <span class="badge bg-success ms-2">平均价格 ￥{format-number(avg(doc("books.xml")//price), '#.00')}</span>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead class="table-dark">
            <tr>
              <th>#</th>
              <th>书名</th>
              <th>作者</th>
              <th>分类</th>
              <th>价格</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>{
            for $b at $n in doc("books.xml")//book
            let $authors := string-join($b/author ! concat(., '(', @country, ')'), '，')
            order by xs:decimal($b/price) descending
            return
              <tr>
                <th scope="row">{ $n }</th>
                <td><strong>{ $b/title/text() }</strong></td>
                <td>{ $authors }</td>
                <td><span class="badge bg-info">{ $b/@category/string() }</span></td>
                <td>
                  <span class="text-{ if ($b/price > 60) then 'danger' else 'success' }">
                    ￥{ $b/price/text() }
                  </span>
                </td>
                <td>
                  <button class="btn btn-sm btn-outline-primary">查看</button>
                  <button class="btn btn-sm btn-outline-warning">编辑</button>
                </td>
              </tr>
          }</tbody>
        </table>
      </div>
    </div>
  </body>
</html>

3. 生成多个页面 + 导航（常见网站生成）

(: 生成 index.html + 按分类分页面 :)
let $categories := distinct-values(doc("books.xml")//book/@category)

return (
  (: 1. 主页 :)
  file:write("/output/index.html",
    <html>...（上面 Bootstrap 示例）...</html>
  ),

  (: 2. 按分类生成子页面 :)
  for $cat in $categories
  let $books := doc("books.xml")//book[@category = $cat]
  return file:write(concat("/output/", $cat, ".html"),
    <html>
      <head><title>{$cat} 分类图书</title></head>
      <body>
        <h1>{$cat} 类图书（共 {count($books)} 本）</h1>
        <ul>{
          for $b in $books
          return <li>{ $b/title/text() } - ￥{ $b/price }</li>
        }</ul>
        <a href="index.html">返回首页</a>
      </body>
    </html>
  )
)

4. 一键保存为完整 HTML 文件（BaseX 里直接运行）

let $html := 
<html>......（上面任意一个完整例子）</html>

return file:write-binary("D:/my-books.html", $html)

小结：XQuery 生成 HTML 的最强优势

100% 服务端生成，无需任何前端框架
数据与展示完全分离
支持复杂排序、分组、分页、条件高亮
可直接对接任何 XML/JSON 数据源
金融、出版、政府报表系统仍在大量使用这种模式

把上面任意一个例子保存为 .xq 文件，用 BaseX 运行 → 点 “Save” → 得到完美 HTML，拖进浏览器直接用！

想要我给你一个完整可下载的“XQuery 静态网站生成器”模板（含 CSS、JS、分页、搜索）吗？一句话我立刻打包发你！

likuolei

网站 http://yingjuxia.com

文章已创建 2783

发表回复取消回复

返回顶部