说明:由于图片无法显示,需要全文可联系up主
前言
目录
1引言
1.1研究背景
1.2国内研究现状
2研究与实现中的关键技术
2.2微擎框架
2.3MySQL数据库
2.4开发环境
3系统总体需求分析
3.1可行性分析
3.2系统需求分析
3.3系统业务流程分析
4数据库设计
4.1数据库概念结构设计
4.2数据库逻辑结构设计
5系统实现
5.1个人中心界面设计
5.1.2我的书架界面
5.2小说首页界面设计
5.3书籍分类页面设计
5.3.1书城页面布局
5.3.2阅读页面设计
5.3.3书籍详情信息获取
5.4后台管理设计
6系统功能测试
6.1系统测试目的及原则
6.2系统测试
6.2.1我的书架页面测试
6.2.2书籍分类及书籍详情页面测试
6.2.3后台管理测试
总结
参考文献:
致谢
如下图所示,为MINA框架架构图。
由图可以看出该框架分为三大部分,分别为逻辑层、视图层和系统层。
(1)逻辑层
(2)视图层
视图层则是对页面的直观布局,包括WXML和WXSS两类文件,与HTML和CSS类似,WXML是对页面基础视图进行布局设计,WXSS则对页面要展示的样式进行控制和美化。在这一层中还要通过数据绑定,进行列表及条件渲染,引用模板和组件对页面进行合理美观的布局,而后在逻辑层将数据进行处理后发送给视图层展现到页面[12],同时监听视图层的事件。数据在视图层借助组件的设计展现,组件是视图的基本组成单元。
(3)系统层
系统层主要包括临时数据或缓存、文件存储、网络存储与调用[13]。除此之外,项目根目录下的三个app.wxss、app.js、app.json文件是全局性的系统文件,也是小程序的入口文件,它们分别负责小程序项目的全局公共样式、小程序公共逻辑和小程序公共配置的实现。
MySQL是一个中小型关系型数据库管理系统,目前Internet上的中小型网站的数据库大多是MySQL。支持多种操作系统,支持多线程,充分利用CPU资源,对SQL语句进行优化,提高查询速度,也提供了用于管理、检查、优化数据库操作的管理工具。MySQL还具有体积小、开放源代码、性能快捷、可移植性和开放源代码、遵守国际标准和国际化支持、为多种编程语言提供API等特点[15]。
图2-2MySQL系统架构图
如图2-2所示,MySQL内部大致分为三层:
(1)最上层所包含的服务并不是MySQL所独有的,而相反是大部分服务于C/S程序或者这些程序所需要的部分,比如连接处理、身份认证、安全性等[16];
(3)底层是存储引擎,主要对底层数据进行存取、操作实现,由多种存储引擎共同组成,是数据库中重要且核心的部分,也是MySQL不同于其他数据库的一个重要特性[17]。
(1)Windows7旗舰版
(3)PHP调试环境:phpStudy
(4)PHP编码工具:phpStorm
(5)数据库及管理工具:MySQL数据库NavicatPremium12
(1)操作可行性
(2)经济可行性
通过需求分析确定本次设计在整个功能上分为前端和后端两块内容,其中前端包括页面布局以及API接口调用,后端用PHP和MySQL搭建管理。详细功能如下:
图3-1系统功能结构图
(1)小说首页
(2)书城排行
该页面主要是各种分类包括男生,女生以及出版类,还包括已收录的书籍数量,点击可以跳转到详情页面,可以阅读,可以加入书架。
(4)个人中心
在本次设计中,用户可以通过扫码进入小程序,进行书籍浏览,添加到书架以及从书架移除,也能看到各种分类,排行榜等,下面是系统流程图:
图3-2系统流程图
数据库选择MySQL数据库,它不仅简单易用,支持查询语言(SQL),而且性能较高,多个客户机可以同时使用数据库,此外具有很好地连接性和安全性,运行速度快等。最重要的一点是,它与此次设计所采用的的后端语言PHP具有很好地支持,可以很好地交互。
数据库概念结构设计的过程是通过对用户需求进行综合、归纳与抽象,形成一个独立于具体DBMS的概念模型。概念结构设计是使用E-R模型和视图集成设计法进行设计的,E-R图是描述概念模型的有效工具[19],E-R图由实体、属性、联系三个要素组成,例如本系统中用户信息就是一个实体,它包含描述用户的众多属性,联系表示实体之间的关系,实体与实体之间的联系可以分为三种:一对一、一对多、多对多。
(1)用户信息实体
图4-1用户信息实体图
(2)书籍分类信息实体
图4-2书籍分类信息实体图
(3)基础配置信息实体
图4-3基础配置信息实体图
(4)阅读记录实体
图4-4阅读记录实体图
下面是实体关系的E-R图:
图4-6实体E-R图
根据概念结构设计中的E-R图进行数据库的规则转换,将E-R图实体和实体间的联系转换为关系模式,并确定关系模式中的属性和码。实体中的属性与关系模式中的属性相对应,实体中的码与关系中的码相对应[20]。本系统最后的数据模型以数据表的形式展现,具体说明了数据表中属性名称、主键、含义、约束条件,是否为空等信息,系统中主要的数据库表设计详细如下:
(1)用户信息表
表4-1用户信息表
序号
字段
数据类型
长度
主键
说明
1
id
int
11
是
用户id
2
open_id
varchar
60
否
3
img
255
头像
4
nickname
昵称
(2)书籍分类信息表
表4-2书籍分类信息表
书籍id
title
分类标题
分类图片
url
跳转链接
5
urlType
tinyint
跳转类型
(3)基础配置信息表
表4-3基础配置信息表
主键id
indexShowNum
首页显示个数
背景图片
shareTitle
userCenter
个人中心
名称
图片信息
msg
跳转信息
type
6
hot
热度值
(5)阅读记录表
表4-5阅读记录表
uid
readtime
intr
10
Novel_name
小说名称
图5-1个人中心界面
图5-3书架界面
在书架界面设置上,在bookShelf.wxml中myContainer类中又有bookshelfContainer和operation两个分类,它们共同构成整个界面的框架显示,其中bookshelfContainer用于存放要添加的书籍,operation里面是一些可以进行的操作,比如编辑,删除等。当添加完书籍后,在点击书籍封面时可跳转到对应阅读界面,此时会调用getbookInfo()方法从API接口请求数据,成功则返回对应数据。
图5-4首页页面
书城页面是本次设计中的主要内容,它包括各种分类以及书籍详情页,以及各个分类索收录的书籍数量,点击每个分类可获取详细书籍,然后可选择阅读或加入书架。页面如下图所示:
图5-5书城分类页面
这个页面的设计中使用了小程序中scroll-view这个组件,它是用来设置一个可滚动视图区域。使用竖向滚动时,需要给
而对于点击页面跳转时则使用navigator这个导航组件,即跳转页面链接,通过设置不同属性如target、url、open-type等,可以在点击跳转时有不同效果。
阅读页面是一个阅读小程序核心的页面,所有书籍的阅读都需要它来完成,进入阅读界面后,点击屏幕可以唤起菜单,即目录,阅读模式和字体大小等。其中阅读模式又分为正常模式,夜间模式和护眼模式,也可以通过Aa+,Aa-调整字体大小[24],点击目录即可获取对应目录。
图5-6阅读界面
(1)阅读界面
首先,整个阅读界面依然使用scroll-view这个组件来进行纵向滚动以实现阅读功能,直到一章内容完结停止,章节末有两个按钮,分别为上一章和下一章,点击即可跳转到对应页面。
(2)菜单栏
对于点击屏幕中心唤起菜单栏,这里设置了一个范围,即在屏幕哪个区域内点击屏幕可以唤起菜单栏,下面是部分源码:
openMenu:function(t){
Vara=this.data.clientWidth/2,
e=this.data.clientHeight/2,
o=t.detail.x,s=t.detail.y;
a-100 e-100 showMenu:!this.data.showMenu});}, 这里面有几个参数说明一下,a代表屏幕宽度的一半,e代表屏幕高度的一半,o和t分别表示横向纵向点击屏幕可唤起菜单栏的区域。 (3)阅读模式设计 在阅读模式上分为正常模式以及夜间模式与护眼模式,各自属性如下: 正常模式:background:#cb1c36;color:#fff;width:150rpx;line-height:60rpx;font-size:15px; 本次设计中书籍信息的获取是通过对第三方api接口的请求来实现的。首先,在api.js中对第三方api接口进行封装,设置返回格式,然后在前端页面通过wx.request()方法对已经封装好的api接口发起请求,成功则使用success:function()回调函数返回所请求到的内容显示在页面上。如果请求失败,则执行失败函数fail()。在详情页面还有加入书籍,点击阅读,推荐书籍等功能。界面显示如下: 图5-7详情页面 本次后台采用微擎框架管理,用PHP+MySQL搭建一个本地服务器,在前文中提到,此次后台搭建是使用phpStudy这个程序集成包,包含PHP、MySQL、Apache、PHPMyAdmin等必需的一些环境,首先下载安装PHPstudy,我们下载安装后界面如下图所示: 图5-8phpstudy操作界面 打开后显示如图,点击其他选项菜单可是打开配置文件进行配置,打开php.ini文件将以下几行内容取消注释, 图5-9修改配置文件 之后打开站点管理,设置自己的站点域名等信息并保存生成配置文件。 图5-10站点管理 然后打开navicat--一套高性能数据库管理及开发工具。它可以用于任何版本3.21或以上的MySQL数据库服务器,并支持大部份MySQL最新版本的功能,包括触发器、存储过程、函数、事件、视图、管理用户等。在连接名里面输入所要链接的数据库名,填入密码即可连接,如下图所示: 图5-11Navicat连接数据库 在左边可以看到其中的表及其它信息, 图5-12连接成功界面 图5-13后台管理界面 至此,整个设计算是接近尾声,接下来就是进行系统测试,对还存在的问题进行调试解决。 一般来说,为了让软件开发更有价值,需要针对软件进行测试,以便在使用过程中具备稳定性,并确保用户获得最佳使用体验。在小程序使用过程中,为了确保其智能性和准确性,就有必要对软件进行不断的开发和测试。这样做的目的除了能够保证软件的正确运行之外,还可以根据测试结果适当提升软件质量[25],高质量的阅读体验更具普遍性,能够大范围推广,所以更需要在软件开发时、软件使用前就做好软件的反复测试。这样,在软件的使用过程中可以尽量减少出现问题的机率。 一般来说,检测在开发过程中是能够避免细节失误的,而一旦细节上出现任何失误,检测都能够妥善处理,不至于引发致命性的错误,所以在软件的结构、软件的数据、软件的业务流程上都需要进行一系列的测试,反复校对后才可以确保软件功能的正确运行。 点击我的书架后则可以查看书架中的书籍,若书架中还未加入书籍,则可移步至首页或书城进行搜索或点击浏览并加入书架,具体如下图所示: 图6-2书架页面测试 点击加入书架后则会在调试框内显示如下信息, 图6-3请求数据成功 再去到书架则可以看到已经添加成功,如图所示 图6-4加入书架成功 书籍详情页面是否能够运行成功决定着这款小程序是否最终可以发布,因此这一块的测试尤为重要,测试内容主要是页面间的跳转是否流畅,点击相应的按钮或者界面是否会进行相应的操作,以及数据的获取和页面的显示是否正确,在进入首页后可以看到搜索框以及男女生榜单如下图所示: 图6-5首页搜索页面测试 点击搜索框后可以正常跳转到搜索页面并且对应的热搜词以及历史搜索记录都可以正常显示,而在测试的过程中当然也存在网络不好则也会导致延时或者请求失败,这是一个普遍存在的问题。 书城页面以及点击对应分类跳转页面显示如下图所示: 图6-6书城页面测试 当点击对应的小说去进行阅读时,在console框会返回请求成功的信息,如下: 图6-7获取数据成功 而且在后台数据库中也会相应的显示刚才阅读的书籍信息: 图6-8数据库信息 图6-9后台管理界面测试 在后台添加如下信息: 图6-10后台添加任务 我们返回到小程序前端页面可以看到如下图所示: 图6-11小程序页面 从中可以看出后台有一些基础配置以及相应的功能设置,配置对应的功能即可在小程序页面显示,还可以在后台添加管理操作人员,给与权限方便管理。 至此测试已经基本完成,在这过程中,整个设计的基本功能上都可以达到预期的目标,没有出现很严重的错误及问题,前后端也能够进行良好的交互。还有一点,因为是基于在线的小说阅读,因此页面跳转或者数据获取会随着网络延迟而延时,总体来说,是一次比较成功的设计。 本文通过对阅读小程序的开发,从零开始一步一步学习并实际操作,完整的走了一个流程。从刚开始的需求分析,到架构搭建与设计,到编码实现,数据库设计,以及服务器搭建,这个过程虽然不是很顺利,但终究还是完成了预期目标。 在设计的过程中还是有很多地方去更加深入学习,比如在前端框架的选择,以及后台搭建语言的选择,现在各种技术发展的很快,只掌握一种很显然还不够。还有对于数据库的设计上尤显生疏,对于概念结构设计和逻辑结构设计的掌握也略欠缺。最主要的一点是本次设计没有实现在真机上使用,只是停留在模拟器上,真实的测试也得不到验证。 在这次完成毕业设计和论文的过程中,遇到了很多困难,但克服困难的过程也是一次自我提高的机会,实践使我对理论知识有了更深的理解,也提高了解决问题的能力。 [2]移动互联时代有声读物的发展现状、问题与对策——基于有声读物用户的实证调查[D].河南大学,2016. [4]张福平.碎片化阅读背景下全民阅读的推进——电子阅读与纸质阅读的对比分析及融合探讨[J].郑州轻工业学院学报(社会科学版),2016,17(1):43-51. [5]马洪波.移动互联网时代读者阅读习惯分析[J].中国报业,2019(07):72-73. [7]毛鑫渝.基于使用与满足理论的小程序特征分析[J].新闻研究导刊,2017,8(22):89+102. [13]张志强,郑涛,王伟钧,等.一种基于网络请求的数据访问接口设计与实现[J].成都大学学报(自然科学版),2018,v.37;No.126(2):60-64. [14]刘庆.基于WeChat和WebServer的考试信息查询系统的设计与实现[J].电脑知识与技术,2016,12(19):38-39. [17]罗启强.基于PHP+MySQL的高校教务管理系统的设计与实现[D].吉林大学,2016. [18]面向Web2.0的web应用前端开发框架的设计与实现[D].北京邮电大学,2014. [19]孙卓.关于E-R图向关系数据模型转换的探讨[J].电大理工,2011(04):23-24+27 [20]李威.基于E-R图的关系数据库关键字查询[D].山东建筑大学,2012. [25]郭金金.基于测试设计标准化的软件质量保证[D].西南大学,2011. 其次,感谢学校的培养,在这四年中是您提供了良好的学习环境以及方便的学习平台,似驾一帆船畅游在知识的海洋中,让我有了更高的知识面,更宽广的视野,为以后的学习生活打下更坚实的基础。 最后要感谢父母,是你们一直以来默默付出,不仅仅是在经济上的支持,更重要的是在精神方面培养,让我能够健康成长,走向更远的未来! 从中也悟出一个道理,不管一个人的力量有多强大,终究会遇到一些难题,有句话说的好,人多力量大,几乎所有成功的背后都会有一大群支持你的人,给你帮助,给你力量,人生路漫漫,心齐比天高!