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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 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 utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python使用turtle绘制分形树
2018/06/22 Python
Python Requests库基本用法示例
2018/08/20 Python
使用tensorflow实现线性回归
2018/09/08 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python程序变成软件的实操方法
2019/06/24 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
竞聘演讲稿范文
2014/01/12 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
自信主题班会
2015/08/14 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏