一、项目背景
- 用户的注册和登录,以及用户信息的修改。
- 答题系统的实现,用户可以做题,并查看正确答案。
- 学习平台的搭建,用户可以观看学习视频。
- 积分商城的实现,用户可以通过观看视频和答题获得积分,从而可以兑换商品。
以上所有功能都实现服务器和前端联动,数据通过mysql数据库进行存储。除此之前,还进行了细节的优化。
以下的图文仅作为自主研发的小项目的学习记录,重在思路。
二、StudyApp实现结果
1、MainActivity的四个页面
实现思路:MainActivity的四个xml界面通过适配器与viewPager绑定;底部菜单栏用了谷歌开源的BottomNavigationBar,从github中引入依赖。
2、注册登陆(包括个人信息的修改)
![](https://i-blog.csdnimg.cn/blog_migrate/022a7f12e558920f57b70e41e50095b5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c8be30c24b13b1bc8ea8362f9f585897.png)
![](https://i-blog.csdnimg.cn/blog_migrate/249e5a9305194250508e4336d4bc16e1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/845b59e95606c284683ddeabdc6c1c60.png)
![](https://i-blog.csdnimg.cn/blog_migrate/29aa74c8ad298166d3ae94d767673283.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a3943b6ac9e006964016bf4730514869.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6242d36458081a095a8b113791ff5de8.png)
- 答题页面
进入AnswerActivity后,所有的数据都将会被加载到三种类型的Fragment中,分别是ChoiceFragment、JudgmentFragment以及MultipleChoiceFragment。三种Fragment都将会通过AnswerPageAdapter被添加到该答题活动的ViewPager中。
![](https://i-blog.csdnimg.cn/blog_migrate/8e925d183c43d20fd2ad808cda2a97a0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f298818ed73331c9ef6c5f9bed21d51c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b72c6f4cabb59cae55c5ffc877b62d1c.png)
![单选题](https://i-blog.csdnimg.cn/blog_migrate/3b05dd4d30beb49a96ce2e0d5d62dfd2.png)
![判断题](https://i-blog.csdnimg.cn/blog_migrate/de5173e9d900970ae8a8bc7df7420533.png)
![多选题](https://i-blog.csdnimg.cn/blog_migrate/6a21d981defe7721156e0d588df01d02.png)
![提交](https://i-blog.csdnimg.cn/blog_migrate/5555f5b703c3122b503e769ae3affd51.png)
![解析](https://i-blog.csdnimg.cn/blog_migrate/d401f58d1f5a820a18c0d76278641f8a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f46601c0fe122acdf7261fde0901c931.png)
- 学习视频播放页面
![](https://i-blog.csdnimg.cn/blog_migrate/8d903e2f9b7f6b0fec53dc68d4421194.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fab41b56ef36ab14ac89801e49d07c82.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d352044276fe77c088e041fa90005e29.png)
![](https://i-blog.csdnimg.cn/blog_migrate/edf511455e642791006222480988b868.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ddaa75198124f2dca2890ae7f6d837b6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/815076ba0d643d5738d08011851aa406.png)
- 积分商城页面
![](https://i-blog.csdnimg.cn/blog_migrate/58c377d4f2a32e88f1cef85d0a5b3cb2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1ae78cce4dbca8fc74bdf10bf4852b3a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/25d8e9614c640e4127ef8f025be9e4b6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/68662812af9a4dd34a1245e06303a769.png)
![](https://i-blog.csdnimg.cn/blog_migrate/47598b78dea9e7e5344bc67fa4a8d242.png)
- 冷加载页面
冷加载页面用于处理请求页面需要加载大量网络视频或者图片,防止用户在等待过程中出现空白页,提供给用户更优的体验。我在初始登 录MainActivity和退出登录的时候用到该技术。我将该页面设置为StudyApp的logo。
![](https://i-blog.csdnimg.cn/blog_migrate/2211bc42b6b2609808e76ff31818eb1e.png)
三、使用的技术
- ListView、RecyclerView、CardView、WebView的使用。
- 自定义RecyclerViewAdapter、ListViewAdapter、AnswerPageAdapter的使用。
- 幻灯片放映,Banner类的使用。
- 计时器CountDownTimer类的使用。
- XUI框架的使用。
- 选择器Selector的使用。
- Nginx代理服务器的使用(如果请求网络视频或图片可以不用本地的反向代理服务器)。
- okHttp的使用。
- Bitmap加载网络图片、Glide加载视频和图片的使用。
- 线程锁,以及同步和异步请求的使用。
- 阿里巴巴fastJson技术的使用。
- 原生BottomNavigationBar的使用。
- 服务器使用Tomcat搭建的servlet实现。
四、有关配置
前端: Android Studio
后端: IntelliJ IDEA 2018.3.5
数据库: sqlyog、mysql
服务器:用户与数据库的交互采用servlet搭建的本机服务器(对应的功能如登录,需要一个Service和Servlet类即可),本地视频用nginx搭建服务器(视频需要下载放到Nginx文件目录下的html文件夹即可)。
ps:服务器和手机一定要在同一个局域网中哦!