西遊之路——python全棧——基於BootStrap和Font-Awesome製做頁面

時間 2019-11-21

標籤之路 python 基於 bootstrap font awesome 製做頁面欄目 Python 简体版

原文原文鏈接

1、製做前的準備

　　一、下載BootStrap和Font-Awesome插件css

　　二、建立static文件夾，並文件夾內進行分類，且把插件放入plugins文件夾html

2、操做流程

　　一、建立project =》day56python

　　二、APP =》app01jquery

　　三、配置ajax

　　　　　　— 靜態文件bootstrap

　　　　　　—模板路徑app

　　四、models中建立projects表函數

　　五、url

　　　　URL =》 views =》 HTMLspa

　　六、BootStrap

　　　　　　提供現場樣式 + 效果

　　　FontAwesome

　　　　　　提供圖標

　　七、/student/ ---> stuednts函數（班級和學生列表） ---> student.html

　　八、

　　　　$.ajax ({

　　　　　　url:

　　　　　　type:

　　　　　　data:

　　　　　　success: function()arg {

　　　　　　　　//arg必定爲字符串，當相似字典時：

　　　　　　　　　　　　　　　　　　　　　　　　JSON.parse(arg) 轉化爲字典

　　　　　　　　　　　　　　　　　　　　　　　　JSON.stringify(arg) 轉化爲字符串

　　　　　　}

　　　　});

3、HTML操做

　　引入插件 ==》插入模板 ==》引入jQuery並進行綁定 ==》對模板進行編輯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {# 引入插件 #}
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
    <style>
        .icon{
            margin: 0px 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="padding:20px 0;">
        <a class="btn btn-primary" id="addBtn">添加</a>
        <a class="btn btn-danger"">刪除</a>
    </div>
    <div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>班級</th>
                <th>操做</th>
            </tr>
            </thead>
            <tbody>
            {% for row in stu_list %}
            <tr>
                <td>{{row.id}}</td>
                <td>{{row.name}}</td>
                <td>{{row.age}}</td>
                <td>{{row.gender}}</td>
                <td>{{row.cs.name}}</td>
                <td>
                    <a href="" class="glyphicon glyphicon-remove icon"></a>
                    <a href="" class="fa fa-pencil-square-o icon"></a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">建立學生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年齡</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="age" placeholder="年齡">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">性別</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="0"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">班級</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cs">
                                {% for row in stu_list %}
                                     <option value="{{row.cs.id}}">{{row.cs.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

{# jquery必須放插件前 #}
<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>

<script>
        $(function() {
            bindEvent();
        });
        function bindEvent() {
            $('#addBtn').click(function() {
                $('#addModal').modal('show');
            })
        }
</script>

</body>
</html>