cosmetics check single page app

护肤成分查询网站

本项目旨在建立一个查询化妆品成分的网站，是否含有孕妇使用的有害成分。所有产品信息均由sephoraCrawler项目收集，该项目是一个用Python编写的网络蜘蛛。该数据库包含www.sephora.com上所有女性产品信息（7000+）。

入门

要运行客户端，

• 首先安装软件包，输入npm install
• 在本地主机上运行客户端npm start 。并打开http://localhost:3000/。

项目概要

该项目旨在实现一个数据库后端单页应用程序，主要用于检查护肤品在怀孕期间是否可以安全使用。通过使用这个应用程序，用户可以通过名称或品牌搜索某种化妆品，相关信息会显示出来，并有明显的标志表明该化妆品是否适合怀孕或含有有害成分。

前端设计

前端被设计为 SPA（单页应用程序），它管理客户端的所有路由和数据流。在这个项目中，React（一个用于构建用户界面的 JavaScript 库）与 React-Router 和 Redux（ JavaScript 应用程序的可预测状态容器）相结合，用于实现该应用程序。

该应用程序主要包含2个功能。一是产品搜索，二是成分检查。

搜寻中

该应用程序的主页是搜索页面。进入网站时，文本字段会自动聚焦。用户通过查看自行设计的徽标就可以轻松了解此应用程序的功能。

输入产品的品牌或名称（例如 Clinique）并按 Enter 键后，用户将导航到显示页面。产品按每行 4 项、每页 60 项排列。在搜索栏下方的顶部，我们可以看到搜索结果的总数。右侧底部有一个粉色箭头，用于向上滚动到顶部以方便使用。并且左侧漂浮着一个标志，绿色头像表示发现未知成分，红色头像表示发现有害成分。如果产品卡上没有头像，则表示可以安全怀孕。

在显示页面的底部，有一个分页栏。当前页面以粉红色背景色强调。每页最多可显示 60 条内容。

单击产品卡时，会出现一个窗口，提供该产品的更详细信息。如果产品不安全，就会有明显的红色标志表明其中含有有害成分。用户可以查看该商品的详细信息和成分，并通过点击图片进入丝芙兰商店的网站。

成分检查

前端的另一个功能是成分检查，它可以让用户找出字符串中的有害成分。

如果没有发现有害成分，则会出现蓝色警报。如果发现有害成分，则会出现红色警报，并以黄色突出显示特定文字。