8.ajax 修改轮播图的状态和数量

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('更新失败');
				}
			})
		});
	},
}