# weather_forecast

**Repository Path**: wzvtcsoftware_software/weather_forecast

## Basic Information

- **Project Name**: weather_forecast
- **Description**: 课堂上使用的天气预报前端项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-14
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# html版天气预报网页（Vue2 基础语法回顾实战 - V1基础版）
## 一、项目核心说明
### ✔️ 开发目的
通过完成一个完整的天气预报网页项目，**回顾+巩固+实战应用** 我们已经学过的所有Vue2基础核心知识点，做到「学以致用」，把零散的Vue知识点串联起来。
### ✔️ 面向人群
刚学完 Java 基础 + Vue2 基础语法的同学，未学习Vue单文件组件、Vue脚手架、npm等内容。
### ✔️ 技术栈（全部为已学内容）
HTML5 + CSS3（Flex简单布局） + 原生JavaScript(ES6基础) + Vue2.x（通过CDN方式直接引入HTML文件）
### ✔️ 项目特点
1. 所有代码都写在 **一个 index.html 文件** 中，双击即可在浏览器运行，无需安装任何软件、无需配置开发环境；
2. 所有功能实现，**仅使用已学的Vue2基础语法**，无任何超纲知识点；
3. 项目难度适中，功能完整，能完美覆盖Vue2入门必学的所有核心语法；
4. 纯前端模拟数据，无需调用接口，无需处理跨域等复杂问题，专注Vue语法本身。

## 二、本项目用到的【所有Vue2已学基础知识点】（重点！全部罗列，学生明确学习目标）
✅ el 挂载点：指定Vue实例管理的HTML区域  
✅ data 数据对象：定义项目中需要展示的所有数据（响应式数据）  
✅ 插值表达式 {{ 变量 }}：将Vue中的数据渲染到页面上  
✅ v-model 双向绑定指令：绑定输入框，实现「页面输入 → 数据更新」双向联动  
✅ v-on:click 点击事件指令 (简写 @click)：绑定按钮的点击事件，实现交互逻辑  
✅ methods 方法对象：定义Vue中的事件处理函数、业务逻辑方法  
✅ v-for 列表循环指令：遍历数组数据，自动渲染页面列表内容  
✅ :key 属性：配合v-for使用，保证循环渲染的语法规范  
✅ v-bind 属性绑定指令 (简写 :)：动态绑定页面元素的属性/内容  

## 三、页面功能与布局需求（完整、简洁、可落地，纯基础无复杂需求）
### ✔️ 整体布局（从上至下，清晰分区，无复杂嵌套）
页面整体居中展示，分为4个核心区域，所有区域排版工整、间距合理：
1. 顶部搜索区：1个输入框 + 1个「查询天气」按钮
2. 今日天气核心展示区：页面核心区域，最显眼
3. 今日天气详情展示区：展示天气相关的辅助数据
4. 未来6天天气预报区：展示未来6天的天气信息

### ✔️ 具体功能需求（全部为基础功能，用Vue基础语法即可实现）
#### 1. 搜索功能
- 输入框占位符提示：`请输入城市名称`
- 输入城市名称后，点击「查询天气」按钮，页面会**实时切换并展示对应城市的天气数据**
- 输入框为空时，点击按钮给出简单提示：`请输入要查询的城市名称`

#### 2. 天气数据展示功能
##### ① 今日天气核心区（必展示）
城市名称、天气状态（晴/多云/小雨/阴）、实时温度（大号字体突出）、今日温度范围（如：8℃ ~ 21℃）

##### ② 今日天气详情区（必展示）
展示3项基础数据，格式为「标签 + 数值」：风力等级、相对湿度、能见度

##### ③ 未来6天预报区（必展示）
循环展示未来6天的天气信息，每日展示：日期 + 天气状态 + 当日最高温/最低温

#### 3. 数据要求
使用 **模拟静态天气数据** 开发，无需调用真实的天气接口，所有数据都定义在Vue的data中即可。

#### 4. 样式要求
使用原生CSS3简单美化，布局工整、清晰即可，无需做复杂的特效、无需适配手机端，重点是功能实现和Vue语法应用。

# jQuery访问网络数据版天气预报网页（jQuery+Vue版，V2）
目录中的weatherApi.exe开启后会提供一个天气预报服务器，
分别有三个可以访问的url:
1. v2/city/lookup //查询城市信息
2. v7/weather/now //查询当前的天气信息
3. v7/weather/7d //查询未来七天的天气信息
## ✔️ 具体功能需求
在原来的html基础上，通过cdn引入jQuery，用来访问weatherApi中的三个url，替换掉原来html的模拟数据。


# axios访问网络数据版天气预报网页（Axios+Vue版，V3）
在原来的基础上改用axios库替代jQuery


# axios访问网络数据版天气预报网页（Vue-cli前端项目版，V4）
改用Vue-cli创建Vue2项目，以前端工程项目的形式来替换jQuery版本