django开发类似于MVC模式，称为MVT，即模型-视图-模板。模型起到与数据库联系的作用，视图进行主要逻辑的处理，模板则是页面展现。本节围绕视图与模板构造简单的主页。
1.在yz_delt应用中新建urls，并加入url模式匹配，指向首页。
Paste_Image.png
2.在yzdelt/yzdelt下的setting.py加入yz_delt.urls，按照实例填写，增加url(r'^yz_delt/'，include('yz_delt.urls'))。
Paste_Image.png
3.yz_del应用的views.py中编写简单的view函数，内容为空，直接返回yz_delt/index.html以及变量status。
Paste_Image.png
4.有了url以及视图，最终会返回结果给模板，因此下一步主要编写模板。在django中可以编写基础模板，其它模板可以根据基础模板进行扩展以减少重复代码。
base.html
{% load staticfiles %} //导入静态文件
<!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">城市经济<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">数据查询与图表绘制</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="#">数据查询与图表绘制</a></li>
<li><a href="#">成果展示</a></li>
</ul>
</li>
<li><a href="#">数据挖掘</a></li>
</ul>
<ul class="nav navbar-nav ul-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</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 技术支持：叶落萧萧</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 -->
<!-- 主要内容-->
<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="经济">
<h2>重点城市经济状况</h2>
<p>长江三角洲城市群主要城市经济数据及图表分析</p>
<p><a class="btn btn-default" href="#" role="button">进入</a></p>
</div>
<div class="col-md-6">
<img class="img-frame" src={% static "images/inf.jpg" %} alt="信息化">
<h2>信息化</h2>
<p>上海市与其它城市百度指数及各市信息化水平</p>
<p><a class="btn btn-default" href="#" role="button">进入</a></p>
</div>
</div>
</div>
<!-- 主要内容End -->
{% endblock % }
5.后续对基础模板和首页有所更改。这里先对首页增加tab功能，第一个tab为leaflet简单展示的道路图。
Paste_Image.png
基本的html书写形式如下，主要用的是bootstrap的nav-tab。
Paste_Image.png
下面是对tab进行转化的js代码：
Paste_Image.png
紧接着添加地图内容：
Paste_Image.png
Paste_Image.png
网友评论