vue-网络应用

最新推荐文章于 2021-12-28 14:41:13 发布

吾本樵夫

最新推荐文章于 2021-12-28 14:41:13 发布

阅读量189

点赞数

分类专栏： vue指令 vue网络请求文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43317510/article/details/105439494

版权

vue指令同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue网络请求

1 篇文章 0 订阅

订阅专栏

vue结合网络数据开发应用

axios+vue结合使用

axios

功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址？key=value&key2=value2).then{function(response){},function(err){}}

get请求和post请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>axios</title>
</head>
<body>

<!--get post请求-->
<input type="button" value="get请求" class="get"/>
<input type="button" value="post请求" class="post"/>

<!--官网提供的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=3")
      .then(function (response) {
          console.log(response)
        }, function (error) {
          console.log(error)
        }
      )
  }

  /**
   * 接口2 ：用户注册
   * 请求地址：https://autumnfish.cn/api/user/reg
   * 请求参数：username(用户名，字符串)
   * 请求方式：post
   * 响应内容：注册成功或失败
   */
  document.querySelector(".post").onclick = function () {
    axios.post("https://autumnfish.cn/api/user/reg", {"username": "lazy"})
      .then(function (response) {
        console.log(response)
      })
  }


</script>
</body>
</html>

axios-vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-axios</title>
</head>
<body>

<div id="app">

  <input type="button" value="讲个笑话" @click="getJoke">
  <p>{{joke}}</p>
</div>
<!-- 1. 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

  /**
   * axios回调函数中的this已经改变，无法访问到data中数据
   * 把this保存起来，回调函数中直接使用保存的this即可
   * 和本地应用的最大区别就是改变了数据来源
   * @type {Vue}
   */
  //挂载视图数据
  var app = new Vue({

    el: "#app",
    data: {
      joke: "笑话源于生活，乐此不疲"
    },
    methods: {
      getJoke: function () {
        //将this暂存起来
        var jok = this
        //编写逻辑
        axios.get("https://autumnfish.cn/api/joke")
          .then(function (response) {
            console.log(response.data)
            jok.joke = response.data
          }, function (error) {
            console.log(error)
          })
      }
    }
  })


</script>
</body>
</html>