java-web开发怎么在前后端传参数
detail.html
<button type="button" class="btn btn-primary" id="btn" @click="click()">点赞
var main = new Vue({
el : '#main',
data : {
imageId : undefined,
image : undefined,
},
methods : {
getImageDetail : function(id) {
this.$http.get('images?id=' + id).then(function(res) {
console.log(res.body);
if (res.body.code == 1000) {
this.image = res.body.data;
}
}, function() {
console.log('GET image failed.');
});
},
click: function () {
this.$http.get('images?id=' + this.imageId + '&favor=1').then(function (res) {
console.log(res.body);
if (res.body.code == 1000) {
this.image = res.body.data;
}
}, function () {
console.log('GET images failed.');
});
}
},
mounted : function() {
// 获取URL参数中ID的值
this.imageId = utils.getValueByUrlParams("id");
this.getImageDetail(this.imageId);
//this.favor = 1;
}
});
ImageServlet
部分关键代码 。
if(request.getParameter("favor")!= null) {
try {
image = imageService.getImageById(Integer.valueOf(request.getParameter("id")));
//点赞数+1
image.setFavor(image.getFavor() + 1);
imageService.update(image);
response.getWriter().append(ResponseBuilder.createJson(image));
} catch (NumberFormatException | SQLException e) {
e.printStackTrace();
response.getWriter().append(ResponseBuilder.createJson(ResponseCode.SERVICE_ERROR));
}
}else {
try {
image = imageService.getImageById(Integer.valueOf(request.getParameter("id")));
response.getWriter().append(ResponseBuilder.createJson(image));
} catch (NumberFormatException | SQLException e) {
e.printStackTrace();
response.getWriter().append(ResponseBuilder.createJson(ResponseCode.SERVICE_ERROR));
}
}
补充
html自然是在写前端了,然后通过请求servlet来对后端进行操作
传参:
this.$http.get(‘images?id=’ + this.imageId + ‘&favor=1’).then(function (res)
判断参数:
if(request.getParameter(“favor”)!= null)
按钮监听:
<button type=“button” class=“btn btn-primary” id=“btn” @click=“click()”>点赞
click是函数名
函数体写在method里
click: function () {
this.$http.get(‘images?id=’ + this.imageId + ‘&favor=1’).then(function (res) {
console.log(res.body);
if (res.body.code == 1000) {
this.image = res.body.data;
}
}, function () {
console.log(‘GET images failed.’);
});