Python Web聊天室--首页

py3study

发布于 2020-01-07 23:31:20

1.5K0

发布于 2020-01-07 23:31:20

文章被收录于专栏：python3python3

今天来完成我们聊天室的首页

首先创建app

manage.py startapp chat

2.编辑视图文件(chat/views.py)

# chat/views.py

# 需要导入的包,有些包目前还没有用到,但是以后会用
from django.shortcuts import render_to_response, HttpResponse
from chat.models import ChatRoom, RoomAccount, ChatPool
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
import json

# 添加一个用户认证的装饰器,功能是检测访问页面的用户是否已经登录
# 如果没有登录则跳转到登录界面
@login_required(login_url='/account/login')
def index(request):
   user = request.user
   RoomObj = ChatRoom.objects.all()
   # 第二个参数是传给template的字典,我们之后可以再template里调用这些数据
   return render_to_response("chat/index.html", {'user': user, 'RoomObj': RoomObj})

我们还需要改一下之前用户认证里的views文件

# account/views.py

def login(request):
   data = {'loginStatus': ''}
   if request.method == 'POST':
      username = request.POST.get('username')
      password = request.POST.get('password')
      user = auth.authenticate(username=username, password=password)
      if user is not None:
         auth.login(request, user)
         # 改动了这里,意思是登录成功后跳转到/chat
         return HttpResponseRedirect('/chat')
      data['loginStatus'] = u'用户名或密码错误!'
   return render_to_response('account/login.html', data, context_instance=RequestContext(request))

2.在app里创建urls文件

# ChatRoom/urls.py

urlpatterns = patterns(
   '',
   url(r'^admin/', include(admin.site.urls)),
   url(r'^account/', include('account.urls')),
   # 新添加的内容
   url(r'^chat/', include('chat.urls')),
)

# chat/urls.py

urlpatterns = patterns(
   '',
   # 意思是uri是'/chat'时交给views.index函数处理
   url(r'^$', views.index),
)

3.编辑models文件

# chat/models.py

# 这个表用来保存房间名
class ChatRoom(models.Model):
   # 参数表示最长8字节,并且不可重复
   roomname = models.CharField(max_length=8, unique=True)

   # 在admin中显示的名字
   def __unicode__(self):
      return self.roomname

修改配置文件setting.py

# 添加后我们在syncdb时才会同步chat中的models
INSTALLED_APPS = (
   ...
   'chat',
)

同步数据库

manage.py makemigrations
manage.py syncdb

在admin中注册

# chat/admin.py

from django.contrib import admin
from chat.models import ChatRoom, RoomAccount, ChatPool
# Register your models here.
admin.site.register(ChatRoom)

启动应用,然后访问http://IP/admin

在admin中添加两个聊天室

4.编辑template文件

首先在templates下创建两个创建两个目录,layout和chat

在layout里创建base.html(基础模板,我们可以在其他的模板里调用这个,可以减少代码重复率)

这个模板我们是根据bootstrap官网给出的模板来修改的http://v3.bootcss.com/examples/non-responsive/ 更多资料可以参考官方文档

# templates/layout/base.html

<!DOCTYPE html>
<html lang="zh-CN">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ChatRoom</title>
    // 调用bootstrap的css文件
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/non-responsive.css" rel="stylesheet">
    // 添加一个块,可以在之后的子文件中用,更多资料参考jinja2官方文档
   {% block css %}{% endblock %}
  </head>

  <body>
    // 导航栏
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">ChatRoom</a>
        </div>
        <div id="navbar">
        {% block nav-left %}{% endblock %}
          <ul class="nav navbar-nav navbar-right">
            // 一个下拉菜单,可以控制用户注销,更改密码,编辑资料等
           <li class="dropdown ">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ user.username }} <span class="caret"></span></a>
              <ul class="dropdown-menu  dropdown-menu-left" role="menu">
                <li><a href="#">主页</a></li>
                <li><a href="#">设置</a></li>
                <li class="divider"></li>
                <li><a href="/account/logout">注销</a></li>
              </ul>
            </li>
            
          // 一个搜索框,目前还用不到,放着好看点吧:D
         <form class="navbar-form navbar-left" action="">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
            </form>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      {% block content %}{% endblock %}

    </div> <!-- /container -->
    
    // 引用jQuery
    <script src="/static/js/jquery-1.11.2.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
   {% block js %}{% endblock %}
  </body>
</html>

下面编辑我们聊天室的首页文件

# templates/chat/index.html

// 引用base.html文件
{% extends "layout/base.html" %}

// 导航栏
{% block nav-left %}
   <ul class="nav navbar-nav">
       // 'active'类表示活动页面,'disabled'表示禁用不可选的项目
      <li class="active"><a href="/chat/">首页</a></li>
      <li class="disabled"><a>聊天室</a></li>
   </ul>
{% endblock %}

// 内容
{% block content %}
   <div id="home">
      <div class="page-header">
      // 这个user就是我们前面在views里传到后台的字典,这里就可以调用了
      <h1>{{ user }},欢迎来到聊天室!</h1>
      <h3>全部房间</h3>
      </div>
      //  房间列表
      <table class="table table-striped">
         <thead>
            <tr>
               <th>房间序号</th>
               <th>房间名</th>
            </tr>
         </thead>
         <tbody>
            {% for item in RoomObj %}
               <tr>
                  <th>{{ item.id }}</th>
                  <th><a href="/chat/{{ item.id }}">{{ item }}</a></th>
               </tr>
            {% endfor %}
         </tbody>
      </table>
   </div>
{% endblock %}

5.查看效果

我们启动django,来看下完成后的效果

我们访问http://IP/chat/会跳转到登录页面,如果之前没登录的话