前言

本章內(nèi)容為VUE請(qǐng)求后端技術(shù)與相關(guān)技術(shù)討論。

上一篇文章地址：

Vue 3：玩一下web前端技術(shù)（五）_Lion King的博客-CSDN博客

下一篇文章地址：

Vue 3：玩一下web前端技術(shù)（七）_Lion King的博客-CSDN博客

一、請(qǐng)求后端技術(shù)

1、使用Mock.js模擬后端數(shù)據(jù)，用于內(nèi)部調(diào)用

Mock.js 是一個(gè)前端開(kāi)發(fā)模擬數(shù)據(jù)的庫(kù)，可以幫助我們?cè)谇岸碎_(kāi)發(fā)過(guò)程中快速生成模擬數(shù)據(jù)。以下是使用 Mock.js 的步驟：

（1）安裝

npm install mockjs --save-dev

（2）創(chuàng)建存放位置

?（3）編寫接口

/* eslint-disable */
import Mock from 'mockjs';
const apidata = Mock.mock({
? 'list|1-10': [{
? ? 'id|+1': 1,
? ? 'name': '@cname',
? ? 'age|18-60': 1
? }]
});
export default apidata

這個(gè)語(yǔ)句，定義了模擬數(shù)據(jù)規(guī)則，即可以生成一個(gè)包含 1 到 10 個(gè)對(duì)象的數(shù)組，每個(gè)對(duì)象包含一個(gè) id、一個(gè)隨機(jī)的中文名字和一個(gè)年齡（18 到 60 之間）。

（4）在App.vue中引用模擬數(shù)據(jù)

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.age }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import apidata from '@/mock/apiMock.js';

export default {
  data() {
    return {
      list:apidata.list
    }
  },
}

</script>

<style>

</style>

這樣就可以在網(wǎng)頁(yè)上顯示這些數(shù)據(jù)了：

2、將內(nèi)部調(diào)用改成http調(diào)用

apiMock.js

/* eslint-disable */
import Mock from 'mockjs';
Mock.mock('/apidat/list', "get", {
? 'list|1-10': [{
? ? 'id|+1': 1,
? ? 'name': '@cname',
? ? 'age|18-60': 1
? }]
});

3、實(shí)現(xiàn)http請(qǐng)求

（1）安裝axios

npm install axios

（2）修改App.vue文件

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.age }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import './mock/apiMock'
import axios from 'axios'


export default {
  data() {
    return {
      // list:[{"id":1, "name":"王婆", "age":100}],
      list:[],
    }
  },
  methods: {
  fetchData() {
    axios.get('/apidata/list')
      .then(response => {
        this.list=response.data.list
        console.log(this.list)
      })
      .catch(error => {
        console.error(error)
      })
  }},
  mounted() {
  this.fetchData()
}
}

</script>

<style>

</style>

這段代碼使用axios庫(kù)從一個(gè)API獲取數(shù)據(jù)，但這個(gè)數(shù)據(jù)被導(dǎo)入的 ./mock/apiMock 攔截掉了。

在模板(`<template>`)部分，有一個(gè)`<ul>`元素，里面包含使用`v-for`指令遍歷`list`數(shù)組中的每個(gè)元素，生成一個(gè)`<li>`元素。每個(gè)`<li>`元素包含兩個(gè)`<span>`元素，分別展示`item.name`和`item.age`的值。

在`<script>`部分，首先導(dǎo)入了`./mock/apiMock`和axios庫(kù)。然后，在`data()`方法中定義了一個(gè)`list`數(shù)組，初始值為空數(shù)組。在`methods`對(duì)象中定義了一個(gè)`fetchData()`方法，用于發(fā)送GET請(qǐng)求到`/apidata/list`接口，獲取數(shù)據(jù)并將返回結(jié)果賦值給`list`數(shù)組。`mounted()`生命周期鉤子調(diào)用了`fetchData()`方法，在組件被掛載后自動(dòng)調(diào)用該方法。

這段代碼的作用是通過(guò)發(fā)送GET請(qǐng)求到指定的接口，獲取數(shù)據(jù)并在頁(yè)面中展示。注意，導(dǎo)入./mock/apiMock ，axios的請(qǐng)求將先經(jīng)過(guò)./mock/apiMock，如果請(qǐng)求路徑等信息與Mock一致，請(qǐng)求將會(huì)直接獲取Mock的數(shù)據(jù)。

二、相關(guān)技術(shù)討論

1、js文件中的/* eslint-disable */有什么作用？

在JavaScript文件中，/* eslint-disable */是一個(gè)特殊的注釋，用于禁用ESLint對(duì)該注釋范圍內(nèi)代碼的檢查和報(bào)錯(cuò)。

ESLint是一種用于檢查和識(shí)別JavaScript代碼中潛在問(wèn)題的工具。它可以發(fā)現(xiàn)語(yǔ)法錯(cuò)誤、代碼風(fēng)格問(wèn)題、潛在的bug等。通過(guò)在代碼中添加/* eslint-disable */注釋，您可以告訴ESLint跳過(guò)該注釋范圍內(nèi)的代碼檢查。

這在某些情況下非常有用，例如：知道某段代碼違反了ESLint規(guī)則，但有特殊的原因需要保留它時(shí)，就可以使用/* eslint-disable */注釋來(lái)暫時(shí)禁用該代碼的檢查。

2、為什么賦值是為this.list=response.data.list

因?yàn)榻涌谑且粋€(gè)字典，里面包裹了list這個(gè)key，因此訪問(wèn)列表時(shí)需要直接獲取其屬性。

3、'@/mock/apiMock.js'的@是什么意思？

@表示讓當(dāng)前文件所在目錄為根目錄，而不是以相對(duì)路徑的方式（“./”、"../"）查詢

4、console.log(this.list)有什么用？

用處很大，他會(huì)將this.list直接打印到網(wǎng)頁(yè)上的console中，方便調(diào)試 ，像這樣：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-618598.html

到了這里，關(guān)于Vue 3：玩一下web前端技術(shù)（六）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！