上一章節:?安裝element-ui組件庫

一、安裝axios

????????打開控制臺輸入：npm install axios

二、安裝qs

qs是一個流行的查詢參數序列化和解析庫。可以將一個普通的object序列化成一個查詢字符串,或者反過來將一個查詢字符串解析成一個object，幫助我們查詢字符串解析和序列化字符串。

????????打開控制臺輸入：npm install qs

三、在項目中新建一個utils文件夾

????????新增一個httpRequest.js文件，用于提供axios方法，附上代碼 ：

import axios from 'axios' import qs from 'qs' import merge from 'lodash/merge'const http = axios.create({timeout: 1000 * 30,withCredentials: true,headers: {'Content-Type': 'application/json; charset=utf-8'} })http.adornUrl = (actionName) => {return "http://localhost:8880/Cx" + actionName// 這里使用的是webpack打包時指定的環境進行獲取ip,具體使用方式看下一章節// return process.env.BASE_API + actionName }/*** get請求參數處理* @param {*} params 參數對象* @param {*} openDefultParams 是否開啟默認參數?*/ http.adornParams = (params = {}, openDefultParams = true) => {var defaults = {'t': new Date().getTime()}return openDefultParams ? merge(defaults, params) : params }/*** post請求數據處理* @param {*} data 數據對象* @param {*} openDefultdata 是否開啟默認數據?* @param {*} contentType 數據格式* json: 'application/json; charset=utf-8'* form: 'application/x-www-form-urlencoded; charset=utf-8'*/ http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {var defaults = {'t': new Date().getTime()}data = openDefultdata ? merge(defaults, data) : datareturn contentType === 'json' ? JSON.stringify(data) : qs.stringify(data) }export default http

???????? 此工具js可以直接使用方便快捷，同時需要在main.js里面引入此工具js，附上代碼：

? ? ? ? ?其中核心的就是import? ?httpRequest from.... 和 掛載全局的Vue.prototype.$http=...

import Vue from 'vue' import App from './App' import router from './router' import httpRequest from '@/utils/httpRequest'Vue.config.productionTip = false// 掛載全局 Vue.prototype.$http = httpRequest // ajax請求方法/* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>' })

? ? ? ? 注：在項目vue文件中使用時，方式為：????????

// 此調用方式適用于后端接口為@RequestParam注解的接口 method:{getDataList(){this.$http({url: this.$http.adornUrl('/xxxx/getDataList'),method: 'get',params: this.$http.adornParams(this.dataForm)}).then(({data}) => {if (data && data.code === 0) {this.dataList = data.data}}) } }// 次調用方式適用于后端接口為@RequestBody注解的接口（此模式默認為contenttype為json格式的） this.$http({url: this.$http.adornUrl('/xxxx/getDataList'),method: 'get',data: this.$http.adornData(this.dataForm) }).then(({data}) => {if (data && data.code === 0) {this.dataList = data.data} })

繼續下一節：webpack打包（指定項目環境ip）

總結

以上是生活随笔為你收集整理的Vue学习三：安装axios(实现http请求后端)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。