Python Web聊天室–首页
- 2020 年 1 月 8 日
- 筆記
今天来完成我们聊天室的首页
- 首先创建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
