foreword
The content of this chapter is the discussion of VUE request backend technology and related technologies.
Previous article address:
Vue 3: Play with web front-end technology (5) - Lion King's Blog - CSDN Blog
Next article address:
(none)
1. Request back-end technology
1. Use Mock.js to simulate back-end data for internal calls
Mock.js is a library for front-end development of simulated data, which can help us quickly generate simulated data during the front-end development process. Here are the steps to use Mock.js:
(1) installation
npm install mockjs --save-dev(2) Create a storage location
(3) Write the interface
/* 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
This statement defines the simulated data rules, that is, an array containing 1 to 10 objects can be generated, and each object contains an id, a random Chinese name and an age (between 18 and 60).
(4) Reference mock data in 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>
In this way, the data can be displayed on the web page:
2. Change the internal call to http call
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. Implement http request
(1) install axios
npm install axios(2) Modify the App.vue file
<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>
This code uses the axios library to get data from an API, but this data is intercepted by the imported ./mock/apiMock.
In the template (`<template>`) section, there is a `<ul>` element, which contains the use of the `v-for` command to traverse each element in the `list` array and generate a `<li>` element. Each `<li>` element contains two `<span>` elements that display the values of `item.name` and `item.age` respectively.
In the `<script>` section, `./mock/apiMock` and the axios library are first imported. Then, a `list` array is defined in the `data()` method, and the initial value is an empty array. A `fetchData()` method is defined in the `methods` object, which is used to send a GET request to the `/apidata/list` interface, obtain data and assign the returned result to the `list` array. The `mounted()` lifecycle hook calls the `fetchData()` method, which is called automatically after the component is mounted.
The function of this code is to obtain data and display it on the page by sending a GET request to the specified interface. Note that when importing ./mock/apiMock, the axios request will first pass through ./mock/apiMock. If the request path and other information are consistent with the Mock, the request will directly obtain the Mock data.
2. Related technical discussions
1. What is the function of /* eslint-disable */ in the js file?
In JavaScript files, /* eslint-disable */ is a special comment used to disable ESLint's inspection and error reporting of code within the comment range.
ESLint is a tool for inspecting and identifying potential issues in JavaScript code. It can find syntax errors, code style issues, potential bugs, and more. By adding a /*eslint-disable*/ annotation to your code, you tell ESLint to skip code linting within the scope of that annotation.
This is very useful in some cases, for example: when you know that a piece of code violates ESLint rules, but you need to keep it for special reasons, you can use /*eslint-disable*/ annotation to temporarily disable the inspection of the code.
2. Why the assignment is this.list=response.data.list
Because the interface is a dictionary, which contains the key list, you need to directly obtain its attributes when accessing the list.
3. What does @ in '@/mock/apiMock.js' mean?
@ indicates that the directory where the current file is located is the root directory, rather than querying with relative paths ("./", "../")
4. What is the use of console.log(this.list)?
It is very useful. It will print this.list directly to the console on the web page, which is convenient for debugging, like this:
