前端Vue框架(通过axios获取地址串（接口）信息)

获取地址串信息：某些公司会提供一些地址串的接口，可以通过vue框架使用axios获取里面的值，并循环遍历参考代码： <!DOCTYPE html><html><head><title>demo5 社区作业1</title><meta charse

JayVergil

5034人浏览 · 2018-09-27 22:14:07

JayVergil · 2018-09-27 22:14:07 发布

获取地址串信息：某些公司会提供一些地址串的接口，可以通过vue框架使用axios获取里面的值，并循环遍历

参考代码：

<!DOCTYPE html>
<html>
<head>
   <title>demo5 社区作业1</title>
   <meta charset="UTF-8">
   <!--导包-->
   <script src="js/vue.js"></script>
   <script src="js/axios.min.js"></script>
</head>
<body>
   <div id="demo1">
      <table>
         <!--{{msg}}可以打印看看是否拿到值-->
         <!--通过v-for方法，可以把msg的值赋值给item进行遍历-->
      <tr v-for="item in msg">
         <td>{{item.title}}</td>
         <td>{{item.last_reply_at}}></td>
         <td>{{item.desc}}</td>
      </tr>
      </table>
   </div>
</body>
<script>
   var vm = new Vue({
      //绑定div
      el:"#demo1",
      data:{
          //声明属性
          msg:[]
      },methods:{
          //seach方法
          seach:function(){
              //通过axios,get方法获取地址的信息
              axios.get("https://cnodejs.org/api/v1/topics").then(
                 res=>{
                     //可以打印一下获取到的信息，看下是怎么样的结构
                     console.log(res.data.data);
                     //把需要的参数赋值给之前声明的Msg
                     this.msg=res.data.data;
               }
            ).catch(
                //错误异常
                err=>{
                    this.msg=err.status;
               }
            )
         }
      },mounted:function (){
          //mounted是声明周期，在声明周期中执行方法
            this.seach()
        }

   });
</script>

</html>



其他案例网易接口：

<!DOCTYPE html>
<html>
<head>
   <title>demo7 网易留言</title>
   <meta charset="UTF-8">
   <script src="js/vue.js"></script>
   <script src="js/axios.min.js"></script>
</head>
<body>
   <div id="demo1">
      <!--{{msg}}}-->
      <table>
         <tr v-for="item in msg">
            <td>{{item.commentTxt}}</td>
            <td>{{item.createAt}}</td>
         </tr>
      </table>
   </div>
</body>
<script>
   var vm = new Vue({
      el:"#demo1",
      data:{
          msg:[]
      },
      methods:{
          seach:function(){
              axios.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187")
               .then(
                   res=>{
                       //commentList是里面包装的一个集合名字，获取值之前先打印看看信息
                       this.msg=res.data.data.commentList;
                       console.log(res.data);
                  }
               ).catch(
                   err=>{
                       this.mag=err.status;
                  }
            )
         }
      },
      mounted:function () {
         this.seach();
        }
   });
</script>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^