vue获取数据

模拟假数据

• 拷贝相似字段数据

  • 去目标网站上找一个所需要的数据格式，然后copy，放入json文件中，再格式化文档即可。

• 使用第三方mock.js来生成json数据【即用代码来生成数据】

  • mockjs.com 需要任何关于此种方法生成数据的方案都可以来这个网站查询方法。

  • 安装

    • npm i mockjs

  • 使用

    • // 使用 Mock
      var Mock = require('mockjs')
      var data = Mock.mock({
          // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
          'list|1-10': [{
      		//可以自己定义变量名
      		'name|+1':['a','b','c']
              // 属性 id 是一个自增数，起始值为 1，每次增 1
              'id|+1': 1
          }]
      })
      // 输出结果
      console.log(JSON.stringify(data, null, 4))
      

    • 将得到的data数据传入到新建的文件夹里，这里我传到了mock.js，复习一下node.js的代码

      const fs = require('fs')//引入模块
      
      //向目标文件中写入代码，如果目标文件不存在，那么就新建一个
      fs.writeFile('./mock.json', JSON.stringify(data), function(error) {
          if (error) throw error
      })
      

• 使用easy mock这个线上网站生成数据

  • 具体使用方法可以去他的官网学习。

请求静态数据

 static() {
				// 注释掉的也是一种请求写法
                // const p = axios({
                //     url: './data/list.json'
                // })
                // console.log(p)

                axios.get('/day03/数据交互/data/list.json').then(
                    res => {
                        console.log(res.data.data.films);
                        this.list = res.data.data.films
                    }
                ).catch(error => console.log(error))
            }

请求动态数据【通过后端接口来请求数据】

• 动态数据请求必须要有接口，打造这个接口，我们可以有比较多的方式选择：
  • php
  • java
  • node
  • c
  • …

1. get

   • 使用axios进行get请求的代码块

       get() {
                     axios({
                             url: 'http://127.0.0.1:8080/get.php',
                             params: { //请求的传参
                                 a: 9,
                                 b: 5
                             }
                         }).then(res => console.log(res))
                         .catch(error => console.log(error))
                 },
     

   • 使用fetch进行get请求的代码块

     get() {
                     fetch(
                             'http://127.0.0.1:8080/get.php?a=9&b=5'
                         )
                         .then(res => res.text())
                         .then(data => console.log(data))
                         .catch(error => console.log(error))
                 },
     
     

2. post

   • 使用axios进行post请求的代码块

     post() {
                     let parmas = new URLSearchParams()
                     parmas.append('a', 1)
                     parmas.append('b', 2)
                     axios({
                             url: 'http://127.0.0.1:8080/post.php',
                             method: 'POST',
                             data: parmas
                         }).then(res => console.log(res))
                         .catch(error => console.log(error))
                 }
     

   • 使用fetch进行post请求的代码块

      post() {
                     fetch(
                             'http://127.0.0.1:8080/post.php', {
                                 method: 'POST',
                                 headers: new Headers({
                                     'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
                                 }),
                                 body: new URLSearchParams([
                                     ['a', 1],
                                     ['b', 2]
                                 ]).toString()
                             }).then(res => res.text())
                         .then(data => console.log(data))
                         .catch(error => console.log(error))
                 }
     

axios 和fetch的区别

1. axios对已经获得的数据进行了一层封装，用来防止XSRF攻击
   • axios底层自动对数据进行了一次格式化，所以就少一层。
2. fetch并没有进行封装，拿到的就是格式化的数据。
   • 所以用fetch进行多一层的格式化，在进行一层格式化的方法有
     • res.json（）
     • res.blob（）格式化二进制
     • res.text（）

其他的总结信息

1. Vue中可以统一对axios进行挂载

   Vue.prototype.$http = axios//在前边写这句代码，后面的axios都可以替换成this.$htttp
   

关于vue的历史

1. vue1.0
2. vue2.0