长江三角洲城市群数据平台（2）-视图与模板

作者: d33911380280 | 来源:发表于2016-10-30 10:37 被阅读50次

长江三角洲城市群数据平台（2）-视图与模板
190211 城市群资料汇编
angular4 学习第一天
4 art-template模版引擎
数据代理、el和data的两种写法、MVVM
虚拟DOM
微信小程序总结
Django项目——模板的基本使用
数据调查：基于大数据的城市群识别与空间特征研究
【理解】Django项目简单化理解流程

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&copy 叶落萧萧. &nbsp&nbspAll 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简单展示的道路图。