vue增删改查基础操作页面更新,基于axios的put,delete,get,put,以及对应的spring侧如何接收数据
get操作get主要是用来获取数据var self = this;axios.get('/systemconfig/financial/json').then(function (response) {self.items = JSON.parse(respons...
·
get操作
get主要是用来获取数据
var self = this;
axios.get('/systemconfig/financial/json')
.then(function (response) {
self.items = JSON.parse(response.data);
})
.catch(function (error) {
console.log(error);
});
get操作比较简单,只要在网页上绑定好数据items,请求的内容自然会绑定到网页中,有一点一定要注意,就是在axios请求内容之后,不可以直接使用this更新数据了,要先设定好对象,引用this,然后给这个新对象附值就可以了。
然后后台也要用get接收
@RequestMapping(value = "/financial/json", method = RequestMethod.GET)
public String toLoginPage( ) {
}
注意要添加@RequestMapping的method属性。
这个比较简单,没什么看的。
post操作
axios.post('/systemconfig/financial', {
configType: 1,
configTypeName: this.SystemConfig.configTypeName,
configTypeValue: "NULL",
isStart: this.SystemConfig.isStart
}).then(function (response) {
console.log(response);
// self.items = JSON.parse(response.data);
data = JSON.parse(response.data);
// 如果没有插入成功 则放回 failuer 就不要执行了
if (data == "nohave") {
humane.error("您没有输入正确的内容!");
return false;
} else if (data == "failuer") {
humane.error("插入失败,请检查您输入的数据!");
return false;
} else { // 如果插入成功,则返回json,并添加到 items中。
console.log(data);
self.items.push(data);
self.closeAddDiv();
}
})
.catch(function (error) {
console.log(error);
});
post操作是添加数据的,
跟get差不多,但是注意这个self.items.push(data)
要用这个添加数据
JAVA也比较简单,
@RequestMapping(value = "/financial", method = RequestMethod.POST)
public String addSystemConfig(ModelAndView mv, @RequestBody SystemConfig systemConfig) {}
注意传入的参数都要是SystemConfig 的属性 然后在前面加上@RequestBody注解,才可以,不然spring接收不到参数
delete操作
var self = this;
axios({
method: 'delete',
url: '/systemconfig/id/' + id,
data: {
"id": id,
}
})
.then(function (response) {
data = response.data;
if (data < 1) { // 删除失败
humane.error("删除失败,您的页面可能已经过期,请更新您的页面!");
return;
} else {
self.items.splice(index, 1);
humane.success("操作成功!!!");
}
})
.catch(function (response) {
console.log(response);
});
这个delete也很简单,
self.items.splice(index, 1);这个是关键
@RequestMapping(value = "/id/{urlId}", method = RequestMethod.DELETE)
public int deleteSystemConfig(@PathVariable Integer urlId,
@RequestBody SystemConfig systemConfig, HttpSession httpSession) {}
这上面的
@PathVariable 是获取id后面的那个动态id的。剩下的也很简单。
var self = this;
axios({
method: 'put',
url: '/systemconfig/id/' + self.selectSystemConfig.id,
data: {
"id": self.selectSystemConfig.id,
"configTypeName": self.selectSystemConfig.configTypeName,
"isStart": self.selectSystemConfig.isStart
}
})
.then(function (response) {
data = response.data;
if (data < 1) { // 删除失败
humane.error("修改失败,您的页面可能已经过期,请刷新您的页面!");
return;
} else {
alert(self.indexflag)
self.condition.updatediv = true;
self.$set(self.items[self.indexflag], "configTypeName", self.selectSystemConfig.configTypeName);
self.$set(self.items[self.indexflag], "isStart", self.selectSystemConfig.isStart);
// self.$forceUpdate();
humane.success("操作成功!!!");
}
})
.catch(function (response) {
console.log(response);
});
这个跟上面的差不多。但是下面的是关键
然后是JAVA的。
@RequestMapping(value = "/id/{urlId}", method = RequestMethod.PUT)
public int updateSystemConfig(@PathVariable Integer urlId,
@RequestBody SystemConfig systemConfig, HttpSession httpSession) {}
不错。看着简单,但是这都是我一点点扣出来的,遇见了好多问题,搜了好多博客。
更多推荐
已为社区贡献7条内容
所有评论(0)