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

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 %}   //导入静态文件





 


   
   

   
   

   
   

   
   

   
   

   
  

  {%block css%}{% endblock %}

   
  



 


   
   

   
   

        
 


           
  


           
   

        长江三角洲城市群         
  

           
  

       


            
首页

            


                   城市经济
                  


                            
数据查询与图表绘制

                            
成果展示
                  
            

            


                  城市信息化

                  

                            
数据查询与图表绘制
                            
成果展示
                  
           

           
数据挖掘

     

     

                     
登录
                     
注册
      
           
   
   
 
       


 

 

        
  


           
      {% block main %}

           
     {% endblock %}

        
   

         

       
   


           
      


            
     
回到顶部

           
     
copyright© 叶落萧萧.   All rights reserved 技术支持：叶落萧萧

       
   

 

index.html

{% extends 'base.html' %}

{% load staticfiles %}

     {% block title %}首页{% endblock%}

     {% block css %}{% endblock %}

{% block main %}

   
     
    


           

          

                

                

          
  
          
 
         

               
        
                  
              
             

                 
            
       

         

     
        
               
              Previous
        

     
        
              
             Next
       

  


   


   


   


         
  
          

                
                
重点城市经济状况
                
长江三角洲城市群主要城市经济数据及图表分析
                
进入
 
          
 
        

               
                
信息化
                
上海市与其它城市百度指数及各市信息化水平
                
进入
      
        
 
    

 
       


 {% 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