vue如何使用模拟的json数据查看效果


Posted in Vue.js onMarch 31, 2022

使用模拟的json数据查看效果

在数据交互这一块,很多时候是要和后台进行沟通配合的,作为初学者或者纯前端的学习者,我们不可能经常有后台配合自己来展示,那么怎样才能模拟类似的效果呢?

后台传来的值其实也是一种json格式的数据,我们只需要模拟json形式的内容即可。

具体方法如下

1)封装一个json的文件,里面存放需要的数据,在webpack环境下放置在common文件夹中。

vue如何使用模拟的json数据查看效果

数据如下:

{
	"name":"张三",
	"age":20,
	"phone":"12345678",
	"sex":"女",
	"grades":[
	  {
	  	"语文":100,
	  	"数学":98,
	  	"英语":100,
	  	"计算机":95,
	  	"物理":88,
	  	"电路":89
	  }
	]
}

2)在指定的vue文件中引用这个data.json的数据

本例是order.vue

vue如何使用模拟的json数据查看效果

3)在order.vue中设置对应的值

export default{
        name: 'Order',
        data(){
            return{
                name:"",
                age:0,
                phone:"",
                sex:"",
                grades:[],
                avg:0
            }
        },

4)使用数据进行模拟,封装在 created() 中,获取需要的数据

created() {
			this.name = data.name;
			this.age = data.age;
			this.phone = data.phone;
			this.sex = data.sex;
	    	this.grades = data.grades;
			
		},

5)界面调用

<label>name:</label><span>{{name}}</span><br />
            <label>age:</label><span>{{age}}</span><br />
            <label>phone:</label><span>{{phone}}</span><br />
            <label>sex:</label><span>{{sex}}</span><br />

vue模拟数据,数据交互

mock数据

1.定义

mock serve工具,通俗来说,就是模拟服务端接口数据,一般用在前后端分离后,前端人员可以依赖API开发,在本地搭建一个JSON服务,自己产生测试数据。即json-server就是个存储json数据的serve。

:json-server支持CORS和JSONP跨域请求。

2.json-server

使用步骤:

  • 初始化项目:npm init -y
  • 安装json-server  npm i json-server -D
  • 打开项目编写数据

在项目根目录下创建db.json,并写上合法的json数据。

  • 启动配置

在package.json下增加如下代码:

"scripts": {
    "server":"json-server db.json"
}
  • 运行

在命令行运行:npm run server

$nextTick()

1.应用场景:数据更新影响的(新的)dom时,使用$nextTick()。

数据交互

1.向服务器发送ajax请求,获取数据。

2.解决方案

通过XMLHttpReauest对象封装一个ajax;

vue如何使用模拟的json数据查看效果

function ajax(options) {
  //1.创建对象
    var xhr = new XMLHttpRequest();
   //2.处理参数——get请求的参数在open中,即拼接在url后面,post请求的参数在send中
    var params = formsParams(options.data);
    // 3.判断请求方式
    if (options.type == "GET") {
        xhr.open(options.type, options.url + "?" + params, options.async);
        xhr.send(null)
    } 
     if (options.type == "POST") {
        xhr.open(options.type, options.url, options.async);
        //请求头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
    //4.设置回调函数
    xhr.onreadystatechange = function () {
        //xhr.readyState == 4请求成功xhr.status == 200响应完成
        if (xhr.readyState == 4 && xhr.status == 200) {
            options.success(xhr.responseText);
        }
    }
    function formsParams(data) {
        var arr = [];
        for (var key in data) {
      //用=将字符串分隔,再将值插入到arr数组中
        //key是对象的键,data[key]是键对应的值
            arr.push(key+ "=" + data[key]);
        }
        return arr.join("&");
    }
}
ajax({
    url: "地址",  // url---->地址
    type: "POST",   // type ---> 请求方式
    async: true,   // async----> 同步:false,异步:true
    data: {        //传入信息
        name: "张三",
        age: 18
    },
    success: function (data) {   //返回接受信息
        console.log(data);
    }
})
  • 使用第三方自带的ajax库。(jquery)

使用步骤:

1.在.vue文件中,script标签外面引入jquery。

import  $  from “jquery”;

2.直接发送请求,即可。注意发送请求的时机。

  •  ES6新增的fetch

格式:fetch(String url,配置),返回的是一个Promise对象。

fetch(url,{
  method:
  headers:
  body:
//body:请求body信息,可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
})
//get方式
fetch(url?id=001,
    {method:'GET'
})
.then(response => response.json()) //response.json()将后端返回的数据,转换为json格式
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))
//post方式
fetch(url,{
		method:"POST",
		headers: new Headers({
		   'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
		}),
	    body: "id=001&name=张三疯" // post请求的参数
	})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

特点:

1.fetch请求默认不带cookie,需要设置fetch(url,{credentials:'include'});

2.服务器返回400,500错误码时并不会reject,只有网络错误导致请求不能完成时,fetch才会被reject。

  • 使用第三方ajax封装成promise习惯的库。

1.定义:

 一个基于promise的第三方库,可以用在浏览器(前端)和nodej.js(后端)中。

2.格式

axios({
        url : “地址“ 
		method: “ 提交方式”
		params:{} 地址栏携带的数据(get方式)
		data:{} 非地址栏携带数据(如:post,put等等),
		baseURL:如果url不是绝对地址,那么将会加在其前面。当axios使用相对地址时这个设置非常方便
}).then(res=>{
    console.log(res.data);
})

axios的完整格式和axios的别名(get和post)

  • axios({配置}).then(成功回调(res)).catch(失败回调(res))
  • axios.get(url,{配置}).then(成功回调(res)).catch(失败回调(res))
  • axios.post(url,{配置}).then(成功回调(res)).catch(失败回调(res))

:响应体,数据是在res.data内部。

eg:get请求

axios({
        url:'getGoodsListNew.php',
       	 // method:'get',  默认是get请求
        params:{
			count:3
		}
})
.then(res=>this.goodslist=res.data);

eg:post请求

1)data是字符串

当data是字符串时,请求头里的content-type是application/x-www-form-urlencoded,network中看到的数据类型是:formData。

axios(
      {
       	 method:'post',
       	 url:'regSave.php', 
         data:'username=jzmdd&userpass=123'
      })
    .then(res=>{  ……………………     });

2)data是URLSearchParams对象

当data是URLSearchParams对象时,同data是字符串。

var params = new URLSearchParams();
    params.append('username', 张三疯);  
    params.append('userpass', '123');  
 
    axios(
      {
       	 method:'post',
       	 url:'regSave.php', 
         data:params
      })
    .then(res=>{  ……………………     });

3)data是json对象

当data是json对象时,请求头里的content-type是application/json,network中看到的数据类型是:request  payload。

axios({
        url:"/vips",
        method:"post",
        data:{
            name:this.name,
            pass:this.pass,
            sex:this.sex
        },
        baseURL:"http://localhost:3000"                
        })
        .then(res=>console.log(res.data))

3.[面试]Ajax,jQuery ajax,axios和fetch的区别

ajax是最早出现的前后端交互技术,是原生js,核心使用的是XMLHttpRequest对象,多个请求之间如果有先后关系,就会出现回调地狱。(利用promise解决哦)fetch是ES6新增的,fetch是基于promise设计的。fetch不是ajax的进一步封装,而是原生js。fetch函数就是原生js,没有使用XMLHttpRequest对象。

jQuery ajax是原生ajax的封装;axios是原生ajax的封装,基于promise对象。axios也可以在请求和响应阶段进行拦截。它不但可以在客户端使用,也可以在node.js端使用。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue+iview实现手机号分段输入框
Mar 25 #Vue.js
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
关于Vue中的options选项
Mar 22 #Vue.js
vue+echarts实现多条折线图
vue使用echarts实现折线图
You might like
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
如何使用angularJs
2017/05/08 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
express框架下使用session的方法
2019/07/31 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
Python创建日历实例
2014/08/21 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
酒店销售经理岗位职责
2014/01/31 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
年会搞笑主持词
2014/03/27 职场文书
付款委托书范本
2014/04/04 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
免职证明样本
2014/10/23 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
初中教师个人总结
2015/02/10 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Java基础-封装和继承
2021/07/02 Java/Android
react 路由Link配置详解
2021/11/11 Javascript
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫