【手把手】带你撸一个Django web框架

据说 python 已经成为了前端开发程序员想学习的首位的后端语言，python 的语法及其简单，我们可以很快的上手，python 有很多做web服务器的框架，在此呢我推荐 Django，因为他是一个极简的框架，没有其他乱七八糟的东西，适合快速上手。在编写的过程中如果出现缺少某个包，大家记得通过 pip install 包名引入，因为这些包我电脑上都装过了，所以就不做说明。

1、天才第一步

执行以下命令查看已经安装的 Django 版本号。

$ python -m django --version

我的 Django 版本是2.0.5的，python的版本必须要是3.4或者更高版本的

如果没有安装 Django 可以执行以下命令安装

$ pip install django

2、创建项目

$ django-admin startproject mysite

这行代码会在当前目录创建一个mysite目录，内容有：

mysite/
manage.py
mysite/
__init__.py
settings.py
urls.py
wsgi.py

*最外层的 mysite/根目录只是你项目的容器，Django不关心它的名字，你可以将它重命名为任何你喜欢的名字
*manage.py：一个可以用各种方式管理该 Django 项目的命令行工具
*里面一层的mysite/目录就是你项目的实际Python包，他的名字就是当你引用它内部任何东西时需要用到的Python包名
*mysite/_init_.py：一个用于指明此目录是Python包的空白文件
*mysite/settings.py：该Django项目的配置文件
*mysite/urls.py：该Django项目的URL声明，就像是你网站的目录
*mysite/wsgi.py：当你部署项目到一个兼容WSGI的服务器上时所需要的入口点

3、运行项目

$ python manage.py runserver

进入到最外层的 manage.py 文件所在的目录下，执行上方命令，就会看到下面的结果

现在服务器已经在运行了，在浏览器里访问 http://localhost:8000/ 就可以访问了

4、更换端口

默认情况下监听的是本机内部IP的8000端口，如果你想更换服务器监听的端口，请使用命令行参数，比如，让服务器监听8080

$ python manage.py runserver 8080

如果你想更换服务器监听的IP（然后在局域网内就可以通过IP让其他人访问了）

$ python manage.py runserver 0:8000

用于开发的服务器在需要的情况下会对每一次的访问请求重新载入一遍Python代码，所以你不需要为了让修改的代码实时生效而频繁的重启服务器，但是像添加新文件这样的动作，不会触发自动重载，这时你就需要手动重启服务器了。

5、创建一个新应用

在Django中，每一个应用都是一个Python包，并且遵循着一定的约定，Django自带的工具，可以帮你自动生成应用的基础目录结构，这样你就能专注于编写代码，而不是创建目录了。

项目VS应用
项目和应用有什么区别？应用是一个专门做某件事的网络应用程序，比如博客系统、公共记录的数据库、或者简单的投票程序。项目则是一个网站使用的配置和应用的集合，项目可以包含很多个应用，而应用可以被很多个项目使用。

在manage.py所在的目录下，运行下面命令：

$ python manage.py startapp app

这将会创建一个 app 目录，他的目录结构大致如下:

app/
__init__.py
admin.py
migrations/
__init__.py
models.py
tests.py
views.py

6、创建我的第一个页面

在app目录下新建一个文件夹templates，用来放置我们的HTML文件，在manage.py文件所在目录下新建一个文件夹static，放置我们的静态文件，在static下再创建一个img文件夹，并放入一张图片home.png，在templates下新建文件index.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>首页</h1>
<img src="/static/img/home.png">
</body>
</html>

7、修改URL

打开里面mysite下面的urls.py写入

from django.conf.urls import include, url

urlpatterns = [
    url(r'^app/', include("app.urls")),    # 网站
    url(r'', include("app.urls")),         # 其他
]

在app下新建文件urls.py写入

from django.conf.urls import url
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
    url(r'^home$', views.index, name='index'),
    url(r'', views.index, name='index'),
]


urlpatterns += staticfiles_urlpatterns()

在app下的views.py写入

from django.shortcuts import render


def index(r):           # 首页
    content = {}
    return render(r, "index.html", content)

重新运行项目，哎？找不到 index.html 文件，经过一番折腾，原因如下，需要我们将新创建的应用添加到配置文件中
打开 settings.py，找到 INSTALLED_APPS 修改如下

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'app',
]

然后把我们刚才新创建的 app 添加进去，注意：以后我们每次新建一个应用，都要加进配置文件，不要和我一样。

8、配置静态文件

我们再次重新运行Django，打开 http://localhost:8000/，哎？我的图片怎么没有了，打开settings.py，在文件最后面 STATIC_URL 后面加上下面的

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
    ('img', os.path.join(STATIC_ROOT, 'img')),
)

图片有了，前端可以通过两种方式引入。
第一种：
在页面的较上处写：{% load staticfiles %}
在 link script 等src 写：{%static 'xxx.css'%}　
第二种：
在 link script 等src 写：/static/xxx.cs

9、使用mysql数据库

Django可以使用连接任意类型的数据库，这里我以mysql为例。在settings.py中修改DATABASES如下

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'test',                 # 数据库名称
        'USER': 'root',                 # 用户名
        'PASSWORD': '123456',           # 密码
        'HOST': '127.0.0.1',            # IP
        'PORT': '3306',                 # 端口
    }
}

打开app下的models.py修改成下面的

from django.db import models


class user(models.Model):          # 用户列表
    user = models.CharField(max_length=90)                # 账号
    pwd = models.CharField(max_length=90)                 # 密码
    createTime = models.DateTimeField(auto_now_add=True)  # 创建时间
    lastTime = models.DateTimeField(auto_now=True)        # 最后登录时间

意思就是在 test 库下面新建一个 app_user (应用名_类名)表，有4个字段 user、pwd、createTime、lastTime

接下来我们在manage.py目录下按顺序执行两个命令

$ python manage.py makemigrations
$ python manage.py migrate

关于这两行命令的区别，执行前一个后会在 app/migrations下面生成一条记录，后一个则会将改动应用到数据库，就类似于git中的commit和push命令一样。

数据库已将创建好了，我们发现里面还有很多其他的表，那都是Django默认创建的。

10、使用数据库

接下来我们了解一下，怎么使用的吧。首先打开app/views.py 修改如下

from django.shortcuts import render
from .models import user


def index(r):           # 首页
    content = { }
    content["list"] = user.objects.filter().order_by('-createTime')
    return render(r, "index.html", content)

先引入 models 查询user表并按照创建时间排序
打开app/templates/index.html 修改如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <th>账号</th>
        <th>密码</th>
        <th>添加时间</th>
        <th>最后修改时间</th>
    </tr>
    {% for item in list %}
        <tr>
            <td>{{ item.user }}</td>
            <td>{{ item.pwd }}</td>
            <td>{{ item.createTime | date:"Y-m-d H:i:s" }}</td>
            <td>{{ item.lastTime | date:"Y-m-d H:i:s" }}</td>
        </tr>
    {% endfor %}
</table>
<img src="/static/img/home.png">
</body>
</html>

通过模板把数据嵌套进去，查看一下效果，发现没有数据，接下来我们便来添加几条数据吧

11、提供ajax接口

现在流行前后端分离的开发模式，后端只需要提供接口即可，首先要解决的就是跨域问题，通过pip安装django-cors-headers库

在settings.py 中，在app列表中加入corsheaders，再将csrf 注释掉

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'app',
    'corsheaders'  # 添加
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    #'django.middleware.csrf.CsrfViewMiddleware',             # 注释掉
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

再在下面加上，CORS_ORIGIN_ALLOW_ALL = True，是允许所有域访问，如果你只想对某个域开放，需要把它设置成False，吧需要开启的域名加到CORS_ORIGIN_WHITELIST中

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    'www.zhengshaoguo.com',
    'zhengshaoguo.com',
)

接下来我们再新建一个专门用来写接口的应用

$ python manage.py startapp api

在settings.py中加入应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'app',
    'corsheaders',
    'api'
]

修改 mysite/urls.py

from django.conf.urls import include, url

urlpatterns = [
    url(r'^app/', include("app.urls")),    # 网站
    url(r'^api/', include("api.urls")),    # 接口
    url(r'', include("app.urls")),         # 其他
]

在api下新建文件urls.py并写入

from django.conf.urls import url
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
    url(r'^addUser$', views.addUser, name='addUser'),
    url(r'', views.other, name='other'),
]


urlpatterns += staticfiles_urlpatterns()

在api/views中写入

import json
from django.http import HttpResponse
from app.models import user


def other(r):       # 检查接口地址是否有误
    content = {
        'success': False,
        'msg': '无效的地址',
        'data': {}
    }
    return HttpResponse(json.dumps(content))


def addUser(r):         # 添加用户
    user.objects.create(user=r.POST.get('user'), pwd=r.POST.get('pwd'))
    content = {
        'success': True,
        'msg': '添加用户成功',
        'data': {}
    }
    return HttpResponse(json.dumps(content))

12、前端实现调用接口

修改app/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <form action="/api/addUser" method="post" >
        <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="submit" value="添加">
    </form>
    <tr>
        <th>账号</th>
        <th>密码</th>
        <th>添加时间</th>
        <th>最后修改时间</th>
    </tr>
    {% for item in list %}
        <tr>
            <td>{{ item.user }}</td>
            <td>{{ item.pwd }}</td>
            <td>{{ item.createTime | date:"Y-m-d H:i:s" }}</td>
            <td>{{ item.lastTime | date:"Y-m-d H:i:s" }}</td>
        </tr>
    {% endfor %}
</table>
<img src="/static/img/home.png">
</body>
</html>

最后在测试一下，大功告成！剩下的就需要大家自己去探索和发现了

完整代码可以点这里下载，记得数据库换成自己的哦

【手把手】带你撸一个Django web框架

猜你喜欢