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方式结果：