Blog

Blog

PHODAL

构建基于Javascript的移动web CMS——整合Django

正在一步步完善墨颀 CMS,在暂时不考虑其他新的功能的时候,先和自己的博客整合一下。

Django Tastypie 跨域

Django Tastypie示例

之前用AngluarJS做的全部文章的时候是Tastypie做的API,只是用来生成的是博客的内容。只是打开的速度好快,可以在1秒内打开,献上URL:

http://www.phodal.com/api/v1/url/?offset=0&limit=20&format=json

之前只是拿Tastypie生成一些简单的JSON数据,如keywords_string,slug,title这些简单的数据。

因为这里的Blogpost是来自mezzanine,原来的api.py,如下所示:

from tastypie.resources import ModelResource
from mezzanine.blog.models import BlogPost, BlogCategory


class AllBlogSlugResource(ModelResource):
    class Meta:
        queryset = BlogPost.objects.published()
        resource_name = "url"
        fields = ['keywords_string', 'slug', 'title']
        allowed_methods = ['get']


class BlogResource(ModelResource):
    class Meta:
        queryset = BlogPost.objects.published()
        resource_name = "blog"
        fields = ['keywords_string', 'slug', 'title', 'content', 'description']
        allowed_methods = ['get']

而这时为了测试方便,还需要解决跨域请求的问题,生成的内容大致如下所示:

{
  "meta": {
    "limit": 1,
    "next": "/api/v1/url/?offset=1&limit=1&format=json",
    "offset": 0,
    "previous": null,
    "total_count": 290
  },
  "objects": [
    {
      "keywords_string": "jquery backbone mustache underscore siderbar",
      "resource_uri": "/api/v1/url/369/",
      "slug": "use-jquery-backbone-mustache-build-mobile-app-cms-add-jquery-plugins",
      "title": "构建基于Javascript的移动web CMS——添加jQuery插件"
    }
  ]
}

Django Tastypie 跨域支持

于是网上搜索了一下,有了下面的代码:

from tastypie.resources import Resource, ModelResource
from mezzanine.blog.models import BlogPost, BlogCategory
from django.http.response import HttpResponse
from tastypie.exceptions import ImmediateHttpResponse
from tastypie import http
from tastypie.serializers import Serializer

class BaseCorsResource(Resource):

    def create_response(self, *args, **kwargs):
        response = super(BaseCorsResource, self).create_response(*args, **kwargs)
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Headers'] = 'Content-Type'
        return response

    def post_list(self, request, **kwargs):

        response = super(BaseCorsResource, self).post_list(request, **kwargs)
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Expose-Headers'] = 'Location'
        return response

    def method_check(self, request, allowed=None):

        if allowed is None:
            allowed = []

        request_method = request.method.lower()
        allows = ','.join(map(lambda s: s.upper(), allowed))

        if request_method == 'options':
            response = HttpResponse(allows)
            response['Access-Control-Allow-Origin'] = '*'
            response['Access-Control-Allow-Headers'] = 'Content-Type'
            response['Access-Control-Allow-Methods'] = "GET, PUT, POST, PATCH"
            response['Allow'] = allows
            raise ImmediateHttpResponse(response=response)

        if not request_method in allowed:
            response = http.HttpMethodNotAllowed(allows)
            response['Allow'] = allows
            raise ImmediateHttpResponse(response=response)

        return request_method

class AllBlogSlugResource(BaseCorsResource, ModelResource):
    class Meta:
        queryset = BlogPost.objects.published()
        resource_name = "url"
        fields = ['keywords_string', 'slug', 'title']
        allowed_methods = ['get']
        serializer = Serializer()

class BlogResource(BaseCorsResource, ModelResource):
    class Meta:
        queryset = BlogPost.objects.published()
        resource_name = "blog"
        fields = ['keywords_string', 'slug', 'title', 'content', 'description']
        allowed_methods = ['get']
        serializer = Serializer()

接着便可以很愉快地、危险地跨域。

Django 与墨颀CMS整合

接着修改了一下代码中configure.json的blogListUrl,以及模块

    <div class="l-box blogPosts">
        <h2>动 态</h2>
        {{#objects}}
        <p>
        <!--<span class="date">{{created}}</span>-->
        <a href="#/blog/{{slug}}" alt="{{title}}">{{title}}</a>
        </p>
        {{/objects}}
    </div>

便可以请求到结果了。

一开始对于可配置的选择是正确的.

结束

代码见: https://github.com/gmszone/moqi.mobi/tree/django

QQ讨论群: 344271543

源码 Github: https://github.com/gmszone/moqi.mobi

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签