{"id":13631139,"url":"https://github.com/tsejx/react-ecommerce","last_synced_at":"2025-04-17T18:32:01.298Z","repository":{"id":97744840,"uuid":"97734291","full_name":"tsejx/react-ecommerce","owner":"tsejx","description":":necktie:React实现的电子商城项目A e-commerce mall project built with react@^15.6.1","archived":false,"fork":false,"pushed_at":"2019-03-14T15:40:53.000Z","size":4747,"stargazers_count":85,"open_issues_count":1,"forks_count":33,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-01T22:47:50.308Z","etag":null,"topics":["e-commerce","javasccript","landing-page","nike","react","sass","shop","store","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsejx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-07-19T15:44:38.000Z","updated_at":"2024-07-18T06:11:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"4851d841-1bcc-471e-bc47-f2362827fe73","html_url":"https://github.com/tsejx/react-ecommerce","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsejx%2Freact-ecommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsejx%2Freact-ecommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsejx%2Freact-ecommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsejx%2Freact-ecommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsejx","download_url":"https://codeload.github.com/tsejx/react-ecommerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223762876,"owners_count":17198384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["e-commerce","javasccript","landing-page","nike","react","sass","shop","store","webpack"],"created_at":"2024-08-01T22:02:12.045Z","updated_at":"2024-11-08T22:31:07.103Z","avatar_url":"https://github.com/tsejx.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React实现服装商城项目\n\n**走马灯**\n\n![走马灯][1]\n\n**首页**\n\n![此处输入图片的描述][2]\n\n**类目页**\n\n![类目页][3]\n\n**搜索页**\n\n![搜索页][5]\n\n**商品详情页**\n\n![商品详情页][6]\n\n**购物车**\n\n![购物车][4]\n\n## 技术栈\n\n\u003e  详情可参阅 `package.json`\n\n - React @15.6.1\n - React Route @4.1.1\n - SemanticUI\n - MockJS\n - Axios\n - Webpack\n - ES6 + Babel\n - Sass\n\n## 快速开始\n\n### 安装\n\n需要安装 `NodeJS` \n\n在项目根目录按住 `Shift` 键鼠标右键点击，打开命令窗口\n\n在命令窗口输入 `npm install` 安装依赖\n\n### 运行\n\n安装依赖完成后，在命令窗口输入 `npm start` ,稍等片刻等待服务器启动与项目打包\n\n如无意外，默认浏览器就会自动打开 `localhost:8080` ,您立即可以看到项目效果\n\n若浏览器没有自动弹出，则请自行手动访问\n\n## 项目架构\n### 目录结构\n\n    .\n    ├─ config/            # Webpack 配置目录\n    ├─ doc/               # 文档相关目录\n    ├─ src/               # 源码目录（开发都在这里进行）\n    │   ├─ assets/        # 静态文件目录\n    │   │   ├─ font/      # 字体文件\n    │   │   ├─ img/       # 图片文件\n    │   │   ├─ style/     # 样式文件\n    │   ├─ components/    # 组件（COMPONENT）\n    │   │   ├─ carousel/  # 走马灯组件\n    │   │   ├─ cart/      # 购物车组件\n    │   │   ├─ footer/    # 页脚组件\n    │   │   ├─ header/    # 页头组件\n    │   │   ├─ home/      # 主页组件\n    │   │   ├─ main/      # 类目页组件\n    │   │   ├─ nav/       # 导航菜单组件\n    │   │   ├─ popup/     # 提示框组件\n    │   │   ├─ product/   # 详情页组件\n    │   │   ├─ scroll/    # 鼠标滑动组件\n    │   │   ├─ user/      # 用户信息组件\n    │   ├─ data/          # 数据目录\n    │   ├─ router/        # 路由（ROUTER）\n    │   ├─ utils/         # 工具库（UTIL）\n    │   ├─ app.js         # 启动文件\n    │   ├─ index.html     # 静态基页\n    ├── .babelrc          # Babel 转码配置\n    ├── debug.log         # 操作日志文件\n    ├── package.json      # npm 配置\n\n### 说明\n\n - 利用 Webpack 构建工具搭建项目开发环境\n - 利用 React + Babel 开发基于ES6模块化的JavaScript应用\n - 利用 Semantic-ui-React 界面开发框架搭建语义化的架构\n - 利用 Sass 预编译器 编写页面样式\n - 利用 React-Route 实现应用页面的跳转路由\n - 利用 MockJS 随机生成应用数据，模拟前后端交互情景\n - 利用 Axios HTTP库完成数据请求\n - 利用 Ant Motion 实现首页轮播图以及各种动效设计\n - 利用 原生JS中 DOM、BOM  实现顶部工具栏滚动固定以及回到顶部功能\n\n### 技术难题\n\n 1. 用flex布局实现首页热卖品栏目、分类页商品展示栏目、搜索页展示栏目的样式一致，难度不高，但是比较复杂，要顾及到特定的场景\n 2. 由route管理的兄弟组件之间的通信（利用route的children属性加载组件）\n 3. 跨祖先级的组件间的数据交互（例如详情页添加商品到购物车与购物车页面的商品展示等）\n 4. 利用mock随机生成大量数据，并在需要进行数据交互的组件内利用axios进行数据交互，并通过props、state等进行父子组件间数据通信\n\n\n  [1]: http://wx2.sinaimg.cn/mw690/c0096cf9ly1fhyehc4l5gj214u0lo1kx.jpg\n  [2]: http://wx2.sinaimg.cn/mw690/c0096cf9ly1fhyehs8onwj214u0lowlr.jpg\n  [3]: http://wx2.sinaimg.cn/mw690/c0096cf9ly1fhyeho2ooyj214u0lomzz.jpg\n  [4]: http://wx3.sinaimg.cn/mw690/c0096cf9ly1fhyehkdi8aj214u0lo75w.jpg\n  [5]: http://wx2.sinaimg.cn/mw690/c0096cf9ly1fhyeimp3b9j214u0lon0q.jpg\n  [6]: http://wx3.sinaimg.cn/mw690/c0096cf9ly1fhyehw4glqj214u0lotc5.jpg","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsejx%2Freact-ecommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsejx%2Freact-ecommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsejx%2Freact-ecommerce/lists"}