本系统主要采用python3.6作为程序开发主要语言。MySQL数据库用于结构化数据的存储，Navicat作为辅助管理工具可视化管理MySQL数据库。为缓解高并发的问题，采用Redis作为系统的数据缓存数据库。整体采用的架构是基于MTV模式的Django1.11框架。后台管理系统为自行定制的Xadmin2.0的管理系统。项目部署采用Uwsgi+nginx。
效果演示录屏：https://www.bilibili.com/video/BV1Mg4y1B7CZ
开发环境:
操作系统：windows7
主要开发语言：Python3.6
IDE：Pycharm2018.1.3 x86
关系型数据库：MySQL 8.0
数据库管理工具：Navicat for MySQL
系统开发框架：Django
中间件：Redis
虚拟环境：Virtualenv
后台管理组件：Xadmin
首先在Pycharm中重新创建一个Django项目工程vtour，工程建立完成后，按照之前分析设计阶段所分割出来又重新组合后的各功能模块完成各app的新建，结果如下图所示：
该模块主要包含的功能为用户登录注册和个人中心。
- 注册登录
一个视图函数，是一个比较简单的Python 函数，也可简称为视图，它接受网络请求且返回网络响应。响应内容多样，包括HTML网站页面、图文素材或重定向等等。无论其自身含有何种逻辑，都需返回响应。为将代码放于某地，约定统一将视图函数放于应用程序或项目目录下名为views.py的文件中。
注册逻辑为：由用户在注册表单的文本框内按照标签提示正确填写个注册数据，如手机号、密码等等。由此按照该注册业务的逻辑可知，首先应创建RegisterView视图并在urls.py文件中添加该应用下用于路径分配的语句：path('register/', RegisterView.as_view(), name="register")，接着新建forms.py继承Form父类中生成注册表单RegisterPostForm和RegisterGetForm，同时根据需要添加必须要用户填写并通过系统验证的部分属性，按照本系统的设计，主要有mobile、code、password、captcha等。借助验证码库实现图形验证码的展示。本系统采用第三方验证码库django-simple-captcha来提供验证码，在pip install安装此第三方库后，将captcha数据表生成到数据库。前文的captcha字段设置captcha=CaptchaField()，在各字段中可以自定义错误信息提示。前端页面register.html页面中加入{{register_form.captcha}}来取得随机的图形验证码。
当用户注册时，其手机号对应的手机接收到四位随机数字组成的验证码的实现则是由当前系统用户在前端页面的注册表单内相应的文本框内，键入自己的手机号码，接着点击“获取验证码”，此时系统将文本框内的手机号post到后台。后台将会验证手机号是否符合规定，是否已被注册占用，如果顺利通过验证，则生成随机四位验证码，并通过脚本的运行，让短信运营商向该手机号，发送刚刚生成并保存在redis中的验证码；如果验证未通过，就返回错误信息，用户在收到含验证码的短信后，点击注册，再次将表单内所有信息post到后台。（对接的短信服务商采用的是云片网：①注册登录云片网后完善开发者信息、新增签名以及模板，②等待审核通过后，设置ip白名单并对账户进行充值以获取短信发送条数。③在utils文件夹下新建yunpian.py，编写短信发送的脚本。④在settings.py中增添api接口信息。）
完成相关配置后，编辑RegisterView后台逻辑，添加get方法，实例化表单，经由render函数渲染html后把网页返回给前端用户。添加post方法，生成一个表单实例并获取用户填写的注册信息。调用is_valid()方法验证提交上来的信息是否符合要求，包括四位随机数字验证码是否符合（设置验证码5分钟过期），保存在Redis数据库中。如果符合各项要求，获取用户填写的手机号和密码，实例化一个user_profile对象，将当前上传得到的注册数据提交至MySQL中，即在用户表中多添加一条数据并保存。成功注册后自动登录跳转到首页。
注册界面如下图所示：
登录功能则新建LoginView，通过前端获取用户名和密码，通过anthenticate方法查询用户是否存在，如果存在则调用login方法登录并重定向至首页。未查询到用户信息则返回“用户名或密码错误”消息。
登录界面如下图所示：
用户登出时则在LogoutView中调用logout方法，并返回主页（index）
个人中心则新建UserInfoView，继承LoginRequiredMixin类，如果用户未登录则定向至登录界面，登录后方可进入个人中心查看个人信息。
系统主界面如下所示：
由于负责人涉及到的内容和功能比较少，此处以机构为例进行阐述。
在机构的列表页，用户可以对机构按类别进行筛选，可以按照机构的点击量收藏数和上线时间进行排序，可以看到机构图片、简介和下属义工旅行项目等一些基本信息。点击机构名称或图片可以进入机构详情页，对机构各类信息可以有详细的了解，可以根据自己的需要选择收藏感兴趣的机构，详情页的机构下属热门义工旅行项目的轮播图点击可直达义工旅行项目详情页。
以下按照列表页和详情页两部分进行介绍。
- 机构列表页
用户进入列表页后，每页有8个机构，可选择列表布局或网格布局，采用django-pure-pagination分页的方法实现列表分页功能。可以在点击右上角展开隐藏的搜索框对合作的义工旅行负责机构开展全局搜索，可以键入一些关键字（例如合作机构的名称、地理位置或所属类别等等）在数据库进行对比查找，返回查询结果。用户可以根据自己喜欢的标准对机构进行排序检索，例如收藏人数、点击量、上线合作时间等。
此模块用到了Django中的模板继承（{% extends "base.html" %}），首先载入名为“base”的模板中的内容到当前模板，接着再处理本模板中的剩余内容，在这种情况下，每个子模板仅仅只需写入它独有的功能对应的那部分代码，这将避免大量重复代码的产生。新建base模板，即base.html。在base中对一些内容进行block，在子类重用父类框架的时候只需要重写block标签中的内容，实现include机制，当多个页面中多存在相同的部分时，大大减少开发和维护人员的压力。
当用户点击机构名称或图片进入详情页时，对应的点击量+1。通过order_by（）方式进行排序，收藏量、点击量和添加时间均采用倒叙排列展示（即从高到低）。
列表页界面如下图所示：
- 机构详情页
用户进入对应的机构详情页后，能够看到机构的基本信息、负责人信息、下属热门义工旅行项目和义工旅行项目轮播图。点击义工旅行项目轮播图可以进入到对应义工旅行项目的详情页。利用富文本展示义工项目负责机构的具体信息。在该页面还可对义工旅行项目（路线）做收藏或者取消收藏。用户可以在个人中心的收藏夹中查找已收藏的义工旅行合作机构。
由于project中有所属机构的外键，定义一个新的类：OrgHomeView，利用get方法，根据id从数据库中取出机构相关数据，反向查找出其负责的全部的义工旅行项目信息和对应的负责人信息，最后结果会render至html网页进行展示。
通过AddFavView类实现了系统用户的收藏和取消收藏的基本功能。但如果用户尚未登录，则点击收藏按键时跳转到登录页面。登录后判断收藏记录是否已在数据库中存在，如果存在则删除记录以取消收藏，否则则添加新的收藏记录。由于收藏的是机构，此处的记录的fav_type字段值为2。
详情页界面如下图所示：
这是此系统核心模块，与机构模块类似包括了查找、筛选、排序等功能。可以按照机构的点击量收藏数和上线时间进行排序，可以看到义工旅行项目图片、简介和要求等一些基本信息。点击义工旅行项目名称或图片可以进入义工旅行项目详情页，对义工旅行项目各类信息可以有详细的了解，可以根据自己的喜好选择收藏心仪的义工旅行路线，详情页下方热门义工旅行项目的轮播图点击可直达对应义工旅行项目详情页。用户可根据自己的喜好和能力决定是否申请该义工旅行项目，点击申请会转到申请页，填写申请表信息后可提交申请。
- 义工旅行项目列表页
每页展示8（2*4）个义工旅行项目，可选择列表布局或网格布局。可选择多种排序方式，包括根据收藏人数多少、是否最新、点击量高低、价格升降序等。
类似机构列表页，也用到了模板继承机制。此处不赘述。
义工旅行项目（路线）的列表页界面如下图：
- 义工旅行项目详情
系统用户可通过系统首页的相似义工旅行项目（路线）推荐、热门义工旅行项目（路线）推荐、义工旅行项目（路线）列表页等进入义工旅行项目（路线）详情页。用户进入该页面则数据库中的义工旅行项目点击数（click_nums）会+1.
义工旅行项目详情页中包含义工旅行项目的简介、详细介绍、费用、时长、出发时间、要求、食宿等等信息。下方是对义工旅行项目的详细内容的富文本，让用户能对各个义工旅行项目有比较细致的了解。
页面最下方有与该页面义工旅行项目相似的义工旅行项目的推荐，点击轮播图上的图片可跳转至对应义工旅行项目的详情页。
用户在该页面还可进行收藏、申请等操作。若已收藏该义工旅行项目，则会显示已收藏按键，点击则在数据库中删除记录、取消收藏，若未收藏该义工旅行项目，则点击收藏按键增加收藏记录。点击申请按键则可进入义工旅行项目申请页面。
义工旅行项目（路线）详情页面如下图：
- 义工旅行项目申请
本节主要实现义工旅行项目申请表的填写和提交，押金（如有）结算。除此之外，也完成了类似“收藏了此义工旅行项目的用户还喜欢的义工旅行项目”的其他义工旅行项目的推荐。推荐是根据其他收藏过本义工旅行项目的用户收藏过的其他义工旅行项目来统计，通过所有用户的id，找到他们收藏过的义工旅行项目，按照点击量取前5进行轮播图展示，点击轮播图可达相应的义工旅行项目详情页面。
ProjectApplyView类继承了LoginRequiredMixin类以及View类，在这种情况下，如果系统用户未登录，则会直接跳转到登录页面要求登录。申请表准确填写后经由post()方法上传至后端。
申请提交成功后，各项目负责人通过权限设定后，可在后台管理系统中查看负责的义工路线的申请情况，并作出是否同意的决定。之后利用MySQL中写好的触发器，在用户消息中添加一条未读消息，以通知用户申请结果。
用户个人中心分为用户个人资料，我的义工旅行项目、我的收藏、我的消息。以下以个人资料的查看和修改为例进行将个人中心模块的详细设计与实现的介绍。
- 个人资料查看
用户登录验证通过后，可进入其个人中心，进入个人中心后，用户可进行个人资料的修改，除了默认手机号（注册时默认为用户名）不可修改，其余均可进行修改，包括用户名、生日、头像等等个人资料。完成后，可浏览查看个人资料。还可以在我的义工旅游项目中看到已经申请过的路线。在我的收藏可以查看自己曾经收藏的义工旅行合作机构和义工旅行项目。在我的消息中，用户能够浏览自己收到的通知历史，该通知列表按照收到的时间先后排列（最新一条通知在最上方，其余依次向下排列）的系统消息。
- 个人资料更改
用户可对自身当前的资料信息进行更改存储，比如说用户名、出生年月、头像图片等等。在前端页面的个人信息展示表单中键入新的内容或重新选择图片上传至系统作为头像，选择保存就能够成功完成数据库信息更新。
用户可在这个个人信息展示页面点击修改密码按键来更换密码，更改密码的时候当前用户必须输入两次一致的且与Vtour义工旅行管理系统规定相符的密码，若一致则提示修改成功并直接跳转至登录页面重新登录，如果两次文本框内的输入值不一致，则返回报错消息。
- 个人中心整体实现
个人资料的展示通过定义get()方法来render数据展示到usercenter_info.html。并定义了post()方法，通过对info表单的实例化来修改个人资料，通过is_valid()验证后方可更改保存，并将消息返回前端json。
用户头像通过UploadImgView类来修改用户头像，定义的post()方法通过image_form=UploadImageForm(request.POST,request.FILES, instance=request.user)实例化一个表单用于上传用户头像，上传图片后保存。
点击“我的收藏”标签，可以看到包括用户收藏的义工旅行合作机构和义工旅行项目两类信息，此处将以用户收藏的义工旅行项目作为例子，来作简单介绍。在MyFavProjectView类中，获取义工旅行项目的id，用id得到义工旅行项目对象，利用fav_id遍历找到用户收藏的义工旅行项目信息，然后append到数组尾部。循环结束后，通过render返回数组至前端。
点击我的消息标签可看到该用户收到的历史消息（包括系统自动通知申请是否审核通过等），按最新消息往下排序。
本块主要功能是在完成义工游记的展示，反馈评价、分享经验，吸引其他系统用户。义工完成任务后，可发表游记，接收游记并审核通过后，可显示在该模块。其他用户可对其进行浏览、评论、点赞。月末根据系统中点赞量排序，首位义工可得到现金抵用券等奖励。
列表和详情页如下所示：
本系统主要完成系统管理员对整个系统的后台管理。未使用Django自带的admin管理系统，而是采用了支持Twitter Bootstrap的UI主题、可扩展插件，可以完全替代Django admin的Xadmin。其拥有更好的过滤器，如日期范围、数量范围等，并且内置xls、csv、xml和json等格式数据的导出。并且拥有完整的CURD方法。
Pip install xadmin和各依赖项后，在settings.py的INSTALLED_APPS中增添“xadmin”以及“crispy_forms”，更改页面文字和时间（LANGUAGE_CODE = zh-Hans'，TIME_ZONE = 'Asia/Shanghai'）。接着注释掉系统自带的admin并导入xadmin。在admin.py中进行全局配置。包括系统的title、footer、style等。配置完xadmin后，需运行python manage.py migrate，创建xadmin相关的表。
将enable_themes和use_bootswatch设为True，开启主题。将基本配置与view绑定：xadmin.site.register(views.BaseAdminView,BaseSetting)。
在apps.py文件中配置各个app展现在后台管理系统的名字，例如users，在UsersConfig类中加入verbose_name=’用户’，__init__.py中引用app.py的配置：default_app_config=’users.apps.UsersConfig’，这样显示在xadmin后台管理主界面的app即为中文。
管理员，即超级用户，由createsuperuser命令创建。排序、筛选器等相关的设置都与自带的admin中雷同，由search_fields、list_filter等设置实现。
自定义管理权限
主要用于组织内部的各类权限管理，超级用户权限基本不受限制。如果只给普通账户分配职员状态，则登录后其无法进行任何操作修改数据。对系统来说，权限管理需要达到的要求有：①判断用户是否登录，登录后才可进入后台管理系统的其他页面；②为不同担任不同职能的用户分配不同的权限，用户的各项操作必需受限在其权限限定范围内；③用户的可操作的权限应显示在页面上，达到点击即可进入页面进行后续操作。
后台数据管理
此处以实现义工旅行项目机构，即organizations app中的义工旅行项目信息显示及增删改查为例。新建adminx.py。新定义一个集成object类的ProjectOrgAdmin类，自定义显示(list_display)、搜索字段(search_fields)、过滤字段(list_filter)以及可直接更改字段(list_editable)。最后将model与后台管理器关联：xadmin.site.register(ProjectOrg, ProjectOrgAdmin)
在数据库中添加完所有表和数据后，如前所述配置好管理内容，管理员即可在web端管理整个系统的后台数据。
界面如下图：
网页设计应用到的软件有Photoshop和Dreamweaver，网页制作则由HTML、CSS、以及JavaScript、jQuery等前端代码完成。
HTML 是是指超文本标记语言 (Hyper Text Markup Language)，用来描述网页，而非编程语言的一种。浏览器会读取 HTML 文档，并将它用网页的形式展现出来[14]。浏览器使用标签来解释页面上的内容，而不会展示 HTML 的标签。HTML展示静态内容，而用户在前端页面看到的动态信息则是框架标签引入的。
Django不仅带给程序编写者用来编译前端代码的模板，而且还可嵌入模板代码，接着利用view对template进行渲染，让用户端能接收到完整的前端内容。模版的目的在于表现外观，而非程序的逻辑。模板的存在完成了视图和展示信息的分隔，视图和模板可以说还存在多对一的关系[13]。新建工程以后，在“xx（工程名）/settings.py”中可进行与模板有关的设置。模板引擎根据DIRS中规定的列表的次序检索这部分目录，往往都在工程的根目录内建立templates包。为减轻使用者反复编译、渲染代码的压力，Django另设有函数：render，来达到模板调取的目的。Django的模板语言包含了以下4种类型：标签、变量、过滤器、注释。
Django以{% 代码块 %}这一方式在前端界面植入标签，数据、信息的传递则用{{ 变量名称 }}。
为求提升代码的重复使用能力，减少程序员的负担。Django内有模板继承机制，它与类继承的含义相似。最常见的应用是日常浏览网页时头部与尾部重复展示的信息。若存在一部分内容在数个template中被重复提及，就可以将这部分内容加载至父模板（base template）。
Block标记：在父模板内设定事先保留的位置，子模板可以在这个部分填入各不相同的内容，注意命名不可一致。为保证更高的可读性，应该给endblock标记也写入名字，此名字与所对的block的名字应该保持一致。Extends标记：指继承，必须位于子模板文件首行。子模版不需要将父模版中全部的保留位置写满，若子模版中没有填入内容，那么保持父模版中所写的初始内容。由此，子模板可根据需要的不同选择性地填充父模板中名称特定的预留区域。
下文介绍本系统模板的设计，详细如下：
基本采用三段式网页设计，不同的base页面结构示意图如下：
将整个系统页面共有的顶部和底部的内容提取出来，在template目录下新建base.html和org_base.html（个人中心与之类似），使用block标签预留内容。在子模板中，使用extends标签继承父模板，重写block标签中的内容：
{% extends 'base.html' %}
{% block title %}项目详情页-Vtour 义工旅行平台{% endblock %}
……