天气预报页面的设计与实现

目录

第一章 引言............................ 1

第二章 设计研究的目标与意义............ 1

2.1 目标............................ 1

2.2 意义............................ 1

第三章 项目系统分析.................... 1

3.1 可行性.......................... 1

3.2 需求............................ 2

3.3 开发平台........................ 2

第四章 基于Visual Studio Code项目开发. 2

4.1 Visual Studio Code简介......... 2

4.2 为什么使用Visual Studio Code... 2

4.2.1 跨平台..................... 2

4.2.2 支持多种编程语言........... 2

4.2.3 您可以更改所选文件的语言... 2

4.2.4 提供特定语言的文档......... 3

4.2.5 调试....................... 3

4.2.6 内置Git集成............... 3

4.2.7 智能感知................... 3

4.2.8 命令面板................... 3

4.2.9 代码管理功能............... 3

4.2.10 定制...................... 3

第五章 JavaScript计算机编程语言....... 3

第六章 建立开发环境.................... 4

第七章 程序设计与实现.................. 4

7.1 天气查询页面.................... 4

7.2 获取城市相关指数与空气质量..... 13

第八章 项目测试及结论................. 23

8.1 测试问题....................... 23

8.2 结论........................... 23

致谢.................................. 24

参考文献.............................. 25

1. 1 引言

随着社会的发展与进步，智能手机的普及，人们在电视上面观看天气预报的越来越少了，大部分人都是在出门之前观看天气预报，然而电视里面的天气预报只能在规定的时间内观看，不方便人们的出行，也不方便观看目的地的实时天气。在计算机飞速发展的时代，使用网页观看实时天气成了一种趋势。

本设计研究是关于一个天气预报的设计与功能实现，主要目的是方便人们知道未来三天的天气情况，可实现实时定位与输入城市查询天气情况。会根据自己的选择提供查询地区的实时温度，天气情况，风向风速，紫外线，相对湿度，大气压，降水量，能见度。还有空气相关的空气质量以及相关提示，和一些生活建议，比如舒适度，洗车指数，运动指数等等。

1. 2 设计研究的目标与意义
   1. 目标

对于广大群众来说，出行看天气已经成为了必要条件，提前知道天气，可以更好的把握计划，不会因为没看天气预报改变自己的计划。为了方便人们的出行，为了，方便更有力的知道实时天气情况，所以就有了此设计。

1. 1. 意义

方便人们知道实时天气情况，不需要蹲点观看天气预报，实时了解目的地天气情况，防止天气预报的时效性。避免一些突发的天气情况，还可以里了解未来三天的天气情况，并给出当前天的生活建议，使人们清楚当前天气可以干些什么是比较好的，可以避免一些事情的发生。

1. 3 项目系统分析
   1. 可行性

开发任何东西都需要时间和资源，还要考虑一些条件因素。所以在这之前要有一些准备工作和计划。合理的利用时间和资源避免一些风险和一些不必要的麻烦。

此设计采用的开发工具是现在比较流行的Visual Studio Code开发工具，该工具内含有一些插件可以快速生成一些代码，提高了开发的效率。天气预报可定需要一些接口类的东西，这些接口是根据和风天气所提供的API进行开发。

1. 1. 需求

页面的干净整洁，看上去美观；操作简单方便，快捷；自动获取当前位置，显示当前天气情况；可以实现根据天气提出生活建议；可以观察实时空气质量；可以观察未来三天天气情况。

1. 1. 开发平台

 Visual Studio Code；百度地图API；和风天气API

1. 4 基于Visual Studio Code项目开发
   1. Visual Studio Code简介

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统[2]。

1. 1. 为什么使用Visual Studio Code
      1. 跨平台

它是免费的，开放源代码和跨平台的编辑器，可在Windows，Linux和macOS上运行，因此无论您的设备所基于的平台如何，您都可以工作。

1. 1. 1. 支持多种编程语言

当您访问Visual Studio Code网站时，您很快就会意识到它支持几乎所有主要的编程语言。它支持Python，Java，HTML，CSS，Type，C++，Java，PHP，Go，C#，PHP，SQL，Ruby，Objective-C等。

1. 1. 1. 您可以更改所选文件的语言

它支持默认语言，具体取决于您的文件，但您也可以更改语言模式。为此，请单击状态栏右侧的语言指示器，这将打开“更改语言模式”下拉菜单。在这里，您可以为当前文件选择不同的语言。

1. 1. 1. 提供特定语言的文档

它的网站包含特定于Visual Studio Code支持的通用语言的文档。其中一些是C++，C#，CSS，Go，Python，PHP，Java等。

1. 1. 1. 调试

VSC带有内置调试器，这也是其主要功能之一。它有助于加速任何程序员的编辑，编译和调试循环。但是，默认情况下，它仅带有支持NodeJS的调试器，该调试器可以调试任何转译为Java的内容，但同样，您可以将扩展名用于其他运行时。

1. 1. 1. 内置Git集成

Visual Studio Code通过提供完整的Git集成使程序员更进一步，使程序员无需离开编辑器即可立即查看更改。您可以在侧栏的左侧找到Git图标，在其中可以对其进行初始化，并可以执行若干Git命令，例如pull，push，publish和其他命令。此外，VSC还可以与多个Git存储库一起使用，无论是本地的还是远程的。

1. 1. 1. 智能感知

程序员使用此功能来实现智能代码完成，参数信息，内容辅助，快速信息和代码提示。VSC为Java，CSS，HTML，Type，JSON，Sass和Less编程语言提供了IntelliSense。对于其他语言，我们可以通过添加其扩展名来使用IntelliSense。

1. 1. 1. 命令面板

按下Ctrl + Shift + P 命令会显示命令面板，使您可以从键盘访问VS Code。它允许您访问VS Code的所有功能，包括所有关键字快捷方式。此外，此选板还允许访问许多命令。

1. 1. 1. 代码管理功能

Visual Studio代码还提供了代码管理功能，例如转到定义，查看定义，查找所有引用并重命名符号。通过右键单击代码文件，可以在VSC中轻松找到这些功能。

1. 1. 1. 定制

与其他流行的编辑器一样，Visual Studio Code也提供自定义功能。实际上，由于其灵活的首选项设置和大量扩展，它提供了极高的自定义性。VSC为您提供了更改主题，更改键盘快捷键，调整设置，创建代码段等选项[3]。

1. 5  JavaScript计算机编程语言

 脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言。例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性[4]。

1. 6  建立开发环境

环境的搭建非常的简单，不需要其他配置。安装谷歌浏览器和Visual Studio Code ，然后在Visual Studio Code内置里安装一个插件open in browser 即可，方便快速在浏览器当中打开（ 快捷键Alt + B ）。

目录

第一章 引言............................ 1

第二章 设计研究的目标与意义............ 1

2.1 目标............................ 1

2.2 意义............................ 1

第三章 项目系统分析.................... 1

3.1 可行性.......................... 1

3.2 需求............................ 2

3.3 开发平台........................ 2

第四章 基于Visual Studio Code项目开发. 2

4.1 Visual Studio Code简介......... 2

4.2 为什么使用Visual Studio Code... 2

4.2.1 跨平台..................... 2

4.2.2 支持多种编程语言........... 2

4.2.3 您可以更改所选文件的语言... 2

4.2.4 提供特定语言的文档......... 3

4.2.5 调试....................... 3

4.2.6 内置Git集成............... 3

4.2.7 智能感知................... 3

4.2.8 命令面板................... 3

4.2.9 代码管理功能............... 3

4.2.10 定制...................... 3

第五章 JavaScript计算机编程语言....... 3

第六章 建立开发环境.................... 4

第七章 程序设计与实现.................. 4

7.1 天气查询页面.................... 4

7.2 获取城市相关指数与空气质量..... 13

第八章 项目测试及结论................. 23

8.1 测试问题....................... 23

8.2 结论........................... 23

致谢.................................. 24

参考文献.............................. 25

1. 1 引言

随着社会的发展与进步，智能手机的普及，人们在电视上面观看天气预报的越来越少了，大部分人都是在出门之前观看天气预报，然而电视里面的天气预报只能在规定的时间内观看，不方便人们的出行，也不方便观看目的地的实时天气。在计算机飞速发展的时代，使用网页观看实时天气成了一种趋势。

本设计研究是关于一个天气预报的设计与功能实现，主要目的是方便人们知道未来三天的天气情况，可实现实时定位与输入城市查询天气情况。会根据自己的选择提供查询地区的实时温度，天气情况，风向风速，紫外线，相对湿度，大气压，降水量，能见度。还有空气相关的空气质量以及相关提示，和一些生活建议，比如舒适度，洗车指数，运动指数等等。

1. 2 设计研究的目标与意义
   1. 目标

对于广大群众来说，出行看天气已经成为了必要条件，提前知道天气，可以更好的把握计划，不会因为没看天气预报改变自己的计划。为了方便人们的出行，为了，方便更有力的知道实时天气情况，所以就有了此设计。

1. 1. 意义

方便人们知道实时天气情况，不需要蹲点观看天气预报，实时了解目的地天气情况，防止天气预报的时效性。避免一些突发的天气情况，还可以里了解未来三天的天气情况，并给出当前天的生活建议，使人们清楚当前天气可以干些什么是比较好的，可以避免一些事情的发生。

1. 3 项目系统分析
   1. 可行性

开发任何东西都需要时间和资源，还要考虑一些条件因素。所以在这之前要有一些准备工作和计划。合理的利用时间和资源避免一些风险和一些不必要的麻烦。

此设计采用的开发工具是现在比较流行的Visual Studio Code开发工具，该工具内含有一些插件可以快速生成一些代码，提高了开发的效率。天气预报可定需要一些接口类的东西，这些接口是根据和风天气所提供的API进行开发。

1. 1. 需求

页面的干净整洁，看上去美观；操作简单方便，快捷；自动获取当前位置，显示当前天气情况；可以实现根据天气提出生活建议；可以观察实时空气质量；可以观察未来三天天气情况。

1. 1. 开发平台

 Visual Studio Code；百度地图API；和风天气API

1. 4 基于Visual Studio Code项目开发
   1. Visual Studio Code简介

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统[2]。

1. 1. 为什么使用Visual Studio Code
      1. 跨平台

它是免费的，开放源代码和跨平台的编辑器，可在Windows，Linux和macOS上运行，因此无论您的设备所基于的平台如何，您都可以工作。

1. 1. 1. 支持多种编程语言

当您访问Visual Studio Code网站时，您很快就会意识到它支持几乎所有主要的编程语言。它支持Python，Java，HTML，CSS，Type，C++，Java，PHP，Go，C#，PHP，SQL，Ruby，Objective-C等。

1. 1. 1. 您可以更改所选文件的语言

它支持默认语言，具体取决于您的文件，但您也可以更改语言模式。为此，请单击状态栏右侧的语言指示器，这将打开“更改语言模式”下拉菜单。在这里，您可以为当前文件选择不同的语言。

1. 1. 1. 提供特定语言的文档

它的网站包含特定于Visual Studio Code支持的通用语言的文档。其中一些是C++，C#，CSS，Go，Python，PHP，Java等。

1. 1. 1. 调试

VSC带有内置调试器，这也是其主要功能之一。它有助于加速任何程序员的编辑，编译和调试循环。但是，默认情况下，它仅带有支持NodeJS的调试器，该调试器可以调试任何转译为Java的内容，但同样，您可以将扩展名用于其他运行时。

1. 1. 1. 内置Git集成

Visual Studio Code通过提供完整的Git集成使程序员更进一步，使程序员无需离开编辑器即可立即查看更改。您可以在侧栏的左侧找到Git图标，在其中可以对其进行初始化，并可以执行若干Git命令，例如pull，push，publish和其他命令。此外，VSC还可以与多个Git存储库一起使用，无论是本地的还是远程的。

1. 1. 1. 智能感知

程序员使用此功能来实现智能代码完成，参数信息，内容辅助，快速信息和代码提示。VSC为Java，CSS，HTML，Type，JSON，Sass和Less编程语言提供了IntelliSense。对于其他语言，我们可以通过添加其扩展名来使用IntelliSense。

1. 1. 1. 命令面板

按下Ctrl + Shift + P 命令会显示命令面板，使您可以从键盘访问VS Code。它允许您访问VS Code的所有功能，包括所有关键字快捷方式。此外，此选板还允许访问许多命令。

1. 1. 1. 代码管理功能

Visual Studio代码还提供了代码管理功能，例如转到定义，查看定义，查找所有引用并重命名符号。通过右键单击代码文件，可以在VSC中轻松找到这些功能。

1. 1. 1. 定制

与其他流行的编辑器一样，Visual Studio Code也提供自定义功能。实际上，由于其灵活的首选项设置和大量扩展，它提供了极高的自定义性。VSC为您提供了更改主题，更改键盘快捷键，调整设置，创建代码段等选项[3]。

1. 5  JavaScript计算机编程语言

 脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言。例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性[4]。

1. 6  建立开发环境

环境的搭建非常的简单，不需要其他配置。安装谷歌浏览器和Visual Studio Code ，然后在Visual Studio Code内置里安装一个插件open in browser 即可，方便快速在浏览器当中打开（ 快捷键Alt + B ）。

目录

第一章 引言............................ 1

第二章 设计研究的目标与意义............ 1

2.1 目标............................ 1

2.2 意义............................ 1

第三章 项目系统分析.................... 1

3.1 可行性.......................... 1

3.2 需求............................ 2

3.3 开发平台........................ 2

第四章 基于Visual Studio Code项目开发. 2

4.1 Visual Studio Code简介......... 2

4.2 为什么使用Visual Studio Code... 2

4.2.1 跨平台..................... 2

4.2.2 支持多种编程语言........... 2

4.2.3 您可以更改所选文件的语言... 2

4.2.4 提供特定语言的文档......... 3

4.2.5 调试....................... 3

4.2.6 内置Git集成............... 3

4.2.7 智能感知................... 3

4.2.8 命令面板................... 3

4.2.9 代码管理功能............... 3

4.2.10 定制...................... 3

第五章 JavaScript计算机编程语言....... 3

第六章 建立开发环境.................... 4

第七章 程序设计与实现.................. 4

7.1 天气查询页面.................... 4

7.2 获取城市相关指数与空气质量..... 13

第八章 项目测试及结论................. 23

8.1 测试问题....................... 23

8.2 结论........................... 23

致谢.................................. 24

参考文献.............................. 25

1. 1 引言

随着社会的发展与进步，智能手机的普及，人们在电视上面观看天气预报的越来越少了，大部分人都是在出门之前观看天气预报，然而电视里面的天气预报只能在规定的时间内观看，不方便人们的出行，也不方便观看目的地的实时天气。在计算机飞速发展的时代，使用网页观看实时天气成了一种趋势。

本设计研究是关于一个天气预报的设计与功能实现，主要目的是方便人们知道未来三天的天气情况，可实现实时定位与输入城市查询天气情况。会根据自己的选择提供查询地区的实时温度，天气情况，风向风速，紫外线，相对湿度，大气压，降水量，能见度。还有空气相关的空气质量以及相关提示，和一些生活建议，比如舒适度，洗车指数，运动指数等等。

1. 2 设计研究的目标与意义
   1. 目标

对于广大群众来说，出行看天气已经成为了必要条件，提前知道天气，可以更好的把握计划，不会因为没看天气预报改变自己的计划。为了方便人们的出行，为了，方便更有力的知道实时天气情况，所以就有了此设计。

1. 1. 意义

方便人们知道实时天气情况，不需要蹲点观看天气预报，实时了解目的地天气情况，防止天气预报的时效性。避免一些突发的天气情况，还可以里了解未来三天的天气情况，并给出当前天的生活建议，使人们清楚当前天气可以干些什么是比较好的，可以避免一些事情的发生。

1. 3 项目系统分析
   1. 可行性

开发任何东西都需要时间和资源，还要考虑一些条件因素。所以在这之前要有一些准备工作和计划。合理的利用时间和资源避免一些风险和一些不必要的麻烦。

此设计采用的开发工具是现在比较流行的Visual Studio Code开发工具，该工具内含有一些插件可以快速生成一些代码，提高了开发的效率。天气预报可定需要一些接口类的东西，这些接口是根据和风天气所提供的API进行开发。

1. 1. 需求

页面的干净整洁，看上去美观；操作简单方便，快捷；自动获取当前位置，显示当前天气情况；可以实现根据天气提出生活建议；可以观察实时空气质量；可以观察未来三天天气情况。

1. 1. 开发平台

 Visual Studio Code；百度地图API；和风天气API

1. 4 基于Visual Studio Code项目开发
   1. Visual Studio Code简介

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统[2]。

1. 1. 为什么使用Visual Studio Code
      1. 跨平台

它是免费的，开放源代码和跨平台的编辑器，可在Windows，Linux和macOS上运行，因此无论您的设备所基于的平台如何，您都可以工作。

1. 1. 1. 支持多种编程语言

当您访问Visual Studio Code网站时，您很快就会意识到它支持几乎所有主要的编程语言。它支持Python，Java，HTML，CSS，Type，C++，Java，PHP，Go，C#，PHP，SQL，Ruby，Objective-C等。

1. 1. 1. 您可以更改所选文件的语言

它支持默认语言，具体取决于您的文件，但您也可以更改语言模式。为此，请单击状态栏右侧的语言指示器，这将打开“更改语言模式”下拉菜单。在这里，您可以为当前文件选择不同的语言。

1. 1. 1. 提供特定语言的文档

它的网站包含特定于Visual Studio Code支持的通用语言的文档。其中一些是C++，C#，CSS，Go，Python，PHP，Java等。

1. 1. 1. 调试

VSC带有内置调试器，这也是其主要功能之一。它有助于加速任何程序员的编辑，编译和调试循环。但是，默认情况下，它仅带有支持NodeJS的调试器，该调试器可以调试任何转译为Java的内容，但同样，您可以将扩展名用于其他运行时。

1. 1. 1. 内置Git集成

Visual Studio Code通过提供完整的Git集成使程序员更进一步，使程序员无需离开编辑器即可立即查看更改。您可以在侧栏的左侧找到Git图标，在其中可以对其进行初始化，并可以执行若干Git命令，例如pull，push，publish和其他命令。此外，VSC还可以与多个Git存储库一起使用，无论是本地的还是远程的。

1. 1. 1. 智能感知

程序员使用此功能来实现智能代码完成，参数信息，内容辅助，快速信息和代码提示。VSC为Java，CSS，HTML，Type，JSON，Sass和Less编程语言提供了IntelliSense。对于其他语言，我们可以通过添加其扩展名来使用IntelliSense。

1. 1. 1. 命令面板

按下Ctrl + Shift + P 命令会显示命令面板，使您可以从键盘访问VS Code。它允许您访问VS Code的所有功能，包括所有关键字快捷方式。此外，此选板还允许访问许多命令。

1. 1. 1. 代码管理功能

Visual Studio代码还提供了代码管理功能，例如转到定义，查看定义，查找所有引用并重命名符号。通过右键单击代码文件，可以在VSC中轻松找到这些功能。

1. 1. 1. 定制

与其他流行的编辑器一样，Visual Studio Code也提供自定义功能。实际上，由于其灵活的首选项设置和大量扩展，它提供了极高的自定义性。VSC为您提供了更改主题，更改键盘快捷键，调整设置，创建代码段等选项[3]。

1. 5  JavaScript计算机编程语言

 脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言。例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性[4]。

1. 6  建立开发环境

环境的搭建非常的简单，不需要其他配置。安装谷歌浏览器和Visual Studio Code ，然后在Visual Studio Code内置里安装一个插件open in browser 即可，方便快速在浏览器当中打开（ 快捷键Alt + B ）。

目录

第一章 引言............................ 1

第二章 设计研究的目标与意义............ 1

2.1 目标............................ 1

2.2 意义............................ 1

第三章 项目系统分析.................... 1

3.1 可行性.......................... 1

3.2 需求............................ 2

3.3 开发平台........................ 2

第四章 基于Visual Studio Code项目开发. 2

4.1 Visual Studio Code简介......... 2

4.2 为什么使用Visual Studio Code... 2

4.2.1 跨平台..................... 2

4.2.2 支持多种编程语言........... 2

4.2.3 您可以更改所选文件的语言... 2

4.2.4 提供特定语言的文档......... 3

4.2.5 调试....................... 3

4.2.6 内置Git集成............... 3

4.2.7 智能感知................... 3

4.2.8 命令面板................... 3

4.2.9 代码管理功能............... 3

4.2.10 定制...................... 3

第五章 JavaScript计算机编程语言....... 3

第六章 建立开发环境.................... 4

第七章 程序设计与实现.................. 4

7.1 天气查询页面.................... 4

7.2 获取城市相关指数与空气质量..... 13

第八章 项目测试及结论................. 23

8.1 测试问题....................... 23

8.2 结论........................... 23

致谢.................................. 24

参考文献.............................. 25

1. 1 引言

随着社会的发展与进步，智能手机的普及，人们在电视上面观看天气预报的越来越少了，大部分人都是在出门之前观看天气预报，然而电视里面的天气预报只能在规定的时间内观看，不方便人们的出行，也不方便观看目的地的实时天气。在计算机飞速发展的时代，使用网页观看实时天气成了一种趋势。

本设计研究是关于一个天气预报的设计与功能实现，主要目的是方便人们知道未来三天的天气情况，可实现实时定位与输入城市查询天气情况。会根据自己的选择提供查询地区的实时温度，天气情况，风向风速，紫外线，相对湿度，大气压，降水量，能见度。还有空气相关的空气质量以及相关提示，和一些生活建议，比如舒适度，洗车指数，运动指数等等。

1. 2 设计研究的目标与意义
   1. 目标

对于广大群众来说，出行看天气已经成为了必要条件，提前知道天气，可以更好的把握计划，不会因为没看天气预报改变自己的计划。为了方便人们的出行，为了，方便更有力的知道实时天气情况，所以就有了此设计。

1. 1. 意义

方便人们知道实时天气情况，不需要蹲点观看天气预报，实时了解目的地天气情况，防止天气预报的时效性。避免一些突发的天气情况，还可以里了解未来三天的天气情况，并给出当前天的生活建议，使人们清楚当前天气可以干些什么是比较好的，可以避免一些事情的发生。

1. 3 项目系统分析
   1. 可行性

开发任何东西都需要时间和资源，还要考虑一些条件因素。所以在这之前要有一些准备工作和计划。合理的利用时间和资源避免一些风险和一些不必要的麻烦。

此设计采用的开发工具是现在比较流行的Visual Studio Code开发工具，该工具内含有一些插件可以快速生成一些代码，提高了开发的效率。天气预报可定需要一些接口类的东西，这些接口是根据和风天气所提供的API进行开发。

1. 1. 需求

页面的干净整洁，看上去美观；操作简单方便，快捷；自动获取当前位置，显示当前天气情况；可以实现根据天气提出生活建议；可以观察实时空气质量；可以观察未来三天天气情况。

1. 1. 开发平台

 Visual Studio Code；百度地图API；和风天气API

1. 4 基于Visual Studio Code项目开发
   1. Visual Studio Code简介

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统[2]。

1. 1. 为什么使用Visual Studio Code
      1. 跨平台

它是免费的，开放源代码和跨平台的编辑器，可在Windows，Linux和macOS上运行，因此无论您的设备所基于的平台如何，您都可以工作。

1. 1. 1. 支持多种编程语言

当您访问Visual Studio Code网站时，您很快就会意识到它支持几乎所有主要的编程语言。它支持Python，Java，HTML，CSS，Type，C++，Java，PHP，Go，C#，PHP，SQL，Ruby，Objective-C等。

1. 1. 1. 您可以更改所选文件的语言

它支持默认语言，具体取决于您的文件，但您也可以更改语言模式。为此，请单击状态栏右侧的语言指示器，这将打开“更改语言模式”下拉菜单。在这里，您可以为当前文件选择不同的语言。

1. 1. 1. 提供特定语言的文档

它的网站包含特定于Visual Studio Code支持的通用语言的文档。其中一些是C++，C#，CSS，Go，Python，PHP，Java等。

1. 1. 1. 调试

VSC带有内置调试器，这也是其主要功能之一。它有助于加速任何程序员的编辑，编译和调试循环。但是，默认情况下，它仅带有支持NodeJS的调试器，该调试器可以调试任何转译为Java的内容，但同样，您可以将扩展名用于其他运行时。

1. 1. 1. 内置Git集成

Visual Studio Code通过提供完整的Git集成使程序员更进一步，使程序员无需离开编辑器即可立即查看更改。您可以在侧栏的左侧找到Git图标，在其中可以对其进行初始化，并可以执行若干Git命令，例如pull，push，publish和其他命令。此外，VSC还可以与多个Git存储库一起使用，无论是本地的还是远程的。

1. 1. 1. 智能感知

程序员使用此功能来实现智能代码完成，参数信息，内容辅助，快速信息和代码提示。VSC为Java，CSS，HTML，Type，JSON，Sass和Less编程语言提供了IntelliSense。对于其他语言，我们可以通过添加其扩展名来使用IntelliSense。

1. 1. 1. 命令面板

按下Ctrl + Shift + P 命令会显示命令面板，使您可以从键盘访问VS Code。它允许您访问VS Code的所有功能，包括所有关键字快捷方式。此外，此选板还允许访问许多命令。

1. 1. 1. 代码管理功能

Visual Studio代码还提供了代码管理功能，例如转到定义，查看定义，查找所有引用并重命名符号。通过右键单击代码文件，可以在VSC中轻松找到这些功能。

1. 1. 1. 定制

与其他流行的编辑器一样，Visual Studio Code也提供自定义功能。实际上，由于其灵活的首选项设置和大量扩展，它提供了极高的自定义性。VSC为您提供了更改主题，更改键盘快捷键，调整设置，创建代码段等选项[3]。

1. 5  JavaScript计算机编程语言

 脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言。例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性[4]。

1. 6  建立开发环境

环境的搭建非常的简单，不需要其他配置。安装谷歌浏览器和Visual Studio Code ，然后在Visual Studio Code内置里安装一个插件open in browser 即可，方便快速在浏览器当中打开（ 快捷键Alt + B ）。