vue基础（四）----天知道（天气查询）

最新推荐文章于 2024-05-27 20:44:21 发布

别影响我打怪

最新推荐文章于 2024-05-27 20:44:21 发布

阅读量682

点赞数 1

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/weixin_43370373/article/details/118435736

版权

本文介绍了如何使用Vue和axios库开发天气查询应用。重点讨论了axios的使用，包括基本语法和在Vue中处理回调函数时this的指向问题。同时，提到了应用的逻辑代码应与页面分离，存储在单独的js文件中，以提高代码复用性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue结合网络数据开发应用

axios（网络请求库）
axios+vue

强大的网络请求库：
语法

axios

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios网络请求</title>
</head>

<body>
  <input type="button" value="get请求" class="get"></input>
  <input type="button" value="post请求" class="post"></input>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    /*
        接口1:随机笑话
        请求地址:https://autumnfish.cn/api/joke/list
        请求方法:get
        请求参数:num(笑话条数,数字)
        响应内容:随机笑话
    */
    document.querySelector(".get").onclick = function () {
    
      axios.get("https://autumnfish.cn/api/joke/list?num=10")
        .then(function (response) {
    
          console.log(response);
        }, function (err) {
    
          console.log(err);
        })
    }
    /*
         接口2:用户注册
         请求地址:https://autumnfish.cn/api/user/reg
         请求方法:post
         请求参数:username(用户名,字符串)
         响应内容:注册成功或失败
     */

    document.querySelector(".post").onclick = function () {
    
      axios.post("https://autumnfish.cn/api/user/reg", {
    
        username: "按时睡觉好难"
      })
        .then(function (response) {
    
          console.log(response);
          console.log

最低0.47元/天解锁文章