Vue 3：玩一下web前端技术（六）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 3：玩一下web前端技术（六）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

本章内容为VUE请求后端技术与相关技术讨论。

上一篇文章地址：

Vue 3：玩一下web前端技术（五）_Lion King的博客-CSDN博客

下一篇文章地址：

Vue 3：玩一下web前端技术（七）_Lion King的博客-CSDN博客

一、请求后端技术

1、使用Mock.js模拟后端数据，用于内部调用

Mock.js 是一个前端开发模拟数据的库，可以帮助我们在前端开发过程中快速生成模拟数据。以下是使用 Mock.js 的步骤：

（1）安装

npm install mockjs --save-dev

（2）创建存放位置

Vue 3：玩一下web前端技术（六）,web前端技术,前端,vue.js,javascript

（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

这个语句，定义了模拟数据规则，即可以生成一个包含 1 到 10 个对象的数组，每个对象包含一个 id、一个随机的中文名字和一个年龄（18 到 60 之间）。

（4）在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 apidata from '@/mock/apiMock.js';

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

</script>

<style>

</style>

这样就可以在网页上显示这些数据了：

Vue 3：玩一下web前端技术（六）,web前端技术,前端,vue.js,javascript

2、将内部调用改成http调用

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、实现http请求

（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库从一个API获取数据，但这个数据被导入的 ./mock/apiMock 拦截掉了。

在模板(`<template>`)部分，有一个`<ul>`元素，里面包含使用`v-for`指令遍历`list`数组中的每个元素，生成一个`<li>`元素。每个`<li>`元素包含两个`<span>`元素，分别展示`item.name`和`item.age`的值。

在`<script>`部分，首先导入了`./mock/apiMock`和axios库。然后，在`data()`方法中定义了一个`list`数组，初始值为空数组。在`methods`对象中定义了一个`fetchData()`方法，用于发送GET请求到`/apidata/list`接口，获取数据并将返回结果赋值给`list`数组。`mounted()`生命周期钩子调用了`fetchData()`方法，在组件被挂载后自动调用该方法。

这段代码的作用是通过发送GET请求到指定的接口，获取数据并在页面中展示。注意，导入./mock/apiMock ，axios的请求将先经过./mock/apiMock，如果请求路径等信息与Mock一致，请求将会直接获取Mock的数据。