九event_page_dev

Posted 2020-10-19 糖猴子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了九event_page_dev相关的知识，希望对你有一定的参考价值。

bootstrap3

1、定义

Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于html、CSS、javascript 的，它简洁灵活，使得Web 开发更加快捷。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发，是一个CSS/HTML 框架。Bootstrap 提供了优雅的HTML 和CSS 规范，它即是由动态CSS 语言Less 写成。
Bootstrap 中文网：http://www.bootcss.com/

2、前端资源存储位置

本地存储

CND存储（推荐）

本地引用CDN路径

网上查找CDN文件

3、登录相关文件修改

修改title、页面标题

输入框默认显示文案

修改登录动作和登录时的请求方法

根据name属性的值，修改传参

错误信息提示

修改输入框的登陆样式修改为text文本

应用的输入框样式

4、针对Django的bootstrap的开源项目

在python项目下引入Django-bootstrap3的包

MacBook-Pro-7:site-packages monkey$ python3 -m pip install django-bootstrap3

Collecting django-bootstrap3
  Downloading django-bootstrap3-9.1.0.tar.gz
Building wheels for collected packages: django-bootstrap3
  Running setup.py bdist_wheel for django-bootstrap3 ... done
  Stored in directory: /Users/monkey/Library/Caches/pip/wheels/72/e0/e8/4cb3d765c70ddf660249ac8136b57ec5da9ba9ecc5290d70c4
Successfully built django-bootstrap3
Installing collected packages: django-bootstrap3
Successfully installed django-bootstrap3-9.1.0

setting.py文件引入应用

页面跳转优化

1、登陆成功跳转页面关联发布会、嘉宾表

views页面添加

from sign.models import Event,Guest


@login_required  #添加装饰器
#定义上面跳转到event_manage请求
def event_manage(request):
    event_list = Event.objects.all()   #查询到所有的发布会数据
    username = request.session.get(\'user\') #获取浏览器session
    return render(request,\'event_manage.html\',{\'p_user\':username,\'enevts\':event_list}) ：跳转链接

2、在后台创建好发布会、嘉宾表

创建数据库遇到1366的报错，报错信息如下图

解析：object_repc这个字段编码错误

  ->show full columns from 表名;  
  #发现address字段的Collation项非utf8，修改它！  
  ->alter table 表名 change 报错的字段 报错的字段 varchar(100) character set utf8 collate utf8_unicode_ci not null default \'\';

3、将创建好的发布会信息显示在登录成功后的跳转页面

4、将发布会的时间、地点通过for循环给展示出来（利用Django的模板语言）

5、样式修改

登录成功跳转html页面修改

<html lang="zh-CN">
<head>
    <!-- 头部的引用-->
{% load bootstrap3 %} <!-- 在setting文件里面已经引入了bootstrap3，所以直接引用本地的bootstrap3-->
{% bootstrap_css %}
{% bootstrap_javascript %}
<title>Guest Manage</title>
</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 System</a>  <!-- 管理系统的名称-->
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">发布会</a></li>  <!--active：表示选中状态 -->
            <li><a href="/guest_manage/">嘉宾</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">   <!--抓取登陆信息-->
           <li><a href="#">{{user}}</a></li>
           <li><a href="/logout/">退出</a></li>
         </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container theme-showcase" role="main">

<!-- 发布会列表-->
 <div class="page-header">
        <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><!--/.navbar-collapse -->
      </div>

      <div class="row">
        <div class="col-md-6">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>id</th>
                <th>名称</th>
                <th>状态</th>
                <th>地址</th>
                <th>时间</th>
                <th style="width: 60px;">签到</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>
                  <td><a href="/sign_index/{{ event.id }}/"  target="{{ event.id }}_blank">sign</a></td>
                  <td><a href="/sign_index2/{{ event.id }}/"  target="{{ event.id }}_blank">sign_web</a></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>


</body>
</html>

6、给表单增加搜索功能

7、匹配搜索输入框结果

urls配置相对应的访问链接

url(r\'^search_name/\',views.event_search),

views.py文件写相对应的请求方法

@login_required
def event_search(request):
    if request.method == \'GET\':
        s_name = request.GET.get(\'search_name\')
        print(s_name)
        event_list = Event.objects.filter(name__contains=s_name)
        username = request.session.get(\'user\')
        return render(request,\'event_manage.html\',{\'p_user\':username,\'events\':event_list})
    else:
        return render(request,\'new_index.html\')

以上是关于九event_page_dev的主要内容，如果未能解决你的问题，请参考以下文章

Elasticsearch笔记九之优化

JSP制作一个九九乘法表代码？

C语言九九乘法表源代码的理解。

python [九九乘法表] Python一行代码打印九九乘法表

我是java初学者，怎么在命令符中输出九九乘法表？请把代码给我谢谢。

用python打印九九乘法表代码