vue怎么使用模擬的json數(shù)據(jù)查看效果

這篇文章主要介紹“vue怎么使用模擬的json數(shù)據(jù)查看效果”，在日常操作中，相信很多人在vue怎么使用模擬的json數(shù)據(jù)查看效果問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue怎么使用模擬的json數(shù)據(jù)查看效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

使用模擬的json數(shù)據(jù)查看效果

在數(shù)據(jù)交互這一塊，很多時(shí)候是要和后臺(tái)進(jìn)行溝通配合的，作為初學(xué)者或者純前端的學(xué)習(xí)者，我們不可能經(jīng)常有后臺(tái)配合自己來(lái)展示，那么怎樣才能模擬類似的效果呢？

后臺(tái)傳來(lái)的值其實(shí)也是一種json格式的數(shù)據(jù)，我們只需要模擬json形式的內(nèi)容即可。

具體方法如下

1）封裝一個(gè)json的文件，里面存放需要的數(shù)據(jù)，在webpack環(huán)境下放置在common文件夾中。

數(shù)據(jù)如下：

{
	"name":"張三",
	"age":20,
	"phone":"12345678",
	"sex":"女",
	"grades":[
	  {
	  	"語(yǔ)文":100,
	  	"數(shù)學(xué)":98,
	  	"英語(yǔ)":100,
	  	"計(jì)算機(jī)":95,
	  	"物理":88,
	  	"電路":89
	  }
	]
}

2）在指定的vue文件中引用這個(gè)data.json的數(shù)據(jù)

本例是order.vue

3）在order.vue中設(shè)置對(duì)應(yīng)的值

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

4）使用數(shù)據(jù)進(jìn)行模擬，封裝在 created() 中，獲取需要的數(shù)據(jù)

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

5）界面調(diào)用

            <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模擬數(shù)據(jù),數(shù)據(jù)交互

mock數(shù)據(jù)

1.定義

mock serve工具，通俗來(lái)說，就是模擬服務(wù)端接口數(shù)據(jù)，一般用在前后端分離后，前端人員可以依賴API開發(fā)，在本地搭建一個(gè)JSON服務(wù)，自己產(chǎn)生測(cè)試數(shù)據(jù)。即json-server就是個(gè)存儲(chǔ)json數(shù)據(jù)的serve。

注：json-server支持CORS和JSONP跨域請(qǐng)求。

2.json-server

使用步驟：

• 初始化項(xiàng)目：npm init -y

• 安裝json-server  npm i json-server -D

• 打開項(xiàng)目編寫數(shù)據(jù)

在項(xiàng)目根目錄下創(chuàng)建db.json,并寫上合法的json數(shù)據(jù)。

• 啟動(dòng)配置

在package.json下增加如下代碼：

"scripts": {
    "server":"json-server db.json"
}

• 運(yùn)行

在命令行運(yùn)行：npm run server

$nextTick()

1.應(yīng)用場(chǎng)景：數(shù)據(jù)更新影響的（新的）dom時(shí)，使用$nextTick()。

數(shù)據(jù)交互

1.向服務(wù)器發(fā)送ajax請(qǐng)求，獲取數(shù)據(jù)。

2.解決方案

通過XMLHttpReauest對(duì)象封裝一個(gè)ajax；

function ajax(options) {
  //1.創(chuàng)建對(duì)象
    var xhr = new XMLHttpRequest();
   //2.處理參數(shù)——get請(qǐng)求的參數(shù)在open中，即拼接在url后面，post請(qǐng)求的參數(shù)在send中
    var params = formsParams(options.data);
    // 3.判斷請(qǐng)求方式
    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);
        //請(qǐng)求頭
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
    //4.設(shè)置回調(diào)函數(shù)
    xhr.onreadystatechange = function () {
        //xhr.readyState == 4請(qǐng)求成功xhr.status == 200響應(yīng)完成
        if (xhr.readyState == 4 && xhr.status == 200) {
            options.success(xhr.responseText);
        }
    }
    function formsParams(data) {
        var arr = [];
        for (var key in data) {
      //用=將字符串分隔，再將值插入到arr數(shù)組中
        //key是對(duì)象的鍵，data[key]是鍵對(duì)應(yīng)的值
            arr.push(key+ "=" + data[key]);
        }
        return arr.join("&");
    }
}
ajax({
    url: "地址",  // url---->地址
    type: "POST",   // type ---> 請(qǐng)求方式
    async: true,   // async----> 同步：false，異步：true
    data: {        //傳入信息
        name: "張三",
        age: 18
    },
    success: function (data) {   //返回接受信息
        console.log(data);
    }
})

• 使用第三方自帶的ajax庫(kù)。（jquery）

使用步驟：

1.在.vue文件中，script標(biāo)簽外面引入jquery。

import  $  from “jquery”;

2.直接發(fā)送請(qǐng)求，即可。注意發(fā)送請(qǐng)求的時(shí)機(jī)。

•  ES6新增的fetch

格式：fetch(String url,配置)，返回的是一個(gè)Promise對(duì)象。

fetch(url,{
  method:
  headers:
  body:
//body：請(qǐng)求body信息，可能是一個(gè) Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對(duì)象。注意 GET 或 HEAD 方法的請(qǐng)求不能包含 body 信息。
})
//get方式
fetch(url?id=001,
    {method:'GET'
})
.then(response => response.json()) //response.json()將后端返回的數(shù)據(jù)，轉(zhuǎn)換為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請(qǐng)求的參數(shù)
	})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

特點(diǎn)：

1.fetch請(qǐng)求默認(rèn)不帶cookie，需要設(shè)置fetch(url,{credentials:'include'});

2.服務(wù)器返回400,500錯(cuò)誤碼時(shí)并不會(huì)reject，只有網(wǎng)絡(luò)錯(cuò)誤導(dǎo)致請(qǐng)求不能完成時(shí)，fetch才會(huì)被reject。

• 使用第三方ajax封裝成promise習(xí)慣的庫(kù)。

1.定義：

 一個(gè)基于promise的第三方庫(kù)，可以用在瀏覽器（前端）和nodej.js（后端）中。

2.格式

axios({
        url : “地址“ 
		method: “ 提交方式”
		params：{} 地址欄攜帶的數(shù)據(jù)（get方式）
		data:{} 非地址欄攜帶數(shù)據(jù)（如：post，put等等）,
		baseURL：如果url不是絕對(duì)地址，那么將會(huì)加在其前面。當(dāng)axios使用相對(duì)地址時(shí)這個(gè)設(shè)置非常方便
}).then(res=>{
    console.log(res.data);
})

axios的完整格式和axios的別名（get和post）

• axios({配置}).then(成功回調(diào)(res)).catch(失敗回調(diào)(res))

• axios.get(url,{配置}).then(成功回調(diào)(res)).catch(失敗回調(diào)(res))

• axios.post(url,{配置}).then(成功回調(diào)(res)).catch(失敗回調(diào)(res))

注：響應(yīng)體，數(shù)據(jù)是在res.data內(nèi)部。

eg：get請(qǐng)求

axios({
        url:'getGoodsListNew.php',
       	 // method:'get',  默認(rèn)是get請(qǐng)求
        params:{
			count:3
		}
})
.then(res=>this.goodslist=res.data);

eg：post請(qǐng)求

1)data是字符串

當(dāng)data是字符串時(shí)，請(qǐng)求頭里的content-type是application/x-www-form-urlencoded，network中看到的數(shù)據(jù)類型是：formData。

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

2)data是URLSearchParams對(duì)象

當(dāng)data是URLSearchParams對(duì)象時(shí)，同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對(duì)象

當(dāng)data是json對(duì)象時(shí)，請(qǐng)求頭里的content-type是application/json，network中看到的數(shù)據(jù)類型是：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的區(qū)別

ajax是最早出現(xiàn)的前后端交互技術(shù)，是原生js，核心使用的是XMLHttpRequest對(duì)象，多個(gè)請(qǐng)求之間如果有先后關(guān)系，就會(huì)出現(xiàn)回調(diào)地獄。（利用promise解決哦）fetch是ES6新增的，fetch是基于promise設(shè)計(jì)的。fetch不是ajax的進(jìn)一步封裝，而是原生js。fetch函數(shù)就是原生js，沒有使用XMLHttpRequest對(duì)象。

jQuery ajax是原生ajax的封裝；axios是原生ajax的封裝，基于promise對(duì)象。axios也可以在請(qǐng)求和響應(yīng)階段進(jìn)行攔截。它不但可以在客戶端使用，也可以在node.js端使用。

到此，關(guān)于“vue怎么使用模擬的json數(shù)據(jù)查看效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！