vue請求后端數(shù)據(jù)和跨域問題解決

更新時(shí)間：2023年05月17日 08:25:00 作者：蕭熙

這篇文章主要介紹了vue請求后端數(shù)據(jù)和跨域問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近遇到的一個(gè)問題后端寫好的接口，前端怎么獲取數(shù)據(jù)呢？

這是我后端的接口：GET 接口

這是我前端運(yùn)行的項(xiàng)目地址：

簡單使用：

咱門前端使用頗受好評的 axios 來發(fā)起請求

這是它的官網(wǎng)：https://www.axios-http.cn/

不過要在vue中使用它，就需要先安裝打開終端輸入一下命令

npm install axios

然后在需要使用的頁面 <script> 中標(biāo)簽引入 axios就行了

import axios from 'axios'

然后在methods中創(chuàng)建一個(gè)函數(shù)：代碼如下

a() {
      // const axios = require('axios');  // 官方給出的例子 這段話類似于 import
      axios.get('http://localhost:8088/user') // 這里填寫后端的地址
        .then(function (response) {
          // 處理成功情況
          console.log(response);
        })
        .catch(function (error) {
          // 處理錯(cuò)誤情況
          console.log(error);
        })
        .then(function () {
          // 總是會(huì)執(zhí)行
        });
    }

require 和 import 具體詳情，可以查閱相關(guān)資料

寫完之后在 div中寫一個(gè) <button> 標(biāo)簽<button @click="a()">點(diǎn)我 a</button>

打開控制臺可以看到，data里面有三條數(shù)據(jù)

看到這里，我們就請求到了后端數(shù)據(jù)（后端一定要允許跨域請求）

改進(jìn)

寫完你這里例子之后，又寫了幾個(gè)請求，發(fā)現(xiàn)呢，每次都要復(fù)制黏貼，還有好多重復(fù)性代碼，就想到，應(yīng)該可以把這個(gè)axios封裝一下

先去網(wǎng)上查找一些封裝的案例，發(fā)現(xiàn)，，，，看不懂（并不難的鴨子）

然后自己手動(dòng) 簡單封裝一下 axios

在src 目錄下新建一個(gè) utils 目錄，然后再建一個(gè) request.js 文件在里面寫一下代碼

/*引入axios*/
import axios from 'axios'
const request = axios.create({
    baseURL: 'http://localhost:8088' // 接口服務(wù)器地址
  });
//   // 創(chuàng)建實(shí)例后修改默認(rèn)值
//   instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// //前端采用export.default，在寫后端代碼時(shí)用module.export
export default request

在src中新建一個(gè) api 目錄，在目錄中新建有一個(gè) demo.js ( 根據(jù)接口作用取名字，這里為測試demo )寫入以下代碼

import request from '../utils/request' // 引入 request 類（模塊）
export function getList(params={}) {
    return request({
        methods:'GET',
        url:'/user',
        params,
    })
}

在url中，可以直接用 / 和接口地址拼接然后設(shè)置methods 方式，axios 中默認(rèn)為 get，getList是一個(gè)方法名

回到vue的頁面上，在我們需要的vue中寫 import { getList } from "../api/demo" 導(dǎo)入這個(gè)方法

然后再methods中創(chuàng)建一個(gè)函數(shù) ，重寫這個(gè)方法

b(){
      getList().then(function(response){
        console.log(response);
      }).catch(function(error){
        console.log(error);
      });
    }

最后這個(gè)方法可以用于點(diǎn)擊事件，如果與crated中，就必須是使用回調(diào)函數(shù)

getList(){
    listUser()
      .then(response =>{ // 回調(diào)函數(shù)使用箭頭函數(shù)來使用。(responde)=>{}
        this.tableData = response.data;
      })
    },