ajax 修改轮播图的状态和数量
文章目录
一、思路:
1.控制器里写接口 2.base.js中写事件 2.前端页面写绑定事件
二、ajax修改轮播图状态(普通方法)
1.后台出接口
@filename(focus.controller)
/**
* ajax修改轮播图的状态
* 1. 获取轮播图id
* 2. 查询当前状态
* 3. 修改状态
*/
@Get('changeStatus')
async changeStatus(@Query() query) {
let id = query.id
let focusResult = await this.focusService.find({_id: id});
if(focusResult.length > 0) {
let status = focusResult[0].status;
status == 0? status=1 : status=0;
await this.focusService.update({_id: id}, {status: status });
return {
success: true,
message: '修改状态成功'
}
}else {
return {
success: false,
message: '传入参数错误'
}
}
}
2.前端
1.js(重点)
@filename(base.js)
var app = {
// 修改轮播图的状态
changeStatus(el, id) {
$.get('/admin/focus/changeStatus', {id: id}, function(data) {
if(data.success) {
if(el.src.indexOf('yes') != -1) {
el.src = '/admin/images/no.gif';
}else {
el.src = '/admin/images/yes.gif';
}
}else {
console.log(data.message);
}
})
}
}
2.html
<td>
<%if(focusList[i].status == 1){%>
<img src="/admin/images/yes.gif" onclick="app.changeStatus(this, '<%=focusList[i]._id%>')">
<%}else {%>
<img src="/admin/images/no.gif" onclick="app.changeStatus(this, '<%=focusList[i]._id%>')">
<%}%>
</td>
三、ajax修改轮播图状态(封装controllr)
思路:将focus.controller中的方法放到main.controller中进行封装
注意:属性名表达式 [field]
1.main.controller
注意:1.引入相关的service 2.注意 [field]的写法
/**
* 封装修改状态的方法
* 1. 获取轮播图id
* 2. 查询当前状态
* 3. 修改状态
*/
@Get('changeStatus')
async changeStatus(@Query() query) {
let id = query.id;
let model = query.model + 'Service';
let field = query.field;
let focusResult = await this[model].find({ _id: id });
if (focusResult.length > 0) {
let params;
let tempField = focusResult[0][field];
if (tempField == 0) {
params = { [field]: 1 }
} else {
params = { [field]: 0 }
}
await this[model].update({ _id: id }, params);
return {
success: true,
message: '修改状态成功'
}
} else {
return {
success: false,
message: '传入参数错误'
}
}
}
2.前端
1.html
<td>
<%if(focusList[i].status == 1){%>
<img src="/admin/images/yes.gif" onclick="app.changeStatus(this, 'focus', 'status', '<%=focusList[i]._id%>')">
<%}else {%>
<img src="/admin/images/no.gif" onclick="app.changeStatus(this, 'focus', 'status', '<%=focusList[i]._id%>')">
<%}%>
</td>
2.js
@filename(base.js)
var app = {
/**
* 修改状态 例子:轮播图
* model: 指定哪个表
* field: 指定哪个字段
*/
changeStatus(el, model, field, id) {
$.get('/admin/main/changeStatus', {id: id, model:model, field:field}, function(data) {
if(data.success) {
if(el.src.indexOf('yes') != -1) {
el.src = '/admin/images/no.gif';
}else {
el.src = '/admin/images/yes.gif';
}
}else {
console.log(data.message);
}
})
}
}
四、ajax异步修改轮播图的排序(封装版)
1. 后台:main.controller中封装接口
@filename(main.controller)
// ...
import { FocusService } from '../../../service/focus/focus.service';
@Controller(`${Config.adminPath}/main`)
export class MainController {
constructor(
private focusService: FocusService
) { }
// 更新数量
@Get('editNum')
async editNum(@Query() query) {
let id = query.id; // 更新的id
let model = query.model + 'Service'; // 更新的model
let field = query.field; // 更新的字段
let num = query.num; // 数量
console.log('num: ', num);
let focusResult = await this[model].find({ _id: id });
console.log('focusResult: ', focusResult);
if (focusResult.length > 0) {
let params = { [field]: num };
await this[model].update({_id:id}, params)
return {
success: true,
message: '修改成功'
}
} else {
return {
success: false,
message: '传入参数错误'
}
}
}
}
2.前端
1.html
<td>
<span onClick="app.editNum(this, 'focus', 'sort','<%=focusList[i]._id%>')"><%=focusList[i].sort%></span>
</td>
2.js(重点)
$(function(){
app.init();
})
var app = {
init: function() {
this.resizeIframe();
},
// 修改数量
editNum(el, model, field, id) {
let num = $(el).html();
let input = $('<input value=""></input>');
$(el).html(input);
$(input).trigger('focus').val(num);
$(input).click(()=>{ return false }); // 阻止事件冒泡
$(input).blur(() => {
num = $(input).val();
$(el).html(num);
$.get('/admin/main/editNum', {id, num, model, field}, (data)=>{
if(data.success) {
console.log('更新成功');
}else {
alert('更新失败');
}
})
});
},
}