cms布局

編輯 cms_boards.html

{% block main_content %}
    <div class="top-box">
        <button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加新板塊</button>
    </div>

    <table class="table table-bordered">
        <thead>
            <
 
tr>
                <th>板塊名稱</th>
                <th>帖子數量</th>
                <th>創建時間</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
{% endblock %}
 

給 “添加輪播圖“加上樣式”

{% block head %}
    <style>
        .top-box button{
            float: right;
        }

        .top-box{
            overflow: hidden;
            background: #ecedf0;
            padding: 10px;
        }
    </style>
{% endblock %}

添加新板塊後端

首先添加個表， 因為板塊前後端都要用到，編輯apps.models.py

class BoardModel(db.Model):
    __tablename__ = ‘board‘
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(20), nullable=False)
    create_time = db.Column(db.DateTime, default=datetime.now)

同步表到數據庫

>python manage.py db migrate
python manage.py db upgrade

添加個表單驗證，編輯cms.forms.py

class AddBoardForm(BaseForm):
    name = StringField(validators=[InputRequired(message=‘請輸入板塊名稱‘)])

編輯cms.views.py

...
from apps.models import BoardModel
from .forms import AddBoardForm

@bp.route(‘/aboard/‘, methods=[‘POST‘])
@login_required
@permission_required(CMSPersmission.BOARDER)
def aboard():
    add_form_board = AddBoardForm(request.form)
    if add_form_board.validate():
        name = add_form_board.name.data
        board = BoardModel(name=name)
        db.session.add(board)
        db.session.commit()
        return xjson.json_success(message=‘添加板塊成功‘)
    else:
        return xjson.json_param_error(message=add_form_board.get_error())

添加板塊的邏輯寫好了，我們順便把更新板塊，刪除板塊一起寫了

編輯cms.forms.py

class UpdateBoardForm(AddBoardForm):
    board_id = IntegerField(validators=[InputRequired(message=‘請輸入板塊id‘)])

編輯cms.views.py

from .forms import UpdateBoardForm

@bp.route(‘/uboard‘, methods=[‘POST‘])
@login_required
@permission_required(CMSPersmission.BOARDER)
def uboard():
    update_board_form = UpdateBoardForm(request.form)
    if update_board_form.validate():
        board_id = update_board_form.board_id.data
        name = update_board_form.name.data
        if board_id:
            board = BoardModel.query.get(board_id)
            board.name = name
            db.commit(board)
            return xjson.json_success(message=‘更新成功‘)
        else:
            return xjson.json_param_error(message=‘板塊不存在‘)
    else:
        return xjson.json_param_error(message=update_board_form.get_error())


@bp.route(‘/dboard‘, methods=[‘POST‘])
@login_required
@permission_required(CMSPersmission.BOARDER)
def dboard():
    board_id = request.form.get(‘board_id‘)
    if not board_id:
        return xjson.json_param_error(message=‘請傳入板塊id‘)
    board = BoardModel.query.get(board_id)
    if not board:
        return xjson.json_param_error(message=‘沒有這個板塊‘)
    db.session.delete(board)
    db.session.commit()
    return xjson.json_success(message=‘刪除板塊成功‘)

傳遞板塊數據到前端頁面

@bp.route(‘/boards/‘)
@login_required
@permission_required(CMSPersmission.BOARDER)
def boards():
    all_boards = BoardModel.query.all()
    context = {
        ‘boards‘: all_boards
    }
    return render_template(‘cms/cms_boards.html‘, **context)

cms 前端js

給“添加新板塊"按鈕加上 id

<button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog" id="add-board-btn">添加新板塊</button>

創建static/cms/js/boards.js

$(function () {
   $(‘#add-board-btn‘).click(function (event) {
       event.preventDefault();
       xtalert.alertOneInput({
           ‘text‘: ‘請輸入板塊名稱‘,
           ‘placeholder‘: ‘板塊名稱‘,
           ‘confirmCallback‘: function (inputValue) {
               bbsajax.post({
                   ‘url‘: ‘/cms/aboard/‘,
                   ‘data‘: {
                       ‘name‘:inputValue
                   },
                   ‘success‘: function (data) {
                       if(data[‘code‘] ==200){
                           window.location.reload();
                       }else{
                           xtalert.alertInfo(data[‘message‘])
                       }
                   }
               });
           }
       });
   });
});

編輯cms_boards.html

引入boards.js

{% block head %}
    <script src="{{ url_for(‘static‘, filename=‘cms/js/boards.js‘)}}"></script>
    ...
{% endblock %}

動態展示數據

<table class="table table-bordered">
    <thead>
        <tr>
            <th>板塊名稱</th>
            <th>帖子數量</th>
            <th>創建時間</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for board in boards %}
            <tr>
                <td>{{ board.name }}</td>
                <td>暫未實現</td>
                <td>{{ board.create_time }}</td>
                <td>
                    <button class="btn btn-default btn-xs edit-board-btn">編輯</button>
                    <button class="btn btn-danger btn-xs delete-board-btn">刪除</button>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

Flask實戰第56天：板塊管理