论文总字数：24466字

目 录

1 引言 1

1.1 课题背景 1

1.2 课题目的 1

1.3 主要内容 1

2 理论支持 2

2.1 Web前端单页应用 2

2.1.1 SPA（单页应用）简介 2

2.1.2 JavaScript 简介 2

2.1.3 MVVM JavaScript 框架 VueJS 2

2.1.4 前端自动化 3

2.2 Progressive Web Apps 技术简介 3

2.3 MySQL数据库 5

2.4 Python简介 5

2.5 HTTPS简介 6

3 需求分析 6

3.1 系统的功能性需求 6

3.1.1普通用户移动端PWA 6

3.1.2活动发布者PC端网页 6

3.2.2服务器端 7

3.3系统的非功能性需求 7

3.4用例图 7

3.4.1用户注册用例描述 8

3.4.2 用户登录用例描述 8

3.4.3查看活动用例描述 9

3.4.4点赞活动用例描述 9

3.4.5注销登录用例描述 10

3.4.6密码修改用例描述 10

3.4.7报名活动用例描述 11

3.4.8搜索用例描述 11

3.4.9活动发布用例描述 12

3.4.10活动删改用例描述 12

3.4.11报名信息查看用例描述 12

3.4.12点赞数查看用例描述 13

4 系统设计 13

4.1 客户端设计 14

4.1.1 系统模块包图 14

4.1.2功能模块设计 15

4.1.3系统时序图 16

4.2 服务器端设计 18

4.3系统结构 18

5 系统实现 19

5.1服务器端实现 19

5.1.1 数据库的搭建 19

5.1.2 实现API 19

5.2 PWA移动端的实现 19

5.2.1 Service Worker的实现 19

5.2.2 定义manifest.json 21

5.2.3 登录注册界面 21

5.2.4 应用主界面 22

5.2.5 点赞功能 22

5.2.6 活动详情界面 23

5.2.7 活动发布者界面 24

5.2.8 用户报名界面 24

5.2.9 活动搜索界面 25

5.2.10 活动分类界面 25

5.2.11 活动分类详情界面 26

5.2.12 个人界面 26

5.2.13 信息设置界面 27

5.2.14 活动发布者后台 28

6 结束语 28

参考文献 28

基于PWA的校园活动软件的设计与实现

杨铮

,China

Abstract: This paper implements a PWA-based campus campaign single-page application Website system. From a business perspective, the system uses mobile, PC, and server designs. Mobile uses PWA technology to serve ordinary users, enabling users to view recent campus activities and save the Web application to the desktop. The PC side is used by active publishers to publish, manage, and view information. The server is deployed in a linux environment. From a technical perspective, the system uses a front-end and back-end separation method. The development process uses front-end automation to build, involves npm package management tools, gulp flow control tools, and uses Git version control tools to iterate and manage system code. The front end uses VueJS for data-level rendering and interaction between components, and controls the HTML and CSS of the Web page. The back-end uses RESTful style APIs for front-end and back-end interactions, uses the HTTPS protocol, and uses Python for API development to make the front-end and back-end services more clear and low-coupled.

Key words: Single Page Application; Progressive Web Apps; VueJS; Campus Activity Software; Python

1 引言

1.1 课题背景

随着社会的发展，大学生所处的生活环境也有了一定的变化，校园活动也变得越来越丰富多彩，在宣传方面，多数社团最常见的方式莫过于发传单、贴海报，将活动的主要信息放在传单和海报上，采用广撒网的方式进行宣传。但这种宣传方式不仅成本很高，其效果也比较差，极少有人去认真关注传单的内容。单一的线下宣传方式已经开始捉襟见肘，不仅需要花费高昂的经费制作印刷品，而且在需要修改活动信息时也极其不便。在互联网高速发展的今天，据对90后大学生的获取信息渠道的调查显示，很多大学生认为从互联网获取信息更方便快捷、信息量广^[18]，因此互联网成为了大学生们最普遍最喜欢的信息获取渠道而不是传统渠道。

1.2 课题目的

将校园活动集中展示不仅能为学生提供便利性，还能减少线下传统宣传的费用和提高活动发布者宣传效率。而传统的线上集中展示平台如 Web App 和 Native App都无法更好地使用和传播，而基于PWA(Progressive Web Application)的系统不仅能保持和原生应用相差不多的速度来更快捷地查看，还能安装到手机桌面以提升便利性，从2018年1月份开始，iOS的 Safari Mobile也支持了PWA技术，这意味着PWA的使用率和覆盖率将大大增加。本课题的主要目的就是开发基于PWA的校园活动系统，普通用户可以通过该平台快速流畅地查看校园活动并报名，也可将网页保存到手机桌面以便于下次访问，也可以查看自己的报名参加记录。活动发布者则可以通过该系统发布活动内容和查看报名，以提高宣传效率和减少宣传费用，同时也可以删改活动，让活动的管理更加灵活便捷。

1.3 主要内容

使用MVVM(Model-View-ViewModel) 的前端框架进行视图和逻辑业务开发，实现普通用户端的查看活动，点赞活动，报名活动，搜索活动，并利用PWA技术实现手机桌面端安装，离线使用，使得普通用户今后通过桌面可以更快捷得打开网页应用，并实现普通网页应用达不到的流畅程度。客户端实现社团的活动发布，报名人员查看，活动管理等功能。应用采用前后端分离技术，利用RESTFUL API 进行交互。学生可以通过查看校园活动网页可以快速地知道近期的活动内容，从而根据自己的喜好快速地选择参加的，对于新生来说，通过使用该应用也能更好地了解到校园文化，更加充分和积极地加入校园活动中。对于校园社团活动发布者来说，高昂的活动宣传费和落后的管理方式使得参与校园活动不方便，使用该网页进行快捷发布和管理，并且能实时掌握报名信息以应变活动现场。

2 理论支持

2.1 Web前端单页应用

2.1.1 SPA（单页应用）简介

单页应用程序(SPA) ^[11]是一个Web应用程序或Web站点，它不是从服务器加载整个新页面来与用户交互，而是通过动态地重写当前页面来与用户交互。这种方法避免了连续页面之间用户体验的中断和资源加载，使得应用程序更像桌面应用程序或者原生应用。在一个SPA中，所有必要的代码——HTML、JavaScript和CSS都是通过一个页面加载来检索的，或者动态加载适当的资源，通过对用户操作的响应来在必要时添加到页面中去。该页面应用会使用位置散列和 HTML5 History API 来对应用中的不同页面提供导航，不会有传统网页应用存在的打开加载新页面转移应用控制权的问题。与单个页面应用程序的交互通常涉及到与Web服务器进行动态通信，通常使用到的技术有 JavaScript 框架、Ajax、WebSockets、SSEs、浏览器插件和数据传输。

2.1.2 JavaScript 简介

JavaScript 是一种以浏览器为编译环境的弱类型脚本语言^[3]。整体由三个不同的部分组成：ECMAScript，由 ECMA-262 定义，提供语言的核心功能和语法规则（本系统将采用ES6^[7]的语法进行课题研发）；文档对象模型，提供网页的操作和访问的方法和接口，并将文档元素分为一个个节点，节点与节点之间相互关联形成节点树；浏览器对象模型，提供与浏览器交互的方法和接口，包括获取浏览器属性和浏览导航。近几年JavaScript 发展迅速，发展出了功能强大和丰富的JavaScript 语言框架和模块，包括以前端渲染为主的 React、AngularJS 和 VueJS三大主流业务框架，本文将采用 VueJS 框架进行网页应用的开发。

2.1.3 MVVM JavaScript 框架 VueJS

MVVM框架模式^[13]则是把MVC中的C（Controller）和MVP里的P（Presenter）改为了ViewModel，即Model View ViewModel。View 与 ViewModel 里各自的变化会双向同步到另一层面。实现该自动同步的方法是在ViewModel中实现了Observer、Watch、Compile，即每当属性发生变化时都会通知 Observer进行数据更新和 Watch 监听数据模块上的事件，两者同时完成后都会向Compile发送数据更新请求并能触发其绑定的事件。

VueJS是构建数据驱动的MVVM渐进式框架^[4]。其通过结合数据劫持和订阅者开发者模式实现了简单有效的响应式数据绑定，通过结合 Vue-Router 和Vuex 等Vue生态库进行复杂的单页应用开发，再通过 Vue-Loader 将 Vue代码解释成浏览器可以识别的文件格式。VueJS 与React Angualar 等其他框架不同的是，Vue采用增量开发的设计，核心代码关注于 VIEW层。其核心思想也是组件化开发，将原本HTML的DOM树结构转化为组件树结构，即将网页的各个模块根据功能实现细分为文件，文件中包含各自的DOM结构、样式以及逻辑事件，大大提高代码的复用性和相互之间的影响，从而提高的代码的开发效率和性能。

图2.1 组件化网页应用构建

2.1.4 前端自动化

前端技术发展日新月异，从DHTML时代到现今前端框架百花齐放，目不暇接的技术让前端开发变得更加工程化、模块化，预编译、代码转译压缩打包检测等工具已经成为了当今前端开发不可或缺的部分。

剩余内容已隐藏，请支付后下载全文，论文总字数：24466字

相关图片展示：