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/会跳转到登录页面,如果之前没登录的话