结合bootstrap和查询天气接口axios做的查询天气小demo

最新推荐文章于 2024-04-17 05:11:02 发布

柯柯来康康

最新推荐文章于 2024-04-17 05:11:02 发布

阅读量788

点赞数

分类专栏： vue.js 学习知识分享 axios 文章标签： vue ajax

本文链接：https://blog.csdn.net/weixin_42647901/article/details/109744832

版权

本文演示了一个使用axios查询天气接口与bootstrap结合的小项目。通过调用http://wthrcdn.etouch.cn/weather_mini?city=城市名称获取数据，结合bootstrap样式，实现了在IE浏览器中查询天气的功能。需要注意火狐的CORS问题。项目中，js逻辑放在了main.js，支持点击、回车和搜索等多种查询方式。此外，分享了一个包含多个接口的链接供参考。

摘要由CSDN通过智能技术生成

结合bootstrap和查询天气接口axios做的查询天气小demo

1、查询天气接口：http://wthrcdn.etouch.cn/weather_mini?city=城市名称

2、引入bootstrap.min.css:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

3、使用bootstrap必须先引入jq库，并放于bootstrap前面：

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

4、引入在