快捷導(dǎo)航

vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題解決

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

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

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

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

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

簡(jiǎn)單使用：

咱門前端使用頗受好評(píng)的 axios 來(lái)發(fā)起請(qǐng)求

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

不過(guò)要在vue中使用它，就需要先安裝打開(kāi)終端輸入一下命令

npm install axios

然后在需要使用的頁(yè)面 <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') // 這里填寫(xiě)后端的地址
        .then(function (response) {
          // 處理成功情況
          console.log(response);
        })
        .catch(function (error) {
          // 處理錯(cuò)誤情況
          console.log(error);
        })
        .then(function () {
          // 總是會(huì)執(zhí)行
        });
    }

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

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

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

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

改進(jìn)

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

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

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

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

/*引入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，在寫(xiě)后端代碼時(shí)用module.export
export default request

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

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的頁(yè)面上，在我們需要的vue中寫(xiě) import { getList } from "../api/demo" 導(dǎo)入這個(gè)方法

然后再methods中創(chuàng)建一個(gè)函數(shù) ，重寫(xiě)這個(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ù)來(lái)使用。(responde)=>{}
        this.tableData = response.data;
      })
    },

跨域問(wèn)題解決：

凡事不要慌，能解決的事，那都不是事~

我是在后端Controller 層加了 @CrossOrigin 注解

跨域報(bào)錯(cuò)：

如有問(wèn)題，后續(xù)更新，先記錄一下

到此這篇關(guān)于vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題的文章就介紹到這了,更多相關(guān)vue請(qǐng)求后端數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: