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-urlencodedthis.$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相关推荐

vue项目中简单进行axios封装及响应状态码提示！
import Vue from 'vue'import axios from 'axios' import { Toast,Indicator,MessageBox } from 'mint-ui'; ...
vant部署_详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示 ...
VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示 ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
vue项目中五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序
背景:项目中用到1.4.6.9.12.16宫格排序,拖拽换位等场景,项目是监控的视频矩阵,用户矩阵拖拽排序换位,之前已经实现1.4.9.12.16等矩阵式排列的拖拽排序,但是六宫格要求五小一大,之前的 ...
什么是scss，怎么在一个VUE项目中使用scss
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许您使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
在vue项目中使用axios封装axios
基本使用安装 // 项目中安装 npm install axios --S // cdn 引入 <script src="https://unpkg.com/axios/dist/a ...
3分钟让你学会axios在vue项目中的基本用法（建议收藏）
Axios酸狗来教你提示:本篇详解axios在vue项目中的实例.在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用 ...

Vue项目中安装使用axios

Vue项目中安装使用axios相关推荐

最新文章

热门文章