能否搭建无需Web服务器、可访问SQLite.db的本地动态网站？

核心技术选择 #

用SQL.js——纯JavaScript实现的SQLite引擎，能直接在浏览器里读取本地.db文件，完全适配你的无服务器本地运行需求，不需要后端服务器。

步骤拆解 #

1. 整理文件结构 #

按以下结构摆放文件，方便本地访问：

你的故事文件夹/
├── index.html          # 作者列表首页
├── author-stories.html # 作者专属故事列表页
├── sql.js              # 下载SQL.js编译好的核心JS文件
├── stories.db          # 你的SQLite数据库文件
└── stories/            # 存放所有故事文件的文件夹

2. 实现作者列表页（index.html） #

核心逻辑：通过JS读取数据库，提取所有作者并生成可跳转的链接，点击后携带作者名参数跳转到对应故事列表页。
示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>作者列表</title>
</head>
<body>
    <h1>故事作者列表</h1>
    <div id="author-list"></div>

    <script src="sql.js"></script>
    <script>
        // 加载本地数据库文件
        fetch('stories.db')
            .then(res => res.arrayBuffer())
            .then(buffer => {
                const db = new SQL.Database(new Uint8Array(buffer));
                // 查询所有不重复的作者
                const queryResult = db.exec('SELECT DISTINCT author FROM stories');
                const authorContainer = document.getElementById('author-list');
                
                if (queryResult.length > 0) {
                    queryResult[0].values.forEach(item => {
                        const authorName = item[0];
                        // 创建跳转链接，通过URL参数传递作者名
                        const link = document.createElement('a');
                        link.href = `author-stories.html?author=${encodeURIComponent(authorName)}`;
                        link.textContent = authorName;
                        link.style.display = 'block';
                        link.style.margin = '8px 0';
                        authorContainer.appendChild(link);
                    });
                }
            });
    </script>
</body>
</html>

3. 实现作者故事列表页（author-stories.html） #

核心逻辑：读取URL中的作者名参数，查询该作者的所有故事，生成指向本地故事文件的链接。
示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>作者故事列表</title>
</head>
<body>
    <h1 id="author-title"></h1>
    <div id="story-list"></div>

    <script src="sql.js"></script>
    <script>
        // 获取URL里的作者名参数
        const urlParams = new URLSearchParams(window.location.search);
        const authorName = decodeURIComponent(urlParams.get('author'));
        document.getElementById('author-title').textContent = `${authorName}的故事`;

        // 加载数据库并查询对应作者的故事
        fetch('stories.db')
            .then(res => res.arrayBuffer())
            .then(buffer => {
                const db = new SQL.Database(new Uint8Array(buffer));
                // 用参数绑定避免SQL注入（本地场景虽无风险，但养成规范）
                const queryResult = db.exec(`SELECT title, file_path FROM stories WHERE author = ?`, [authorName]);
                const storyContainer = document.getElementById('story-list');
                
                if (queryResult.length > 0) {
                    queryResult[0].values.forEach(item => {
                        const [storyTitle, filePath] = item;
                        const link = document.createElement('a');
                        // 直接链接到本地故事文件，路径需与实际存放位置匹配
                        link.href = `stories/${filePath}`;
                        link.textContent = storyTitle;
                        link.style.display = 'block';
                        link.style.margin = '8px 0';
                        storyContainer.appendChild(link);
                    });
                } else {
                    storyContainer.textContent = '暂无该作者的故事';
                }
            });
    </script>
</body>
</html>

4. 本地运行注意事项 #

直接双击打开HTML文件可能触发浏览器跨域限制，解决办法二选一：

• 用Python启动极简静态服务器：打开终端进入你的文件夹，运行python -m http.server 8000，然后在浏览器访问http://localhost:8000
• 用Chrome浏览器带参数启动：右键Chrome快捷方式，在目标栏末尾添加 --allow-file-access-from-files，启动后直接打开HTML文件即可

关键说明 #

• JS可以访问本地文件，但受浏览器安全机制限制，需通过静态服务器或特殊启动参数绕开限制
• SQL.js完全兼容SQLite语法，你现有数据库的查询语句可直接复用
• 所有页面都是纯静态文件，朋友拿到文件夹后按上述方法启动就能使用，无需搭建后端服务器

内容的提问来源于stack exchange，提问作者mo_cat