素材巴巴 > 程序开发 >

Django项目前端工程化的探索

程序开发 2023-09-10 09:53:46

Django项目前端工程化的探索

不通过node层实现非SPA网页开发的前后端分离。

技术栈:webpack + jade + es6 + scss + swig等

项目git: webpack-django-starter

需求

成品beta版(虽然有广告之嫌):

我们从前怎么做?

之前开发过的一些多页面网站都是在Django template目录下直接写Django模板(类似于写PHP和JSP),js和css又要写在Django项目的static目录下。前端没有工程化,前端代码被肢解分离在后端项目的目录里。做过这样项目的各位攻城狮应该都知道有多痛苦吧。

图片描述

缺点:

优点:

别人怎么做?

好吧!别人的做法不合适,只能自己想办法了。

我们到底面临的是什么问题?

正如我已经提到的:

之前开发过的一些多页面网站都是在Django template目录下直接写Django模板(类似于写PHP和JSP),js和css又要写在Django项目的static目录下。

仔细想来,其实Django只是想要模板和静态资源,我们可以直接在Django目录下写,当然也可以开一个前端工程来写,最后把模板和静态资源copy到Django工程的相应目录下。如下图:
图1
图1

所以问题就是如何配置一个多页面的前端项目,这个项目

solution

看着这些需求,熟悉wepack的各位大神可以已经微微一笑了。大部分的功能用webpack都可以轻松实现,不过是一个基于webpack的多页面工程嘛。确实如此,把Django模板当做一种特别的html来看的话,其实就是如此。

唯一的不同点是开发时如何能让node server渲染Django模板?
我想的办法是在开发时用swig.js来代替Django渲染Django模板。(swig模板的语法和Django模板语法相似,加之它支持自定义tag和filter)

所以,最终的结构就是这样:
图片描述
图2

项目的代码结构:
图片描述
图3

图片描述
图4

图片描述
图5

page目录下的jade文件分为两种:一种是dj.jade文件,一种是.jade文件。前者会被认为是Django模板,开发时会被swig渲染,发布时会被发布到template目录下。后者被认为是纯页面,开发时不会被swig渲染,release时会被放到static的html目录下。

另外,有时候一些页面是一组页面,他们很大一部分是一样的,比如图4中的about-us下面有2个页面author和company。此时,可以在about-us下面写一个base,把公共的内容写在base里。而base会被识别,在dev和release时都不会被当做页面处理。(不会生成一个base的页面)

写在最后

东西比较多,写的也很乱,感觉很难让大家看明白。。。哈哈。看code吧。本项目是我们team的一次尝试,我们用这个架构写了2个项目,感觉还不错,不需要引入node层,前后端彻底分离了,在我们这样的特定项目背景下,比较适用,和大家分享下,希望有用。


标签:

上一篇: 微信开发之公众号 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。