哔哔老哥

  • 主要技术组成
  • 开发流程概述
  • 1. 准备数据
  • 2. 构建 SQLite3 数据库
  • 3. 构建 Astro 项目
  • 4. 构建和部署
  • 优化和扩展功能
  • 首页
  • 人文类
  • 科技类
  • 哔哔机
  • 关于博客
  • 友情链接
  • 文章归档
  • 读者墙

【AI】astro+sqlite3开发一个唐诗三百首的网站

  • aikksong
  • 2024-11-08
  • 0

本篇文章将记录一个 Astro 和 SQLite3 开发 唐诗三百首 网站的节点操作。

主要技术组成

  1. Astro：
  • 静态页面生成：Astro 适合构建静态网站，通过组件化开发和预渲染生成高效的静态页面，
    非常适合展示唐诗三百首的内容。
  • 支持多种前端框架：Astro 可以和 React、Vue、Svelte 等前端框架一起使用，
    您可以根据需要选择适合的框架进行页面开发。
  1. SQLite3：
  • 轻量级数据库：SQLite3 是一个嵌入式数据库，存储唐诗三百首的诗词和相关信息非常合适，
    尤其是当数据量较小的时候。
  • 数据存储：您可以将唐诗三百首的诗词、作者、朝代等信息存储到 SQLite 数据库中，
    然后进行查询和展示。

开发流程概述

1. 准备数据

您需要准备唐诗三百首的数据，通常每首唐诗包含以下信息：

  • 诗词的标题（如《静夜思》）
  • 作者（如李白）
  • 朝代（如唐代）
  • 诗词内容
  • 相关的解释和注释（可选）

这些数据可以存储在一个 SQLite 数据库中。比如，一个简单的数据库表结构如下：

<span class="line"><span style="color: #D8DEE9">CREATE</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">TABLE</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">poems</span><span style="color: #D8DEE9FF"> (</span><span style="color: #81A1C1"><br></span><span style="color: #D8DEE9FF">  id INTEGER PRIMARY KEY AUTOINCREMENT,</span><span style="color: #81A1C1"><br></span><span style="color: #D8DEE9FF">  title TEXT,</span><span style="color: #81A1C1"><br></span><span style="color: #D8DEE9FF">  author TEXT,</span><span style="color: #81A1C1"><br></span><span style="color: #D8DEE9FF">  dynasty TEXT,</span><span style="color: #81A1C1"><br></span><span style="color: #D8DEE9FF">  content TEXT,</span><span style="color: #81A1C1"><br></span><span style="color: #D8DEE9FF">  notes TEXT</span><span style="color: #81A1C1"><br></span><span style="color: #D8DEE9FF">);</span></span>

2. 构建 SQLite3 数据库

将唐诗三百首的数据导入 SQLite 数据库。可以通过脚本或工具将数据从 CSV 或其他格式导入到 SQLite 中。也可以手动插入数据。

3. 构建 Astro 项目

  1. 初始化 Astro 项目：
    在命令行中创建一个新的 Astro 项目：
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #D8DEE9">npm</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">init</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">astro</span></span>
  1. 安装 SQLite3 库：
    如果您打算在服务器端使用 SQLite3（例如，您希望在构建过程中从数据库中提取数据），可以安装 SQLite3 的 Node.js 客户端：
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #D8DEE9">npm</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">install</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">sqlite3</span></span>
  1. 创建数据处理脚本：
    在 Astro 项目中创建一个 Node.js 脚本，连接到 SQLite3 数据库并提取唐诗数据。可以通过 getStaticPaths 和 getStaticProps 等方法在构建时提取数据并将其传递给页面组件。 例如，创建一个脚本从数据库中查询唐诗数据：
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">sqlite3</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">require</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">sqlite3</span><span style="color: #ECEFF4">'</span><span style="color: #D8DEE9FF">)</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">verbose</span><span style="color: #D8DEE9FF">()</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">db</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">new</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">sqlite3</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">Database</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">./poems.db</span><span style="color: #ECEFF4">'</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getPoems</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">()</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=></span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">     </span><span style="color: #81A1C1">return</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">new</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">Promise</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">resolve</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">reject</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=></span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">       </span><span style="color: #D8DEE9">db</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">all</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">SELECT * FROM poems</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">err</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">rows</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=></span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">         </span><span style="color: #81A1C1">if</span><span style="color: #D8DEE9FF"> (</span><span style="color: #D8DEE9">err</span><span style="color: #D8DEE9FF">) </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">           </span><span style="color: #88C0D0">reject</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">err</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">         </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">else</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">           </span><span style="color: #88C0D0">resolve</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">rows</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">         </span><span style="color: #ECEFF4">}</span></span>
<span class="line"><span style="color: #D8DEE9FF">       </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">     </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #ECEFF4">}</span><span style="color: #81A1C1">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #8FBCBB">module</span><span style="color: #ECEFF4">.</span><span style="color: #8FBCBB">exports</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">getPoems</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span><span style="color: #81A1C1">;</span></span>
  1. 生成静态页面：
    在 Astro 中，您可以使用获取到的诗词数据生成静态页面。假设 getPoems 函数返回一个包含所有唐诗的数组，您可以在页面组件中通过 Astro.fetchContent 或 getStaticProps 来加载和渲染数据。 例如，创建一个 PoemPage.astro 页面来展示每一首诗：
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1">---</span></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1">import</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">getPoems</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">from</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">../scripts/poemDatabase.js</span><span style="color: #ECEFF4">'</span><span style="color: #81A1C1">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">poems</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">await</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getPoems</span><span style="color: #D8DEE9FF">()</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1">---</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1"><html></span></span>
<span class="line"><span style="color: #D8DEE9FF">     </span><span style="color: #81A1C1"><head></span></span>
<span class="line"><span style="color: #D8DEE9FF">       </span><span style="color: #81A1C1"><title></span><span style="color: #D8DEE9FF">唐诗三百首</span><span style="color: #81A1C1"></title></span></span>
<span class="line"><span style="color: #D8DEE9FF">     </span><span style="color: #81A1C1"></head></span></span>
<span class="line"><span style="color: #D8DEE9FF">     </span><span style="color: #81A1C1"><body></span></span>
<span class="line"><span style="color: #D8DEE9FF">       </span><span style="color: #81A1C1"><h1></span><span style="color: #D8DEE9FF">唐诗三百首</span><span style="color: #81A1C1"></h1></span></span>
<span class="line"><span style="color: #D8DEE9FF">       </span><span style="color: #81A1C1"><ul></span></span>
<span class="line"><span style="color: #D8DEE9FF">         </span><span style="color: #81A1C1">{</span><span style="color: #D8DEE9">poems</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">map</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">poem</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=></span><span style="color: #D8DEE9FF"> (</span></span>
<span class="line"><span style="color: #D8DEE9FF">           </span><span style="color: #81A1C1"><li></span></span>
<span class="line"><span style="color: #D8DEE9FF">             </span><span style="color: #81A1C1"><h2>{</span><span style="color: #D8DEE9">poem</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">title</span><span style="color: #81A1C1">}</h2></span></span>
<span class="line"><span style="color: #D8DEE9FF">             </span><span style="color: #81A1C1"><p><strong></span><span style="color: #D8DEE9FF">作者：</span><span style="color: #81A1C1"></strong>{</span><span style="color: #D8DEE9">poem</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">author</span><span style="color: #81A1C1">}</p></span></span>
<span class="line"><span style="color: #D8DEE9FF">             </span><span style="color: #81A1C1"><p>{</span><span style="color: #D8DEE9">poem</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">content</span><span style="color: #81A1C1">}</p></span></span>
<span class="line"><span style="color: #D8DEE9FF">           </span><span style="color: #81A1C1"></li></span></span>
<span class="line"><span style="color: #D8DEE9FF">         ))</span><span style="color: #81A1C1">}</span></span>
<span class="line"><span style="color: #D8DEE9FF">       </span><span style="color: #81A1C1"></ul></span></span>
<span class="line"><span style="color: #D8DEE9FF">     </span><span style="color: #81A1C1"></body></span></span>
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #81A1C1"></html></span></span>

4. 构建和部署

  1. 构建站点：
    在开发过程中，您可以使用 Astro 提供的开发服务器来预览站点。完成开发后，执行以下命令构建静态站点：
<span class="line"><span style="color: #D8DEE9FF">   </span><span style="color: #D8DEE9">npm</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">run</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">build</span></span>
  1. 部署站点：
    完成站点构建后，您可以将其部署到任何静态网站托管平台（如 Vercel、Netlify、GitHub Pages）进行在线展示。

优化和扩展功能

  • 分页功能：由于唐诗三百首可能有较多的内容，您可以实现分页功能，让用户能够分页浏览每一首诗。
  • 搜索功能：您可以为诗词提供搜索功能，基于作者、标题、内容等字段进行检索。SQLite 支持全表搜索，但对于更复杂的搜索需求，可以考虑引入全文索引。
  • 详细页面：为每首诗提供详细页面，展示更多的诗词背景、注释、历史等信息。
  • 移动优化：使用 CSS 和前端框架（如 TailwindCSS 或 Bootstrap）优化移动端页面显示，提升用户体验。
© 2025 哔哔老哥
Theme by Wing
  • {{ item.name }}
  • {{ item.name }}