hui框架的ajax,DjangoRestful结合hui框架后台实践总结

img

Django REST framework

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

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

创建一个新的文件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')

打开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

打开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'))

]

控制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.

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

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，例如

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

{% csrf_token %}

{% if errmsg is not None %}

{{errmsg}}

{% endif %}

用户名密码输入错误报错

img

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

img

用户列表

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

• 我的用户

 

打开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

• 资讯管理

打开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

完成

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，接收数据，进行渲染

{% for article in articles %}

{{article.aid}} {{article.title}}{{article.category}}{{article.source}}{{article.update_time}}{{article.see_times}} {% if article.publish_status == 1 %} {{'已发布' }} {% else %} {{'未发布' }} {% endif %}   

{% endfor %}

视图效果

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

打开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

关注我

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