基于VUE框架、前端UI样式库Bootstrap4、在线WebApi资源调用的Web前端技术课程设计《天气易搜》
主要功能
用户在搜索框中输入中国城市的地名，页面呈现该城市当前的天气情况详情，包括天气概况、当地24小时温度表、未来一周当地的天气预报、生活指数。
设计过程
在京东万象中（wx.jdcloud.com）中获取天气查询WebApi的测试url
由于服务器端调用WebApi没有同源保护的限制，故通过后端去访问要跨域的请求内容并返回，然后前端页面访问本地后端
在Visual Studio 2019新建项目，新建web服务（WebService.asmx）。通过HBuilder在新项目文件中创建前端页面（index.html），下载vue3、jquery、bootstrap、echarts、swiper等相关文件并引入，通过bootstrap完成自适应页面的布局，页面包括由navbar类实现的导航栏、由input-group 类实现的搜索框、swiper实现的轮播图、其他部分皆由card完成布局。
创建Vue实例对象，参照京东万象天气WebApi的测试实例中返回的数据类型，在Vue对象中定义需要的变量，如搜索城市名“city”变量，该变量通过v-model绑定在输入框。使用methods属性定义Search方法，通过v-on为搜索框按钮的click事件添加监听器，通过它调用Search方法。Search方法通过ajax调用本地后端Web服务器中的GetWeather方法，参数为“cityname”变量，再将京东万象中获取的url字符串传递到GetWebApi方法中。
本地Web服务器通过asp.net调用Webapi，通过在GetWebApi方法中构建HttpWebRequest和HttpWebResponse对象调用天气WebApi，调用成功的json字符串返回到前端页面。前端通过parse函数将返回的字符串反序列化转换为json对象并赋值给Vue变量。
将vue对象中的数据通过“Mustache”、v-for遍历数组、v-bind双向绑定属性和数据的方法渲染到页面dom元素上，其中，echarts图表在ajax回调函数中直接获取相关数据并进行初始化操作。
最后在Vue的mounted函数中初始化页面。
前端页面
部分代码
`
天气概况
{{csm}}
{{sj}}
{{tq}}
{{wd}} ℃
湿度：{{sd}}
风向：{{fx}}
风级：{{fj}}
空气质量：{{kqzl}}
aqi等级：{{zsdj}}
建议：{{zsjy}}
24小时温度表
未来一周天气预报
{{item.date}}
{{item.week}}
{{item.day.weather}}
{{item.day.temphigh}} ℃
{{item.night.templow}} ℃
{{item.night.weather}}
生活指数
{{item.iname}}
{{item.ivalue}}
{{item.detail}}
设计总结
已完成的功能
实现使用bootstrap完成自适应页面的布局。
简单实现对全国县级及以上地区的天气情况查询。
存在的问题
echarts图表创建过程中，起初想在methods中创建新的方法，通过将获取的json数据传入的方式得到echarts图表，尝试了很多次都以失败告终。最后通过把初始化代码写到ajax回调函数中实现了该功能。
浙公网安备 33010602011771号