基于微信小程序的宠物社区的设计与实现.docx
《基于微信小程序的宠物社区的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于微信小程序的宠物社区的设计与实现.docx（32页珍藏版）》请在冰豆网上搜索。
基于微信小程序的宠物社区的设计与实现
摘要
在当下网络的不断发展，互联网逐渐成为人们彰显个性、结交好友的重要平台。
而传统的社交网络已不是人类的独有物，与我们生活在同一屋檐下的宠物也开始走入社交网络。
本文中来介绍的宠物社区是一个以宠物为主题的微信小程序，选用的是JFinal+ide作为开发环境，MySQL作为后台数据库支持，实现了汪牌注册、登录、添加贺卡、添加宠物信息、发布宠物信息、添加宠物犬养护知识等功能。
为爱宠物之人提供了一个“以宠物会友”的平台。
关键词：
宠物社区JFinalMySQL数据库
Abstract
WiththecontinueddevelopmentoftheInternet,theInternetgraduallyshowspeople'spersonalityandisanimportantplatformformakingfriends.Traditionalsocialnetworksarenottheonlyhumanbeings,andpetslivinginthesamehousewithusarealsoincludedinsocialnetworks.
Thepetcommunityintroducedinthispaperisapetchatbasedwechatprogram.SelectJFinal+IDEasthedevelopmentenvironmentandselectMySQLasbackstagedatabasesupport.Itrealizesthebrandregistration,loginfunction,addgreetingcards,addpetinformation,publishpetinformationandaddpetdogmaintenanceknowledge.Makeapetandafriendprovideaplatformforpetlovers.
Keywords：
PetCommunityJFinalMySQLdatabase
第一章绪论
1.1宠物社区的发展背景
人们惯有的思维，过去很久其实都认为网络空间只是一个人们使用的这么一个空间。
只是提供给人们拓展眼界娱乐或搜索信息的地方罢了。
但是现在的社交平台已经通过时代爆炸指数式地发展，日新月异下，社会网络的出现，逐步通过交融，而成长为一个与现实世界紧密相连的全新世界，这也是成为了一个从虚拟到现实的社交平台空间。
往前面时代变迁来看，通常大家伙之间的沟通联系谈话，其实都是发生在一定的时间和空间之中，也算是即时通信，而现在的网络体系在新的发展维度下，打破了以往我们人们印象中传统的时空界限，显然地改变了以往的传播方式。
突兀间，现在的人们在这澎湃的信息狂潮当中，通过社交网络建立联系，各厂之间开发的平台，例如微博、微信朋友圈、贴吧等等，通过这些社交平台，打破了新人类的感官思维，处理方式，人们可以随时随地记录生活、通过扮演花枝招展的角色，与其他人交流。
而同时随着时代浪潮的发展，宠物在人们心中的存在价值不低，越来越多的人们开始喂养宠物。
研究发现，宠物对个体心理健康的作用是一个热门话题,其中最为人所津津乐道的是宠物对饲养者,特别是对那些有生理、心理障碍的饲养者,有促进他们康复的作用,而对其他特殊人群,如老年人也有提供情感支持的作用。
[1]那对养宠物的人来言，心灵上的慰藉，精神上的亲近，自然而然地把宠物当作家庭的一份子，情感上的寄托，他们喜欢在社交媒体上分享宠物生活的乐趣。
而同样对于其他也喜欢宠物的人来言，关注社交网络中可爱的宠物，你可以增添一份生活乐趣[2]。
然而现今来看，宠物社交平台比较少，人们的注意力更集中在自己和其他人身上，所以大家伙们主要是通过一些比较成熟的平台来为炫耀自己的宠物。
以此来向远处看去，与年轻人最常用的微信平台相结合，开发了一个以宠物为主题的微信小程序—宠物社区。
1.2宠物社区开发目的与意义
宠物社区是一个基于微信小程序的宠物社交平台。
在这个平台上，爱宠物的朋友们可以通过自己的微信注册成为会员，登录以后，用户可以添加汪牌信息、添加宠物犬详情、管理宠物犬养护知识、查找汪朋狗友、关注汪朋狗友、查看汪朋狗友列表、收藏汪的文章等等。
除此之外，养宠物的朋友还可以随时展示出宠物特色。
第二章开发环境与操作平台介绍
2.1MySQL简介
宠物社区用户通过手机小程序可以看到宠物社区的各个界面，小程序这种开发模式容易，从而减轻了维护系统和系统升级的成本，降低了用户的使用成本。
MySQL是管理内容最好的选择，MYSQL是一款Opensourcerelationaldatabasemanagementsystem。
MYSQL具有良好的可移植性，它可以适应快速变化的环境。
2.2JFinal技术介绍
JFinal是基于Java语言的快速网络开发结构，其最主要的核心设计目标是开发迅速、代码量少、学习简单、功能强、易扩展、Restful。
在拥有Java语言所有优势，还拥有ruby、python等动态语言的开发效率。
2.3小程序介绍
小程序开发框架主要分成两部分：
逻辑层（AppService）和视图层（View）[3]，并通过JSBridage来作为这两部分的通信桥梁，在视图层与逻辑层之间进行数据传输和事件的交互响应[4]。
AppService逻辑层用来逻辑处理、数据请求、接口调用[5]，View视图层使用网络视图渲染页面视图。
当我们在开发调试与实现操作时，小程序文件的运行，实际上是通过逻辑层和视觉图层通过JS桥接器相互通信。
当逻辑页开始逻辑操作时，视图层需要相对地更新。
相反，按下连接到触发针的功能的触发按钮来触发。
对应地运行逻辑层中的函数。
微信小程序的文件结构主要是由根目录下的全局（App）的设置（在APP的页面下关乎着整个程序的页面）和多个page页面构成。
APP是小程序的公共根基，它拥有着app.js，app.json,app.wxss，三个文件构成，这几个文件呢分别各自是起到那在这文件中监听并处理相关有关的事件，全局页面的属性设置，全局页面的公共视图层样式。
在次目录中一般分为page目录和utils目录（工具目录）。
在page目录下，每个页面同时对应一个目录，而在这个分页目录下一般包含着4个文件，分别为.js，.wxml，.wxss，.json。
Js页是当前页面的逻辑层，wxml页面是用于编辑小程序中页面的结构，wxss用于编辑页面的样式，类似css，.json文件对应的时当前页面的属性,可使用特定的配置，或使用微信某些封装好的功能（比如引用封装好的插件）。
2.3.1小程序API
API（ApplicationProgrammingInterface应用程序编程接口）[6]。
开发者是事先定义的函数，开发者需要调用这些封装好的函数，不需要了解函数中的功能模块或该函数的源代码的实现，通过此界面直接在应用程序或硬件中实现该接口的功能，而微信小程序的API是基于微信的功能，正式应用只需要通过官方的API在逻辑层相互作用。
微信小程序的开发团队在这个领域整合丰富的各种功能块函数，通过官方的API直接实现多个功能。
例如，网络需求功能、数据交互功能、转发共享功能、本地存储功能、图像预下载功能等。
在许多情况下，开发者可以通过微信用的原始API功能性地交互。
这种情况下，开发者可以在短时间内开发性能大幅提高，开发时间周期更短。
第三章系统可行性分析
3.1技术可行性
正是在这种飞速蓬勃发展情况下，我们也是能够看到其计算机应用是愈发的要紧，各种应用软件也应运而生，且不断丰富。
在该这系统中，操控者更容易通过软件思想来运营和掌握使用方法，系统在用户进行操作的时候呢，所有重点的操场阶段都有相应的文字提示，操作十分简洁。
本系统是一套较完整的微信小程序程序，功能比较齐全，系统可以解决添加汪牌信息、添加宠物犬详情、管理宠物犬养护知识等实用性问题。
3.2经济可行性
软件的经济潜力是指软件的经济影响是否适合投资于设计。
同时，我们也可以判断该软件是否能真正为用户提供足够的经济效益。
所开发的这个微信小程序宠物社区平台，我开发的旨在是为了方便热爱动物的用户，在微信平台方便他们交流的同时，更加方便快捷地使用与交互联系，带着这个最关键的管理想法的目的而进行设计的。
它是由我自己个人独立设计的，这实际上节省了很多团队中逐渐发开的成本，而且还提高了这段时间里的学习能力，同时开发了我的动手技能。
3.3操作可行性
小程序本身就依附在微信这个用户量庞大的流量平台，到现在五花八门万千种小程序的用户当中，他们是有很大一部分是通过裂变的方式取得。
总得看小程序方便快捷，使得很多公司想要能够傍上小程序这辆车，正是因为现在众多年轻人更多愿意使用的是微信而不是QQ，这强社交属性的关键属性之一，以及小代码且简单方便操作，融合两者的诞生，就能够来实现低成本的用户增长。
3.4需求分析
根据人们对于宠物的想法理解，以及确保能够在用户心中得到最新颖的体验，增添一些在其他平台上都能够体验过的普通简单功能，结合微信平台上特有的功能，正是微信运动，所以诞生出来的宠物社区小程序的主要功能模块：
汪牌、狗狗圈、我的设置。
1. 汪牌：
注册汪牌，显示汪牌；
2. 狗狗圈：
轮播宠物犬养护知识、宠物犬根据特性选择特定宠物犬；
3. 我的：
汪朋狗友、宠物犬写真、遛狗排行榜。
第四章系统的总体结构设计
4.1系统功能结构描述
4.1.1系统功能
表4-1“宠物社区”系统功能表
功能项
功能介绍
具体内容
注册汪牌功能
给用户为自己的宠物注册特有的名牌
通过填写宠物详细的内容信息，生成特定了数字编码诞生一个特有的名牌
狗狗圈功能
显示宠物犬养护知识功能
通过轮播图以及宠物犬当中的特定养护知识
宠物犬筛选功能
显示用户想要的宠物犬
通过复选按钮来选择用户想要固定特性后筛选出来的宠物犬
汪朋狗友功能
显示同样爱宠物人士的宠物信息
显示添加爱宠物人士好友的宠物信息
宠物犬写真功能
可以上传宠物的生活照片
可以通过点击名牌进入详细页面，上传编辑删除宠物的生活照片
遛一遛记录功能
可以查看遛狗的排行
结合微信运动生成遛狗数据，给宠物狗进行遛狗生成数据，产生排行榜
分享功能
转发分享功能
可以通过点击名牌进入详细页面，转发分享名牌给好友
添加贺卡功能
给用户生成一个贺卡
给用户生成一个贺卡，上面通过用户的名字随机生成一个保存在后台的祝福
4.1.2系统功能结构图
图4-1系统功能结构图
4.2数据库设计
数据库设计是在确定的DBMS过程对于给定的应用环境中，数据库系统结构、根据数据库的最佳结构和应用程序来构建数据库的程序，因此，从而能够好好地有效地存储这些个数据，以此来满足不同用户之间不同的各种的应用需求，像是信息要求和处理要求[8]。
4.2.1概念结构设计
在概念设计阶段中，从使用者的角度对数据进行查询，处理需求和制约，产生一个反映用户观点的概念模式。
[9]将概念模型转化为逻辑模型。
这个概念是在设计过程中独立设计的，使得所有阶段的任务都变得更加独特且单一个体。
我们在这里利用E-R图来对数据库的设计呢，来规范以及规划好一个设计，以小来见大，通过设计局部的E-R模式，使得我们数据库实体类之间相互联系，之后再组合到一个全局模式，通过下图标记的1-n，与n-n，分别对应的是一对多，以及多对多的关系，继而通过优化，最终得到一个完整的E-R图。
E-R图：
根据会员、文章、汪牌之间的关系得到会员、文章、汪牌E-R图：
图4-2E-R结构图
4.2.2数据表详细设计
基于宠物社区名字所建立的数据库名称为Superpet，包括的数据库表主要有以下几个基本表。
表4-2用户信息表
列名
说明
类型
备注
Id
编号
Int（4）
不允许空,主键
UserCode
用户名
char（100）
不允许空
Sex
性别
char（100）
不允许空
Age
年龄
Int（8）
允许空
Loacl
所在地
char（100）
允许空
QQ
QQ
char（100）
允许空
Email
邮箱
char（100）
允许空
Sign
个性签名
char（100）
允许空
Picture
照片
char（100）
允许空
表4-3宠物信息表
列名
说明
类型
备注
Id
编号
Int（4）
不允许空,主键
StuCode
昵称
char（100）
不允许空
Sex
性别
char（100）
不允许空
Age
年龄
Int（8）
允许空
StuFromSchool
兴趣爱好
char（100）
不允许空
Picture
照片
char（100）
允许空
Master
电话
char（100）
不允许空
Fans
粉丝数
Int（4）
不允许空
表4-4文章信息表
列名
说明
类型
备注
Id
编号
Int（4）
不允许空,主键
Title
标题
char（100）
不允许空
Content
内容
char（100）
不允许空
CreateTime
发表时间
char（100）
允许空
Writer
作者
char（100）
允许空
表4-5收藏表
列名
说明
类型
备注
Id
编号
Int（4）
不允许空,主键
UserCode
用户名
char（100）
不允许空
PetType
类型
char（100）
不允许空
表4-6关注表
列名
说明
类型
备注
Attentio
关注人
Int（4）
不允许空,主键
Attentiod
被关注人
Varchar（50）
不允许空
EachOther
相互关注
Int（4）
不允许空
第五章系统的详细设计
5.1小程序界面设计与核心功能实现
5.1.1“汪牌”页面
此页面为小程序的开启时的页面，也为首页，第一次进入时会判定用户是否第一次登入。
（a）先通过wx.login（）获取到用户登录的临时code,发送res.code到服务后台，获取到sessionkey和openid。
来实现用户登录功能。
（b）随后通过公共文件storageService文件中的TokenStorage方法保存accessToken。
（c）而该“汪牌”页面通过登录用户，获取该用户的宠物列表，获取用户的宠物个数，如果已经有过注册“汪牌”，则会刷新出来。
登录的详细核心逻辑代码具体如下。
wxlogin:
function（）{
varthat=this;
wx.login（{
success:
res=>{
//发送res.code到后台换取openId,sessionKey,unionId
if（res.code）{
RemoteDataService.wxLogin（{jsCode:
res.code}）.then（result=>{
if（result&&result.code=="000"）{
TokenStorage.setData（result.accessToken）;
that.checkSettingsStatus（）;
if（result.petsCount&&parseInt（result.petsCount）>0）{
that.getMyPetList（）
}else{
that.navToPetAddPre（）
}
}
}）.catch（err=>{
that.setData（{
loading:
false
}）;
}）
}
},
fail:
err=>{
console.log（err）;
}
}）
},
新登入的用户会看到注册狗牌的按钮，而注册成功之后，刷新页面会显示注册成功的狗牌，实际效果如图5-2所示。
图5-2首页“汪牌”页面效果图
点击注册汪牌之后跳转到注册汪牌页面，实际效果如图5-2所示。
图5-3注册“汪牌”页面效果图
注册“汪牌”页面，提供给用户为他们的宠物填写上详细内容信息，内容如上图所示，分别有上传宠物头像，输入名称，性别，体重，年龄，品质，是否绝育，以及个性描述。
（a）先通过wx.login（）获取到用户登录的临时code,发送res.code到服务后台，获取到sessionkey和openid。
来实现用户登录功能。
（b）随后通过公共文件storageService文件中的TokenStorage方法保存accessToken。
（c）而该“汪牌”页面通过登录用户，获取该用户的宠物列表，获取用户的宠物个数，如果已经有过注册“汪牌”，则会刷新出来，注册“汪牌”页面的核心逻辑代码具体可参照下方。
publicvoiddoLogin（）{
StringjsCode=getPara（"jsCode"）;
WxSessionVowxVo=WeixinKit.getWxSession（jsCode）;
if（!
StringUtils.isNotBlank（wxVo.getErrcode（）））{
LonguserId=UserService.me.saveOrUpdateUser（wxVo）;
StringaccessToken=HashKit.generateSalt（64）;
wxVo.setAccessToken（accessToken）;
wxVo.setUserId（userId）;
srv.saveToken（wxVo）;
Listpets=PetService.me.getUserPetList（userId）;
intpetsCount=0;
if（pets!
=null&&!
pets.isEmpty（））{
petsCount=pets.size（）;
}
renderJson（Ret.ok（"code",ConstantKit.CODE_SUCCESS）.set（"msg",ConstantKit.MSG_SUCCESS）.set（"accessToken",accessToken）.set（"petsCount",petsCount））;
}else{renderJson（Ret.fail（"code",ConstantKit.CODE_WX_FAIL）.set（"msg",ConstantKit.MSG_SUCCESS+wxVo.getErrmsg（）））;
}
}
5.1.2“狗狗圈”页面
在小程序的第二个页面当中，是狗狗圈页面。
效果如图5-5所示。
（a）上方的轮播图当中显示的是狗类相关资讯，点击轮播图会跳转到详细页面当中。
（b）下方为狗类选择，提供复选按钮进行选择，通过数据库中保存各个狗类的特性，在用户选择自己想要的特性，找出符合条件的狗，在页面刷新之后单独显示出来，进而能够查看其中关于这个狗狗更详细的内容，详细效果如图5-6所示。
图5-5轮播图内容页面效果图
图5-6选择狗类内容页面效果图
5.1.3上传页面
点击汪牌之后可以看到更详细的信息，该页面这里提供了图片上传功能，点击“上传写真”，实现上传图片功能，如图5-7所示。
图5-7汪牌详细内容页面效果图
图5-8写真集内容页面效果图
5.1.4图片裁剪上传功能实现
首先调用wx.chooseImage（）这个原生接口，获取到需要上传的图片，通过以下这段代码对其进行压缩图片处理，图片裁剪上传功能详细核心逻辑代码具体可参照如下。
wx.chooseImage（{
count:
1,//默认9
sizeType:
['compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:
['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success（res）{
constsrc=res.tempFilePaths[0]
//获取裁剪图片资源后，给data添加src属性及其值
console.log（"res.tempFiles[0].size==",res.tempFiles[0].size）;
self.wecropper.pushOrign（src）
}
}）
生成图片，avatar为裁剪后的图片临时路径，如果路径中有图片，则生成一个信息提示框显示正在上传，随后通过uploadType:
"petAvatar"将获取到的图片上传到服务器中。
然后通过引用import导入的remoteDataService.js公共文件。
调用当中暴露出来的接口中的uploadPetAvatar函数方法，
RemoteDataService.uploadPetAvatar（params, avatar, 'avatarFile'），获得返回的结果，通过console.log打印函数获得内容反馈。
通过json.stringify（）方法是将是JavaScript值的内容反馈转换为JSON字符串内容来保存，继而通过另一个公共文件common.js，
随即通过Router.redirectTo（"../dogedit/dogedit", params）;路由跳转返回到注册页面，图片生成功能详细核心逻辑代码具体参考如下。
getCropperImage（）{
letthat=this
that.wecropper.getCropperImage（（avatar）=>{
if（avatar）{
wx.showToast（{
icon:
"loading",
title:
"正在上传"
}）
//获取到裁剪后的图片，上传到服务器
letparams={
uploadType:
"petAvatar"
}
wx.showNavigationBarLoading（）
RemoteDataService.uploadPetAvatar（params,avatar,'avatarFile'）.then（result=>{
if（result&&result.code=="000"）{
//putintransferpara
console.log（that.data.pet）
console.log（that.data.petVali）
console.log（that.data.pet.avatar）
that.data.pet.avatar=result.fil
升级会员 