# new

**Repository Path**: fire_fish/new

## Basic Information

- **Project Name**: new
- **Description**: MVVM Web应用开发，软件项目开发与实践。
代码1，使用React.js框架完成简单广告页面设计，免费、标准、高级版三部分设计。
代码2，实现简单的网页版的计算器。
代码3，调用高德地图作为地图，设计航班信息展示系统，基础部分是对fetch所提供的数据中的机场标注点图层，为点图层设置点击事件，实现抽屉展开关闭功能，在抽屉中进行机场信息展示。
详细说明见README.md
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-19
- **Last Updated**: 2024-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 以下内容为说明文档

代码主要包括三个内容，广告页面设计，计算器，机场航班信息展示地图。
以及对第三个部分新增的一些功能。

## App.js
代码简要说明
### `广告页面设计`
分为三个页面简单页面，主要是学会HTML的简单运用以及使用CSS简单美化页面，
三个页面分别为：免费版，标准版，高级版。

## E1.js
代码简要说明
### `网页版简单计算器`
简单实现计算器的加减乘除功能，计算历史记录，未实现小数运算，未实现消除全部数据按钮，每次点击"＝"符号运算后需刷新页面。

## E2.js
代码简要说明
### `机场航班信息展示地图基础功能`
调用高德地图作为地图底图，实现地图的渲染。
用fetch中所提供的机场数据，设置点图层，设置点击事件触发，弹出侧边抽屉展示机场信息。

## E3.js
代码简要说明
### `机场航班信息展示地图新增功能`
1.新增5个小组件，比例尺，实时经纬度，缩放尺，地图主题，全屏。
2.新增修改点图层为图片标注图层。
3.新增机场信息检索功能，在输入框搜索后，弹出机场信息框，支持输入"城市名称/IATACode/机场名称"进行搜索，
无内容搜索或其他异常搜索均默认展示成都双流机场信息。
4.新增模糊搜索输入框，新增机场客流量top30排行条形图。

## test.js
代码简要说明
### `class Test1 用于代码修改测试`
将已经写好，但想要修改的代码粘贴在test.js中修改进行测试。

## index.js
如果有新的js代码要运行，
需参照以下格式在index.js中导入。
import XX(XX为类名) from "./XX(XX为类名)";

然后再用想要运行的js文件中的XX类名替换下面的Example3。

  `  <React.StrictMode>
    <Example3 />
  </React.StrictMode>`

## package.json
由于使用了Antd以及antv的组件，需要在其中添加依赖

  "dependencies": {
    在这里添加依赖
  }

### `react使用说明`
第一次使用需要npm install或者cnpm install安装node_modules。
代码均使用了react框架。

运行程序，在终端Terminal键入：
npm start/cnpm start，依据自己安装的包。

退出程序，在终端Terminal键入：
ctrl+C，会弹出 终止批处理操作吗（Y/N）？输入Y/y

补充说明：
如果无法使用可能是新添加了依赖，npm install或者cnpm install更新安装node_modules。
代码工程中如果没有node modules无法运行，需要先安装键入命令npm install或者cnpm install。