前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BBS论坛(二十)

BBS论坛(二十)

作者头像
zhang_derek
发布2019-02-13 16:01:23
3.2K0
发布2019-02-13 16:01:23
举报
文章被收录于专栏:有趣的django有趣的django

20.1.cms添加轮播图后台逻辑代码完成

(1)apps/models.py

代码语言:javascript
复制
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)
    img_url = db.Column(db.String(255), nullable=False)
    link_url = db.Column(db.String(255), nullable=False)
    priority = db.Column(db.Integer, default=0)
    create_time = db.Column(db.DateTime, default=datetime.now)

(2)manage.py

代码语言:javascript
复制
from apps.models import BannerModel

(3)生成到数据库

代码语言:javascript
复制
python manage.py db migrate

python manage.py db upgrade

(4)cms/forms.py

代码语言:javascript
复制
class AddBannerForm(BaseForm):
    name=StringField(validators=[InputRequired(message='请输入轮播图名称')])
    img_url=StringField(validators=[InputRequired(message='请输入轮播图链接')])
    link_url=StringField(validators=[InputRequired(message='请输入轮播图跳转链接')])
    priority=IntegerField(validators=[InputRequired(message='请输入轮播图优先级')])

(5)cms/views.py

代码语言:javascript
复制
@bp.route('/abanner/',methods=['POST'])
def abanner():
    form=AddBannerForm(request.form)
    if form.validate():
        name=form.name.data
        img_url=form.img_url.data
        link_url=form.link_url.data
        priority=form.priority.data
        banner=BannerModel(name=name,img_url=img_url,link_url=link_url,priority=priority)
        db.session.add(banner)
        db.session.commit()
        return restful.success()
    else:
        return restful.params_error(message=form.get_error())

20.2.cms添加轮播图前台逻辑完成

(1)cms/js/banner.js

代码语言:javascript
复制
$(function () {
    $('#save_banner_btn').click(function (event) {
        event.preventDefault();
        var dialog = $('#banner-dialog');
        var nameInput = $("input[name='name']");
        var imgInput = $("input[name='img_url']");
        var linkInput = $("input[name='link_url']");
        var priorityInput = $("input[name='priority']");

        var name = nameInput.val();
        var img_url = imgInput.val();
        var link_url = linkInput.val();
        var priority = priorityInput.val();

        if (!name || !img_url || !link_url || !priority) {
            zlalert.alertInfo('请输入完整的轮播图数据');
            return;
        }

        zlajax.post({
            'url': '/cms/abanner/',
            'data': {
                'name': name,
                'img_url': img_url,
                'link_url': link_url,
                'priority': priority
            },
            'success': function (data) {
                if (data['code'] == 200) {
                    dialog.modal('hide');
                    window.location.reload()
                } else {
                    zlalert.alertInfo(data['message']);
                }
            },
            'fail': function (error) {
                zlalert.alertNetworkError()
            }
        });
    });

});

(2)cms/cms_banners.html

代码语言:javascript
复制
{% from 'common/_macros.html' import static %}


<script src="{{ static('cms/js/banners.js') }}"></script>

(3)cms/views.py

代码语言:javascript
复制
@bp.route('/banners/')
@login_required
def banners():
    banners = BannerModel.query.all()
    return render_template('cms/cms_banners.html',banners=banners)

(4)cms_banners.html

代码语言:javascript
复制
<tbody>
        {% for banner in banners %}
            <tr>
                <td>{{ banner.name }}</td>
                <td><a href="{{ banner.img_url }}" target="_blank">{{ banner.img_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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-06-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 20.1.cms添加轮播图后台逻辑代码完成
  • 20.2.cms添加轮播图前台逻辑完成
相关产品与服务
图数据库 KonisGraph
图数据库 KonisGraph(TencentDB for KonisGraph)是一种云端图数据库服务,基于腾讯在海量图数据上的实践经验,提供一站式海量图数据存储、管理、实时查询、计算、可视化分析能力;KonisGraph 支持属性图模型和 TinkerPop Gremlin 查询语言,能够帮助用户快速完成对图数据的建模、查询和可视化分析。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档