Python Web聊天室(二)--首页
今天来完成我们聊天室的首页
首先创建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/会跳转到登录页面,如果之前没登录的话
然后我们登录,用户密码就是之前在syncdb时,系统提示我们创建的用户
登陆成功后就会跳转到首页,聊天室的名字是之前在admin中创建的
到这里我们的首页就搞定了,聊天室的页面我们下次再更新
源码地址: https://github.com/cheney93/ChatRoom