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数据。

注意:

  • 提交的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:\work\html\spa03\node_modules\vue-axios,就找到删除。

当然,不放心的,删错了的,只要把整个node_modules文件夹删除了就好了。

打开cmd窗口,进入文件夹路径,然后npm i,就可以下载刚刚删除了的所有版块。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现移动端省市区选择

    vue实现移动端省市区选择

    这篇文章主要为大家详细介绍了vue实现移动端省市区选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 对vux点击事件的优化详解

    对vux点击事件的优化详解

    今天小编就为大家分享一篇对vux点击事件的优化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue CLI3搭建的项目中路径相关问题的解决

    Vue CLI3搭建的项目中路径相关问题的解决

    这篇文章主要介绍了Vue CLI3搭建的项目中路径相关问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue返回上一页(后退)的几种方法与区别说明

    vue返回上一页(后退)的几种方法与区别说明

    这篇文章主要介绍了vue返回上一页(后退)的几种方法与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3无config文件夹打包后页面空白问题及解决

    vue3无config文件夹打包后页面空白问题及解决

    这篇文章主要介绍了vue3无config文件夹打包后页面空白问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • VUE 实现滚动监听 导航栏置顶的方法

    VUE 实现滚动监听 导航栏置顶的方法

    今天小编就为大家分享一篇VUE 实现滚动监听 导航栏置顶的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中的正则表达式校验、验证

    vue中的正则表达式校验、验证

    这篇文章主要介绍了vue中的正则表达式校验、验证方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue-cli配置文件——config篇

    vue-cli配置文件——config篇

    这篇文章主要介绍了vue-cli中的webpack是如何配置的,本篇文章主要是分析vue中关于config文件夹中的相关代码,config的文件结构,感兴趣的朋友参考下本文
    2018-01-01
  • vue3中setup语法糖下通用的分页插件实例详解

    vue3中setup语法糖下通用的分页插件实例详解

    这篇文章主要介绍了vue3中setup语法糖下通用的分页插件,实例代码介绍了自定义分页插件:PagePlugin.vue,文中提到了vue3中setup语法糖下父子组件之间的通信,需要的朋友可以参考下
    2022-10-10
  • Vue.js中动态更改svg的相关属性详解

    Vue.js中动态更改svg的相关属性详解

    这篇文章主要为大家介绍了Vue.js中动态更改svg的相关属性详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02

最新评论