Vue項目中安裝使用axios全過程
更新時間：2022年10月10日 14:57:39 作者：“mint”
這篇文章主要介紹了Vue項目中安裝使用axios全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue安裝使用axios
一、安裝
在控制臺輸入npm install axios -S
二、引入
在文件main.js中寫入
import axios from 'axios'; Vue.prototype.$axios = axios;
三、使用
向cgi-bin/login.cgi提交登錄data數(shù)據(jù)。
注意：
- 提交的Content-Type要看后端以什么方式接收，然后以相應(yīng)的方式提交，要不然后端收到的就是被轉(zhuǎn)碼的亂碼。
- data的格式按自己要求修改。
//cgi-bin/login.cgi是提交登錄的地址
? ? ? ? const qs = require("qs");
? ? ? ? const data = {
? ? ? ? ? operate: "login",
? ? ? ? ? psw: this.form.password,
? ? ? ? };
? ? ? ??
? ? ? ? //默認(rèn)提交方式為Content-Type: application/x-www-form-urlencoded
? ? ? ? this.$axios
? ? ? ? ? .post('/cgi-bin/login.cgi',
? ? ? ? ? ? qs.stringify({
? ? ? ? ? ? ? data: JSON.stringify(data),
? ? ? ? ? ? }),
? ? ? ? ? )
? ? ? ? ??
? ? ? ? ? //修改為Content-Type: application/json;charset=UTF-8方式：
? ? ? ? ? //this.$axios
? ? ? ? ? //.post(
? ? ? ? ? // ?"/cgi-bin/login.cgi",
? ? ? ? ? // ?// qs.stringify({
? ? ? ? ? ?// ? data,
? ? ? ? ? // ?// }),
? ? ? ? ? // ?{
? ? ? ? ? // ? ?headers: {
? ? ? ? ? // ? ? ?"Content-Type": "application/json;charset=UTF-8",
? ? ? ? ? ?// ? },
? ? ? ? ? // ?}
? ? ? ? ?// )
? ? ? ? ? .then((result) => {//提交成功
? ? ? ? ? ? // console.log("login:"+result);
? ? ? ? ? ? // console.log("login2:"+JSON.stringify(result) );
? ? ? ? ? ? if (result.data == 'ok') {返回‘ok'
? ? ? ? ? ? ? localStorage.setItem('login', 'ok');//瀏覽器保存登錄成功
? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? message: '登陸成功',
? ? ? ? ? ? ? ? type: 'success',
? ? ? ? ? ? ? });
? ? ? ? ? ? ? this.$router.push('/home');//跳轉(zhuǎn)頁面
? ? ? ? ? ? } else {
? ? ? ? ? ? ? this.$message.error('密碼錯誤');
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? ? .catch((error) => {//提交失敗
? ? ? ? ? ? console.log('Error', error.message);
? ? ? ? ? ? this.$message.error('服務(wù)連接錯誤');
? ? ? ? ? });默認(rèn)提交方式為Content-Type: application/x-www-form-urlencoded結(jié)果：
Content-Type: application/json;charset=UTF-8方式結(jié)果：
vue開發(fā)使用axios的時候報錯
Cannot set property “axios” of undefined
前天寫代碼的時候，第一次用axios報了一個錯，再三檢查下，發(fā)現(xiàn)代碼是沒有問題的。然后檢查了版本發(fā)現(xiàn)了問題。
打開package.json文件，找到對應(yīng)的版本號。時至今日，axios最新的版本號是3.0.1，所以使用
npm install axios -S npm install qs -S npm install vue-axios -S
命令下載的時候會下載最新版本，就有了版本之間的不和諧。
下面是package.json中的版本信息。
"dependencies": {
"axios": "^0.20.0",
"element-ui": "^2.13.2",
"qs": "^6.9.4",
"vue": "^2.5.2",
"vue-axios": "^3.0.1",
"vue-router": "^3.0.1"
},這個時候只需要把其中的"vue-axios": “^3.0.1”, 改成 “vue-axios”: "^2.1.5"就行了。
改完之后，要找到，文件夾中原來下載了的，并進(jìn)行刪除。
比如vue-axios我的是在D:\work\html\spa03\node_modules\vue-axios，就找到刪除。
當(dāng)然，不放心的，刪錯了的，只要把整個node_modules文件夾刪除了就好了。
打開cmd窗口，進(jìn)入文件夾路徑，然后npm i,就可以下載剛剛刪除了的所有版塊。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端省市區(qū)選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
今天小編就為大家分享一篇對vux點擊事件的優(yōu)化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue CLI3搭建的項目中路徑相關(guān)問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue返回上一頁(后退)的幾種方法與區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3無config文件夾打包后頁面空白問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中的正則表達(dá)式校驗、驗證方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06 
這篇文章主要介紹了vue-cli中的webpack是如何配置的，本篇文章主要是分析vue中關(guān)于config文件夾中的相關(guān)代碼，config的文件結(jié)構(gòu)，感興趣的朋友參考下本文
2018-01-01 
這篇文章主要介紹了vue3中setup語法糖下通用的分頁插件,實例代碼介紹了自定義分頁插件：PagePlugin.vue，文中提到了vue3中setup語法糖下父子組件之間的通信，需要的朋友可以參考下
2022-10-10 
Vue.js中動態(tài)更改svg的相關(guān)屬性詳解
這篇文章主要為大家介紹了Vue.js中動態(tài)更改svg的相關(guān)屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02