模拟假数据


拷贝相似字段数据

去目标网站上找一个所需要的数据格式，然后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
…





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))
            },






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的区别

axios对已经获得的数据进行了一层封装，用来防止XSRF攻击

axios底层自动对数据进行了一次格式化，所以就少一层。


fetch并没有进行封装，拿到的就是格式化的数据。

所以用fetch进行多一层的格式化，在进行一层格式化的方法有

res.json（）
res.blob（）格式化二进制
res.text（）





其他的总结信息


Vue中可以统一对axios进行挂载
Vue.prototype.$http = axios//在前边写这句代码，后面的axios都可以替换成this.$htttp



关于vue的历史

vue1.0
vue2.0

vue 获取数据的数据对象去重方法

quChong() {
    let arr = [
     {
      id: 1,
      name: '111'
     },
     {
      id: 1,
      name: '111'
     },
     {
      id: 2,
      name: '222'
     },
     {
      id: 3,
      name: '333'
     }
    ];
    console.log(arr);
    console.log('--------------------');
    let arr1 = this.unique(arr);
    console.log(arr1);
   },
   unique(arr) {
    const res = new Map();
    return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
   },

 

项目场景：
Vue + Springboot整合springdata 访问neo4j
问题描述：
前端Vue通过axios获取后台数据时候，console.log能够在后台输出但是不能够在前端渲染
解决方案：
经过我的测试分析

发现 是前端的数据类型和后端的数据类型不匹配，起初我的后端返回类型是 以类形式返回 数据格式为{}  但是前端data数据段里的格式是[{}] 所以将后端的返回数据类型变为List [{}]就行了

在Vue对数组重新赋值的时候，视图层没有随着数据的变化而更新渲染

这种时候可以往数组里面添加一个对象然后删除
let arr = [{test:'1'},{test:2}]

arr = [[{test:'1'},{test:2},{test:3}]
arr.push({})
app.pop()