Django & webpack 项目结构实践

最新推荐文章于 2024-04-13 09:37:25 发布

The_c_D

最新推荐文章于 2024-04-13 09:37:25 发布

阅读量1.1k

点赞数 1

分类专栏： Python

本文链接：https://blog.csdn.net/The_c_D/article/details/52944798

版权

Python 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

|-[root]
	|-[project folder]
		|-setting.py
		|-urls.py
		|-wsgi.py
		|-env.py
    |-[modules]
	    |-[app1]
		    |-[api]
			    |-[service]
			    |-api1.py
			    |-api2.py
		    |-[view]
			    |-[service]
			    |-view1.py
			    |-view2.py
		    |-[app]
			    |-[main]
				    |-main.js
			    |-[plugin]
			    |-[mixin]
			    |-[helper]
			    |-base.html
			    |-base.js
		|-urls.py
		|-app.py
	|-[core]
		|-[decorator]
		|-[enum]
		|-[model]
		|-[tool]
		|-[midware]
	|-[static]
		|-[bundles]
		|-[common]

最近在研究Django和webpack集成的东西，发现使用了webpack之后，前台代码也能够模块化实在是太方便了，而且前台使用了Vue.js，使用它的template以后，很多东西都可以按component和module来维护
上面的是项目的基本脚手架，project folder里面的东西和使用django工具构建出的大题一致，只是加入了一个env.py来获取环境变量（使用docker可以方便地应用）
其次是app文件夹，里面分为了三个主要的模块——api / view / app

api用于ajax相关的接口

view用于html渲染相关的接口

app则是前端代码文件夹，因为使用了webpack，所以在这个文件夹中是各个需要的前端模块，base.html如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
{% load staticfiles %}
<html>
<head>
    <meta charset="UTF-8">

    <title>{% block title %}{% endblock %}</title>

    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">

    {% block extrahead %}{% endblock %}
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
</form>
{% block content %}{% endblock %}
</body>
</html>

base.html勾勒了大致的HTML，具体的使用

{% extends "base.html" %}
{% load render_bundle from webpack_loader %}

{% block extrahead %}
{% render_bundle 'main' 'css' %}
{% endblock %}

{% block content %}
{% verbatim %}
<div id="app"></div>
{% endverbatim %}

{% render_bundle 'main' 'js' %}
{% endblock %}

这里因为Vue.js的{{}}和django template冲突所以使用了verbatim

这样每一个模块都可以套用统一的html模板了，通过render_bundle来导入webpack打包的模块

另外base.js则用来导入一些公用的第三方lib，而其他模块统一从base.js来导入这些第三方lib，方便管理：

var Vue = require("vue");
var VueStrap = require('vue-strap');
var uuid = require('uuid');

module.exports = {
    Vue: Vue,
    VueStrap: VueStrap,
    uuid: uuid
}

使用：

var Vue = require('../base.js').Vue;
var VueStrap = require('../base.js').VueStrap;

后台方面，将公用部分，如数据库ORM，装饰器，django中间件移动到了core模块，又为每一个app创建相应的文件夹，这样让每一个app都更加集中于本身的功能。

每一个app有独立的urls.py

view = [
    url(r'^main/', FreeMap.view.views.view_main),
]

api = [
    url(r'^api/store/', FreeMap.api.main.test)
]

urlpatterns = []
urlpatterns.extend(view)
urlpatterns.extend(api)

在项目的urls.py中

from django.conf.urls import include, url

urlpatterns = [
    url(r'^free-map/', include('FreeMap.urls')),
]

由此项目不需要关心app具体有什么url，而app模块内自我管理url接口

The_c_D

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django & webpack 项目结构实践

|-[root] |-[project folder] |-setting.py |-urls.py |-wsgi.py |-env.py |-[modules] |-[app1] |-[api] |-[service] |-api1.py |-api2.py |-[view] |...
复制链接

扫一扫