DjangoRestful结合hui框架后台实践总结

img

Django REST framework

Django REST framework is a powerful and flexible toolkit for building Web APIs.

Project setup

Create a new Django project named tutorial, then start a new app called quickstart

# Create the project directory
mkdir tutorial
cd tutorial

# Create a virtualenv to isolate our package dependencies locally
virtualenv env
source env/bin/activate  # On Windows use `env\Scripts\activate`

# Install Django and Django REST framework into the virtualenv
pip install django
pip install djangorestframework

# Set up a new project with a single application
django-admin.py startproject tutorial .  # Note the trailing '.' character
cd tutorial
django-admin.py startapp quickstart
cd ..

同步到数据库

python manage.py migrate

创建超级管理员

python manage.py createsuperuser

Serializers

创建一个新的文件tutorial/quickstart/serializers.py,用来渲染我们的数据

from django.contrib.auth.models import User, Group
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ('url', 'username', 'email', 'groups')


class GroupSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Group
        fields = ('url', 'name')

Views

打开tutorial/quickstart/views.py，写入代码

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from tutorial.quickstart.serializers import UserSerializer, GroupSerializer

class UserViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer


class GroupViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

URLs

打开tutorial/urls.py，写入代码

from django.conf.urls import url, include
from rest_framework import routers
from tutorial.quickstart import views

router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'groups', views.GroupViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    url(r'^', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Settings

控制API访问权限必须为admin用户，打开tutorial/settings.py，写入代码

INSTALLED_APPS = [
    ...,
    'rest_framework',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAdminUser',
    ],
    'PAGE_SIZE': 10
}

测试API是否生效

开启web服务通过以下命令

python manage.py runserver

执行过程

Performing system checks...

System check identified no issues (0 silenced).
August 04, 2017 - 06:03:53
Django version 1.11.4, using settings 'tutorial.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

浏览器打开http://127.0.0.1:8000/，登录刚才创建的超级用户

img

现在DjangoRestful框架搭建完成，下面可以下载h-ui框架，进行后台部署

img

H-ui.admin框架

H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言，完全免费，简单灵活，兼容性好让您快速搭建中小型网站后台。

img

H-ui.admin部署

下载http://downs.h-ui.net/h-ui/H-ui.admin_v3.1.3.1.zip，解压H-ui.admin，重名为templates，拖动到目录tutorial/quickstart，打开tutorial/quickstart/views.py，添加loginUser方法

from django.shortcuts import render

def loginUser(request):
    if request.method == 'GET':
        return render(request, 'login.html')

打开tutorial/urls.py，输入login的url路由地址

urlpatterns = [
    ...,
    url(r'^login$', views.loginUser),
]

打开tutorial/settings.py，设置TEMPLATES地址

TEMPLATES = [
    {
        ...,
        'DIRS': [BASE_DIR+"/tutorial/quickstart/templates",],
    },
]

执行python manage.py runserver，执行过程如下

System check identified no issues (0 silenced).
August 04, 2017 - 06:38:30
Django version 1.11.4, using settings 'tutorial.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[04/Aug/2017 06:38:32] "GET /login HTTP/1.1" 200 3887
[04/Aug/2017 06:38:32] "GET /static/h-ui/css/H-ui.min.css HTTP/1.1" 404 1676
Not Found: /lib/Hui-iconfont/1.0.8/iconfont.css
Not Found: /lib/jquery/1.9.1/jquery.min.js
[04/Aug/2017 06:38:33] "GET /static/h-ui.admin/css/H-ui.login.css HTTP/1.1" 404 1700
[04/Aug/2017 06:38:33] "GET /lib/Hui-iconfont/1.0.8/iconfont.css HTTP/1.1" 404 4123
[04/Aug/2017 06:38:33] "GET /lib/jquery/1.9.1/jquery.min.js HTTP/1.1" 404 4108
[04/Aug/2017 06:38:33] "GET /static/h-ui/js/H-ui.min.js HTTP/1.1" 404 1670
Not Found: /lib/jquery/1.9.1/jquery.min.js
[04/Aug/2017 06:38:33] "GET /lib/jquery/1.9.1/jquery.min.js HTTP/1.1" 404 4108
[04/Aug/2017 06:38:33] "GET /static/h-ui/js/H-ui.min.js HTTP/1.1" 404 1670

打开http://127.0.0.1:8000/login，效果图

img

可以看到静态文件和样式文件404，打开tutorial/settings.py，设置静态文件路径

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR+"/tutorial/quickstart/static"

STATICFILES_DIRS = [
    # os.path.join(BASE_DIR, "static"),
    os.path.join(BASE_DIR, "tutorial/quickstart/temp"),
]

创建目录

cd quickstart
mkdir static
static temp

打开templates目录，找到lib、static、temp目录移动到tutorial/quickstart/temp目录下

执行命令python manage.py collectstatic

打开tutorial/quickstart/templates/login.html，在静态链接那里前面加上static，例如

<link href="`static`/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />

再次打开http://127.0.0.1:8000/login，效果图

img

页面效果出来了，我们可以编写登录逻辑了。

登录页面

打开tutorial/quickstart/views.py，设置loginUser的POST方法

from django.contrib.auth import authenticate

def loginUser(request):
    if request.method == 'GET':
        return render(request, 'login.html')

    print request.POST
    username = request.POST['username']
    password = request.POST['password']
    user = authenticate(username=username, password=password)
    if user is not None:
        if user.is_active:
            login(request, user)
            # Redirect to a success page.
            return render(request, 'index.html')
        else:
            return render(request, 'login.html', {'errmsg': 'disabled account'})
            # Return a 'disabled account' error message
    else:
        return render(request, 'login.html', {'errmsg': 'invalid login'})

打开tutorial/quickstart/templates/login.html，设置报错提示Huialert-error，设置action

    <form class="form form-horizontal" action="/login" method="post">
    {% csrf_token %}
  {% if errmsg is not None %}
      <div class="Huialert Huialert-error"><i class="icon-remove"></i>{{errmsg}}</div>
  {% endif %}

用户名密码输入错误报错

img

输入正确，打开index.html页面，编辑tutorial/quickstart/templates/index.html，静态链接前面加上'static'，打开之后显示

img

用户列表

打开tutorial/quickstart/templates/index.html，修改welcome为userlist

<section class="Hui-article-box">
    <div id="Hui-tabNav" class="Hui-tabNav hidden-xs">
        <div class="Hui-tabNav-wp">
            <ul id="min_title_list" class="acrossTab cl">
                <li class="active">
                    <span title="我的用户" data-href="/userlist">我的用户</span>
                    <em></em></li>
        </ul>
    </div>
        <div class="Hui-tabNav-more btn-group"><a id="js-tabNav-prev" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont"></i></a><a id="js-tabNav-next" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont"></i></a></div>
</div>
    <div id="iframe_box" class="Hui-article">
        <div class="show_iframe">
            <div style="display:none" class="loading"></div>
            <iframe scrolling="yes" frameborder="0" src="/userlist"></iframe>
    </div>
</div>
</section>

打开tutorial/quickstart/views.py，添加方法userList

def userList(request):
    if request.method == 'GET':
        return render(request, 'user-list.html')

打开tutorial/urls.py，输入userlist的路由

urlpatterns = [
    ...,
    url(r'^userlist$', views.userList),
]

打开tutorial/quickstart/templates/user-list.html，修改静态文件链接

执行python manage.py runserver

img

资讯列表

打开tutorial/quickstart/templates/index.html，修改article-list.html为/articlelist

            <ul>
                <li><a data-href="/articlelist" data-title="资讯管理" href="javascript:void(0)">资讯管理</a></li>
            </ul>

打开tutorial/quickstart/views.py，添加方法articleList

def articleList(request):
    if request.method == 'GET':
        return render(request, 'article-list.html')

打开tutorial/urls.py，输入articlelist的路由

urlpatterns = [
    ...,
    url(r'^articlelist$', views.articleList),
]

打开tutorial/quickstart/templates/article-list.html，修改静态文件链接

实现资讯列表页面效果

img

数据渲染（结合RestfulApi）

之前的页面我的用户和资讯管理的数据都是写死的，现在把资讯管理拿出来，单独一个例子来进行数据渲染的实验。这里涉及到models.py、serializers.py、views.py、urls.py、settings.py、apps.py

Restful设置

建立Restful框架所需要的模型、序列、视图等

模型

打开tutorial/quickstart/models.py，建立Article模型

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.db import models

# Create your models here.
class Article(models.Model):
    created = models.DateTimeField(auto_now_add=True)
    aid = models.AutoField(primary_key=True) #id
    title = models.CharField(max_length=100, blank=True, default='资讯标题') #标题
    category = models.TextField(default='行业动态') #分类
    source = models.TextField(default='H-ui') #来源
    update_time = models.TextField(default='2017-8-6') #更新时间
    see_times = models.TextField(default='1111') #浏览次数
    publish_status = models.IntegerField(default=0) #发布状态 0未发布 1已发布 2草稿

    class Meta:
        ordering = ('created',)
序列

打开tutorial/quickstart/serializers.py，建立ArticleSerializer序列

from rest_framework import serializers
from tutorial.quickstart.models import Article

class ArticleSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Article
        fields = ('url', 'aid', 'title', 'category', 'source', 'update_time', 'see_times', 'publish_status')
视图

打开tutorial/quickstart/views.py，建立ArticleViewSet视图

from tutorial.quickstart.serializers import ArticleSerializer
from tutorial.quickstart.models import Article

class ArticleViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
路由

打开tutorial/urls.py，添加articlesApi的路由

...
router.register(r'articles', views.ArticleViewSet)
设置

打开tutorial/settings.py，添加INSTALLED_APPS

INSTALLED_APPS = [
    ...,
    'tutorial.quickstart.apps.QuickstartConfig',
]
app内部配置

打开tutorial/quickstart/apps.py，调整quickstart的name

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.apps import AppConfig


class QuickstartConfig(AppConfig):
    name = 'tutorial.quickstart'
同步数据库
python manage.py makemigrations
python manage.py migrate
完成

打开http://127.0.0.1:8000/articles/

img

现在还没有数据，添加(POST)一条数据上去

img

H-ui设置

对H-ui的静态页面进行调整，渲染Api的数据

GET

打开tutorial/quickstart/views.py，调整方法articleList，加入参数数据articles

def articleList(request):
    if request.method == 'GET':
        articles = Article.objects.all()
        return render(request, 'article-list.html', {'articles': articles})

打开tutorial/quickstart/templates/article-list.html，调整tbody，接收数据，进行渲染

        <tbody>
        {% for article in articles %}
            <tr class="text-c">
                <td><input type="checkbox" value="" name=""></td>
                <td>{{article.aid}}</td>
                <td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit('查看','article-zhang.html','10001')" title="查看">{{article.title}}</u></td>
                <td>{{article.category}}</td>
                <td>{{article.source}}</td>
                <td>{{article.update_time}}</td>
                <td>{{article.see_times}}</td>
                <td class="td-status"><span class="label label-success radius">{% if article.publish_status == 1 %} {{'已发布' }} {% else %} {{'未发布' }} {% endif %}</span></td>
                <td class="f-14 td-manage"><a style="text-decoration:none" onClick="article_stop(this,'10001')" href="javascript:;" title="下架"><i class="Hui-iconfont"></i></a> <a style="text-decoration:none" class="ml-5" onClick="article_edit('资讯编辑','article-add.html','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont"></i></a> <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'10001')" href="javascript:;" title="删除"><i class="Hui-iconfont"></i></a></td>
            </tr>
        {% endfor %}
        </tbody>

视图效果

img
DELETE

打开tutorial/quickstart/templates/article-list.html，修改article_del方法

onClick="article_del(this,'{{article.aid}}')"

jQuery实现article_del方法，请求Api

/*资讯-删除*/
function article_del(obj,id){
    layer.confirm('确认要删除吗？',function(index){
        var csrftoken = $.cookie('csrftoken');

        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

        $.ajax({
        url: "/articles/"+id,
        type: 'DELETE',
        success: function(result) {
            // Do something with the result
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            }
        });     
    });
}

服务器日志显示处理成功

[07/Aug/2017 06:46:00] "DELETE /articles/0 HTTP/1.1" 301 0
[07/Aug/2017 06:46:00] "DELETE /articles/0/ HTTP/1.1" 204 0
POST

打开tutorial/quickstart/templates/article-list.html，修改添加资讯的data-href

<a class="btn btn-primary radius" data-title="添加资讯" data-href="/articleadd" onclick="Hui_admin_tab(this)" href="javascript:;">

打开tutorial/urls.py，增加articleadd路由

urlpatterns = [
    ...,
    url(r'^articleadd$', views.articleAdd),
]

打开tutorial/quickstart/views.py，添加articleAdd方法

def articleAdd(request):
    if request.method == 'GET':
        return render(request, 'article-add.html')

刷下网页，打开添加资讯按钮

img

页面效果已经出来了，可以去掉不用的页面元素，比如简略标题、文章类型等

img

表单验证

//表单验证
$("#form-article-add").validate({
    rules:{
        articletitle:{
            required:true,
        },
        articlecolumn:{
            required:true,
        },
        sources:{
            required:true,
        },
        publishdate:{
            required:true,
        },

    },
    onkeyup:false,
    focusCleanup:true,
    success:"valid",
    submitHandler:function(form){
        addArticle();
    }
});

添加addArticle方法

function addArticle() {
    var csrftoken = $.cookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    $.post("/articles/",
    {
        "title": $("#articletitle").val(),
        "category": $("#articlecolumn").val(),
        "source": $("#sources").val(),
        "update_time": $("#publishdate").val(),
    },
    function(data,status) {
        alert("数据: \n" + data + "\n状态: " + status);
    });
}

输入数据，日志显示数据新增成功

[07/Aug/2017 07:26:19] "POST /articles/ HTTP/1.1" 201 185

总结

Restful实现了增删查改的接口，H-ui作为一套后台UI框架实现漂亮的模板的效果，结合起来开发效率方便很多。

统计当前python使用sdk环境列表

pip freeze >requirements.txt

requirements.txt

Django==1.11.4
djangorestframework==3.6.3
pytz==2017.2

代码参考
https://github.com/jackyshan/djangohuiapisimple

关注我

欢迎关注公众号：jackyshan，技术干货首发微信，第一时间推送。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,245评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,749评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,960评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,575评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,668评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,670评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,664评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,422评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,864评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,015评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,646评论 3赞 323
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2赞 352

推荐阅读更多精彩内容

  • Django ——自强学堂学习笔记
    (一)、启动服务器 (二)、创建数据库表 或 更改数据库表或字段 Django 1.7.1及以上 用以下命令 1....
    夏天夏星阅读 5,653评论 0赞 17
  • 后台学习——django(1)
    此段内容简要来自自强学堂的教程详情请查询自强学堂 一、 后台的运作流程 接收request请求 处理数据 获取请求...
    coder_ben阅读 5,246评论 6赞 56
  • Template
    Template初探 到目前为止我们只是简单的将后端数据显示到页面上, 没有涉及到HTML代码, 而优雅的网站总算...
    阡陌3536阅读 503评论 0赞 0
  • Python博客(跟随慕课网DJango课程学习)
    本博客是记录跟从慕课网课程所记下的笔记，更多内容请访问慕课网慕课网--项目源码 新建项目 打开命令行，进入到打算打...
    小白猿阅读 2,255评论 1赞 10
  • 九宫格火锅该怎么涮？
    锅内加上一个井字形的隔栅，一群朋友自然是围着一口热腾腾的大锅捞肉吃才来得爽快！鲜香麻辣的牛油锅底，辣得汗水直流。九...
    携程攻略社区阅读 811评论 0赞 0