早教lnmp

基于VUE.
JS的早教系统的设计与实现基于VUE.
JS的早教系统的设计与实现专业:计算机科学与技术年级:2015级学生:蔡永芳指导教师:王苹摘要随着互联网技术的普及,人们对下一代的培养和教育越来越重视.
每个人必须从婴幼儿时期开始培育,婴幼儿时期是人脑部神经系统发育最快的时期,早期丰富的教育会促进一个人快速的成长.
通过早教能促进启蒙、益智、思维的全方位发展.
为促进婴幼儿发展,旨在解决婴幼儿早期教育问题,由此早教系统应运而生.
该早教系统是基于VUE.
JS框架设计,它能更好的实现数据的绑定和组件视图组合.
该系统实现了相册商城购买和收藏功能以及用户添加收货地址.
小游戏通过VUEX实现能够帮助婴儿获得认知.
欣赏音乐能够陶冶婴幼儿的情操,它是通过网易云音乐API获得音乐资源,利用audio标签实现音乐播放采用事件绑定制作音乐播放器.
观看益智类视频能够开发婴幼儿的智力,家长能通过浏览早教信息获取需要的知识,能够上传照片去形成记录婴幼儿成长点点滴滴的功能.
每天都可签到获取积分,积分累积到一定的数量就可实现抽奖的功能.
针对需求分析设计相对应的业务流程图和功能模块图以及合理的数据库表并测试.
这款早教系统实现了音视频播放功能、信息展示功能、游戏互动功能、商城基础功能、存储照片功能、用户添加收货地址、积分签到抽奖功能.
在系统的开发过程中,涉及到前端样式设计,美化界面,后端信息的整合和管理、建立数据库.
在MySQL数据库、PHP语言、Swiper插件和VUE框架的基础上对早教系统进行开发.
关键词:VUE.
JS早教PHP基于VUE.
JS的早教系统的设计与实现目录1绪论··································································································································31.
1课题的目的与意义····················································································31.
2研究现状································································································31.
3论文的组织架构·······················································································32相关开发技术的介绍········································································································42.
1VUE.
JS···································································································42.
2VUE-ROUTER···························································································62.
3SWIPER插件·····························································································62.
4PHP·······································································································63系统的需求分析················································································································73.
1项目需求································································································73.
2用户需求································································································73.
3可行性分析·····························································································84系统的设计·······················································································································94.
1系统整体设计··························································································94.
2角色功能模块························································································104.
3数据库设计···························································································115系统的实现·····················································································································165.
1关键功能模块实现··················································································165.
2其他功能模块的实现···············································································226系统的测试·····················································································································236.
1测试目标······························································································236.
2功能模块的测试·····················································································23结论································································································································30参考文献·····························································································································31基于VUE.
JS的早教系统的设计与实现1绪论1.
1课题的目的与意义由于当今的社会环境,人们越来越注重孩子的早期教育.
作为父母,养大一个孩子不容易,即使他们可能没有很好的文化素养,也知道孩子不能输在起跑线上.
特别是现在科学技术日新月异,不学习就落后的年代,早教就更被重视了.
所以,设计一款早教系统去普及早教知识尤为必要,同时移动手机改变了很多人生活的活动方式,为人们的平时生活带来了极大的方便,所以这也是一款手机端早教系统,这款手机端早教系统能提供健全的早教类知识、还有认知小游戏可以提高孩子的认知能力,还能看一些益智、睡前小故事视频等,同时还提供了纪念册商城,多种款式任你选择,此外父母还能记录属于你和孩子的青春回忆录.
1.
2研究现状目前,早教已经越来越受国家的重视,国家也推出了一系列的政策去扶持早教市场,如教育部基础教育二司在2016年第二次发布《教育部基础教育二司2016年工作要点》,提出要大力发展惠普早期教育,推进国家早期教育改革发展实验区建设.
所以早教市场还处于一个发展阶段,未来随着科技的发展和家长的重视,早教市场会迎来更大的发展机遇.
而且目前国家还全面开放二胎政策,这就更意味着早教市场将成为最受益的行业之一,总之早教市场还处于发展初期阶段,还具备着很大的发展潜力,设计一款早教系统也是必然符合当下的时代潮流.
1.
3论文的组织架构(1)绪论.
这个章节叙述了课题的目的与意义、早教市场现状以及论文的组织架构.
(2)相关开发技术的介绍.
这个章节论述了系统采用的技术如VUE.
JS、PHP语言、VUE-Router和Swiper插件.
(3)系统的需求分析.
这个章节叙述了系统所需要的最基础的功能、用户需要的功能、可行性分析.
(4)系统的设计.
这个章节描述了系统的整体设计、角色功能以及数据库设计.

(5)系统的实现.
这个章节具体的论述了系统的各个功能模块是如何实现的.

(6)系统测试.
这个章节主要叙述各个功能实现后测试的效果.
基于VUE.
JS的早教系统的设计与实现2相关开发技术的介绍2.
1VUE.
JS2.
1.
1VUE.
JS的基本概念VUE.
JS[1]是一套构建用户界面的轻量级渐进式框架.
我们可以通过添加组件系统、客户端路由(router)、大规模状态管理来构建一个完整的框架.
尤其是这些功能相互独立,又可以相互配合,可以在核心功能上去使用任意的组件、路由.
而且VUE没有很强力的主张去进行使用它的全家桶去开发,你可以让其他几个组件使用其他语言如JQ去开发也行.
2.
1.
2VUE.
JS的特点VUE.
JS具有5大特点:(1)简洁性.
VUE代码编写风格更加精炼,简单明了.
(2)轻量级框架,VUE的源码大小即VUE的生产版大小(min版)源码大小仅为72.
9KB,官网称gzip压缩版后只有25.
11KB,相比其他的开发平台,VUE更为小巧,再配合其他库方面也给了用户更大的空间.
(3)组件化.
VUE组件化[2]是VUE的一大亮点,通过某一组件的HTML,CSS,JS放入一个VUE文件中进行管理可以大大提高代码的维护性.
(4)数据双向绑定[3].
VUE提供V-model实现数据的双向绑定,即你在页面输入数据,VUE能获取到当前输入的数据,VUE代码编写的数据页面也能够直观的体现,这种双向绑定只需要一行代码就能够实现.
(5)模块化[4].
VUE能够结合一些第三方模块构建工具,如CommonJS、RequireJS、SeaJS,可以轻松实现代码的模块化.
2.
1.
3VUE生命周期和钩子函数VUE的生命周期[5]对于数据的挂载,动画渲染等都非常重要.
每个VUE实例被创建之前都要经过一系列的初始化过程,这个过程就叫做生命周期函数,生命周期图如图0-1生命周期函数图所示.
如图所示,beforeCrate函数是指组件实例刚被创建,组件el和data还未被渲染出来的时候.
经过beforCreate函数执行后挂载了数据、绑定事件等,然后继续执行Created函数,这个时候可以使用数据,一般可以在这个函数开始去获取后台的数据.
接者会去找实例或者组件模板,编译模板为虚拟Dom放入render函数去渲染,然后执行beforeMoute函数,这个虚拟Dom就被创建完成了.
接下来就开始执行Mouted函数去渲染所有的界面,所有的事件已经被挂载好,同时页面也能够显示所有的数据.
当组件基于VUE.
JS的早教系统的设计与实现的数据被更改后会执行beforeUpdate函数,新的虚拟Dom会比对上一次虚拟Dom重新渲染,当更新完成会执行upDated函数,数据已经更改完成,可以进行操作新数据.
当调用$destroy方法,才会去执行beforDestroy和destroy,一般都是配合清除定时器等事件使用.
图0-1生命周期函数图基于VUE.
JS的早教系统的设计与实现2.
2VUE-Router2.
2.
1基本概念VUE-Router[6]也就是路由,其意思是跳转或者指向.
当点击到某个按钮,就需要进行跳转到指定的页面,也就是映射问题.
路由基本有3个概念:Route、Routes、Router.
Route就是指一条路由,它是一个单数,也就是A按钮->A内容这是一条路由,B按钮->B内容这是另外一条路由.
Routes是一组路由,即把Route的每一条路由集合起来,形成数组,[{A按钮->A内容},{B按钮->B内容}].
Router就是一个管理者,当请求来了,按A按钮它要去哪里请求呢,这个时候就需要Router去routes去查找,去找到对应的请求内容,页面显示相映射的内容.
2.
3Swiper插件Swiper[7]插件是一款开源、免费、强大的触摸滑动插件,简单配置就能够实现移动端大部分滑动功能包括焦点图、tab、触摸导航等功能.
Swiper无需加载任何的公共库(如Jquery[8])即可运行,这也保证了Swiper的轻量和运行速度,当然也可以在加载了公共库的环境下安全运行,如Jquery、Zepto、Mobile等.
Swiper经过不断的更新换代,已经更新到了Swiper4,还有很多优秀的特性,如图片懒加载,这个功能加快了页面的打开速度,提高了Swiper的使用体验,而且Swiper4还保留了Swiper2的优秀特性,包括自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper.
2.
4PHPPHP[9]是一种强大的CGI脚本语言,可以直接写到超文本标志语言HTML中去.
PHP语言基于LAMP开源架构,在当前的门户网站中广泛使用NGINX服务器作为WEB服务器,它也像Apache服务器一样主要使用PHP语言开发,形成了LNMP开源架构.
PHP不但可以再开源平台上使用,也可以在Windows上运行.
PHP还是一种跨平台语言[10],不但可以在开源平台上进行使用,也能在一些闭源平台上使用,其语法和C语言相似,同时PHP具有简单易上手、能够进行快速开发、扩展性强、粘合性好,以及互操作性强等特点,取得广泛使用,收到程序员和业余爱好者的好评.

基于VUE.
JS的早教系统的设计与实现3系统的需求分析3.
1项目需求早教系统应该具备信息展示最基础的普及早教知识功能,同时需要音频和视频功能来丰富整个系统,并且系统也要推出一些互动功能,比如小游戏功能、商城功能.

早教系统具备功能需求:(1)需要登录去获取到用户信息,登录和注册的安全性要达到一定的级别.

(2)程序需要和青春回忆录类似功能去存储照片记录婴幼儿生长.
(3)去设计音频的播放界面,播放界面要干净整洁大方,同时音频存储的是一些抒情的钢琴曲或者儿童歌曲.
(4)从后台获取视频,前台要能够进行视频的播放,同时要进行视频的分类.

(5)需要去做互动类的小游戏,小游戏必须是益智类的小游戏能够提升儿童的认知能力.
(6)能够签到抽奖,同时要去判定每日一签以及达到相应的积分数才能抽奖.

(7)推出一款专门卖纪念册的商城,用户能够将商品加入购物车,结算后在提交订单并完成支付,后台能够获取购买状态.
(8)用户能够查看修改自己的收货地址.
(9)用户能够收藏自己喜欢的商品,并且有个相对应存放藏品的地方供用户查看.

3.
2用户需求现在市场上,早教移动端系统比较少,而且线下早教培训机构良莠不齐,并且父母才是孩子最好的老师,所以用户需要一款能够具备有记录、普及早教知识的,同时具备多种其他功能的移动端软件.
早教系统的用户需求:(1)用户需要知道一些最基础的早教知识功能;(2)用户需要一个功能去记录孩子的成长;(3)早教系统需要关于儿童益智的音视频去满足用户的其他需求不需要到其它软件去查找;(4)早教系统还可能需要一个购物商城去满足商业用途;(5)利用商城商业用途的同时还可以去做个签到抽奖去保持用户的一定流量.

基于VUE.
JS的早教系统的设计与实现3.
3可行性分析如今,智能手机已经遍及各家各户,人人都在使用智能手机,对于很多家庭来说,有了一款这样的系统就能够直接在家里进行教学,相比早教机构来说,父母才是孩子最好的老师,从情感上对于孩子的呵护会更仔细,投入也会更多.
这款系统提供了早教的科普知识,对于新时代的父母来说也是个福音不用去询问专业人员.
能够给孩子提供适应年龄的视频音乐,而不需要到各大软件去搜索.
还能够实时存储孩子成长的照片,构成青春回忆录一样的相册,作为配套开发了纪念册商城,里面有各式各样的纪念册,达到商业用途.

启动后,必须要填写手机号码以及相对应的手机验证码登录到首页才能进行一系列的用户操作,登陆后会有四个清晰的导航栏,界面整洁操作简单导航栏的第一个就是用户去存储照片记录回忆的地方.
第二个就是音频视频还有知识推广的地方.
第三个展示的是纪念册商城,所有的买卖交易全部都在这里,第四个是用户中心,用户信息的操作全部都集中在这一部分.
整个操作起来简单流畅,内容丰富,界面简洁大方,能够满足用户的操作.
基于VUE.
JS的早教系统的设计与实现4系统的设计4.
1系统整体设计本系统采用VUE.
JS去设计,用户需要通过登录才能进入首页面,用户可以进行签到抽奖,积分可以通过日常签到获取相对应的积分.
达到一定积分才能进行一次抽奖.
用户也能进行上传图片,和拍照去存储照片功能.
相册商城可以提供用户购买相应的商品,用户选取到喜欢的货物能进行收藏,购买还必须选取规格才能加入购物车,点击结算后,后台的管理员会获取用户的结算状态.
用户还能去播放音乐、视频以及浏览各种资料,而且都是免费提供不需要任何权限.
系统的流程图如图4-1业务流程图所示.
系统按照角色分类分为两大类,分别为管理员和用户.
根据角色的分类如图4-2角图0-1业务流程图基于VUE.
JS的早教系统的设计与实现色分类图所示.
4.
2角色功能模块4.
2.
1用户权限用户模块具有注册登录、积分签到抽奖、用户选择商品加入购物车、收藏和取消收藏商品和用户修改个人信息,并且用户能够免费浏览各种信息以及音乐和视频.
同时用户能够上传照片存储照片,在移动端也能够拍照存储即时照片,用户能够添加修改自己的收货地址.
用户还能够进行商品的收藏用户模块图如图4-3用户功能模块图所示.
4.
2.
2管理员权限管理员能够发布商品,对商品进行增加删除修改查询,还能够对商品进行分类.
也能图0-2角色分类图图0-3用户功能模块图基于VUE.
JS的早教系统的设计与实现够查看用户的简单信息,如手机号码(前几位和后几位)、昵称和注册时间保证用户的私密性.
能够进行禁用和编辑用户,还能够在后台添加用户.
当用户下单支付后,能够在后台看到订单的信息,当用户支付后,用户的订单状态为待收货.
支付失败,订单是处于待付款状态.
管理员能够发布、删除、修改、查询一系列信息,如早教的资料和视频等.
如图4-4管理员功能模块图所示.
4.
3数据库设计数据库顾名思义就是用来存储管理数据的地方,数据管理的目的是为了更容易简单的从大量的数据筛选有价值的数据实现信息共享,比如通过前端去获取筛选数据库的数据,需要使用对应的代码对数据进行搜索、计算获得对应的数据,然后利用前端的数据去实现美化数据,以至于数据不是很单调枯燥的呈现出来,让读者更容易、更愿意去看.
更直白的说,数据库就是由无数的数据表集合的一个容器,一个好的数据库就是要设计得合理,这样开发人员更容易去修改和构写代码,才不容易导致代码不合理,违背用户的操作意愿.
本系统主要数据库如下:admin_users表单设计.
管理员信息资料存储在此表单.
如表0-1admin_users数据表所示.
表0-1admin_users数据表字段名类型备注是否为空值是否为主键图0-4管理员功能模块图基于VUE.
JS的早教系统的设计与实现idint管理员id否Yusernamevarchar管理员账号否Nemailvarchar管理员地址是Npasswordvarchar管理员密码否Nnamevarchar管理员名字否Nmobilevarchar管理员手机是Nvatarvarchar管理员头像是Nremember_tokenvarchar保存登录是Ncreated_attimestamp首次创建时间是Nupdated_attimestamp修改资料的时间是Nstatusint状态否Nibrand_addresses表单设计,用户收货地址存储在此表单.
如表0-2ibrand_addresses数据表所示.
表0-2ibrand_addresses数据表字段名类型备注是否为空值是否为主键idint地址ID否Yuser_idint用户id否Naccept_namevarchar收件人姓名否Nmobilevarcha收件人手机号否Naddress_namevarcha省市区中文名否Naddressvarcha详细地址否Nis_defaulttinyint是否默认地址否Nupdated_attimestamp地址更新时间是Nprovinceint省份编码是Ndeleted_attimestamp地址删除时间是Ncreated_attimestamp地址新建时间是Ncityint城市编码是Nareaint区域编码是Nibrand_favorite表单设计,用户收藏商品存储在此表.
如表0-3ibrand_favorite数据表所示.
基于VUE.
JS的早教系统的设计与实现表0-3ibrand_favorite数据表字段名类型备注是否为空值是否为主键idint收藏表ID否Yuser_idint用户id否Nfavoriteable_idint收藏商品的id否Nfavoriteable_typevarcha收藏类型否Ncreated_attimestamp创建时间是Nupdated_attimestamp修改时间是Nibrand_user表单设计,用户信息资料存储在此表.
如表0-4ibrand_user数据表所示.
表0-4ibrand_user数据表字段名类型备注是否为空值是否为主键idint用户ID否Ynamevarchar用户名字是Nemailvarchar收藏商品的id是Nmobilevarchar手机号是Npasswordvarchar密码是Navatarvarchar头像是Nsexvarchar性别是Nstatustinyint状态否Ncityvarchar居住城市是Nbirthdayvarchar出生日期是Nnick_namevarchar昵称是Nremember_tokenvarchar是否记住是Ncreated_attimestamp创建时间是Nupdated_attimestamp修改时间是Nibrand_goods表单设计,所有商品信息详情存储在此表.
如表0-5ibrand_goods数据表所示.
基于VUE.
JS的早教系统的设计与实现表0-5ibrand_goods数据表字段名类型备注是否为空值是否为主键idint商品ID否Ynamevarchar商品名字否Nbrand_idint品牌id否Nmodel_idint模型id否Nmin_pricenumber最低售价否Nmax_pricenumber最高售价否Nsell_pricenumber销售价否Nmarket_pricenumber市场价是Nmin_market_pricenumber最低市场价格是Ncost_pricenumber成本是Nweightnumber重量是Nstore_numsint商品数量否Nimgvarchar商品图是Ncontentmediumtext移动端内容是NcontentpcmediumtextPC端内容是Nsynctinyint是否同步否Nwp_posts表单设计,文章信息资料、视频存储在此表.
如表0-6wp_posts数据表所示.
表0-6wp_posts数据表字段名类型备注是否为空值是否为主键idbigint文章ID否Ypost_authorbigint文章作者否Npost_datedatetime文章建立时间否Npost_contentlongtext文章内容否Npost_titleText文章标题否Npost_namevarchar文章名字否Npost_parentbigint文章父级否Npost_typevarchar文章类型否Npost_mime_typevarchar内容类型否Nshopping_cart表单设计,购物车存储在此表.
如表0-7shopping_cart数据表所示.
基于VUE.
JS的早教系统的设计与实现表0-7shopping_cart数据表字段名类型备注是否为空值是否为主键idint商品ID否Nnamevarchar商品名字否Nkeyvarchar根据商品ID生成的购物车key否N__raw_idvarchar根据用户随机生成的购物车__raw_id否Nuser_idint用户id是Nqtyint数量否Npricenumeric单价否Ntotalnumeric总价否Nstausvarchar销售状态是Nattributestext商品属性是Ncreated_attimestamp创建时间是Nupdated_attimestamp修改时间是N基于VUE.
JS的早教系统的设计与实现5系统的实现5.
1关键功能模块实现5.
1.
1登录注册界面的实现随着时代的更新,移动手机也随之快速发展,现在更多的是通过手机验证码去实现登录,方便快捷且安全性相较以前的简单注册更保密.
本系统登录注册采用了手机验证码的方式实现,当手机号码和验证码一致时,则会弹出登录成功界面.
如图5-1登录图5-2所示.
图0-1登录失败基于VUE.
JS的早教系统的设计与实现设计用户登录流程图,按照流程图去构写相应的代码,系统根据手机号码发送验证码,然后会判断是否发送成功,发送失败会弹出提示,发送成功不提示需用户等待一会.
输入验证码,验证码填写正确会进入相应的首页,否则弹出验证码错误.
如图5-3登录流程图所示.
图0-2登录成功图0-3登录流程图基于VUE.
JS的早教系统的设计与实现5.
1.
2音频播放功能的实现音视频的播放利用audio标签和video标签就能够实现,虽然实现播放容易,但更主要的是利用这两个标签自己去制作播放器,比如网易云音乐的播放器界面[8]那样.
Audio和video呈现的效果只是一个简陋的播放框.
系统想要的播放器界面是必须有歌单图片,有歌词,有个进度条可以快进快退然后还可以精准的播放上一首、下一首的功能.
而这些都是标签所不具备的.
所以自己制作了一个播放器界面.
如图5-4音乐播放器所示.
所有的音乐资源都来自网易云音乐网上提供的API接口,只需要去请求他的接口,就能够获取到网易云的音乐.
5.
1.
3商品发布功能的实现商品发布由管理员进行发布[6],发布商品需要先定义商品的分类管理,同时还得考虑到商品可能有不同的品牌,不仅如此,商品可能还有其他属性,比如尺寸、颜色等等,便可实现如图5-5添加商品所示.
图0-4音乐播放器基于VUE.
JS的早教系统的设计与实现商品发布一定需要填写的内容,如图5-6添加商品内容所示.
5.
1.
4加入购物功能的实现购物车的功能是模仿淘宝购物车功能,和淘宝类似,商品前面有个复选框,当你选中到某几个商品的时候,购物车总价格就会显示那几个商品相加的价格.
如图5-7加入购物车结算所示.
图0-5添加商品图0-6添加商品内容基于VUE.
JS的早教系统的设计与实现购物车右上方有个编辑,让用户可以进行删除购物车商品的操作,当点击编辑,最下方结算会变成删除.
然后勾选你要删除的商品.
在点击删除,便能进行删除用户所想要的商品.
如图5-8购物车商品删除所示.
图0-7加入购物车结算图0-8购物车商品删除基于VUE.
JS的早教系统的设计与实现5.
1.
5积分签到抽奖功能的实现积分抽奖是利用九宫格抽奖的方式来呈现的,抽奖的动画采用轮播图的动画效果来制作的.
签到需要判定系统一天只能签到一次,所以要根据时间来进行比较.
如果当前的日期比已经签到时候的日期大于等于1的时候就能够签到,反之则不行.
而且还要去判定100分才能够抽奖1次,否则不行.
流程图如图5-9积分签到抽奖流程图所示.
积分签到抽奖页面布局如图5-10积分签到抽奖页面所示.
图0-9积分签到抽奖流程图图0-10积分签到抽奖页面基于VUE.
JS的早教系统的设计与实现5.
2其他功能模块的实现5.
2.
1商品收藏功能的实现用户进入到商品页面的时候,如果对某个商品感兴趣,但又不急着购买,可以使用这个功能,当点击商品下方有个星星的收藏,星星点亮就是提示收藏成功,并且在个人的收藏页面也会显示相关的收藏东西.
当再次点击星星,星星不亮就是取消收藏.
这个功能是把商品存储到后台的收藏数据表中,然后在通过再一次的请求把收藏数据表中的内容一次性取出来放到界面中的个人收藏,当要进行取消收藏的时候,可以通过数据库唯一的指定ID去找到相应要删除的数据删除掉,即可实现商品的取消收藏功能.
5.
2.
2支付功能的实现支付的流程需要先加入购物车然后进行结算,结算完后会有一个订单需要用户进行确认,确认完成后提交订单,最后进行支付.
支付的流程图如图5-11支付流程图所示.
5.
2.
3添加收获地址功能的实现用户有个收货地址界面,同时用户必须填写相应的收货人、手机号码、省份编码、城市编码、区域编码、省市区中文名字、详细地址,是否设为默认地址,才能够保存地址,缺一不可.
缺了一项都会提示内容不能为空.
有了添加还不够,必须还满足用户能够修改地址,修改地址、所有的内容同样都不能为空.
图0-11支付流程图基于VUE.
JS的早教系统的设计与实现6系统的测试软件测试一般分为2种,一种是黑盒测试,这种即使不是程序员,不懂编程代码,只需要按照系统功能的模块一项一项去测试即可,比较直接简单.
另外一种是白盒测试,就是需要从代码层开始测试,这种就比较专业性,这种需要发现代码的溢出、算法、溢出,进而加以改正.
6.
1测试目标通过黑盒测试,去比较直面的能够发现BUG,以达到系统所需要的完整功能,系统应达到下面需要的功能:(1)用户登录注册:用户输入手机号码并发送验证码,测试输入验证码是否正确,是否能正常登陆.
(2)积分签到抽奖:测试用户是否能够一天一签,并且用户达到100积分抽奖一次.
(3)购物车功能:测试用户把商品能否正常的加入购物车,并且在购物车中选中商品会进行自动累积金额,或者删除选中的商品.
(4)支付功能:测试用户支付后,后台的订单能否根据商品支付后显示未发货状态,或者商品未支付显示待付款状态.
(5)信息展示功能:测试信息能否正常的显示.
(6)音视频播放功能:测试音频和视频能否正常的播放,音频是否拥有简单音乐播放器具备的所需功能.
(7)收藏功能:测试用户是否能够进行收藏和取消收藏.
(8)存储照片功能:测试用户上传照片或者拍照能否进行存储下来.
(9)收货地址增加修改功能:测试用户是否能够添加收货地址和修改收货地址.

6.
2功能模块的测试6.
2.
1用户登录注册测试用户填写手机号码,发送验证码后,收到验证码如图6-1验证码所示.
基于VUE.
JS的早教系统的设计与实现填写相对应的验证码,才能够登陆,并且提示成功登陆跳转到相应的主页面,如图6-2登陆成功所示.
如果填写验证码错误则提示验证码错误如图6-3验证码错误所示.
图0-1验证码图0-2登陆成功图0-3验证码错误基于VUE.
JS的早教系统的设计与实现6.
2.
2积分签到抽奖测试积分抽奖当积分不足的时候,会弹出提示积分不足.
如图6-4积分不足状态图所示.
当积分足够的时候,点击抽奖就会有一个动画效果,点击停止的时候,抽奖会停止并显示抽到的东西.
如图6-5抽奖结果状态图所示.
6.
2.
3购物车功能测试用户能够把商品添加到购物车中,如图6-6购物车所示.
图0-4积分不足状态图图0-5抽奖结果状态图图0-6购物车基于VUE.
JS的早教系统的设计与实现用户能点击编辑结算就会变成删除,然后用户就能通过选择商品进行选择性的删除.

当删除后就会提示删除成功如图6-7购物车删除状态图所示.
6.
2.
4支付功能测试用户选购完商品加入购物车后,点击结算,确认订单后提交订单最后支付订单,弹出支付成功.
可以从后台进行查看.
后台状态为待发货表示支付成功.
支付成功如图6-8支付成功图所示.
图0-7购物车删除状态图图0-8支付成功图基于VUE.
JS的早教系统的设计与实现后台订单状态如图6-9支付成功后台状态图所示.
6.
2.
5信息展示功能测试当用户登录后能够进行去查看所有的早教信息.
如图6-10早教信息图所示.
6.
2.
6音视频播放功能用户能够进行最基础的音频播放和视频播放,而且音频播放必须拥有简单播放器的功能,如网易云播放器,能够进行歌词的查看,然后还可以拖动进度条,快进,上一曲下一图0-9支付成功后台状态图图0-10早教信息图基于VUE.
JS的早教系统的设计与实现曲的功能.
如图6-11音乐播放器所示.
6.
2.
7收藏功能测试用户能够收藏商品,并且收藏的商品还能够进行查看.
如图6-12用户收藏所示6.
2.
8存储照片功能测试用户能够进行上传照片,拍照然后存在系统里面,形成一个和回忆录类似的东西.
如图6-13上传照片所示.
图0-11音乐播放器图0-12用户收藏基于VUE.
JS的早教系统的设计与实现6.
2.
9收货地址增加修改功能测试用户有商城功能,必然需要一个收货地址功能,用户必须能够进行添加相应的地址,而且还需要修改功能.
如图6-14用户收货地址图所示.
图0-13上传照片图0-14用户收货地址图基于VUE.
JS的早教系统的设计与实现结论由于国家政策的扶持,早教市场蓬勃发展.
开发一款功能齐全、界面美观的早教系统是符合当下的发展潮流.
本系统是基于VUE.
JS来进行开发的,本系统可以分为七大模块,分别是相册商城、欣赏音乐、观看视频、上传照片、浏览信息、签到积分抽奖、小游戏等.
相册商城里具备了购买、收藏功能,音乐资源是通过网易云音乐API请求获得,播放器界面制作是通过模仿网易云音乐做成的.
信息和视频是通过wordpress去请求获得.
并且该系统每天都可签到,并获得相对应的积分,积累一定的积分可以进行抽奖.
小游戏功能是让宝宝通过一些简单的小游戏去获得认知.
通过前期的设计分析,学习相关技术,编写代码实现各个功能.
后期通过不断的测试和修改,达到最初的期望效果.
最后实现了登录注册、积分签到抽奖、音视频播放、信息展示、商城、收藏等功能,也实现了后台发布商品、信息存储等功能.
由于本人的技术以及时间有限,系统还存在不足,比如界面美工做得不是很美观,地址功能还不能够删除等等,在之后的生活中,我还会继续完善系统,增加自己的知识量.

基于VUE.
JS的早教系统的设计与实现参考文献[1]麦冬,陈涛,梁宗湾.
轻量级响应式框架Vue.
js应用分析[J].
信息与电脑,2017(7):58-59.
[2]陈陆扬.
Vue.
js前端开发快速入门与专业应用[M].
北京:人民邮电出版社,2017:89-94.
[3]朱二华.
基于Vue.
js的Web前端应用研究[J].
科技与创新,2017(20):119-121.
[4]肖睿,龙颖.
Vue企业开发实战[M].
北京:人民邮电出版社,2014:130-136.
[5]刘翔宇.
基于Vue的数据可视化系统的设计与实现[D].
北京:北京邮电大学计算机软件专业,2018.