- 技术博客
- 电商系统前后端开发（Vue+SSM）(10) - 发送 Ajax 请求
1 Axios
1.1 为何使用 Axios
1.2 Axios 使用
安装
在 main.js 中引入
2 为 App.vue 添加样式 bootstrap
3 搭建测试 springboot 项目
使用 RESTful API
4 前后端联调
App.vue
<template>
<div id="app">
<div style="width: 50%" class="container">
<div>
<h3>注册
</h3>
<h5>邮箱
</h5>
<input type="text" class="form-control" v-model="mail"/><br/>
<h5>密码
</h5>
<input type="password" class="form-control" v-model="password"><br>
<h5>性别
</h5>
<input type="radio" name="gender" v-model="gender" value="female">女
<input type="radio" name="gender" v-model="gender" value="male">男
<br/>
<h5>爱好
</h5>
<input type="checkbox" name="hobby" v-model="hobby" value="music">音乐
<input type="checkbox" name="hobby" v-model="hobby" value="movie">电影
<input type="checkbox" name="hobby" v-model="hobby" value="sport">运动
<br/>
<button type="button" class="btn btn-success" @click="registfn">注册
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
mail:'',
password:'',
gender:'',
hobby:''
}
},
methods:{
registfn(){
this.axios({
method:'get',
url:'http://localhost:8081/regist?mail=' + this.mail+'&'+'password='+ this.password
}).then(resp=>{
console.log(resp.data)
})
}
}
}
</script>
<style lang="scss">
</style>
4.1 跨域问题
如果是 SSM 项目
spingboot 项目
