本文介绍了如何在Vue项目中实现前后端分离，通过axios从Spring Boot后端异步获取数据并绑定到Element UI表格中。首先，展示了引入Vue、Element UI和axios的相关库，然后编写前端代码创建表格并展示数据。接着，详细说明了处理跨域访问问题的方法。最后，添加了添加新数据的功能，包括创建表单、发送POST请求并将添加结果反馈给用户。
前后端分离案例
异步获取后台数据并绑定到表格中
前端代码：
技术：vue，axios，跨域访问问题
- 引入头文件
<!-- Vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axiox引入 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 编写内容:利用element ui组件
<body>
<div id="app">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
<el-table-column
prop="major"
label="专业">
</el-table-column>
</el-table>
<p>{{msg}}</p>
</div>
</body>
- 编写vue代码进行数据的获取与绑定：vue,axios
<script>
new Vue({
el:"#app",
data:{
msg:'',
tableData: []
},
mounted() {
this.getAllStudent();
},
methods:{
getAllStudent:function(){
var that =this;
axios.get('http://localhost:8080/stu/getAllStudent')
.then(function(res){
that.tableData=res.data;
})
.catch(function(err){
that.msg=err;
})
}
}
})
</script>
后台代码：
@Data
public class Student {
private String name;
private int age;
private String major;
}
Studentcontroller：
@RestController
public class StudentController {
List<Student> list =new ArrayList<>();//因为没有连接数据库，所以在这里先往list集合中添加几个数据充当数据库
public StudentController(){
for (int i = 1; i <= 10; i++) {
Student student= new Student();
student.setAge(22);
student.setMajor("软件工程");
student.setName("学生"+i);
list.add(student);
}
}
@GetMapping("/stu/getAllStudent")
@CrossOrigin(origins = "*") //解决跨域访问问题的注解
public List<Student> getAllStudent(){
return list;
}
}
跨域访问问题：@CrossOrigin(origins = “*”) 因为使用HBuilderX编写的这些前端代码浏览器端口时8848，
当请求访问服务区http://localhost:8080/stu/getAllStudent 的时候会禁止你访问.
————————————————————————————————————————————————————————————
以上就是异步获取后台数据并绑定到表格中。
添加数据
- 引入头文件：
<head>
<meta charset="utf-8">
<title>添加信息</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axiox引入 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<el-form :label-position="labelPosition" label-width="80px" :model="studentInfo">
<el-form-item label="姓名">
<el-input v-model="studentInfo.name"></el-input>
</el-form-item>
<el-form-item label="年纪">
<el-input v-model="studentInfo.age"></el-input>
</el-form-item>
<el-form-item label="专业">
<el-input v-model="studentInfo.major"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" plain @click=add()>主要按钮</el-button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
labelPosition: 'right',
studentInfo: {
name: '',
age: '',
major: ''
}
},
methods:{
add:function(){
var that =this;
axios.post('http://localhost:8080/stu/add',that.studentInfo)
.then(res=>{
if(res.data=='OK'){
alert('添加成功！');
that.studentInfo.name='';
that.studentInfo.age='';
that.studentInfo.major='';
window.location.href='http://127.0.0.1:8848/vueDemo/index.html';
}
})
.catch(err=>{
that.msg=err;
})
}
}
})
</script>
后台代码：
@PostMapping("/stu/add")
@CrossOrigin(origins = "*")
public String add(@RequestBody Student student){
list.add(student);
return "OK";
}
扫一扫
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
