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 相关文章推荐
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
javascript 对象的定义方法
2007/01/10 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
清空上传控件input file的值
2010/07/03 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python银行系统实现源码
2019/10/25 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
python常量折叠基础知识点讲解
2021/02/28 Python
美丽乡村建设实施方案
2014/03/23 职场文书
监督检查工作方案
2014/05/28 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
退伍军人感言
2015/08/01 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers