这是我的系列教程Python+Dash快速web应用开发的第十八期，通过前面十七期的内容，如果你有用心学习的话，那么恭喜你已经具备使用Dash编写常规web应用的能力了。
而在使用Dash开发web应用时，页面内容和功能逻辑简单倒还好，一旦你的功能内容开始复杂化系统化起来，那么像过往文章示例中简单一个app.py存放所有功能代码就不适用了。
而在今天的教程中，我就将为大家介绍我在日常使用过程中总结出的一套针对Dash项目的前后端分离的项目结构基础范式，并以搭建全国七普部分数据可视化看板为例，供大家参考借鉴，从而更有条理的编写和管理Dash应用项目。
开门见山，我们直接先来一览今天要介绍的Dash基础项目结构：
+ dash_demo_project/ + assets/ + css/ + img/ + js/ • favicon.ico + callbacks/ + models/ + views/ • app.py • server.py在不考虑外部参数导入、用户登陆验证、应用部署等额外配置文件及功能内容的前提下，上面的结构就可以满足常规Dash应用的需求了。
下面我们基于和鲸上获取到的第七次全国人口普查公开数据集，以搭建下面这个简单的数据可视化看板为例，介绍上述各部分的实际功能意义（完整项目源码见文章开头链接）。
在页面布局篇中我们提到过assets目录，它是官方推荐的用于存放我们的Dash应用所依赖静态资源文件的目录，如依赖的css、js、favicon.ico、各种图片及字体等静态资源，在本文的可视化看板案例中，assets目录资源放置情况如下：
+ assets/ + css/ • bootstrap.min.css • custom.css + img/ • wxgzh.png • zsxq.png + js/ • favicon.ico其中img目录下存放的是首页的两张二维码图片，在Dash中可以配合Img()与get_asset_url()来获取assets目录下指定文件路径并渲染：
html.Img(src=app.get_asset_url('img/zsxq.png'), style={'width': '100%'})而css目录下则放置了dash_bootstrap-components所依赖的css文件，而custom.css则是我自己编写的一些用于样式美化的css代码：
.nav-link.active { background-color: #4fc3f7!important; } #index-desc > * { font-size: 26px; } .table td, .table th { text-align: center; }直接放置于assets根目录下的favicon.ico则用来替换Dash默认的网页图标：
你可以根据自己Dash项目的实际需求灵活变通，譬如需要用到echarts就可以在js目录下放置echarts.min.js文件。
2.2.2 在server.py中实例化配置Dash对象跟以往的例子不同，在严谨的Dash工程下，推荐构建单独的server.py文件来完成对Dash对象的实例化配置等工作，在今天的可视化看板案例中server.py比较简单，内容如下：
import dash app = dash.Dash( __name__, suppress_callback_exceptions=True ) # 设置网页title app.title = '七普部分数据看板' server = app.server 2.2.3 在app.py中编写前端骨架与路由如果你的Dash项目非常简单，那么from server import app之后，就可以像往常一样在app.py中组织你的前端与回调部分内容。
但如果你的Dash项目功能较为复杂，亦或是url联结的页面较多时，就可以只在app.py中编写前端layout骨架，包含了必要的Location()部件、保持不变的前端部分以及由url变化所触发的页面内容容器，譬如今天的可视化看板中左侧边栏部分以及Location()监听部件：
app.layout = html.Div( [ # 监听url变化 dcc.Location(id='url'), html.Div( [ # 标题区域 html.Div( html.H3( '七普部分数据看板', style={ 'marginTop': '20px', 'fontFamily': 'SimSun', 'fontWeight': 'bold' } ), style={ 'textAlign': 'center', 'margin': '0 10px 0 10px', 'borderBottom': '2px solid black' } ), # 子页面区域 html.Hr(), dbc.Nav( [ dbc.NavLink('首页', href='http://www.likecs.com/', active="exact"), dbc.NavLink('年龄结构', href='http://www.likecs.com/age', active="exact"), dbc.NavLink('性别结构', href='http://www.likecs.com/sex', active="exact"), dbc.NavLink('六普vs七普', href='http://www.likecs.com/statistics', active="exact"), ], vertical=True, pills=True ) ], style={ 'flex': 'none', 'width': '300px', 'backgroundColor': '#fafafa' } ), html.Div(, style={ 'flex': 'auto' } ) ], style={ 'width': '100vw', 'height': '100vh', 'display': 'flex' } )