完整工程链接点击打开链接
上一篇中我们使用了Javascript和Html5实现了弹球游戏,而在本文中我们希望以其为基础实现游戏网站,能够实现用户的注册登录,游戏成绩记录,排名显示,微博分享等功能。
最终效果:
2. 网站的搭建和服务器的搭建
2.1 网站整体构成
网站的搭建我使用django框架。
2.1.1 数据库设计
User:
Field |
Type |
Null |
Key |
Default |
Description |
Name |
Varchar(50) |
No |
Primary |
|
用户ID |
Password |
Varchar(50) |
No |
|
|
用户密码 |
BestScore |
Integer |
No |
|
0 |
用户最高分 |
Name |
Varchar(20) |
No |
|
|
法人姓名 |
对应的Models;
class Player(models.Model): name = models.CharField(max_length=50, primary_key =True) password = models.CharField(max_length=50) bestScore = models.PositiveIntegerField() def __unicode__(self): return u'%s %s %s %s %s' % (self.name, self.password, self.weibo, self.weboPw, self.bestScore)
2.1.2 网站设计
网站架构图:
URL设置
(r'^$', views.login), (r'^index/$', views.index), (r'^ballgame/$', views.game), (r'^signup/$', views.signup), (r'^signresult/$', views.signResult), (r'^login/$', views.loginResult), (r'^storeScore/(?P<score>[\d]*)/$', views.storeScore), (r'^logout/$', views.logout), (r'^site_media/(?P<path>.*)$','django.views.static.serve',{'document_root': settings.STATIC_PATH}),
要点:登录控制,登录之后向request中写入session表示已经登录,在受到每个URL请求时在views中进行判断,如果session中没有这个信息,就返回登录页面。登出则是在request中删除这个session信息。
//登录结果 def loginResult(request): if request.method == "POST": username = request.POST["username"] try: user = Player.objects.get(name = username) except ObjectDoesNotExist: return render_to_response("login.html") passwd = request.POST["password"] if passwd != user.password: return HttpResponseRedirect("/") request.session['user_id'] = user.name; return HttpResponseRedirect("/index/") //登录页 def login(request): if "user_id" in request.session: return HttpResponseRedirect("/index/") else: return render_to_response('login.html') //注册页 def signup(request): return render_to_response('signup.html') //登出 def logout(request): try: del request.session['user_id'] except KeyError: pass return render_to_response('login.html') //index页 def index(request): //使用request中的session控制登录 if "user_id" in request.session: res = Player.objects.order_by('-bestScore')[0:9] user = Player.objects.get(name=request.session["user_id"]) score = user.bestScore count = 1 ares = Player.objects.order_by('-bestScore') for p in ares: if p.name==request.session["user_id"]: break else: count= count+1 return render_to_response('index.html', {"username": request.session["user_id"], "bestPlayer": res, "score": score, "rank": count}) else: return render_to_response('login.html') //游戏页 def game(request): if "user_id" in request.session: return render_to_response('ballGame.html', {"username": request.session["user_id"]}) else: return HttpResponseRedirect("") //注册结果页 def signResult(request): if request.method == "POST": username = request.POST["username"] try: existed = Player.objects.get(name = username) except ObjectDoesNotExist: passwd = request.POST["password"] p = Player(name = username, password= passwd, bestScore=1) p.save() return render_to_response("signSucceed.html") return HttpResponseRedirect("/signup/") //保存得分 def storeScore(request,score): if 'user_id' in request.session: userid = request.session['user_id'] try: user = Player.objects.get(name=userid) except ObjectDoesNotExist: return HttpResponseRedirect("") oldScore = user.bestScore; print type(oldScore) print type(score) score = long(score) if score > oldScore: print "yes" bestScore = score user.bestScore = score user.save() else: bestScore = oldScore return render_to_response("score.html",{"username":user.name, "thisscore":score, "bestScore": bestScore}) else: return HttpResponseRedirect("")
2.1.3 服务器的搭建
本网站选择使用Apache服务器,apache服务器默认不支持python。所以需要加载外部模块。这里选择使用module_wsgi。
配置步骤:
A.从网站上下载编译好的module_wsgi.so,放置到apache安装目录/modules文件夹。在apache安装目录/conf/httpd.conf文件中添加以下内容已载入该模块。
LoadModule wsgi_module modules/mod_wsgi.so WSGIScriptAlias / "F:/danjo/game/django.wsgi" //设置/url对应文件。 Alias /site_media F:/danjo/game/static //设置/site_media url 所对应目录。本网站将所有的静态加载内容放在了该文件夹。 <Directory /> Options FollowSymLinks AllowOverride None Order deny,allow Deny from allow此处为设置对/根目录的访问权限 </Directory> <Directory "F:/danjo/game"> //该目录为django工程所在目录 Order deny,allow allow from all </Directory>
在django工程目录中添加文件。Django.wsgi。
import os import sys import django.core.handlers.wsgi sys.path.append(r'F:/danjo/game') os.environ['DJANGO_SETTINGS_MODULE'] = 'game.settings' application = django.core.handlers.wsgi.WSGIHandler()
这样之后就可以在apache中访问我们的django框架搭建的网站了。
3. 微博功能的实现
微博分享功能需要使用微博API,这里选择使用javascript API。Api的使用需要在微博开放平台注册应用,并表明网站所有权。所有需要我们的网站能在外网登录。所以需要注册域名,这里我选择使用花生壳动态域名服务器。并使用了它的免费域名kkopq.xicp.net。
做完以上几步后,实现微博分享就很简单了。在需要微博的页面添加以下内容:
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=2556191936" type="text/javascript" charset="utf-8"></script> //这是微博api的库 注意需要添加注册应用后获得appkey。
定义分享按钮:
<p><button class="btn btn-success btn-hg" style="width:200px;height:50px" type="button" id="wb_publish" >share</wb:button></p> <script> WB2.anyWhere(function(W){ W.widget.publish({ id : 'wb_publish', default_text : 'I have gotten {{score}} points in the KKball game! Come to play with me at kkopq.xicp.net![耶][耶][耶]' }); }); </script>
网页UI我是用了Flat UI框架。
原文地址:http://blog.csdn.net/u010485034/article/details/38962741