django 学习(十二)—— 设计发布会管理


Bootstrap是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的,它简洁灵活,使得Web开发更加快捷。

安装Django-bootstrap3:pip install django-bootstrap3

安装完成,在.../guest/settings.py文件中添加“bootstrap3”应用:

 一、发布会列表

继续回到视图层的开发中

1.打开.../sign/views.py文件,修改event_manage()视图函数。

 2.打开并编写.../templates/event_manage.html页面

DOCTYPE html>
<html lang="zh-CN">
<head>
    
    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
    <title>Guest Managetitle>
head>
<body role="document">
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/event_manage/">Guest Manage Systema>
            div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    
                    <li class="active"><a href="#">发布会a> li>
                    <li><a href="/guest_manage/">嘉宾a> li>
                ul>
                <ul class="nav nvbar-nav navbar-right">
                    
                    <li><a href="#">{{ user }}a> li>
                    <li><a href="/logout/">退出a> li>
                ul>
            div>
        div>
    nav>
    
    <div class="row" style="padding-top: 80px;">
        <div class="col-md-6">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>idth><th>名称th><th>状态th><th>地址th><th>时间th>
                tr>
                thead>
                <tbody>
                
                {% for event in events %}
                    <tr>
                        <td>{{event.id}}td>
                        <td>{{event.name}}td>
                        <td>{{ event.status }}td>
                        <td>{{ event.address }}td>
                        <td>{{ event.start_time }}td>
                    tr>
                {% endfor %}
                tbody>
            table>
        div>
    div>
body>
html>

二、搜索功能

1.先在.../templates/event_manage.html文件中添加搜索表单

<div class="page-header" style="padding-top: 60px;">
        <div id="navbar" class="navbar-collapse collapse">
            
            <form class="navbar-form" method="get" action="/search_name/">
                <div class="form-group">
                    
                    <input name="name" type="text" placeholder="名称" class="form-control">
                div>
                <button type="submit" class="btn btn-success">搜索button>
            form>
        div>
    div>
    

2.在.../guest/urls.py文件中添加搜索路径的路由

 3..../sign/views.py文件,创建search_name()视图函数