医院修改的回显与更新(隐藏路由)
回显:即根据id查询出一条bean语句,将其显示
更新:类似于保存,将回显出的一条bean稍作更改,浏览器将以json格式传给服务器去转化为json对象,做类似save()的update操作。
注意:
这里如果后端接口资源访问映射配置错误,也将出现跨域问题!
@PostMapping("updateHospSetById") // 正确。
// @PostMapping("updateHospSetById/{id}") 若你以为要根据id更新对象
public Result updateHospSetById(@RequestBody HospitalSet hospitalSet){
- 设置隐藏路由 /router/index.js中,因为这里的更新表单和添加表单相同!
{
path: 'edit/:id',
name: '医院修改-',
component: () => import('@/views/hospset/add'),
meta: { title: '医院修改', icon: 'tree' },
hidden:true // 隐藏路由!
}
- api/hospset.js两个方法
getHospSetById(id){
return request({
url:`/admin/hosp/hospitalSet/getHospSetById/${id}`,
method:'get'
})
},
updateHospSetById(hospitalSet){
return request({
url:`/admin/hosp/hospitalSet/updateHospSetById`,
method:'post',
data:hospitalSet
})
}
- add.vue引入编辑按钮组件
<router-link :to="'/hospset/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
</router-link>
- add.vue编写script方法
created()中注意,如果路由中存在id参数值,则需要在初始化完页面后即刻回显查询的信息。调用methods中的方法。
created() {
// 获取路由id
if (this.$route.params&&this.$route.params.id){
let id = this.$route.params.id // 获取当前路由所附带的id值
this.getHospById(id)
}
// 调用接口通过id获取一条医院信息
},
methods:{
getHospById(id){
hospset.getHospSetById(id)
.then(response=>{
this.hospitalSet = response.date // 这里是date。。。不是data
})
},
save(){
hospset.saveHospitalSet(this.hospitalSet)
.then(response=>{
this.$message({
type: 'success',
message: '添加成功!'
})
this.$router.push({path:'/hospset/list'})
})
},
update(){
hospset.updateHospSetById(this.hospitalSet)
.then(response=>{
this.$message({
type: 'success',
message: '修改成功!'
})
this.$router.push({path:'/hospset/list'})
})
},
// 保存/更新 按钮功能二合一
saveOrUpdate(){
// 当点击保存 按钮时,判断当前对象是否有id,若有值则为修改,若无则调用添加方法
if(!this.hospitalSet.id){
this.save();
}else {
this.update();
}
}
Bug
先点编辑 再点添加,表单信息不为空
此时是因为组件重用问题,两个路由渲染统一表单组件,组件的声明周期方法不再被调用,组件相当于被重用。
在router-view上加上唯一key,以保证路由切换是重新触发生命周期方法,确保组件可重新被初始化。
增src/view/layout/components/AppMain.vue。
<router-view :key="key"></router-view>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
}
}
}
</script>