system: [SYSTEM]

user: 2. 系统设计与实现 2.1. 系统结构设计 本论文实现的应用系统分为两个模块，web端以及移动应用端。 在web端我们采用的是python + flask框架的实现模式，主要功能是实现根据用户需要进行数据搜索、筛选、推荐以及基本的社区功能(发表游记、评论、点赞等)。 本系统应实现的基本功能有： 1) 用户在系统中注册、登录。 2) 用户可编辑并查看自身资料。 3) 用户可以关注其他用户或文章并管理关注列表。 4) 查看联系人资料。 5) 用户发布、浏览、收藏、评论文章。 6) 软件功能分布图如图1，web端、服务器端、移动端实现功能如图1。 2.2. 系统功能 1) 用户注册、登录。 用户的账户是系统表示用户身份的唯一标准，用户通过自身身份验证才能执行权限内操作、添加好友、进行会话等。用户首次使用需要进行注册，系统将用户的注册信息添加于数据库，此后用户可根据用户名及其密码进行登录，通过系统审核确认身份无误后，用户获得账户信息和权限进行操用户可以在本平台浏览、发布、收藏有关旅游的游记文章。还可以关注其他用户留言交流实现社交的功能(图2)。 2) 用户资料列表 用户资料列表用于存储用户的个人信息，如账户名，密码等基础信息，并允许进行修改等基本操作。 3) 用户关注列表 用户关注列表用于将用户关注的其他用户或文章进行标记并存储。 4) 文章列表 文章列表用于存储每一位用户发布的文章，评论。 图1. 系统客户端与服务器端具体功能 图2. 软件功能分布图 2.3. 系统模块与实现 2.3.1. web端 web端是用户的可视化操作应用层，其视图应美观简洁，功能齐全，布局结构合理；其作用应在于为用户提供浏览、阅读、收藏、评论文章等功能，与服务器进行数据交互，为用户提供流畅的、稳定的体验我们采用的是Python + flask的实现模式，采用mvc架构(图3)。 2.3.2. 服务器端 Flask：基于Python的服务器应用。 Nginx：负载的均衡代理服务器。 服务器端分为处理程序运算请求的服务器以及保存数据的数据库两部分。其中服务器起到了执行系统逻辑运算的重要作用，服务器的正常运行是整个系统稳定运行的关键。服务器采用分块分层、保留接口的设计思想，保证了块与块之间分别执行不同的功能，互不干扰，通过接口来实现数据传递，减少代码的重复率，提高了日后对服务器维护升级的效率。 2.3.3. 移动端 同样作为用户的可视化操作应用层，具有与web端相同的功能，用户可以在手机上进行操。作为系 图3. 前端架构图 统客户端是用户的可视化操作应用层，其视图应美观简洁，功能选项清晰易查，布局结构合理，与服务器进行数据交互，保存本地资源，并保证运行时的流畅性和稳定性。 2.4. 关键技术与算法 2.4.1. 前端的关键技术与算法 在前端，我们采用了MVC框架的软件设计模式。前端网页设计采用Bootstrap框架通过Html，CSS进行页面布局，并使用jQuery与JavaScript进行控制部分功能。 MVC框架：是一种采用模型——视图——控制器的方式进行web app开发的设计典范。在开发中，我们将逻辑，数据，视图分离进行编程，使得程序在进行优化时能有更加清晰的优化思路，只对需要优化的部分进行修改即可。 Bootstrap框架：bootstrap框架是一种基于HTML，css，JavaScript的前端框架。通过bootstrap框架我们可以更好地设计网页的基本元素与布局，如导航栏，字体，图标等基本元素以及通过栅格布局控制网页在不同的大小中能正常的显示网页的布局。 jQuery：jQuery在前端中起到连接作用，用于接收网页所接收到的变量并将他传导至后台。 JavaScript：是对网页部分动画效果的控制，如在主页中对不同模态框的访问进行速度的优化，使得跳转不会显得僵硬，是对用户体验优化的主要手段。 2.4.2. 服务器端关键技术与算法 在后端，我们选择使用Python语言来实现各个功能。主要应用技术有：flask，Nginx，Gunicorn，jinja2，Scrapy等。 Flask：基于python的服务器应用。 Nginx：负载均衡代理服务器。 WSGI：(Web Server Gateway Interface)：作为容器。Web框架Flask的作用是生成HTML代码，而web服务器(在本应用中即Nginx)的作用是相应有客户端发来的Http请求。WSGI协议即统一Web框架和Web服务器的接口。在本应用中，WSGI容器词采用Gunicorn。因为Gunicorn有易安装、易启动、易维护的优点。 Scrapy：Scrapy是一个为了爬取网站数据，提取结构性数据而编写的应用框架。应用在包括数据挖掘，信息处理或存储历史数据等一系列的程序中 [ 1 ] 。其最初是为了页面抓取(更确切来说，网络抓取)所设计的，也可以应用在获取API所返回的数据(例如Amazon Associates Web Services)或者通用的网络爬虫 [ 2 ] 。 Gunicorn安装/启动：Gunicorn的安装和启动都十分简洁。本应用中，Gunicorn包部署在虚拟环境(Virtualenv)中。 1) 安装 # pip install gunicorn 2) 启动 # gunicorn -w 4 -b 127.0.0.1:8080 wsgi:application 其中，gunicorn是启动命令，w参数指明了开启几个进程来运行flask应用，本应用中采用四个进程同时运行的方式来支持多个访问。b参数指明了监听的主机地址和端口，命令的最后跟上文件名：flask实例的格式，即可运行flask应用。 .Nginx安装／启动 1) 下载Nginx：# wget http://nginx.org/download/nginx-1.6.2.tar.gz 2) 解压安装包：# tar zxvf nginx-1.6.2.tar.gz 3) 进入安装包目录：# cd nginx-1.6.2 4) 编译安装： #./configure--prefix=/usr/local/webserver/nginx--with-http_stub_status_module--with-http_ssl_module--with-pcre=/usr/local/src/pcre-8.35 # make # make install 5) 查看nginx版本 # /usr/local/webserver/nginx/sbin/nginx -v 6) 配置和启动 将Nginx的配置文件(路径为：/etc/nginx/site-avalidable/default)中内容修改为如下： server { listen 80; server_name 127.0.0.1; #服务器ip地址／域名 location / { proxy_pass http://127.0.0.1:8080; # gunicorn服务所在位置 proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } 如上操作之后，即可启动服务： #/usr/local/webserver/nginx/sbin/nginx Nginx的安装/启动： 各层之间关系(图4)： 请求过程： Nginx监听到客户端的请求，根据Nginx的路由配置将客户端请求转发至Gunicorn。 Gunicorn根据响应配置变量，并请求Flask框架。 Flask根据变量和请求利用Scrapy框架获取需要的信息并生成Html，作出响应。 2.4.3. 移动端 移动端是部署在移动设备上的用户可视化操作端口。使用jQuerymobile编写，将对web端进行精简优化移植到移动设备中作为app。其开发采用响应式设计以及渐进式设计，能够兼容多种终端，自动适应不同设备。 1) 具体应用技术与核心类(UML用例图，图5)的构建： 2) 推送内容处理 TravelMsgEntity类中主要包含了推送信息的各种方法，通过搜索进行关键字匹配，或者根据用户选取的爱好进行分类，同时对于推送的文章根据热度进行优先级的排序 [ 3 ] 。 3) 社交管理 用户在每次登陆系统时，服务器端都会发送一个最新的联系人列表至客户端。服务器发送的联系人数据格式统一，因此只需按顺序进行处理，得到全部联系人。客户端对联系人进行按照姓名全拼先后的自主排序，或通过用户的主动分组来产生便于操作的联系人列表，点击联系人可以查看用户的空间展示信息。 图4. 服务器端流程图 图5. Community的UML结构图 4) 游记、文章管理 包含了不同消息形式的接收方法，其中有文字、图片、语音、文件、URL连接的形式。不同的形式对应着不同的Java基本数据类型，通过本类处理后，再与不同功能的界面相结合，实现客户端游记的展示。 5) Intent的使用 系统包含四个不同的层次级功能，而且要求可以使用户灵活地在不用层次之间快速切换，因此使用了Intent来整合了不同的功能界面。Intent对象可以传递给Content.startActivity()方法或Activity.startActivty ForResult()方法来启动Activity或让已经存在的Activity来执行其他任务。Intent对象也可以作为参数将信息返回给调用startActivityForResult()方法的Activity。通过这种切换处理机制，保证了用户在不同层次上切换功能的灵活性和使用本系统的流畅性。