后端逻辑

表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可

编辑cmd.forms.py

class UpdateBannerForm(AddBannerForm):
banner_id = IntegerField(validators=[InputRequired(message='请输入轮播图的id!')])

视图,编辑cms.views.py

...
from .forms import UpdateBannerForm @bp.route('/ubanner/',methods=['POST'])
@login_required
def ubanner():
form = UpdateBannerForm(request.form)
if form.validate():
banner_id = form.banner_id.data
name = form.name.data
image_url = form.image_url.data
link_url = form.link_url.data
priority = form.priority.data
banner = BannerModel.query.get(banner_id)
if banner:
banner.name = name
banner.image_url = image_url
banner.link_url = link_url
banner.priority = priority
db.session.commit()
return xjson.json_success()
else:
return xjson.json_param_error(message='没有这个轮播图!')
else:
return xjson.json_param_error(message=form.get_error())

前端逻辑

当我们点击编辑,也是弹出一个模态框,而且这个模态框其实是和添加轮播图的模态框是一样的。不同的地方就是编辑的模态框有内容。

因此我们可以复用之前的模态框,并把内用填充进表单即可。

现在关键是如何获取内容?

这里有个方法就是把需要的内容存到元素的属性中,如下,我们存入到tr标签的属性中

我们有存入:

  data-name="{{ banner.name }}"

  data-image="{{ banner.image_url }}"

  data-link="{{ banner.link_url }}"

  data-priority="{{ banner.priority }}"

  data-id="{{ banner.id }}"

    {% for banner in banners %}
<tr data-name="{{ banner.name }}" data-image="{{ banner.image_url }}" data-link="{{ banner.link_url }}" data-priority="{{ banner.priority }}" data-id="{{ banner.id }}">
<td>{{ banner.name }}</td>
<td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
<td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
<td>{{ banner.priority }}</td>
<td>{{ banner.create_time }}</td>
<td>
<button class="btn btn-default btn-xs edit-banner-btn">编辑</button>
<button class="btn btn-danger btn-xs delete-banner-btn">删除</button>
</td>
</tr>
{% endfor %}
</tbody>

这样我们通过js获取定位到“编辑”按钮,获取这个 按钮的父元素(td)的父元素(tr)的属性值,然后把需要的值填入到表单就可以了。

编辑banners.js

$(function () {
$("#save-banner-btn").click(function (event) {
event.preventDefault();
self = $(this);
var dialog = $("#banner-dialog");
var nameInput = dialog.find("input[name='name']");
var imageInput = dialog.find("input[name='image_url']");
var linkInput = dialog.find("input[name='link_url']");
var priorityInput = dialog.find("input[name='priority']"); var name = nameInput.val();
var image_url = imageInput.val();
var link_url = linkInput.val();
var priority = priorityInput.val();
//通过保存按钮上的属性data-type,获取数据类型,如果它的值是update,就是编辑操作了,否则就是添加操作
var submitType = self.attr('data-type');
//这里通过保存按钮上的属性data-id获取到轮播图的id, 如果是添加轮播图这就是个空值,不用管它
var bannerId = self.attr("data-id"); if(!name || !image_url || !link_url || !priority){
zlalert.alertInfoToast('请输入完整的轮播图数据!');
return;
} //根据submitType的值来判断url应该是添加还是编辑
var url = '';
if(submitType == 'update'){
url = '/cms/ubanner/';
}else{
url = '/cms/abanner/';
} bbsajax.post({
"url": url, //这里就要改成动态获取上面的url了
"data": {
'name':name,
'image_url': image_url,
'link_url': link_url,
'priority':priority,
'banner_id': bannerId //这里需要多传入一个轮播图id,就是是添加操作也无所谓,后端也没接收
},
'success': function (data) {
dialog.modal("hide");
if(data['code'] == 200){
// 重新加载这个页面
window.location.reload();
}else{
zlalert.alertInfo(data['message']);
}
},
'fail': function () {
zlalert.alertNetworkError();
} });
});
});

到此,我们轮播图的编辑功能就完成了!

Flask实战第53天:cms编辑轮播图功能完成的更多相关文章

  1. Flask实战第54天:cms删除轮播图功能完成

    后台逻辑 编辑cms.views.py @bp.route('/dbanner/',methods=['POST']) @login_required def dbanner(): banner_id ...

  2. Flask实战第52天:cms添加轮播图前端代码逻辑完成

    首页我们在模态框中的保存按钮加一个id,这样方便我们选取这个按钮 <button type="button" class="btn btn-primary" ...

  3. Flask实战第51天:cms添加轮播图后端代码逻辑完成

    首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...

  4. Flask实战第50天:cms添加轮播图的模态对话框制作

    编辑cms_banners.html, 在{% block main_content%}中加上表给内容如下 {% block main_content %} <table class=" ...

  5. Flask实战第48天:首页轮播图实现

    首页的布局如下 因为以后所有的内容都是在main-container里面,所以这里我们修改front_base.html,把{% block body%}{% endblock%}放到里面去 < ...

  6. Android项目实战(四十七):轮播图效果Viewpager

    简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V    需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...

  7. 利用axure软件实现app中的轮播图功能

    1.首先在axure软件中插入一张手机模型图片并调整为合适大小 2.在需要展示轮播图片位置拖入[动态面板]并且调整大小 拖入后双击动态面板,填入面板名称,并且添加面板状态(此处轮播图为三张,所以有三个 ...

  8. 一百二十八:CMS系统之轮播图的编辑和删除功能

    编辑 form,继承添加的form 视图 @bp.route('/ubanners/', methods=['POST'])@login_required@permission_required(CM ...

  9. day76:luffy:项目前端环境搭建&轮播图的实现

    目录 1.项目前端环境搭建 1.创建项目目录 2.前端初始化全局变量和全局方法 3.跨域CORS 4.axios配置 2.轮播图功能的实现 1.安装依赖模块 2.上传文件相关配置 3.注册home子应 ...

随机推荐

  1. 【点分治练习题·不虚就是要AK】点分治

    不虚就是要AK(czyak.c/.cpp/.pas)  2s 128M  by zhb czy很火.因为又有人说他虚了.为了证明他不虚,他决定要在这次比赛AK. 现在他正在和别人玩一个游戏:在一棵树上 ...

  2. bzoj 1731: [Usaco2005 dec]Layout 排队布局 ——差分约束

    Description 当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些.FJ有N(2<=N<=1000)头奶牛,编号从1到N,沿一条直线站着等候喂食.奶牛排在队伍中的顺序和它们的编号是相 ...

  3. OpenCVSSDpython目标探测对象检测

    1.请参考大牛博客链接 https://www.aiuai.cn/aifarm822.html

  4. C#利用WebClient 两种方式下载文件

    WebClient client = new WebClient(); 第一种 string URLAddress = @"http://files.cnblogs.com/x4646/tr ...

  5. 变量对象vs活动对象

    这是我见过描述的最为详尽的关于变量对象.活动对象以及闭包的解析,来自知乎,感谢答主: 作者:闭家锁链接:https://www.zhihu.com/question/36393048/answer/7 ...

  6. 抓起根本(二)(hdu 4554 叛逆的小明 hdu 1002 A + B Problem II,数字的转化(反转),大数的加法......)

    数字的反转: 就是将数字倒着存下来而已.(*^__^*) 嘻嘻…… 大致思路:将数字一位一位取出来,存在一个数组里面,然后再将其变成数字,输出. 详见代码. while (a) //将每位数字取出来, ...

  7. 概率DP入门学习QAQ

    emmmm博客很多都烂尾了...但是没空写..先写一下正在学的东西好了 概率DP这东西每次考到都不会..听题解也是一脸懵逼..所以决定学习一下这个东东..毕竟NOIP考过...比什么平衡树实在多了QA ...

  8. perl6 拖库脚本

    #注入点: #https://fei.sg/shop/products.php?action=content&id=-23 #check mysql column_name of the sq ...

  9. js原生读取json

    function showJson(){ var test; if(window.XMLHttpRequest){ test = new XMLHttpRequest(); }else if(wind ...

  10. 【Windows使用笔记】使Onedrive同步任意文件夹

    因为度盘实在是有点垃圾,经常看的剧之类的或者其他软件资源啥的动不动就被封. 所以跑去某宝买了一个5T的企业子账号,安全性不清楚,重要的隐私数据反正都用移动硬盘备份了.主要就是存一些资源性的文件吧.而且 ...