基于微信的美文赏析平台的设计与开发

1、 基于微信的美文赏析平台的设计与开发 Design and development of WeChat - based appreciation platform摘要随着社会的发展，微信的优势和普及使得美文赏析平台的开发成为必需。美文赏析平台主要是借助微信实现搜索美文、购买美文、阅读美文、进行评论、进行收藏、发帖交流以及查看资讯等功能。毕设用了JSP技术，MYSQL数据库，wxss语言，同时基于C/S的架构，用的自顶向下的系统分析的方法，说明了一个功能比较全面的美文的赏析平台的开发的过程、操作的流程及其核心的技术。首先对课题的研究现状简述，研究工作的使用的价值和理论的意义还有那些自己需解决的问

2、题。接下来是系统的需求分析功能的概述、系统的流程等，以及数据库的设计和系统的功能实现及测试工作。关键词: 美文赏析平台 wxss语言 MYSQL数据库 C/S架构 Abstract With the development of society, the advantages and popularity of WeChat make the development of the platform of appreciation and analysis of American literature necessary. The platform mainly USES WeChat to s

3、earch for, purchase, read, comment on, collect, post,exchange and view information.This project adopts JSP technology, WXSS language, MYSQL database, based on C/S architecture, adopts top-down structured system analysis method, and describes the development process, operation process and core techno

4、logy of a full-featured literature appreciation platform. Key words： literature appreciation platform WXSS language MYSQL database C/S architecture目 录1.概述11.1 课题背景及意义11.2 国内外研究现状11.3 研究内容22.系统开发环境32.1开发工具介绍32.2开发语言HTML简介和JAVA介绍3 2.2.1 HTML简介3 2.2.2 JAVA介绍32.3 MySQL数据库42.4 JSP简介42.5 三层框架简介43.系统分析63.1

5、 可行性分析6 3.1.1 技术可行性6 3.1.2操作可行性6 3.1.3 经济可行性6 3.1.4 法律可行性63.2系统流程设计7 3.2.1系统开发流程73.3 概念设计83.4系统功能设计8 3.4.1 功能概述8 3.4.2 系统功能结构93.5性能需求分析93.6系统用例图104.数据库设计114.1数据库设计原则114.2数据库概念设计114.3数据库E-R图设计114.4数据库表设计135.小程序各功能的具体实现145.1系统界面设计14 5.1.1首页界面14 5.1.2美文详情页面14 5.1.3 检索界面15 5.1.4 论坛界面15 5.1.5 帖子详情界面15 5.

6、1.6 我的订单界面16 5.1.7 美文阅读界面16 5.1.8 资讯列表界面17 5.1.9 浏览历史界面17 5.1.10帖子列表界面18 5.1.11留言评论列表界面18 5.1.12订单管理界面185.2小程序核心代码19 5.2.1 app.js代码19 5.2.2 app.json代码20 5.2.3 app.wxss代码20 5.2.4 project.config.json代码21 5.2.5 sitemap.json代码226.系统测试236.1 测试的意义236.2测试方法246.3测试用例246.4测试总结25结论25参考文献26致谢281.概述1.1 课题的背景和意义

7、微信小程序是不需要下载或者安装就可以用的app，实现了随手可得的愿望，我们扫一扫或者搜一下就可打开啦。体现了“用完即走”的道理，大家不需要考虑是否安装太多应用。用途将无处不在，随时可用，而且又不用装或者卸。近年来，随着网络技术的不断发展，微信规模的逐渐增大，使用人群逐年增多，具有一定的数量，于是微信程序也应运而生。美文赏析平台可以实时浏览最新的资讯内容，搜搜大量的美文信息，可进行收藏，购买以及阅读，可发布帖子进行交流，可查看浏览记录，为用户赏析美文提供了安全的平台，提供了方便的渠道。本系统的研究意义具体有以下几点： (1)实现跨平台，与安卓苹果、小米、华为手机无关，与硬件设备无关，与操作系统无

8、关，只要能运行微信就能用。 (2)解决社会上实际的需求。用户收藏大量的内容却难以回顾管理。从上述这些特点可以总结出，需要在充分了解微信小程序的特点以微信小程序为平台，充分利用其提供的api设计出依托微信小程序的美文赏析平台，并用技术手段去实现，满足人们日常生活中阅读美文的需求。 (3)云存储。用户的数据都存在云服务器上。即使用别人手机登录也能看到自己的数据。1.2 国内外研究现状随着社会信息化的深入，身边的各种文章如浪潮般涌来，有效的进行知识管理是当今管理科学，信息科学交叉融合的最新理论成果之 一。并且随着移动互联网的不断发展，我国手机上网用户的不断提升，还有微信小程序的不断完善，在人们触手可

9、及的微信小程序上进行美文赏析就变得至关重要。 我们用小程序不用下载也不需安装，急用即使用，我们可以扫描一下我们的二维码或者在微信中搜索想要的程序名字，就可以使用所有的应用功能。还有，不会像传统应用那样占用那么多的内存。我看了腾讯的2017年第三季度最新的季度财报2，微信的月活跃账户十分多，有9.8亿个，增长15.8%。现在竟然拥有10多亿月活跃的用户，使其成为中国第一个达到10亿人用的互联网产品。微信已经成为真正的“国家第一应用了”，人手一个。因此，小程序有更大的空间和平台。微信小应用程序开发框架基于米娜框架,是一个网络的通信的应用程序的框架,是基于JSP技术,另外框架的特色是至关重要使用JS

10、P技术, 异步输入和又输出支持TCP / UDP协议,和IOS和ANDROID的app相比，当然是微信更容易开发了，价格又更便宜，也很有前途。总来说与手机里的app比较，开发小程序的就更加简单，从开发技术上看，和手机app的开发也非常的相像，而且微信小程序的页面看起来也更加的简洁。 1.3 研究内容本系统是美文赏析平台的设计。通过对系统的需求分析，设计出了美文赏析平台，主要的工作有：（1）了解系统的工作流程，撰写关于系统的需求分析。（2）根据美文赏析平台具体的需要，分析出、设计了系统功能的框架和结构。（3）看系统的需求分析以及总体设计，从而设计出这个系统的结构图。（4）根据功能编写本系统的开发

11、技术文档。（5）编写美文赏析平台代码。（6）对美文赏析平台进行单元测试。272. 系统开发环境 2.1开发工具介绍用myeclip开发后台，前台使用 eclipse+adt，结合 js，后台数据库mysql2.2开发语言介绍：JAVA和HTML2.2.1 HTML的简介HTML是超文本的（页面内可有图片、音乐，链接、视频等元素）标记语言。HTML的功能：（1）可以支持标题，表格，文本。（2）通过链接，轻松链接到在线的信息。（3）支持远程服务。（4）支持文件，视频剪辑，音频剪辑，并直接包含一个表的其他应用程序。一个HTML文档可以分为以下几部分：页该网页的内容其中：.这表明，它是一个HTML文件

12、.：这是在网页显示的第一部分 .页. 正文页2.2.2 JAVA介绍Java语言擅长开发互联网类应用，是最有影响力的一种。Java完全面对对象的编程语言，形象的说就是我改让谁来做，封装是将对象的属性和方法尽可能地隐藏起来，使得外界并不知道是如何实现的，外界能通过接口进行访问，继承是指每个类都会有一个父类，他的方法子类会拥有，final修饰的类不能被继承，实现了代码的重用，能够提高软件的开发效率，也是多态的前提。JAVA语言主要用来编写程序的后台，系统中的实体类，服务类以及接口都是由JAVA语言编写的，通过配置文件连接数据库。最终实现从数据库中查询相关信息并进行管理。2.3 MySQL数据库目前

13、最流行的RDBMS之一，他与其他数据库如ORACLE、DB2等相比，它属于一款体积小、速度快的数据库，重点是它符合本次毕业设计的真实环境，拥有成本低，开源这些特点，这也是选择它的主要原因。从20世纪90年代然后再到MySQL的诸多系列，这是经过许多年地发展，让中小型的企业可以不断地应用。MYSQL数据库具有以下特点：1便携性和灵活性。2、支持多系统，例如，HP-UX，Linux和Mac OS中，Novell的Netware，OpenBSD系统，OS/2，Solaris。3、提供API。4、能多线程。5、优化SQL，提高搜索速度6、可以编程任何独立的环境，嵌入在其他软件和数据库。7、应用在 JD

14、BC，并提供连接。本系统用的是MySQL数据库，数据库的名称叫做house，创立多张数据库表来存储美文还有美文的赏析平台的相关数据。系统中主要应用查询（select），修改（update），删除（delete）以及增加（insert）等语句来实现系统功能。2.4 JSP的简介JavaServer Pages可以装在网络的服务器上，响应，根据请求内容生成了HTML、XML或其他格式的文档的Web，然后返回给请求的那个人。JSP技术的脚本语言是Java语言。2.5 三层框架简介 三层架构的设计的模式采用了面向抽象编程的思维14。也就说是上一层对下一层之间的调用，是通过接口来实现的。而下一层作为上一

15、层真正的服务提供者，它成为了下一层接口的实现类。整套流程中的接口是相同的，实现类却是可以随意可以更换的。这样，就实现了层与层之间的解耦合。3.系统分析3.1 可行性分析美文赏析平台主要目标是实现微信美文赏析平台相关信息的管理。在我们确定目标后，从四方面对能否实现本系统的目标来分析。3.1.1 技术的可行性美文赏析平台主要采用JSP技术，基于C/S结构，MYSQL的数据库，包括前端的开发。应用程序要求功能完整、使用简单，建立一个完整性强、安全性好、稳定性高的库。1、基于C/S模式的系统的开发已发展成熟。2、大家都知道，JSP是一种面向对象的开发语言。程序开发完后能在平台上面方便使用已知的解决方案

16、。 综上所述：美文赏析平台的开发技术很可以，且掌握了一定的开发技术，所以系统作业没问题。3.1.2操作的可行性界面简单易做，采用常见的窗口，访问的是微信，我们人手有WeChat都能访问用。采用wxss和JSP开发，基础是C/S，环境使系统更加完善，易操作、交互性好，非常简单。3.1.3 经济的可行性说一下美文赏析的平台是基于C/S模式，MYSQL数据库被采用，我们很易从市场购买硬软件，所以程序在开发人力、资本上要求不高，而且不很复杂，周期短，在经济方面具有较高的可行性。3.1.4 法律可行性此美文赏析平台是自己设计的微信小程序，很实际，总的来讲，美文的赏析的平台在操作，经济，技术和法律方面都有

17、高可行性，开发这个是必要。3.2系统的流程设计3.2.1系统开发流程美文赏析平台开发中时，首先进行需求分析，来对系统总体规划，设计功能模块，选择数据库等，流程如图3-1所示图3-1系统开发流程图3.3 概念设计本次设计程序是完成一个美文赏析平台，既然称为赏析平台，那么主题就是信息的发布以及浏览。第一，要保证用户得到最新的美文信息，第二，要实现用户之间的交流，利用帖子的方式，可以发布文字以及图片信息。这两个功能分为两个主部分。前端的主要任务就是保证页面足够的漂亮，信息位置分配的均匀。因为一个页面的美观程度，能明显吸引用户的眼球。所有页面都是列表展示文字以及图片的效果，让页面更加的饱满，使得页面不

18、是那么死气，而且这种freestyle正适合当代大学生以及白领这些社会主体。页面上的所有样式用html+css+js控制，编写后台的时候，利用JSP语言编写服务层以及控制层代码。为了展示出更好的的效果，计划每个页面都以同种风格进行展示，让网站的风格更加同意。页面之间的跳转，在设计的时候先用a标签实现，在后期整合的时候用JSP代码控制。在登录注册的时候，前端页面通过之前配制好的配置文件用表单传递，前端也定义好变量，接受后台返回值，并在前台页面显示。需要传递值的form表单，我都会在里面写一个隐藏的按钮，里面定义的method会分辨出执行哪个方法，然后跳转页面，并读取页面上的数据和图片。从数据加载

19、或者页面定义好的，在页面加载时执行完js代码。3.4系统功能设计3.4.1 功能概述美文赏析平台主要实现了首页（美文列表）、检索、论坛、收藏、个人中心以及咨询通知等功能模块。个人中心包括我的购买、浏览记录、我的钱包、个人信息、修改密码、注销登录以及退出等模块。管理员用户进行后台管理，主要模块有美文列表、种类列表、资讯推送列表、订单管理、帖子列表、留言评论列表以及用户列表。用户从微信平台登录进入美文赏析平台，直接进入主页页面，页面展示美文列表，可以根据关键字以及美文种类进行筛选，可以查看美文的详情信息，进行评论以及收藏，购买美文后可以在详情页面进行阅读，可以坐在检索模块搜索美文信息，可以发布帖子

20、以及查看回复他人的帖子，互相进行交流，可以管理收藏信息，可以查看最新资讯。可以在个人中心查看自己购买的美文，查看美文浏览记录，查看钱包的金额，可以进行充值，可以管理个人信息。3.4.2 系统功能结构根据上述分析，得出美文赏析平台的功能结构，如图3-3所示：图3-3 系统功能结构图3.5性能需求分析(1)数据的精确性。用户填写的数据，系统要有相应的限制，进行实时提醒，避免输入错误，遇到计算的算法，精度要准确，避免损失精度。 （2）友好性。系统难免会出现一些同步以及异步的操作，有时反应会特别卡顿，希望系统给予一定的提示。 （3）实用性。系统中的功能应该都是有意义的，实作为美文赏析平台而需要的。 （

21、4）鲁棒性。系统可以支持多人同时使用，因为美文赏析平台不是单人使用的专用系统。 （5）安全性。美文赏析平台中会有一些敏感的数据，大部分数据都是真实的，系统要进行安全的防护，防止数据泄露。3.6系统用例图美文赏析平台主要实现了首页（美文列表）、检索、论坛、收藏、个人中心以及咨询通知等功能模块。用户用例图如3-4所示。图3-4客户使用举例的4.数据库的设计可以说是电脑的信息系统的基础。收集整理存储住检索一遍更新加工统计和传播等必须在管理系统的的支持下才能进行。目前关键与核心部分就是数据库。开发的优劣对直接影响整个系统的质量速度。4.1数据库的设计的原则在概念的设计中，用四种方法：从顶向下、自底部向

22、上、逐步地扩张、混合的策略，在物理的结构的设计阶段分两步走：我们先确定下来，在关系数据库中指存取存储。 评价空间时间效率。选择对的方法，常用有：存取索引的、聚簇、HASH。4.2数据库的概念设计就是自下而上的对整个系统的结构进行设计。开发对视图进，集成，最后分析从而取得结果。设计时用(E-R)模型法的，实体、联系，属性，都是其中的元素，可用特定图来表达，是对环境中相关的事物提示。4.3数据库的E-R图概念模式的设计的方法主要是的基础是需求分析，本系统的E-R图如下图所示：实体间关系属性实体（1）留言评论信息实体E- R图，如图4-1所示：图4-1留言的评论的信息的实体图（2）帖子的信息实体E-

23、 R图，如图4-2：图4-2帖子信息实体图（3）美文信息实体E- R图，如图4-3所示：图4-3美文信息实体图4.4数据库表设计系统用的是MYSQL来存储，我们来说表的信息。表4-1 留言的评论表列名数据类型长度是否可空注释idbigint20否编号userbigint20是用户contentvarchar255是内容datedatetime20是时间表4-2 帖子信息表列名数据类型长度是否可空注释idbigint20否编号titlevarchar50是标题contentvarchar255是内容authorvarchar20是作者datedatetime20是时间表4-3 美文信息表列名数据

24、类型长度是否可空注释idbigint20否编号namevarchar20是名称typechar1是种类picturevarchar255是配图pricevarchar20是价格filevarchar255是文件authorvarchar20是作者commentvarchar255是备注5.微信小程序各功能的具体实现5.1系统界面设计5.1.1首页界面用户小程序登录后，首先进入首页界面，界面下方展示所有的操作栏以及可查看的美文信息，点击美文图片或是名称可以浏览选中的内容。其界面如图5-1所示。图5-1首页界面5.1.2 美文详情页面用户可以查看美文详情信息，界面展示美文标题，配图，介绍以及价格信

25、息，可以直接购买美文，加入收藏或是进行评论，评论信息展示在下方，购买完毕后可以进行阅读。其界面如图5-2所示。图5-2美文详情界面5.1.3 检索界面用户可以在检索页面根据热词搜索美文信息，点击美文列表可以查看美文详情。其界面如图5-3所示。图5-3检索界面5.1.4 论坛的界面用户可以根据关键字搜索帖信息，可以发布自己文章，可以查看他人的内容进行回复，互相进行交流，其界面如图5-4所示。图5-4论坛界面5.1.5 帖子详情界面用户可以查看帖子详情，页面展示帖子标题，内容以及发布时间等信息，下方展示回复信息，可以提交回复内容。其界面如图5-5所示。图5-5帖子详情界面5.1.6 我的订单界面用

26、户可以查看自己的订单信息，列表展示订单时间，美文名称以及价格信息，点击右侧箭头可以查看订单详情。其界面如图5-6所示。图5-6我的订单界面5.1.7 美文阅读界面用户可以阅读购买的美文内容，可以点击按钮，进行上一页以及下一页的操作，可以返回上一页面，其界面如图5-7所示。图5-7美文阅读界面5.1.8 资讯列表界面用户可以查询最新的资讯信息，可以根据关键字进行搜索，可以点击列表查看资讯详情。其界面如图5-8所示。图5-8资讯列表界面5.1.9 浏览历史界面用户可以查看自己的浏览历史，点击箭头可以查看详情。其界面如图5-9所示。图5-9浏览历史界面5.1.10 帖子列表界面管理员可以管理用户提交

27、的帖子信息，可以根据帖子标题进行筛选，可以执行审核以及删除操作。其界面如图5-10所示。图5-10帖子列表界面5.1.11 留言评论列表界面管理员可以管理用户提交的留言评论信息，可以根据评论的时间进行搜索。其界面如图5-11所示。图5-11的留言的评论的列表的界面5.1.12 订单的管理界面作为管理员能管用户购买美文的订单信息，可以执行删除操作。其界面如图5-12所示。图5-12的订单的管理的界面5.2 小程序核心代码5.2.1 app.js代码JavaScript文件它提供了它的语法来操控文本和数组还有日期以及正则的表达式app.js代码如下，description: 项目配置文件。,set

28、ting: urlCheck: false,es6: true,postcss: true,minified: true,newFeature: true,compileType: miniprogram,libVersion: 1.9.1,appid: wx2106d56eae24772e,projectname: wechatapp,isGameTourist: false,simulatorType: wechat,simulatorPluginLibVersion: ,condition: search: current: -1,list: ,conversation: current

29、: -1,list: ,game: currentL: -1,list: ,miniprogram: current: -1,list: 5.2.2 app.json代码JSON文件作为JavaScript 的对象简谱，让我们阅读和编写起来很容易，同时也便于机器生成和解析，很好地提升了网络的传输的效率。app.json的代码如下： pages: pages/index/index, pages/logs/logs, pages/scanCode/scanCode, pages/myObj/myObj , window: backgroundTextStyle: light, navigatio

30、nBarBackgroundColor: #333, navigationBarTitleText: , navigationBarTextStyle: white , sitemapLocation: sitemap.json, permission: scope.userLocation: desc: 你的位置信息将用于小程序位置接口的效果展示 5.2.3 app.wxss代码WXSS文件作为全局样式，决定了组件应该如何地显示，并在css的基础上做了一些功能扩展。尺寸的单位，样式的导入都包括在内。app.wxss代码如下：/*app.wxss*/.container height: 100

31、%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; 5.2.4 project.config.json代码作为项目布局的指定配置，起到了举足轻重定义界面的巨大作用。project.config.json代码如下：description: 项目配置文件。,setting: urlCheck: false,es6: true,postcss: true,minified: tr

32、ue,newFeature: true,compileType: miniprogram,libVersion: 1.9.1,appid: wx2106d56eae24772e,projectname: wechatapp,isGameTourist: false,simulatorType: wechat,simulatorPluginLibVersion: ,condition: search: current: -1,list: ,conversation: current: -1,list: ,game: currentL: -1,list: ,miniprogram: current

33、: -1,list: 5.2.5 sitemap.json代码网站地图的脚本为搜索引擎蜘蛛而指路，增加了网站的内容和页面的收录。sitemap.json代码： desc: 关于本文件的更多信息，请参考文档 rules: action: allow, page: * 6.系统测试系统测试是软件设计的点睛之笔，非常重要。来检查软件的质量、性能、可靠性是否符合使用的人的需求。一套规范的、完善的、严谨的测试的过程大大提高了软件的质量、可靠性、可信度，降低出错率和用者的风险系数。通常，系统的测试包括：功能的测试，安全的测试，可用性的测试，性能的测试、兼容性的测试。为了软件运行更稳，我对它全面测试，其中分

34、为二部分，一种是界面的测试；另一种功能的测试。首先说说界面的测试，界面测试是为了让程序在不同的的操作的平台上能运行界面，并能够保住原来的风格。经测试运行正常，运行界面上的字体，图片等都能保持得很好。不出现字体变形！其次进行的是功能的测试。采用的是单元测试，集成测试，完善性的测试。6.1测试的意义软件正式应用前，一定要经过许多次的测试，主要测试软件的内容是否和最初的设计符合，目前所有的功能是否好用，信息的展示是否正确，页面的展示是否美观，系统的操作是否简便，是否符合用户操作网站的习惯。如果系统无法通过测试，则该系统无法进行应用，系统可以经过测试，测试出许多的缺陷，从而进行完善，让系统更加的具有使

35、用价值。6.2测试方法单元的测试：把系统分各大模块，轮流进行测试，主要的看里面功能合格与否。 循环测试：将测试后的内容，再次进行测试，应用不同的形式进行测试。 集成测试： 将整个系统统一的进行测试，根据各个业务的联通，测试数据的流通是否正确。6.3测试用例表6-1发布评论模块测试用例用例编号测试用例描述操作过程及数据预期结果测试结果N001输入正确消息内容按照原则输入消息内容，点击提交按钮提示成功发布，可以在美文详情查看到内容通过N002选择超过500字的内容输入500字的评论信息系统提示评论内容过长通过N003输入空的内容信息循系统既定规则后填写空的内容信息，点击提交按钮系统提示请输入评论内

36、容通过表6-2收藏模块测试用例用例编号测试用例描述操作过程及数据预期结果测试结果F001点击收藏按钮点击收藏按钮提示收藏成功，收藏模块具有收藏信息通过F002取消收藏再次点击收藏按钮，取消收藏提示取消收藏成功通过表6-3美文管理模块测试用例用例编号测试用例描述操作过程及数据预期结果测试结果T001点击新增按钮，填写正确的美文信息按照系统流程录入正确消息系统提示提交成功，可在首页中查看通过T002点击修改，修改美文内容按照系统流程改动消息内容系统提示修改成功，美文内容改变通过T003点击删除按照系统流程点击删除按钮，删除美文首页列表刷新，不展示已经删除的美文内容通过6.4测试总结本美文赏析平台，可以实现用户查看美文，阅读美文以及发帖的需求，数据均是同步显示，信息统一，数据有效，为美文赏析带来方便，提供平台。结 论本系统通过对wxss，MYSQL数据库，jsp的简介，硬软件两面说明了该平台的可行性，研究的成果有：实现了相结合构建的美文赏析平台。因为以前我对于JSP以及wxss知识未能做到深入了解，碰坎坷，页面显示不对，、连接出问题，参数传递不了，我的同学的帮助，让我解决了问题，过程中，我学到了很多知识，也提高了本人解决问题的能力，特别是学会如何从天大的信息中选出对我有用的，同时我更加深刻的体会到了，虽然书本上的知识有价值正确的，但每个人来编程