bootstraptable 添加一行 demo_用Python制作网站Django实践与Demo演示

最新推荐文章于 2023-03-31 08:12:09 发布

weixin_39628160

最新推荐文章于 2023-03-31 08:12:09 发布

阅读量236

点赞数

文章标签： bootstraptable 添加一行 demo django 转发

本篇是Django入门实操部分的小尾巴。既然是一篇独立的文章，笔者索性就多总结些内容，也顺便学习些新的东西。

前两期文章主要涉及了一些基础知识。在第一期中，我们详细介绍了Django的基本信息以及重要的MVC框架原理；第二期我们动手配置了Django的开发环境，并新建了第一个工程hello_world(往期文章链接将会附于文末)。在本期，我们将在hello_world工程里添加几个应用。

本文会利用两个Demo(代码示例演示)来梳理Django网站的开发顺序。第一个例子比较简单，我们将利用该框架做一个计算器；第二个例子涉及一些WebGIS的内容，做一个简略的共享单车分布情况展示系统。

我的第一个Django小程序

我们学习用Django来做网站，到底是要学习什么呢？除了MVC的基本原理，笔者认为主要是学习以下几点：

Django项目的目录结构
Django项目的配置文件setting.py的规范与结构
urls.py的分发规则
views.py后台函数的编写
ORM对象映射模型使用方法
模板渲染与母版使用
……

上一篇文章我们已经新建了一个项目，并且介绍了项目中比较重点的文件或文件夹。现在我们利用一个小例子把上述内容逐一串联起来。

首先来思考一下一个计算器的组成部分有哪些。它需要一个操作面板，用以支持用户输入计算内容并显示；需要计算模块，用于计算用户提交的内容；在这两者之间还应存在一个转发装置，用于传递输入信息与计算结果。

图1 逻辑示意图

图1是我们刚才所讨论的内容。实际上，这几个计算器组件正好对着MVC模式中的三大部分。笔者将各部分映射在Django中的实际文件也罗列在了图中，这样更加一目了然。如果你看过前面的文章或者有个聪明的小脑袋，应该很容易理解。

我们的Demo将会按照操作面板(前端)、转发装置(转发器)、计算模块(后台)的顺序进行开发。

好了，我们开始吧。首先将hello_django应用注册到hello_world工程中，通过修改hello_world\settings.py配置文件实现。需要在INSTALLED_APPS变量下添加“hello_django”：

INSTALLED_APPS =[

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'hello_django' # 注册应用

]

应用注册成功之后，就可以开始着手开发计算器的操作面板界面。在template文件夹下新建一个文件，命名为MyFirstCalculator.html，在其中写入如下html代码：

<option value="add">+option>

<option value="sub">-option>

select>

form>

代码并不复杂，主要是创建了一个表单。表单是html中用于接收用户输入的集合，一般由form元素、表单控件和表单按钮三部分组成。在这里主要用于接收用户输入的两个数字a、b以及运算符号symbol，目前我们的初代计算器还比较瘦弱，只支持两个数据间的加减运算。将该页面的访问目录定为first_calcul，修改hello_world\urls.py为如下代码：

from django.conf.urls import url

from django.contrib import admin

from hello_django import views as cal_view

urlpatterns = [

url(r'^admin/', admin.site.urls),

url(r'^first_calcul/', cal_view.cal_index)# 计算器操作界面

]

主要修改的地方有两处。一是将hello_django的views导入；二是添加了一个url，用于将’first_calcul’分发到views的对应方法。

接下来来到hello_django\views.py，实现cal_index函数。其代码如下：

from django.shortcuts import render

from django.http import HttpResponse

# 渲染计算器操作界面

def cal_index(request):

return render(request, 'MyFirstCalculator.html')

这样我们的第一个计算器就成功实现了。启动服务器(方法上篇文章有所提及)，在浏览器中键入地址http://127.0.0.1:8000/first_calcul/即可看到界面，如图2左半部分。

此时的计算器还只是个孩子，当用户按下计算按钮时并不能获取计算结果，需要为其添加对应的处理函数。如果你细心的看过了前文的html代码，可以在第一行的action参数上发现这个表单提交的地址。现在我们来实现它。在url.py新添加一个url，要记得为上一行的结尾加上英文字符的逗号：

url(r'^calculate/$', cal_view.calculate)

在views.py添加对应函数，对输入的运算符号(symbol)进行判断，进而完成计算，并将结果返回前端。为了简便与容易理解，本位所涉及代码均不涉及异常处理操作，默认所有输入均合法。

def calculate(request):

a = request.GET['a']

b = request.GET['b']

symbol = request.GET['symbol']

if symbol == 'add':

return HttpResponse(str(int(a) + int(b)))

elif symbol == 'sub':

return HttpResponse(str(int(a) - int(b)))

好了，现在来试一下效果如何吧！刷新(按F5)浏览器的页面，修改输入值，按下计算按钮，可以看到成功获得了计算结果。

图2 初代计算器工作效果

小功告成！现在赶紧趁热复习一下开发过程：

首先我们新建了工程与应用，并将新的应用注册到了工程中(hello_world、hello_django与修改hello_world\settings.py)；
然后我们新建了template文件夹，使用html编写了一个计算器的页面(MyFirstCalculator.html)；
之后我们修改了urls.py文件，为页面请求指定了views对应的响应函数(hello_world\urls.py)；
第四步我们为views添加了函数，用于渲染计算器界面(hello_django\views.py)。

至此计算器的页面开发完成，用户可以通过键入访问地址在浏览器中查看。计算功能的开发与此过程类似，不再赘述。

初代计算器的界面简陋，功能也不完整。这完全不能满足日常计算的使用需求，我们需要对它进行改造。在template文件夹下新建一个html，取名为MySecondCalculation.html，写入更好的前端代码；并在urls.py中添加新的url，将新的计算器的访问地址命为second_calcul。

还记得在第一期文章里，关于MVC(或者说MTV)模式的介绍吗？为了方便理解，笔者用餐馆来进行了类比，现在有了一个实际的例子。在这里，我们觉得原有的界面不美观，修改了前端页面。但只要向后台传送信息的方式不变，那么就不必对后端代码进行修改。

接下来对后台算法进行升级。原有的计算模块仅能对加减法进行计算，不能满足我们的要求。现在修改代码，从接收两个数字一个计算符号的初级算法升级成可接收字符串进行计算，最终获得图3效果。

图3 第二代计算器工作效果

为了节约篇幅，除了第一个示例计算器外,不再在文中粘贴其他代码。本文所述所有代码均会在公众号内提供下载地址(发送“Django Demo”获取)。

共享单车分布情况展示系统

终于到了Django入门简介的最后一部分，真不容易。笔者本来只是想随便写写Django，没想到给自己开了一个大坑。本部分笔者制作了一个简易的共享单车分布情况查询系统。Demo具有简单的用户管理功能，在登陆后用户可对地理数据进行查看，包括gis数据的漫游、点选等方式。GIS部分，选择比较常规的前端Leaflet+后端GeoServer的形式。Django后台主要涉及用户管理以及业务数据查询。

Web GIS的不同点在于将地理数据的用和管进行了前后端分离，也就是说原本在一台计算机上完成的工作被拆分成了两部分。数据的管护放到了服务器端，一般是通过将其发布成地图服务的形式，供其他计算机访问。数据的使用与查看放在了用户端，通过加载地图服务的形式实现。

图4 前后端分离

普通的GIS数据(shp、img等)并不能直接被其他客户端访问，只有被发布成地图服务之后才能成为Web应用的数据源。这就类似于普通的照片只能本地查看，如果想要让其他人看到，就要挂到朋友圈。本文使用Geoserver作为承载GIS数据的“朋友圈”。

GeoServer是Open GIS Web服务器规范的J2EE实现。上面这句话笔者抄自某度百科，鬼知道他到底想说什么。简言之，GeoServer是一个基于Java开发的服务器，能够帮助用户查看、管理与发布地理空间数据。GeoServer性能良好、使用灵活、开源以及最重要的，使用免费，是很多相关开发与研究工作者的最爱。

Leaflet是一个为建设移动设备友好的互动地图而开发的开源JavaScript 库。其设计坚持简便、高性能和可用性好的思想，能在所有主要桌面和移动平台上高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。

由篇幅以及文章中心所限，本Demo开发过程中所涉及的GeoServer安装与配置、空间数据的发布以及Leaflet使用的相关内容不做介绍。读者如果有兴趣可以发私信给笔者，之后辑瑟公园再做相关内容的总结，本节只做系统的设计思路以及界面展示。

图5 系统设计思路

系统首先利用Django的中间件机制拦截用户的请求，并通过检索session的方式判断用户是否已登录(session是用户在登陆网站期间在服务器端所留下的一些信息，可以用来判断登陆)。当无法找到用户对应的session时，系统自动将请求重定位到登陆界面，请求用户登陆。

图6 登陆界面

登陆操作会将用户提交的登陆信息发到后台，通过与数据库比对的方式判断是否登陆成功。当登陆成功时，系统将为用户新建session，并将页面刷新为首页。

主页所展示地图的底图为OSM(Open Street Map，OSM)，这是一款由网络大众共同打造的免费开源、可编辑的地图服务，好比是地图领域中的维基百科。因其开源，用户可以免费地使用于各种正常应用中。在底图之上,笔者添加了由GeoServer发布的2018年10月某日某时共享单车的分布情况数据(点状)。由于时间匆忙,笔者没有对点状数据的样式(形状、颜色、大小等)进行编辑,使用了GeoServer服务器内置的默认点状样式。

图7 系统主界面

笔者模拟了一个系统主界面，可以看到，带有GIS控件网页展示效果更好，能够更加一目了然地表现与空间有关的信息。

本文所述所有代码均会在公众号内提供下载地址(发送“Django Demo”获取)。

Django的内容很庞杂，即使是数十期的介绍文章也难以说完。何况笔者水平有限，拼尽全力也只能写出一个将将能把事情讲清楚的文章。所以这里就先告一个段落，结束Django的入门【课外辅导】。关于Django的其他知识，如果读者有兴趣,欢迎随时私信，笔者一定知无不言。最后还是老一套，欢迎关注辑瑟公园，笔者水平有限，也很忙，但是会尽力坚持下去的。

往期链接:

【课外辅导】用Python制作网站-Django简介与入门

用Python制作网站-Django实操与开发环境配置

管他写的怎么样,点个好看吧^_^