年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1844|回复: 0

[Vue.js] 第二讲:项目实战Vue快速入门-用户管理-网络请求

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2017-12-28 11:50:43 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2017-12-28 11:59 编辑

    1、接口地址:http://jsonplaceholder.typicode.com/users,该接口会返回一个用户信息的json对象数组;
    2、需求分析:使用vue框架的http请求,将接口数据请求到本地变量中;

    3、实现解析
    3.1、默认情况下vue框架没有安装http请求的组件,需要先安装,在工程目录下使用命令
    [AppleScript] 纯文本查看 复制代码
    npm install vue-resource --save
    3.2、安装好后再次启用项目,在main.js中引入vue-resource组件
    [AppleScript] 纯文本查看 复制代码
    // 引入网络请求组件
    import vueResource from 'vue-resource'
    Vue.use(vueResource)
    3.3、在vue文件的<script>部分增加数据集合、初始化方法
    3.3.1、<script>中的export default {}里面中的定义是vue的特性,如果不能理解为什么会这样,要么就记住后续再慢慢消化,要么去官方https://cn.vuejs.org文档中慢慢啃,我建议先不管,按套路来写,见多了就自然明了了;
    3.3.2、数据集合中一个data(){}函数,要求返回一个数组对象,根据我们业务需要,先定义一个users:[]的空数组;
    3.3.3、初始化方法是一个函数created:function(){},这个函数在加载页面时自动被调用,我们的http请求在这里实现;
    3.4、vue框架网络请求的格式为this.$http.get(),参数为http请求地址,该方法会返回请求本身,所以后面还可以跟.then()方法,结果返回在该方法中接收处理,参数为带结果的函数;
    3.4.1、http请求可以这么写
    [JavaScript] 纯文本查看 复制代码
        this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then(function(response){
          // console.log(response.data);
          this.users = response.data;
        });
    3.4.2、对于初学才不能理解也正常,不能理解就记住这种写法,后续如果有相关的业务需求就用这个去套,这是最有效的方法!!

    4、关键代码:
    4.1、main.js
    [AppleScript] 纯文本查看 复制代码
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    
    // 引入网络请求组件
    import vueResource from 'vue-resource'
    Vue.use(vueResource)
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })
    main
    4.2、App.vue
    [AppleScript] 纯文本查看 复制代码
    <!-- 1、模板结构 -->
    <template>
      <div id="app">
        <!-- 显示用户数组 -->
        <p>{{users}}</p>
      </div>
    </template>
    
    <!-- 2、JS处理 -->
    <script>
    export default {
      name: 'app',
      // 数组集合
      data(){
        return {
          users:[],
        };
      },
      // 初始化方法
      created:function(){
        this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then(function(response){
          // console.log(response.data);
          this.users = response.data;
        });
      }
    }
    </script>
    
    <!-- 2、样式处理 -->
    <style scoped>
    
    </style>
    
    5、最终结果
    到目前为止,如果一切正常,应该会看到页面上显示的是从接口返回的一个json数组;
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 02:21 , Processed in 0.049584 second(s), 18 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表