vue中axios的使用

首先建议参考官方文档https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

回到demo_front文件里，安装axios

npm install axios --save

在main.js里写几句话

import axios from "axios";
Vue.prototype.$axios=axios
axios.defaults.baseURL='http://localhost:8081' // 表示以后所有的请求路径前面都会默认加上这个baseURL，减少url长度

那个$参考官方文档https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

在demo_front里面添加事件login（调样式是不可能调样式的，这辈子都不可能调样式的）

<template>
<div class="login-form">
<el-form :model="loginForm"><el-form-item label="用户名"><el-input v-model="loginForm.userName"></el-input></el-form-item><el-form-item label="密码"><el-input type="password" v-model="loginForm.password"></el-input></el-form-item>
</el-form><el-button @click="login">确认</el-button>
</div></template><script>
import axios from "axios";export default {name: "Login.vue",data(){return{loginForm:{userName:'',password:'',}}},methods:{// 愚蠢的方式login(){axios({method:'post',// 除了直接写到url里，我拿axios一点办法也没有url:'/validateUser?userName='+this.loginForm.userName+'&password='+this.loginForm.password,}).then((resp)=>{this.$alert(resp.data)})}}}
</script><style scoped>
.login-form{text-align: center;
}
</style>

解释：

1.无论用axios({

method:

url:

data:

})

还是axios.post格式，笔者都无法做到让数据显示在param里面，于是后台写的函数接收不到（改成RequestBody是不可能改的，这辈子都不可能改RequestBody的，除非传列表）

2.由于在main.js里面写过了baseURL，所以在axios的url里面不用写那一长串了（虽然最后还是一长串东西）

同时运行demo_front和demo_back项目（前后端分离的真谛啊）

最后结果：

于是新手向vue+springboot前后端分离项目就初步搭建起来了，在此附上笔者GitHub主页（内含源码）https://github.com/marious123g

新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互相关推荐

前后端分离项目token怎么验证_前后端分离，获取token，验证登陆是否失效
public classJwtUtils {/*** 密钥*/ private static final String SECRET="xxxx";/*** 默认字段key:exp ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息这是用来做排序的,默认按照综合排序 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）二十二（下单和微信支付）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)二十(下单) 0.学习目标会调用订单系统接口实现订单结算功能实现微信支付功能 1.订单 ...
小白快速上手前后端分离项目开发教程(springboot+vue)
本文基于springboot+vue,实现一个前后端分离项目的实操.通俗易懂,保证一学就会.同时能帮助大家更好的理解,什么是前后端分离开发?这个开发跟之前使用jsp或者模板引擎开发有什么不同. 一.为 ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十四（Spring Data Elasticsearch，将数据添加到索引库）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十四(Spring Data Elasticsearch,将数据添加到索引库) 一.创建El ...
【两万字图文详解】运动会管理系统-前后端分离-项目开发：【后端】SpringBoot, SpringMVC, MyBatis【前端】Vue.js，ElementUI
项目名称:运动会管理系统技术栈: 后端:SpringBoot,SpringMVC,MyBatis,tkmapper,Maven聚合工程等前端:Vue.js,Element-u ...
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
本文目录前言做项目的三大好处强强联手(天狗组合) 专栏作者简介专栏的优势后端规划 1. SpringBoot 和 SpringCloud 的选择 2. Mybatis 和 MybatisPl ...

新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互

vue中axios的使用

新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互相关推荐

最新文章

热门文章