vue读取json数据,vue显示json
本文主要介绍vue如何使用模拟的json数据查看效果，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
使用模拟的json数据检查效果。具体方法如下：vue模拟数据，数据交互mock data $nextTick()数据交互
使用模拟的json数据查看效果
在数据交互领域，经常需要与后台进行沟通和协作。作为初学者或者纯前端学习者，我们不可能总是有背景配合自己去展现，那么如何才能模拟出类似的效果呢？
后台的值实际上是一种json格式的数据。我们只需要模拟json格式的内容。
具体方法如下
1)封装一个存储所需数据的json文件，并将其放在webpack环境的common文件夹中。
数据如下：
{
姓名：张三:
年龄:20，
电话: 12345678 ，
性别:女性，
等级:[
{
语言，100，
数学，98年，
英语，100分，
电脑:95，
物理:88，
电路:89
}
]
}
2)在指定的vue文件中引用这个data.json的数据
这个例子是order.vue
3)在order.vue中设置相应的值
导出默认值{
名称：订单，
data(){
返回{
名称：，
年龄：0，
电话：，
性别：，
等级：[]，
平均值：0
}
},
4)用数据进行模拟，封装在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.定义
模拟服务工具，一般来说，就是模拟服务器的接口数据。一般是在前端和后端分离后使用。前端人员可以依靠API开发，在本地构建一个JSON服务，自己生成测试数据。也就是说，json-server是一个存储json数据的服务器。
00-注:json-server支持CORS和JSONP跨域请求。
2.json-server
使用步骤：
初始化项目：NPM init-y Install json-server NPM I JSON-server-D打开项目写入数据，在项目根目录下创建db.json，写入合法的JSON数据。
通过在package.json下添加以下代码来启动配置：
脚本:{
服务器: json-server db.json
}
在命令行运行：npm运行服务器
$nextTick()
1.应用场景：更新受数据影响的(新)dom时，使用$nextTick()。
数据交互
1.向服务器发送ajax请求以获取数据。
2.解决方法
封装一个ajax通过XMLHttpReauest对象；
函数ajax(选项){
//1.创建一个对象
var xhr=new XMLHttpRequest()；
//2.处理参数——get请求的参数在open中，即url后拼接，post请求的参数在send中。
var params=forms params(options . data)；
//3.判断请求模式。
if (options.type==GET) {
xhr.open(options.type，options.url ？params，options . async)；
xhr.send(空)
}
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 . ready state==4 xhr . status==200){
options . success(xhr . responsetext)；
}
}
函数形式参数(数据){
var arr=[]；
for(数据中的变量键){
//用=分隔字符串，并将值插入arr数组。
//key是对象的键，data[key]是键对应的值
arr . push(key = data[key])；
}
返回arr . join(“”)；
}
}
ajax({
url:地址，//url -地址
type: POST ，//type -请求方式
异步：真，//异步-同步：假的，异步：正确
数据：{ //传入信息
名称： 张三，
年龄：18岁
},
成功：函数（数据){ //返回接受信息
console.log(数据);
}
})
使用第三方自带的创建交互式、快速动态网页应用的网页开发技术库(jquery)使用步骤：
1.在。某视频剪辑软件文件中，脚本标签外面引入jquery。
从" jquery "导入$时；
2.直接发送请求，即可。注意发送请求的时机。
ES6新增的取得格式：获取(字符串url，配置),返回的是一个承诺对象。
获取(url，{
方法：
标题：
正文：
//正文：请求身体信息，可能是一个Blob、BufferSource、FormData、URLSearchParams或者USVString对象。注意得到或头方法的请求不能包含身体信息。
})
//获取方式
获取(网址？id=001，
{方法："获取"
})。然后(回应=回应。JSON())//响应。JSON()将后端返回的数据，转换为数据格式。然后(data=console.log(data))。catch(e=console.log(Oops，error ，e))
//发布方式
获取(url，{
方法： POST ，
邮件头：新邮件头({
content-Type : application/x-www-form-urlencoded //指定提交方式为表单提交
}),
body: id=001name=张三疯//发布请求的参数
})。然后(response=response.json())。然后(data=console.log(data))。catch(e=console.log(Oops，error ，e))
特点：
1 .获取请求默认不带饼干，需要设置fetch(url，{ credentials: include })；
2.服务器返回400,500错误码时并不会拒绝，只有网络错误导致请求不能完成时，获取才会被拒绝。
使用第三方创建交互式、快速动态网页应用的网页开发技术封装成承诺习惯的库。1.定义：
一个基于承诺的第三方库，可以用在浏览器（前端)和nodej.js(后端)中。
2.格式
axios({
url:"地址"
方法： "提交方式"
参数：{}地址栏携带的数据（获取方式)
数据：{}非地址栏携带数据（如：发布、放置等等),
baseURL:如果全球资源定位器(统一资源定位器)不是绝对地址，那么将会加在其前面。当爱可信使用相对地址时这个设置非常方便
}).然后(res={
控制台。日志(研究数据)；
})
爱可信的完整格式和爱可信的别名（获取和帖子)
axios({配置}).然后（成功回调(res).接住（失败回调(res))axios.get(url，{配置}).然后（成功回调(res).接住（失败回调(res))axios.post(url，{配置}).然后（成功回调(res).接住（失败回调(res))注:响应体，数据是在资源数据内部。
eg：get请求
axios({
网址：“getgoodlistnew。PHP ，
//方法：“得到”，默认是得到请求
参数：{
计数：3
}
})。然后(RES=这个。商品清单=RES . data)；
eg：post请求
1)数据是字符串
当数据是字符串时，请求头里的内容类型是应用程序/x-www-form-urlencoded，网络中看到的数据类型是：表单数据。
axios(
{
方法： post ，
网址：“注册保存。PHP”，
数据：用户名=jzmdduserpass=123
})。then(RES={……………………})；
2)数据是URLSearchParams对象
当数据是URLSearchParams对象时，同数据是字符串。
var params=new URLSearchParams()；
params.append(用户名，张三疯);
params.append(userpass ， 123 )；
axios(
{
方法： post ，
网址：“注册保存。PHP”，
数据：参数
})。then(RES={……………………})；
3)数据是数据对象
当数据是数据对象时，请求头里的内容类型是应用程序/json，网络中看到的数据类型是：请求有效负载。
axios({
URL:“/VIPs”，
方法： post ，
数据：{
名称：this.name
pass:this.pass，
性：这个。性
},
baseURL:"http://localhost:3000 "
})。然后(res=console.log(res.data))
3.[面试]Ajax，jQuery ajax，axios和fetch的区别
Ajax是最早的前端交互技术，是原生js。Ajax的核心是XMLHttpRequest对象。如果多个请求之间存在顺序关系，就会出现回调地狱。(用promise解决)fetch是ES6新增的，基于promise设计的。Fetch不是ajax的进一步封装，而是原生js。fetch函数是原生js，不使用XMLHttpRequest对象。
JQuery ajax是原生ajax的封装；Axios是原生ajax的封装，基于promise对象。Axios还可以在请求和响应阶段进行拦截。不仅可以在客户端使用，也可以在node.js端使用。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。