您的位置：首页 > 编程语言 > Go语言

Django & webpack 项目结构实践

2016-10-27 13:23 471 查看

|-[root]
|-[project folder]
|-setting.py
|-urls.py
|-wsgi.py
|-env.py
|-[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接口

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航