【源码】基于Node和React的化妆品搜索系统

项目简介

本项目是一个用于模拟雅诗兰黛等化妆品网站搜索功能的测试项目。前端运用 React 16.2 框架，后端采用 Node 的原生 http 库，并借助 gulp 工具进行构建。该项目旨在考察开发者运用 JavaScript、React 和 Node 实现自动搜索功能的能力，以及对现代 Web 开发标准的掌握程度。

项目的主要特性和功能

1. 自动搜索功能：用户输入关键词时，前端自动向后端发送请求，后端返回匹配的产品数据，前端实时展示搜索结果。
2. 前后端分离架构：前端负责界面展示与用户交互，后端专注于数据处理和响应，提升开发效率与可维护性。
3. 数据管理：后端用 JSON 格式存储和管理产品数据，便于数据读取与更新。
4. 样式处理：采用 SCSS 编写样式，经 Sass 编译为 CSS，支持灵活的样式定制。
5. 资源处理：支持图片压缩和第三方库引入，优化项目资源。
6. 模板渲染：使用 Mustache 模板语言创建 HTML 模板，实现数据与视图分离。

安装使用步骤

前提条件

确保已安装以下软件： - NPM（v6.14.12） - NodeJS（v14.16.1），若版本不符，可使用 NVM（Node Version Manager）切换版本，Windows 用户可使用 NVM for Windows。

安装依赖

在项目根目录下执行以下命令安装 Node 模块： bash npm install

启动服务器

执行以下命令启动前端和后端服务器： bash npm run servers 此命令将在 http://localhost:3030 启动前端服务器并自动打开浏览器，同时在 http://localhost:3035 启动 Node 后端服务器，使用 Nodemon 实现代码保存自动更新。

特殊说明

Windows 用户若遇到 'NODE_ENV' is not recognized 错误，需在 package.json 中替换 NODE_ENV 为 SET NODE_ENV，并使用 & 分隔命令，如 "node-server": "SET NODE_ENV=development & nodemon server/app.js"。

提交代码

提交代码前，请删除 node_modules 文件夹，并确保包含 CSS/SCSS 样式。若有额外运行命令，请在文档中注明。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】