保姆级教程:Spring Boot+Vue前后端分离开发:第五天
第五天任务概要
在前四天的学习中,我们选择了一种布局,并完成了路由的设置,同时实现了后台数据在前端页面的展示。在本节中,我们紧接着上一节的代码,实现数据的增加,删除与修改。
第一步:修改导航栏名称
1.打开index.js,将前第一个导航栏的名称修改为“数据管理”,其子导航栏修改为“数据查询”与“数据添加”。同时将其他属性修改为箭头所指。
2.重命名这些路由相应的vue1页面,将Page1.vue重命名为DataManage.vue;将Page2.vue重命名为DataAdd.vue。
同时将DataManage.vue与DataAdd.vue里的name进行修改:
修改index.js里的文件引入:
第二步:实现数据添加
1.编写前端代码
打开https://element.eleme.cn/#/zh-CN,由于需要添加数据,因此需要进行form表单的提交,引入form组件。
找一个高大上的,复制其代码:
完整覆盖DataAdd.vue的代码内容,同时添加Template标签,并删除无用的输入框。完整代码如下:
DataAdd.vue:
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!--model用于实现数据绑定-->
<el-form-item label="数据名称" prop="name"><!--对应data()里rules数组里面的name属性-->
<el-input v-model="ruleForm.name"></el-input><!--用于实现子数据的绑定-->
</el-form-item>
<el-form-item label="作者" prop="author"><!--对应data()里rules数组里面的author属性-->
<el-input v-model="ruleForm.author"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button @click="test()">测试</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "DataAdd",
data() {
return {
ruleForm: {
name: '',
author: ''
},
rules: {
name: [
{ required: true, message: '请输入数据名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请输入持有者名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
]
}
};
},
methods: {
test(){
console.log(this.ruleForm)
},
submitForm(formName) {
const _this=this //这个this指的是vue的this
this.$refs[formName].validate((valid) => { //这个this指的是submitForm
if (valid) {
alert('提交成功!');
} else {
console.log('提交失败!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>
2.编写后端代码
打开Book.java,为id添加自增属性:
打开BookController.java,添加接口:
@PostMapping("/add")
public String add(@RequestBody Book book){//由于使用了@RestController会使前端提交的数据转换为json格式,因此需要通过@RequestBody转换为对象形式
Book result=bookRepository.save(book);
if(result!=null){
return "success";
}else{
return "error";
}
}
3.在前端中添加axios实现前后端对接
axios.post('http://localhost:8081/book/add',_this.ruleForm).then(function(resp){//提交数据时,将ruleForm直接追加到post()的第二个参数
})
成功!此时重新启动后端,刷新前端进行添加查看效果。
第三步:输入提示框点缀
打开https://element.eleme.cn/#/zh-CN,选择Message消息提示,选择相应的代码:
将代码复制到提交成功的方法区中:
第四步:实现添加成功后的页面跳转
继续在DataAdd.vue中添加代码:
DataAdd.vue代码:
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!--model用于实现数据绑定-->
<el-form-item label="数据名称" prop="name"><!--对应data()里rules数组里面的name属性-->
<el-input v-model="ruleForm.name"></el-input><!--用于实现子数据的绑定-->
</el-form-item>
<el-form-item label="作者" prop="author"><!--对应data()里rules数组里面的author属性-->
<el-input v-model="ruleForm.author"></el-input>
</el-form-item>
<el-form-item>
<el-button :plain="true" type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button @click="test()">测试</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "DataAdd",
data() {
return {
ruleForm: {//要提交的数据
name: '',
author: ''
},
rules: {
name: [
{ required: true, message: '请输入数据名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请输入持有者名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
]
}
};
},
methods: {
test(){
console.log(this.ruleForm)
},
submitForm(formName) {
const _this=this //这个this指的是vue的this
this.$refs[formName].validate((valid) => { //这个this指的是submitForm
if (valid) {
axios.post('http://localhost:8081/book/add',_this.ruleForm).then(function(resp){//提交数据时,将ruleForm直接追加到post()的第二个参数
});
_this.$message({
message: _this.ruleForm.name+'添加成功',
type: 'success'
});
_this.$router.push('/DataManage')//添加完成后,跳转到相应页面
} else {
console.log('提交失败!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>
至此,数据添加操作完成。明天是最后一节,实现数据的修改与删除操作