用 .json 文件手动维护纯前端网站

概述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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