djangocms-spa-vue-js 0.1.25

快速启动

安装djangocms spa vue js:

pip install djangocms-spa-vue-js

将其添加到您的INSTALLED_APPS：

INSTALLED_APPS=(...'djangocms_spa','djangocms_spa_vue_js',...)

从api添加url模式：

urlpatterns=[...url(r'^api/',include('djangocms_spa.urls',namespace='api')),...]

在模板中呈现vue.js路由器：

{% load router_tags %}
{% vue_js_router %}

应用程序挂钩

使用apphook时需要考虑以下几点。假设你有一个事件模型。

classEvent(DjangocmsVueJsMixin):name=models.CharField(max_length=255,verbose_name=_('Name'))defget_frontend_list_data_dict(self,request,editable=False,placeholder_name=''):# Returns the data for your list view.data=super(Event,self).get_frontend_list_data_dict(request=request,editable=editable,placeholder_name=placeholder_name)data['content'].update({'name':self.name,})returndatadefget_frontend_detail_data_dict(self,request,editable=False):# Returns the data for your detail view.data=super(Event,self).get_frontend_detail_data_dict(request,editable)# Prepare the content of your model instance. We use the same structure like the placeholder data of a CMS page.content_container={'type':'generic','content':{'name':self.name}}# Add support for the CMS frontend editingifeditable:content_container.update(self.get_cms_placeholder_json(request=request,placeholder_name='cms-plugin-events-content'))# Put the data inside a container like any other CMS placeholder data.data['containers']['content']=content_containerreturndatadefget_absolute_url(self):# Return the URL of your detail view.returnreverse('event_detail',kwargs={'pk':self.pk})defget_api_detail_url(self):# Return the API URL of your detail view.returnreverse('event_detail_api',kwargs={'pk':self.pk})defget_detail_view_component(self):# Return the name of your vue component.return'cmp-event-detail'defget_detail_path_pattern(self):# Return the path pattern of your named vue route.return'events/:pk'defget_url_params(self):# Return the params that are needed to access your named vue route.return{'pk':self.pk}

所有视图都需要附加到菜单中，即使它们不是在站点导航中实际呈现的。 如果包含apphook的cms页面使用自定义视图，则需要此配置：

DJANGOCMS_SPA_VUE_JS_APPHOOKS_WITH_ROOT_URL=['<my_apphook_name>']

您的cms_menus.py可能如下所示：

classEventMenu(CMSAttachMenu):name=_('Events')defget_nodes(self,request):nodes=[]counter=1is_draft=self.instance.publisher_is_draftis_edit=hasattr(request,'toolbar')andrequest.user.is_staffandrequest.toolbar.edit_mode# We don't want to parse the instance in live and draft mode. Depending on the request user we return the# corresponding version.if(notis_editandnotis_draft)or(is_editandis_draft):# Let's add the list viewnodes.append(NavigationNode(title='Event List',url=reverse('event_list'),id=1,attr={'component':'cmp-event-list','vue_js_router_name':'event-list','fetch_url':reverse('event_list_api'),'absolute_url':reverse('event_list'),'named_route_path_pattern':':pk',# Used to group routes (dynamic route matching)'login_required':True# Hide a navigation node for unauthorized users}))counter+=1foreventinEvent.objects.all():nodes.append(NavigationNode(title=event.name,url=event.get_absolute_url(),id=counter,attr=event.get_cms_menu_node_attributes(),parent_id=1))counter+=1returnnodesmenu_pool.register_menu(EventMenu)

这是一个简单模板视图的示例。您拥有的每个视图都需要一个只返回json数据的api视图。

fromdjangocms_spa.viewsimportSpaApiViewfromdjangocms_spa_vue_js.viewsimportVueRouterViewclassContentMixin(object):template_name='index.html'defget_fetched_data(self):data={'containers':{'content':{'type':'generic','content':{'key':'value'}}}}returndataclassMyTemplateView(ContentMixin,VueRouterView):fetch_url=reverse_lazy('content_api')# URL of the API view.classMyTemplateApiView(ContentMixin,SpaApiView):pass

您的列表视图如下：

fromdjangocms_spa.viewsimportSpaListApiViewfromdjangocms_spa_vue_js.viewsimportVueRouterListViewclassEventListView(VueRouterListView):fetch_url=reverse_lazy('event_list_api')model=Eventtemplate_name='event_list.html'classEventListAPIView(SpaListApiView):model=Eventtemplate_name='event_list.html'

您的详细视图如下：

fromdjangocms_spa.viewsimportSpaDetailApiViewfromdjangocms_spa_vue_js.viewsimportVueRouterDetailViewclassEventDetailView(VueRouterDetailView):model=Eventtemplate_name='event_detail.html'defget_fetch_url(self):returnreverse('event_detail_api',kwargs={'pk':self.object.pk})classEventDetailAPIView(SpaDetailApiView):model=Eventtemplate_name='event_detail.html'

路由器对象

服务器需要为前端准备路由。最简单的方法是遍历cms 菜单。为了将所有可用的路由带到菜单，还必须将所有自定义url注册为菜单。 一个模板标记呈现了一个类似这样的js对象。

{"routes":[{"api":{"fetch":"/api/pages/","query":{"partials":["menu","footer"]}},"component":"index","name":"cms-page-1","path":"/"},{"api":{"fetched":{"partials":{"menu":{"type":"generic","content":{"menu":[{"path":"/","label":"Home","children":[{"path":"/about","label":"About","children":[{"path":"/contact","label":"Contact"}]}]}]}},"footer":{"type":"cmp-footer","plugins":[{"type":"cmp-footer-text","position":0,"content":{"text":"Lorem ipsum dolor sit amet, nam et modus tollit."}}]}},"data":{"meta":{"description":"","title":"Content-Plugins"},"containers":{"main":{"type":"cmp-main","plugins":[{"type":"cmp-text","position":0,"content":{"text":"Ex vim saperet habemus, et eum impetus mentitum, cum purto dolores similique ei."}}]}},"title":"About"}},"query":{"partials":["menu","footer"]}},"component":"content-with-section-navigation","name":"cms-page-2","path":"/about"},{"api":{"fetch":"/api/pages/about/contact","query":{"partials":["menu","meta","footer"]}},"component":"content-with-section-navigation","name":"cms-page-3","path":"/about/contact"}]}

调试

如果需要调试路由器对象，此中间件可能非常有用：

MIDDLEWARE+=('djangocms_spa_vue_js.middleware.RouterDebuggingMiddleware',)

学分

用于呈现此包的工具：

• Cookiecutter
• cookiecutter-djangopackage

历史记录