ZERO 前言

最近看到一个系列表情包火了起来，无聊之下想起入门Django时没什么好玩项目的种种不利，就写了这么一篇菜菜的文章，也算是一个简单的入门教程吧

ONE　什么是Ｄjango

Django 项目是一个python定制框架，它源自一个在线新闻 Web 站点，于 2005 年以开源的形式被释放出来。Django 框架的核心组件有：
用于创建模型的对象关系映射
为最终用户设计的完美管理界面
一流的 URL 设计
设计者友好的模板语言
缓存系统。

总之Django是一款非常值得学习的web框架，关于框架的内容不再赘述，下面直接进入正题

Django官网: https://www.djangoproject.com/
Django项目主页: https://github.com/django

TWO 创建项目

如果你还没有安装Django, 那么可以通过pip工具十分方便地进行安装：

pip install djangoBash

短暂的等待后，运行以下命令创建项目：　　

django-admin startproject who_i_amBash

当前目录下会产生一个名为who_i_am的文件夹，结构如下：　　

who_i_am/

├── manage.py

└── who_i_am

    ├── __init__.py

    ├── settings.py

    ├── urls.py

    └── wsgi.py



1 directory, 5 files

进入文件夹，运行命令创建app:

python manage.py startapp index

修改who_i_am/settings.py　，在INSTALLED_APPS中加入刚刚建立的应用index:

……

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'index',

]

……

使用命令　python manage.py runserver 0.0.0.0:8080　运行开发服务器，打开浏览器访问http://localhost:8080/出现以下界面：　　

Django应用创建成功

THREE 真正的部分

１）配置路由　 修改who_i_am/urls.py，绑定URL与视图函数：

……

from index import views as v



urlpatterns = [

    url(r'^admin/', admin.site.urls), #Django自带后台

    url(r'^$', v.index), #首页

    url(r'^makeit$', v.makeit), #生成表情包的接口

    url(r'^about$', v.about), #关于页面

]

……

２）创建视图函数

• 1 index函数处理首页：　　

def index(request):

    if request.method == "GET":

        return render(request,'index.html',{})　#直接使用render渲染返回即可Python

Copy

• 2 makeit按参数生成图片并返回结果：

这是最重要的一部分，实现了本网站的主要功能
先用PIL库实现对图片的修改：　　

base = Image.open("base.png") #打开源图片

font = ImageFont.truetype('font.ttf', 40) #打开字体并设置字号

d = ImageDraw.Draw(base) # 实现对图片的绘图

d.text((100-len(text_one)*10, 30), text_one, font=font, fill=(0,0,0))  #向图片绘制文字，第一个参数是起始坐标，　第二个是字符串，font为字体，fill为文字颜色

实现绘图以后，我们就可以使用PIL动态生成我们的表情包了 创建视图函数makeit，使用request.GET.get()URL里的获取参数：

def makeit(request):

    if request.method == "GET":

        text_one = request.GET.get('whoiam',u"我们是谁！")

        ...

使用刚刚的代码根据参数生成图片后将图片存入内存：

...

buf = BytesIO()

base.save(buf,format="png")  #将图片存入内存

image_stream = buf.getvalue()  #获取文件数据

return HttpResponse(base64.b64encode(image_stream))  #处理数据为base64编码并返回

...

• ３这个项目没有多少涉及Django的前端模板，前端部分就不再多讲，框架是用的materialize，地址在Documentation - Materialize　上面介绍的很详细…… 下面贴一下负责动态加载图片的js代码：

$(document).ready(function() {

    $('#makeit').click(function() {

        var one = $("#whoiam").val();

        var two = $("#name").val();

        var three = $("#whatwewant").val();

        var four = $("#idontknow").val();

        var five = $("#when").val();

        var six = $("#now").val();

        $.get("/makeit", {

            'whoiam': one,

            'name': two,

            'whatwewant': three,

            'idontknow': four,

            'when': five,

            'now': six,

        }, function(rec) {

            var img = "data:image/png;base64," + rec;

            $("#result").attr("src", img)

        })

    })

})

FOUR 部署

Django网站的部署对于新手来说是最大的一个坑 关于部署，我认为最详细的教程应该是自强学堂的这篇Django 部署(Nginx) - Django 教程 - 自强学堂 这里省去安装nginx和uwsgi,直接聊聊配置文件. 我的Nginx的.conf文件如下：

server {

    listen      80;

    server_name 你的域名;

    large_client_header_buffers 4 16k;

    client_max_body_size 300m;

    client_body_buffer_size 128k;

    proxy_connect_timeout 600;

    proxy_read_timeout 600;

    proxy_send_timeout 600;

    proxy_buffer_size 64k;

    proxy_buffers   4 32k;

    proxy_busy_buffers_size 64k;

    proxy_temp_file_write_size 64k;

    charset     utf-8;

    keepalive_timeout   70;   

    access_log 你的项目地址/access.log ;

    error_log 你的项目地址/error.log;



    location /static {

        alias 你的项目地址/static;

    }



    location / {

        uwsgi_pass  127.0.0.1:8080;#此处为uwsgi.ini(下面讲)中填的内容

        include     /etc/nginx/uwsgi_params;

    }

}

在项目目录下建立uwsgi.ini文件：

[uwsgi]



# Django-related settings



socket = :8080 #此处的端口应于.conf中的一致



# the base directory (full path)

chdir           = 项目地址



# Django uwsgi file

module  = who_i_am.wsgi



# process-related settings

# master

master          =        true



# maximum number of worker processes

processes       = 4



# ... with appropriate permissions - may be needed

# chmod-socket    = 664

# clear environment on exit

vacuum          = true

touch-reload = 项目地址/reload #此处的reload文件，可以用于命令touch reload 快速重启应用

die-on-term = true #如果没有此配置，在重启项目后会大量占用CPU资源……（此坑 坑我不浅）

修改/etc/supervisord.conf配置supervisor： 在文件最后添加：

[program:who_i_am]

command=/path/to/uwsgi --ini 项目目录/uwsgi.ini #此处为刚刚建立的uwsgi.ini地址

directory=项目目录

startsecs=0Bash

最后重启Nginx和supervisor：

service restart nginx

supervisorctl -c /etc/supervisord.conf restart who_i_amBash

在域名服务商处建立A类型解析， 指向你的服务器ip地址，在浏览器输入你的域名：

当当当当～ 完成啦，就是最上面那张图的样子

网站暂时放在这里 Who_I_am! 
最后放上几个表情包～

本文章同步发表在我的博客：Django+PIL 做一个表情包网站， 欢迎来逛逛～