How to open a page in vue3 and send a request to the backend

Table of contents

background:

accomplish:

1. Use

2. Case

Replenish:

1. How to define a collection to accept the list returned by the backend

2. Add request header

---

background:

If you want to send a request to the backend when the page is just loaded, you can use the life cycle hook function of Vue 3onMounted to achieve it

accomplish:

1. Use

First, make sure you have Vue 3 and related dependencies installed.

Then, add the following code inside the <script> tag:

import { onMounted } from 'vue'

onMounted(() => {
  // 发送请求的逻辑代码
  // 在此处编写与后端通信的请求逻辑
})

In the above code, onMounted is one of the life cycle hook functions provided by Vue 3. It executes the code in the callback function immediately after the component is mounted to the DOM. You can write the request logic to communicate with the backend in the callback function.

2. Case

import { onMounted } from 'vue'
import axios from 'axios'

onMounted(async () => {
  try {
    const response = await axios.get('/api/data') // 向后端发送GET请求获取数据
    console.log(response.data) // 打印返回的数据

    // 在这里可以对后端返回的数据进行处理，更新页面状态或执行其他操作
  } catch (error) {
    console.error('请求失败:', error)
  }
})

In the above example:

• Usesaxios library to send GET requests. When the component is mounted to the DOM, the onMounted callback function will be triggered and the code in it will be executed.
• Inside the callback function, a GET request is sent using the axios.get method, and the URL is /api/data. This is a sample interface address, which can be determined according to your The actual situation is modified to the correct backend interface URL
• Useawait keyword to wait for the request to be completed and get the response result, and assign it to theresponse variable
• The response data is printedresponse.data, and the data can be processed according to actual needs.

Replenish:

1. How to define a collection to accept the list returned by the backend

import { onMounted, ref } from 'vue'
import axios from 'axios'

onMounted(async () => {
  try {
    const dataList = ref([]) // 定义一个响应式的数组来接收后端返回的列表数据

    const response = await axios.get('/api/data') // 向后端发送GET请求获取数据
    dataList.value = response.data // 将返回的列表数据赋值给dataList

    console.log(dataList.value) // 打印接收到的列表数据

    // 在这里可以对接收到的列表数据进行处理，更新页面状态或执行其他操作
  } catch (error) {
    console.error('请求失败:', error)
  }
})

2. Add request header

If you get a token when logging in, you need to use the token for authentication in subsequent requests. Normally, you can pass the token in the header of the request.

import { onMounted } from 'vue'
import axios from 'axios'

onMounted(async () => {
  try {
    const token = localStorage.getItem('token') // 假设你将token存储在localStorage中
    const response = await axios.get('/api/data', {
      headers: {
        Authorization: `Bearer ${token}`, // 在请求头部添加Authorization字段，并附上Bearer <token>格式的值
      },
    })

    console.log(response.data) // 打印返回的数据

    // 在这里可以对后端返回的数据进行处理，更新页面状态或执行其他操作
  } catch (error) {
    console.error('请求失败:', error)
  }
})

• Get the stored token from localStorage vialocalStorage.getItem('token').
• Then, when sending a GET request, we add the token to the Authorization field of the request header through the headers parameter, using the format of Bearer Token.
• In this way, the backend server can read and verify the token from the request header for identity authentication and authorization control. It can be adapted according to your actual token storage method and back-end requirements.