一百二十七:CMS系统之添加轮播图前后台逻辑
后台逻辑
模型
from exts import db
from datetime import datetime class BannerModel(db.Model):
__tablename__ = 'banner'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
name = db.Column(db.String(255), nullable=False, comment='banner名')
image_url = db.Column(db.String(255), nullable=False, comment='banner图片链接地址')
link_url = db.Column(db.String(255), nullable=False, comment='点击banner跳转链接地址')
priority = db.Column(db.Integer, default=0, comment='优先级')
create_time = db.Column(db.DateTime, default=datetime.now)
manager管理
python manager.py db migrate
python manager.py db upgrade
form
class AddBannerForm(BaseForm):
name = StringField(validators=[InputRequired(message='请输入轮播图名称')])
image_url = StringField(validators=[InputRequired(message='请输入轮播图图片链接')])
link_url = StringField(validators=[InputRequired(message='请输入轮播图跳转链接')])
priority = IntegerField(validators=[InputRequired(message='请输入轮播图优先级')])
视图
@bp.route('/banners/')
@login_required
@permission_required(CMSPersmission.POSTER)
def banners():
banners = BannerModel.query.all()
return render_template('cms/cms_banners.html', banners=banners) @bp.route('/abanners/', methods=['POST'])
@login_required
@permission_required(CMSPersmission.POSTER)
def abanners():
""" 添加banner图 """
form = AddBannerForm(request.form)
if form.validate():
name = form.name.data
image_url = form.image_url.data
link_url = form.link_url.data
priority = form.priority.data
banner = BannerModel(name=name, image_url=image_url, link_url=link_url, priority=priority)
db.session.add(banner)
db.session.commit()
return restful.success()
else:
return restful.params_error(form.get_error())
模板中渲染轮播图信息
<tbody>
{% for banner in banners %}
<tr>
<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">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
{% endfor %}
</tbody>
因为后面会有很多地方用到top-box,所以把top-box的css放到base里面
js
$(function () {
$('#save-banner-btn').click(function (event) {
event.preventDefault();
var dialog = $('#banner-dialog');
var nameInput = $('input[name="name"]');
var imageInput = $('input[name="image_url"]');
var linkInput = $('input[name="link_url"]');
var priorityInput = $('input[name="priority"]'); var name = nameInput.val();
var image_url = imageInput.val();
var link_url = linkInput.val();
var priority = priorityInput.val(); if(!name || !image_url || !link_url || !priority ){
xtalert.alertInfoToast('请输入完整数据');
return;
}
ajax.post({
'url': '/cms/abanners/',
'data': {
'name': name,
'image_url': image_url,
'link_url': link_url,
'priority': priority
},
'success': function (data) {
dialog.modal('hide'); // 隐藏模态框
if(data['code'] == 200){
// 重新加载当前页面
window.location.reload();
}else{
xtalert.alertInfo(data['message']);
}
},
'fail': function (error) {
xtalert.alertNetworkError();
} });
});
});
模板中引用js
操作
一百二十七:CMS系统之添加轮播图前后台逻辑的更多相关文章
- 一百二十六:CMS系统之轮播图管理页面布局和添加轮播图的模态对话框制作
视图 @bp.route('/banners/')@login_required@permission_required(CMSPersmission.POSTER)def banners(): re ...
- Flask实战第52天:cms添加轮播图前端代码逻辑完成
首页我们在模态框中的保存按钮加一个id,这样方便我们选取这个按钮 <button type="button" class="btn btn-primary" ...
- Flask实战第50天:cms添加轮播图的模态对话框制作
编辑cms_banners.html, 在{% block main_content%}中加上表给内容如下 {% block main_content %} <table class=" ...
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- Flask实战第51天:cms添加轮播图后端代码逻辑完成
首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...
- 一百二十八:CMS系统之轮播图的编辑和删除功能
编辑 form,继承添加的form 视图 @bp.route('/ubanners/', methods=['POST'])@login_required@permission_required(CM ...
- Android项目实战(四十七):轮播图效果Viewpager
简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V 需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...
- Flask实战第53天:cms编辑轮播图功能完成
后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...
- 轮播图和xadmin后台管理
一.数据库设计 轮播图 1.安装依赖 pip install Pillow 2.模型类:home/models.py class Banner(models.Model): ""& ...
随机推荐
- shell脚本编程进阶及RAID和LVM应用1
bash脚本编程 脚本文件格式: 第一行,顶格写: #!/bin/bash 注释行:#开头 代码注释:写清楚注释 规范写脚本:适度缩进,添加空白行 编程语言:有编程语法格式,库,算法和数据结构 编程思 ...
- 构建官方example
开发工具的选择: 构建官方example:
- 类的命名空间与卸载详解及jvisualvm使用
类的命名空间详解: 在上一次[https://www.cnblogs.com/webor2006/p/9108301.html]最后实验中有一个违背咱们理解的,这里回顾一下: 也就是说,"某 ...
- 为什么说Redis是单线程的以及Redis为什么这么块
一.前言 近乎所有与Java相关的面试都会问到缓存的问题,基础一点的会问到什么是“二八定律”.什么是“热数据和冷数据”,复杂一点的会问到缓存雪崩.缓存穿透.缓存预热.缓存更新.缓存降级等问题,这些看似 ...
- Python 列表和元组 (2) 持续更新
数据结构就是数据的集合.Python最基本的数据结构就是序列,每个元素都会被分配一个元素的位置,也可以称为索引.注意索引都是从0开始的. Python包含6种内建的序列,分别是列表.元组.字符串.Un ...
- Java 实现大文件切割并生成多个文件
话不多说,直接上代码 import java.io.*; /*** * 分割大文件 * ( * SQL 文件太大(insert),第三方工具无法一次性读取,进行分割 * 生成 一个一个文件 * ) * ...
- prevAll([expr]) 查找当前元素之前所有的同辈元素
prevAll([expr]) 概述 查找当前元素之前所有的同辈元素 可以用表达式过滤.大理石构件维修 参数 exprStringV1.2 用于过滤的表达式 示例 描述: 给最后一个之前的所有div加 ...
- qt install (1)
直接在命令行安装 sudo apt-get install qt5-default qtcreator 命令行安装的卸载 sudo apt-get remove qt5-default qtcreat ...
- [Luogu] 天天爱跑步
https://www.luogu.org/problemnew/show/P1600 https://www.zybuluo.com/wsndy-xx/note/1135243 乱写的暴力,这道题暴 ...
- CUDA-F-5-5-常量内存
title: [CUDA 基础]5.5 常量内存 categories: - CUDA - Freshman tags: - CUDA常量内存 - CUDA只读缓存 toc: true date: 2 ...