Vue專案中安裝使用axios全過程

2022-10-12 14:00:40

Vue安裝使用axios

一、安裝

在控制檯輸入npm install axios -S

二、引入

在檔案main.js中寫入

import axios from 'axios';
Vue.prototype.$axios = axios;

三、使用

向cgi-bin/login.cgi提交登入data資料。

注意：

提交的Content-Type要看後端以什麼方式接收，然後以相應的方式提交，要不然後端收到的就是被轉碼的亂碼。
data的格式按自己要求修改。

//cgi-bin/login.cgi是提交登入的地址

        const qs = require("qs");
        const data = {
          operate: "login",
          psw: this.form.password,
        };
        
        //預設提交方式為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');//跳轉頁面
            } else {
              this.$message.error('密碼錯誤');
            }
          })
          .catch((error) => {//提交失敗
            console.log('Error', error.message);
            this.$message.error('服務連線錯誤');
          });

預設提交方式為Content-Type: application/x-www-form-urlencoded結果：

Content-Type: application/json;charset=UTF-8方式結果：

vue開發使用axios的時候報錯

Cannot set property “axios” of undefined

前天寫程式碼的時候，第一次用axios報了一個錯，再三檢查下，發現程式碼是沒有問題的。然後檢查了版本發現了問題。

開啟package.json檔案，找到對應的版本號。時至今日，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"就行了。

改完之後，要找到，資料夾中原來下載了的，並進行刪除。

比如vue-axios我的是在D:workhtmlspa03node_modulesvue-axios，就找到刪除。

當然，不放心的，刪錯了的，只要把整個node_modules資料夾刪除了就好了。

開啟cmd視窗，進入資料夾路徑，然後npm i,就可以下載剛剛刪除了的所有版塊。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。