# final-work

**Repository Path**: clayelink/final-work

## Basic Information

- **Project Name**: final-work
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-22
- **Last Updated**: 2021-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 大作业

## 开发语言/环境

本作业使用React 搭建, **React** 是一个用于构建用户界面的 JavaScript 库。并使用了Ant Design组件库，`antd` 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。项目简单的完成轮播图，侧边导航栏，购物车功能。并准备开发响应式，追加小型移动设备的窗口适应，此功能暂未开发完成，以及动画等。

### 一、开发环境搭建

1. 请自行下载安装nodejs

### 项目启动

	1. 执行 ` npm install `  下载依赖的组件
	2. 输入 `npm run start`  运行项目

### 二、项目主要结构介绍



```
final-work
├─ .git   
├─ src
│  ├─ App.css   //父级页面样式
│  ├─ App.js	//父级页面，包含主页布局
│  ├─ App.test.js
│  ├─ Json
│  │  └─ bases.json	//基础的数据源
│  ├─ components	//组件文件夹
│  │  ├─ GoodsCard	//商品卡片组件
│  │  │  ├─ Bases.js	//整合前的测试数据
│  │  │  ├─ Booksell.css	//整合前的css代码
│  │  │  ├─ Booksell.js	//整合前js代码
│  │  │  ├─ GoodsCard.css	//商品卡片的样式
│  │  │  └─ GoodsCard.js	//商品卡片的js
│  │  ├─ Navigation	//侧边导航栏模块
│  │  │  ├─ Bases.js	//整合前的数据
│  │  │  ├─ Navigation.css	//侧边导航栏内容
│  │  │  ├─ Navigation.js	//侧边导航栏的js文件
│  │  │  └─ Test.js	//整合前的内容
│  │  ├─ ShoppingCart	//购物车组件
│  │  │  ├─ ShoppingCart.css	//购物车组件的样式文件
│  │  │  └─ ShoppingCart.js	//购物车的js文件
│  │  └─ Swiper	//轮播图组件
│  │     ├─ Swiper.css	//轮播图的基础样式
│  │     └─ Swiper.js	//轮播图的页面js
│  ├─ imgs	//图片文件夹
│  │  └─ index	//主页的图片信息
│  │     ├─ add.png	//加号图片
│  │     └─ sub.png	//减号图片
│  ├─ index.css	//首页的样式css文件
│  ├─ index.js	//首页渲染的js文件
│  ├─ logo.svg	//页面显示的图标
│  ├─ reportWebVitals.js	
│  ├─ setupTests.js
│  └─ utils	//工具类文件夹
│     └─ NumUtil.js	//对数字保留两位小数，无则补零
└─ yarn.lock	
```