---
title: 用 .json 文件手动维护纯前端网站
date: '2025-11-18'
summary: 用 JSON 保存网页内容数据，尝试把内容维护与页面布局分开。
lang: zh
category: Engineering/Web
legacy_url: https://dozybot001.github.io/2025/11/18/2025-11-18-json-files/
---

## 概述

一次完整的修改流程包括：

1. 文字信息修改
2. 图片信息修改

两个部分，如果只要修改文字或者只要修改图片，则进行对应步骤即可，这两部分相互独立。

## 文字信息修改

利用 VSCode 建立本地服务器后，进入 manage 页面：

![](/blog/assets/2025-11-18-json-files/202511180617065.png)

manage 页面加载时会调用`data/offer-data.json`和`data/team-data.json`作为原始数据。

在卡片处可以进行编辑、删除和预览三个操作，如果要添加卡片，则点击顶部导航栏的添加新成员和添加 offer 按钮。

**注意：如果删除卡片，需要删除对应的图片，或者只需要修改卡片的图片信息，请记住卡片的 ID 编号，因为图片均以 ID 编号命名**

修改完文字信息后，所有的数据暂时保存在浏览器内存中，一旦刷新则会丢失修改数据。

点击**导出团队成员数据**和**导出 Offer 数据**，如果只修改了团队成员的文字信息就只要导出团队成员数据即可。导出操作会下载一个 .json 文件到本地：

![](/blog/assets/2025-11-18-json-files/202511180644953.png)

将这个文件放在服务器的`data`文件夹中，替换掉旧的文件，实现文字信息的修改：

![](/blog/assets/2025-11-18-json-files/202511180647241.png)

这里由于我们是本地服务器，所以就在本地操作，之后上线需要将所有文件放在云服务器中，也是一样的修改方式，只是将文件上传到服务器中的`data`文件夹。

修改完成后，再次进入或者刷新 manage 页面，就会显示修改后的信息。

## 图片信息修改

如果在上一步中删除了新成员或 offer，可以进入`data/offer-image`和`date/team-avatar`文件夹，删除对应 ID 编号的图片，当然不删除也并无影响只是占用存储空间，ID 编号自创建文字信息起便是唯一的。

如果在上一步中修改了新成员或 offer，需要进一步修改图片信息，则进入`data/offer-image`和`date/team-avatar`文件夹，新图片命名为`ID编号.png`，png 是图片的格式，将新图片放入对应文件夹替换旧图片。

![](/blog/assets/2025-11-18-json-files/202511180701360.png)

如果要添加新图片，打开 manage 页面，新添加的成员或 offer 卡片，由于还没有添加图片，图片处不显示：

![](/blog/assets/2025-11-18-json-files/202511180712620.png)

依据其对应的 ID 编号，将新图片命名为`ID编号.png`，放入对应文件夹中即可，此时再刷新 manage 页面就会显示图片。