（一）Django 环境搭建

0、介绍

Python3：Python开发环境，与Python2不兼容

pip3：Python3的包和模块管理工具，类似iOS的Cocoapods管理工具

Django：一个基于Python的Web框架，是Python3的一个开发包，我们目前使用1.8版本

1、Python2和python3在Mac上的共存

Mac上自带的Python路径是：/System/Library/Framwork/Python.Framework/versions/
自带的版本是2.7版本的，然后在/usr/bin里面创建了相应的快捷命令：
python
pythonw
python-config
pydoc
等,xcode的正常运行是需要这一套环境的，所以不要把这一套环境破坏，另外安装python3.4

2、python3的安装

如果已经正确安装直接跳过这个步骤

###方法一：
使用brew安装：

brew install python3

这种方式会直接安装好python3和pip3

方法二：

Python3安装包安装：

下载python3.4的安装包dmg文件安装后，安装目录在/Library/Framework/Python.framework/versions下，只安装一个3.4环境，它会默认在~/.bash_profile中添加bin目录，并且将pip3.4命令拷贝到/usr/local/bin下面，所以3.4和上面系统用到的python2版本基本上是可以独立运行的

需要注意的是，在终端中运行python时候，如果要运行python3.4，那么就使用python3.4命令，为了避免混淆，最好将/usr/bin下面的python命令删除，保留python2.7命令。

3、检查python3和pip3是否正确安装

检查python3环境：

python3 --version

检查pip3环境：

pip3 --version

如果都能正确提示版本号，则安装完成

4、虚拟环境

如果我们要同时开发多个应用程序，那这些应用程序都会共用一个Python
每个应用可能需要各自拥有一套“独立”的Python运行环境。virtualenv就是用来为一个应用创建一套“隔离”的Python运行环境。
安装 virtualenv :
pip3 install virtualenv

创建工程目录：
mkdir yourprojectdir

创建虚拟环境：
virtualenv --no-site-packages venv
参数 –no-site-packages，表示系统Python环境中的所有第三方包都不会复制过来

进入虚拟环境：
source venv/bin/activate

退出虚拟环境：
deactivate

##5、安装Django:

这里Django选择2.2版本,直接执行命令：

pip3 install Django==2.2

如果没有出错，依赖环境就安装完成了

6、参考资料：

1、廖雪峰Python3教程
2、Django官方文档（需要注意版本）
3、venev

（二）Django Hello World

0、介绍：

这部分我们主要是：

创建一个Django项目，并实现一个helloworld的简单接口

1、创建名字为demoProject的项目：

在你想要保存项目代码的目录下执行下面的命令：

django-admin.py startproject demoProject

2、创建名字为hello的应用：

项目和应用的关系类似 iOS中 workspace 和 project的关系
一个Django项目中可以有多个应用

执行以下命令创建名字为hello的应用：

python3 manage.py startapp hello

3、项目目录结构介绍：

此时项目的目录如下：

demoProject/
manage.py一种命令行工具，可让你以各种方式与该 Django 项目进行交互python manage.py help查看他的功能
demoProject/
__init__.py:一个空文件，该文件将当前目录变成一个python开发包(模块)，一般不需要改动
setting.py：项目的配置文件
urls.py：URL设置，可看作网站的目录结构
wsgi.py：http服务器配置，动态网关接口配置文件
hello/
__init__.py 同上
admin.py ：配置模型models在django原生后台的管理
migrations/ 用来做版本管理
__init__.py 同上
models.py：模型代码
tests.py：单元测试代码
views.py：逻辑处理代码
templates 存放html模版文件

4、运行项目：

cd demoProject 进入项目目录，执行下面的命令运行程序：

python3 manage.py runserver

命令行提示如下：

Performing system checks...

System check identified no issues (0 silenced).

You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.

July 23, 2018 - 07:36:17
Django version 1.8, using settings 'demoProject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

打开浏览器访问：http://127.0.0.1:8000

15543771256456

如果提示上面的内容，说明我们的项目已经搭建好了

按下 control+c 可以关掉程序

5、添加helloworld接口：

5.1、配置app

修改demoProject/demoProject/settings.py文件
在里面添加hello app应用

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello’               #新增
)

5.2、编写返回hello的接口

在 demoProject/hello/views.py 里新增如下代码：

from django.http import HttpResponse

def sayHello(request):
    return HttpResponse(u"Hello world!")

这里实现了一个sayHello的函数
函数依赖了HttpResponse方法，所以需要从django.http模块中引入该方法

5.3、添加路由

在 demoProject/demoProject/urls.py 里新增如下代码:

from django.contrib import admin
from django.urls import path
from hello import views as helloViews   #new

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello', helloViews.sayHello),           #new
]

这里就是Django关键的路由模块配置了
url函数前半部分是模式匹配url地址函数，后面是调用的实现方法
这里的意思是当访问/hello时，调用hello模块的views里的sayHello方法来处理

6、测试hello world

再次执行下面的命令启动服务，如果当前正在运行，可以按Control+C关掉：

python3 manage.py runserver

在浏览器访问地址：

http://127.0.0.1:8000/hello

可以看到返回如下：

15323321564926

至此一个简单的hello world接口就好了，可以自己试试写点其他接口

7、参考资料：

（三）Django 简单小程序接口实现

0 介绍：

这部分我们在之前项目基础上实现两个简单的接口，具体如下：
1、小程序用户上传分数到服务端接口
2、小程序用户获取分数排行版接口

1、创建并配置小程序应用：

1.1、在helloworld项目中新建应用wechatGame：

python3 manage.py startapp wechatGame

1.2、将应用添加到项目配置:

修改项目配置文件 demoProject/demoProject/settings.py

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello',
    'wechatGame'        #new
)

2、创建Player玩家模型

再应用的模型文件 demoProject/wechatGame/models.py 加入以下代码

class Player(models.Model):
    playerID = models.AutoField(primary_key=True)
    nickName = models.CharField(max_length=50, default='')
    score = models.IntegerField(default=0)
    updateTime = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.nickName

这里创建了一个玩家的模型，包含用户昵称、用户分数、和分数更新时间字段
利用Django强大的ORM功能，后面可以直接在数据库中生成对应的数据表

3、实现两个接口逻辑

打开demoProject/wechatGame/views.py文件进行修改：

导入玩家模型：
from wechatGame.models import Player

实现上传分数addScore和获取分数rank的接口,最终代码如下：

from django.shortcuts import render

# Create your views here.
from django.http import HttpResponse
from wechatGame.models import Player
import json

def addScore(request):
    #获取客户端参数
    nickName = request.GET.get('nickName')
    score = request.GET.get('score')
    if not nickName or not score:
        return HttpResponse(json.dumps({
            "status": 1,
            "errorMsg": "param error"
        }))

    score = max(int(score),0)
    #查看玩家是不是已经在数据库，如果在更新，否则创建玩家
    isHave = True
    try:
        tmpData = Player.objects.get(nickName=nickName)
    except Exception as err:
        isHave = False
    
    if isHave:
        player = Player.objects.get(nickName=nickName)
        player.score = max(score,int(player.score))
    else:
        player = Player(nickName=nickName,score=score)
    player.save()#保存到数据库
    return HttpResponse(json.dumps({
            "status": 0,
            "errorMsg": ""
        }))

def rank(request):
        status = 0
        errorMsg = ''
        print("=========  开始从数据库获取数据 ===========")
        players = Player.objects.all().order_by("-score")
        playersDic = []
        for player in players:
            playersDic.append({"nickName":player.nickName,"score":player.score})
        print("playersDic%s"%(playersDic))
        
        return HttpResponse(json.dumps({
            "status": status,
            "errorMsg": errorMsg,
            "players": playersDic
        }))

4、在 urls 里配置路由

在 demoProject/demoProject/urls.py 里新增如下代码:

from django.contrib import admin
from django.urls import path
from hello import views as helloViews 
from wechatGame import views as wechatViews            #new

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello', helloViews.sayHello),
    path('score',  wechatViews.addScore),#new    
    path('rank',  wechatViews.rank),#new
]

5、将model应用到数据库

因为我们新增了玩家的模型，所以在运行程序之前需要将模型结构同步到数据库

根据对modes的改动，生成对应的数据库语句，但是这个改动还没有作用到数据库文件
python3 manger.py makemigrations

将改动应用到数据库

python3 manager.py migrate

执行完这两个步骤会在sqlite数据库里生成一张和Player对应的数据表用来存储数据

执行完之后可以看到项目目录下多了一个sqlite文件：

15323332179240

打开sqlite可以看到具体表和表结构：

15323333157093

6、测试接口

启动服务

python3 manage.py runserver

打开浏览器访问接口：

http://127.0.0.1:8000/rank

http://127.0.0.1:8000/score?nickName=hello&score=120

上传分数接口成功效果：

15323334241404

排行榜接口返回效果：

15323334421146

数据库里存储的数据：

15323334742136

至此，我们的两个接口实现就完成了

7、参考资料：

（四）Django 管理后台

1、创建初始管理员密码:

python3 manage.py createsuperuser

2、访问管理后台：

http://localhost:8000/admin/

（五）Django 简单的前端界面

##0、介绍
这部分主要用Django实现一个前端界面
1、让用户可以输入用户名和分数，上传到服务端
2、可以拉取当前排行榜列表

1、新建模板页面

Django的模板语法可以实现将python代码中的逻辑填充到html页面中，然后返回给浏览器

在demoProject/wechatGame下新建templates目录
并在目录下新建 game.html文件

我们先在html文件里写点简单代码测试一下：

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    hello world, i'm html!  
</body>

</html>

2、增加访问游戏页面接口

在 demoProject/wechatGame/views.py 里添加函数：

1 2	def gamePage(request): return render(request, 'game.html')

在 demoProject/demoProject/urls.py 里添加路由：

path('game', wechatViews.gamePage)

启动服务：

python3 manage.py runserver

打开浏览器测试：

http://127.0.0.1:8000/game

15323357270068

出现以上页面，说明我们的页面可以使用了

3、编写游戏前端页面

主要是实现随机生成游戏结果和上传分数的逻辑

<!DOCTYPE html>
<html>

<head>
    <title>我是小程序的标题</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <input type="text" value="" placeholder="请输入你的大名" id="name_input">
    <br/>
    <br/>
    <label id="score_tip_label">你的分数：</label>
    <label id="score_label">0</label>
    <br/>
    <br/>
    <button type="button" id="game_btn">玩游戏</button>
    <button type="button" id="score_btn">上传分数</button>
    <button type="button" id="rank_btn">查看排行榜</button>
    <!-- 前端逻辑处理脚本 -->
    <script>
    //获取 名字和分数 两个值
    var scoreLabel = document.getElementById('score_label');
    var nameInput = document.getElementById('name_input');

    // 玩游戏
    document.getElementById('game_btn').onclick = function() {
        var name = name_input.value;
        //校验参数
        if (name.length == 0) {
            alert("请先输入你的大名！！！");
            return;
        }
        //生成随机参数  0-1000
        var randScore = parseInt(1000 * Math.random())
        // alert(randScore)
        scoreLabel.innerText = randScore
    };

    //上传分数
    document.getElementById('score_btn').onclick = function() {
        var name = name_input.value;
        var score = scoreLabel.innerText
        //校验参数
        if (name.length == 0) {
            alert("请先输入你的大名！！！");
            return;
        }
        //上传分数到服务端
        $.ajax({
            {% url %}: "/score",
            type: "GET",
            data: {
                "nickName": name,
                "score": score
            },
            success: function(data) {
                var dataTmp = JSON.parse(data);
                var status = dataTmp['status']
                var msg = dataTmp['errorMsg']
                if (status == 0) {
                    alert("上传成功")
                } else {
                    alert(msg)
                }
            }
        });
    }
    </script>
</body>

</html>

4、测试游戏和分数上传

启动游戏服务：
python3 manage.py runserver

打开浏览器访问：
http://127.0.0.1:8000/game

15323378816052

输入昵称即可游戏和上传分数

5、编写排行榜逻辑

demoProject/wechatGame/templates下新建rank.html
该文件主要是列出当前排行榜数据
具体实现代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>我是小程序的标题啊</title>
</head>

<body>
    <table id="table">
        <thead>
            <tr>
                <th>名次</th>
                <th>昵称</th>
                <th>分数</th>
                <th>游戏时间</th>
            </tr>
        </thead>
        <tbody>
            {% for player in players %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ player.nickName }}</td>
                <td>{{ player.score }}</td>
                <td>{{ player.updateTime }}</td>
            </tr>
            {% empty %}
            <div>
                <h4>暂无排行榜数据</h4>
            </div>
            {% endfor %}
        </tbody>
    </table>
</body>

</html>

在 demoProject/wechatGame/views.py 里添加函数：

def rankPage(request):
    #取出数据库中的排名数据
    players = Player.objects.all().order_by("-score")
    return render(request, 'rank.html',{"players":players})

在 demoProject/demoProject/urls.py 里添加路由：

path('getrank', wechatViews.rankPage)

启动服务：

python3 manage.py runserver

打开浏览器测试：

http://127.0.0.1:8000/getrank

15323385388856

可以配置游戏页面的查看排行榜按你链接跳转到排行榜：

<button type="button" id="rank_btn" onclick="javascript:window.location.href='http://127.0.0.1:8000/getrank'">查看排行榜</button>

这样我们就完成了我们所有的逻辑。

6、参考资料：

1、html教程

基本上没人在北京

（一）Django 环境搭建

0、介绍

1、Python2和python3在Mac上的共存

2、python3的安装

方法二：

3、检查python3和pip3是否正确安装

4、虚拟环境

6、参考资料：

（二）Django Hello World

0、介绍：

1、创建名字为demoProject的项目：

2、创建名字为hello的应用：

3、项目目录结构介绍：

4、运行项目：

5、添加helloworld接口：

5.1、配置app

5.2、 编写返回hello的接口

5.3、 添加路由

6、测试hello world

7、参考资料：

（三）Django 简单小程序接口实现

0 介绍：

1、创建并配置小程序应用：

1.1、 在helloworld项目中新建应用wechatGame：

1.2、将应用添加到项目配置:

2、创建Player玩家模型

3、实现两个接口逻辑

4、 在 urls 里配置路由

5、将model应用到数据库

6、测试接口

7、参考资料：

（四）Django 管理后台

1、创建初始管理员密码:

2、访问管理后台：

（五）Django 简单的前端界面

1、新建模板页面

2、增加访问游戏页面接口

3、编写游戏前端页面

4、测试游戏和分数上传

5、编写排行榜逻辑

6、参考资料：

5.2、编写返回hello的接口

5.3、添加路由

1.1、在helloworld项目中新建应用wechatGame：

4、在 urls 里配置路由