SpringBoot+Vue实现前后端分离（二）
前端数据传递到后端
前端操作
一、编辑html
1，先写一个input
<div id="set_user">
<input type="text" v-model="name">
<input type="text" v-model="age">
<input type="text" v-model="sex">
<button @click="set_user()">提交</button>
</div>
2,写一个scprict
var vm2 = new Vue({
el:'#set_user',
data: {
name:'',
age:'',
sex:''
},
methods:{
set_user() {
admin
.post('user/set_user',{
name:this.name,
age: this.age,
sex: this.sex
})
.then(response => {
alert("提交成功");
})
.catch();
}
}
});
二、后端操作
1.编写个serUser()方法
代码如下（示例）：
@PostMapping("/set_User")
public ResponseDTO setUser(@RequestBody JSONObject jsonObject) {
//前端使用json数据格式传递参数，存放在jsonObject对象中；
System.out.println("姓名：" + jsonObject.get("name"));
System.out.println("年龄：" + jsonObject.get("age"));
System.out.println("性别：" + jsonObject.get("sex"));
ResponseDTO dto = new ResponseDTO();
dto.setSuccess(true);
return dto;
}
搞定定！
好了这就是最基本 前后端分离开发 样子
放上前后端全代码
后端
package com.stu.demo.controller;
import com.stu.demo.domain.ResponseDTO;
import com.stu.demo.domain.user;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import net.minidev.json.JSONObject;
@Controller
@ResponseBody
@RequestMapping("/user")
public class userController {
@GetMapping("/get_user")
public ResponseDTO getUser() {
ResponseDTO dto = new ResponseDTO();
user user = new user();
user.setName("刚子");
user.setAge(20);
user.setSex("女");
dto.setSuccess(true);
dto.setData(user);
return dto;
}
@PostMapping("/set_user")
public ResponseDTO setUser(@RequestBody JSONObject jsonObject) {
//前端使用json数据格式传递参数，存放在jsonObject对象中；
System.out.println("姓名：" + jsonObject.get("name"));
System.out.println("年龄：" + jsonObject.get("age"));
System.out.println("性别：" + jsonObject.get("sex"));
ResponseDTO dto = new ResponseDTO();
dto.setSuccess(true);
return dto;
}
}
前端
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>再试一次</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="common.js"></script>
<script src="config.js"></script>
</head>
<body>
<table id="get_user">
<tr>
<td>姓名</td>
<td>{
{info.name}}</td>
</tr>
<tr>
<td>年龄</td>
<td>{
{info.age}}</td>
</tr>
<tr>
<td>性别</td>
<td>{
{info.sex}}</td>
</tr>
</table>
<div id="set_user">
<input type="text" v-model="name">
<input type="text" v-model="age">
<input type="text" v-model="sex">
<button @click="set_user()">提交</button>
</div>
<script>
var vm = new Vue({
el: '#get_user',
data: {
info: {
}
},
mounted() {
admin
.get('user/get_user')
.then(response => {
if (!check(response)) alert("获取用户信息时后他数据返回异常");
if (response.data.success === false) alert(response.data.message);
this.info = response.data.data;
})
.catch(function (error){
//请求失败处理
console.log(error)
});
}
});
var vm2 = new Vue({
el:'#set_user',
data: {
name:'',
age:'',
sex:''
},
methods:{
set_user() {
admin
.post('user/set_user',{
name:this.name,
age: this.age,
sex: this.sex
})
.then(response => {
alert("提交成功");
})
.catch();
}
}
});
</script>
</body>
</html>