vue請求后端數(shù)據(jù)和跨域問題解決
最近遇到的一個問題 后端寫好的接口，前端怎么獲取數(shù)據(jù)呢？
這是我后端的接口：GET 接口
這是我前端運行的項目地址：
簡單使用：
咱門前端使用 頗受好評的 axios 來發(fā)起請求
這是它的官網(wǎng)：https://www.axios-http.cn/
不過要在vue中使用它，就需要先安裝 打開終端 輸入一下命令
npm install axios
然后在需要使用的 頁面 <script> 中標簽 引入 axios就行了
import axios from 'axios'
然后在methods中 創(chuàng)建一個函數(shù)：代碼如下
a() {
// const axios = require('axios'); // 官方給出的例子 這段話類似于 import
axios.get('http://localhost:8088/user') // 這里填寫后端的地址
.then(function (response) {
// 處理成功情況
console.log(response);
})
.catch(function (error) {
// 處理錯誤情況
console.log(error);
})
.then(function () {
// 總是會執(zhí)行
});
}require 和 import 具體詳情，可以查閱相關資料
寫完之后在 div中寫一個 <button> 標簽<button @click="a()">點我 a</button>
打開控制臺可以看到，data里面有三條數(shù)據(jù)
看到這里，我們就請求到了后端數(shù)據(jù)（后端一定要允許跨域請求）
改進
寫完你這里例子之后，又寫了幾個請求，發(fā)現(xiàn)呢，每次都要復制黏貼，還有好多重復性代碼，就想到，應該可以把這個axios封裝一下
先去網(wǎng)上查找一些封裝的案例，發(fā)現(xiàn)，，，，看不懂（并不難的鴨子）
然后自己手動 簡單封裝一下 axios
在src 目錄下新建一個 utils 目錄，然后再建一個 request.js 文件在里面寫一下代碼
/*引入axios*/
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8088' // 接口服務器地址
});
// // 創(chuàng)建實例后修改默認值
// instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// //前端采用export.default，在寫后端代碼時用module.export
export default request在src中新建一個 api 目錄， 在目錄中新建有一個 demo.js ( 根據(jù)接口作用取名字，這里為測試demo )寫入以下代碼
import request from '../utils/request' // 引入 request 類（模塊）
export function getList(params={}) {
return request({
methods:'GET',
url:'/user',
params,
})
}在url中，可以直接 用 / 和接口 地址拼接 然后設置methods 方式 ，axios 中默認為 get，getList是一個方法名
回到vue的頁面上，在我們需要的vue中寫 import { getList } from "../api/demo" 導入這個方法
然后再methods中創(chuàng)建一個函數(shù) ，重寫這個方法
b(){
getList().then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
});
}最后這個方法可以用于點擊事件，如果與crated中，就必須是使用回調函數(shù)
getList(){
listUser()
.then(response =>{ // 回調函數(shù)使用箭頭函數(shù)來使用。(responde)=>{}
this.tableData = response.data;
})
},跨域問題解決：
凡事不要慌，能解決的事，那都不是事~
我是在后端Controller 層加了 @CrossOrigin 注解
跨域報錯：
如有問題，后續(xù)更新，先記錄一下
到此這篇關于vue請求后端數(shù)據(jù)和跨域問題的文章就介紹到這了,更多相關vue請求后端數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue+element ui實現(xiàn)錨點定位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue循環(huán)語句v-for中的元素綁定值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
當我們談論或討論在?Vue?中創(chuàng)建用戶界面組件時,經(jīng)常會提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應用這些組件時面臨的問題,以及為什么必須盡可能克服這些問題,需要的朋友可以參考下2023-10-10
ElementUI中el-table設置指定列固定不動,不受滾動條影響,下面這篇文章主要給大家介紹了關于el-table?fixed固定列導致錯位的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
淺析vue 函數(shù)配置項watch及函數(shù) $watch 源碼分享
這篇文章主要介紹了vue 函數(shù)配置項watch及函數(shù) $watch 源碼分享 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue項目如何獲取本地文件夾絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關于Vue.js中該如何自己維護路由跳轉記錄的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05