django開發(fā)類似于MVC模式妄辩，稱為MVT，即模型-視圖-模板山上。模型起到與數(shù)據(jù)庫聯(lián)系的作用眼耀，視圖進(jìn)行主要邏輯的處理，模板則是頁面展現(xiàn)佩憾。本節(jié)圍繞視圖與模板構(gòu)造簡(jiǎn)單的主頁。
1.在yz_delt應(yīng)用中新建urls妄帘，并加入url模式匹配楞黄，指向首頁。
Paste_Image.png
2.在yzdelt/yzdelt下的setting.py加入yz_delt.urls抡驼，按照實(shí)例填寫鬼廓，增加url(r'^yz_delt/'，include('yz_delt.urls'))致盟。
Paste_Image.png
3.yz_del應(yīng)用的views.py中編寫簡(jiǎn)單的view函數(shù)桑阶，內(nèi)容為空，直接返回yz_delt/index.html以及變量status勾邦。
Paste_Image.png
4.有了url以及視圖蚣录，最終會(huì)返回結(jié)果給模板，因此下一步主要編寫模板眷篇。在django中可以編寫基礎(chǔ)模板萎河，其它模板可以根據(jù)基礎(chǔ)模板進(jìn)行擴(kuò)展以減少重復(fù)代碼。
base.html
{% load staticfiles %} //導(dǎo)入靜態(tài)文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href={% static "bootstrap/css/bootstrap.min.css" %} >
<link rel="stylesheet" href={% static "css/main.css" %} >
{%block css%}{% endblock %}
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src={% static "js/jquery.js" %}></script>
<script src={% static "bootstrap/js/bootstrap.min.js"%}></script>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-change" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">長江三角洲城市群</a>
</div>
<div>
<ul class="navnavbar-nav ul-left">
<li class="active"><a href="#">首頁</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">城市經(jīng)濟(jì)<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">數(shù)據(jù)查詢與圖表繪制</a></li>
<li><a href="#">成果展示</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">城市信息化<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">數(shù)據(jù)查詢與圖表繪制</a></li>
<li><a href="#">成果展示</a></li>
</ul>
</li>
<li><a href="#">數(shù)據(jù)挖掘</a></li>
</ul>
<ul class="nav navbar-nav ul-right">
<li><a href="#">登錄</a></li>
<li><a href="#">注冊(cè)</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid container-change">
{% block main %}
{% endblock %}
</div>
<!-- 頁腳 -->
<div id='foot'>
<hr>
<p class="pull-right"><a href="#top">回到頂部</a></p>
<div id='copyrgt' class='ftsty'>copyright© 葉落蕭蕭.   All rights reserved 技術(shù)支持：葉落蕭蕭</div>
</div>
</body>
</html>
index.html
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}首頁{% endblock%}
{% block css %}<link rel="stylesheet" href={% static "css/index.css" %} >{% endblock %}
{% block main %}
<!-- 輪播End -->
<div id="carousel-example-generic" class="carousel slide banner-cr" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src={% static "images/china_urbans.jpg" %} class="img-change" alt="圖片顯示異常">
</div>
<div class="item">
<img src={% static "images/yz_eco.jpg" %} class="img-change" alt="圖片顯示異常">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- 輪播End -->
<!-- 主要內(nèi)容-->
<div class="container summary">
<div class="row" id="summary-container">
<div class="col-md-6">
<img class="img-frame" src={% static "images/eco.jpg" %} alt="經(jīng)濟(jì)">
<h2>重點(diǎn)城市經(jīng)濟(jì)狀況</h2>
<p>長江三角洲城市群主要城市經(jīng)濟(jì)數(shù)據(jù)及圖表分析</p>
<p><a class="btn btn-default" href="#" role="button">進(jìn)入</a></p>
</div>
<div class="col-md-6">
<img class="img-frame" src={% static "images/inf.jpg" %} alt="信息化">
<h2>信息化</h2>
<p>上海市與其它城市百度指數(shù)及各市信息化水平</p>
<p><a class="btn btn-default" href="#" role="button">進(jìn)入</a></p>
</div>
</div>
</div>
<!-- 主要內(nèi)容End -->
{% endblock % }
5.后續(xù)對(duì)基礎(chǔ)模板和首頁有所更改。這里先對(duì)首頁增加tab功能虐杯，第一個(gè)tab為leaflet簡(jiǎn)單展示的道路圖玛歌。
Paste_Image.png
基本的html書寫形式如下，主要用的是bootstrap的nav-tab擎椰。
Paste_Image.png
下面是對(duì)tab進(jìn)行轉(zhuǎn)化的js代碼：
Paste_Image.png
緊接著添加地圖內(nèi)容：
Paste_Image.png
Paste_Image.png
