![f97519b068a9b41fac108112f12dabf6.png](https://i-blog.csdnimg.cn/blog_migrate/36370ac77edc2e0db4aba233c6bbab17.jpeg)
大家好,我是课小妹~
7月8日,课工场D1901大数据班的同学们进行了作业答辩。
【作业要求】
此次作业将前端与后端结合,要求在2周时间内,将Web阶段的学习内容运用到项目制作中。
另外,与之前的分组合作不同,这次的网站作业将以个人形式进行。
时间紧,任务重,
一个人完成前+后两端的任务是个不小的挑战。
作业答辩时,同学们的网站有电影网、餐饮平台、户籍管理系统、生鲜超市等等类别。
课小妹以D1901大数据班郭同学的游戏网站为例,
为大家展示展示作业效果,
一起来看看呢~
网站功能
The Function
![e1dc7b25366a1ad4a871c00c4841221c.png](https://i-blog.csdnimg.cn/blog_migrate/923ce9ce54758547b790d794793da3a3.jpeg)
主体为游戏资讯网站,展示游戏信息,可以实现收藏、点赞、评论、评星以及对游戏名称或标签进行搜索。
个人中心(后台)提供个人相关操作展示,
额外提供管理员账户,可添加新的游戏资讯以及因其他用户操作得到消息反馈。
这些也都是很多网站的主要功能,是基本雏形和框架。
具体功能展示
Showtime
网站结构:首页、游戏详情页、资讯页、个人中心。
映入眼帘的全屏大横幅海报右上角为登录入口,
登录方式为三种:手机、邮箱、账密。
![263c84d30a0ef0495816c8efb6c59892.png](https://i-blog.csdnimg.cn/blog_migrate/2cb0057642f13ddc3e353925832b6e2d.jpeg)
往下拉是游戏推荐,分为四块:类别、免费、上新、评分。
![3bc938f7c171b056a906a359f34bdff1.png](https://i-blog.csdnimg.cn/blog_migrate/74bae7e773386e609ac131d445a9a472.jpeg)
![b2c32071326403d0c3951f66b8909a49.gif](https://i-blog.csdnimg.cn/blog_migrate/0af8583ca704fef37e3ee316a26a45ad.gif)
接着是3款预览游戏展示,且对应播放游戏视频。
![3bc938f7c171b056a906a359f34bdff1.png](https://i-blog.csdnimg.cn/blog_migrate/74bae7e773386e609ac131d445a9a472.jpeg)
![5a84ae97c78eada31ac9b9ce72b866c3.gif](https://i-blog.csdnimg.cn/blog_migrate/cc7e4149034c0733d61bfa9b9a48dbb4.gif)
下一部分是游戏评分栏,显示游戏标签和星级。
虽然点击和跳转等等功能正常,
但很明显在样式上郭同学划水了,
让后端工程师做前端就是这样的死亡设计···
感受下:
![556663a69edbcadb65214bdd511bbc93.png](https://i-blog.csdnimg.cn/blog_migrate/90f7a05f502ff0c95e5f792b75c27a39.jpeg)
在这里点击某款游戏进入的是游戏详情页。
展现形式包括视频、文字、图片,
内容上为推荐介绍、星级、评论。
右侧同类游戏推荐,来自数据库中对同标签游戏的抓取。
![3bc938f7c171b056a906a359f34bdff1.png](https://i-blog.csdnimg.cn/blog_migrate/74bae7e773386e609ac131d445a9a472.jpeg)
![6241d63fa2060682dbc5b9107eaf7923.gif](https://i-blog.csdnimg.cn/blog_migrate/847a7c078ba31d0284962e432b489e2b.gif)
游戏视频下方的游戏图片可点击滑条切换。
![3bc938f7c171b056a906a359f34bdff1.png](https://i-blog.csdnimg.cn/blog_migrate/74bae7e773386e609ac131d445a9a472.jpeg)
![d224efad2e87c0ab71d6fd6ab97c50f0.gif](https://i-blog.csdnimg.cn/blog_migrate/f0775bafacb9b724e6b6db085c1429f5.gif)
在登录状态下才可进行评分、收藏、点赞和评论等操作。
毕竟ID是驰骋网络世界的必需品噻。
(评论内容是个亮点哈哈哈哈)
![b5ef26fcf8fb784ad31916310bcb0d3a.png](https://i-blog.csdnimg.cn/blog_migrate/002e31d9b99f80d9fa118c986b20702c.jpeg)
评论的时间为了展示效果而设置,有穿越实属正常~
![6be35ee8fb5d83f087db70885bfe12bc.png](https://i-blog.csdnimg.cn/blog_migrate/40e60a1621848faa6a5181f51b31262b.jpeg)
接下来去个人中心看看。
除了个人资料,个人中心还有你看上的游戏、评价和心愿单。
当然,这里也和前面的可怕样式一脉相承嘤···
![4f281692692ad113ba5f190bb280e350.png](https://i-blog.csdnimg.cn/blog_migrate/8ae74df94c7e698661cbbed5ab586bb3.jpeg)
把它们拉变形到这个地步,
不怕这些游戏封面晚上来找你嘛!
![b44b4106d65bb299783f2217404e5e50.png](https://i-blog.csdnimg.cn/blog_migrate/a76f87be249a1f2924964b4468a41fe8.jpeg)
郭同学笔记
1.涉及的小知识点
表单验证,过滤器,文件上传,JSTL标签,EL表达式,ajax,短信/邮箱验证码,video.js视频播放以及Layui分页及其他各类插件的使用等。
2.作业难点
业务逻辑层的关联很需要注意细节;
Layui插件的使用之初会有些不知所措,熟练之后很方便;
页面内容通过大量JSTL标签和EL表达式加载以及动态从ajax处获取数据,这些过程需要多动脑来思考,很容易遗漏细节。3.个人收获
web中有很多丰富的内容,这段时间的学习使自己也能够完成了一些以前在其他网站见到过的精致的效果。
还是那句话,基于现阶段对于java的认识想实现的功能就没有java做不到的,重点是自己想做出什么样的东西以及花费怎样的精力去实现。
总体来说,
网站想要展现的主要功能大体完成,
并都得到了实现(收藏点赞、留言评星、个人中心)。
![71aca480e98e19c44744a88e152bef1d.png](https://i-blog.csdnimg.cn/blog_migrate/2cc73d722a5d62cd833d4641e2fbf4be.jpeg)
同时,除了郭同学的游戏网站,还有宴同学的电影网:
![589d5218e49fda57cc93e6b31f0b738d.png](https://i-blog.csdnimg.cn/blog_migrate/9be54d1fb49a68fbdac219a3a3c3e86b.jpeg)
赵同学的图书管理系统:
![e23e141622ac439df17bae0d3a679773.png](https://i-blog.csdnimg.cn/blog_migrate/595cea61de35d6052d84d3e260804cd5.jpeg)
袁同学的博客(暗黑风,很有故事的样子):
![9cb645d62422735c503b9e8faf8485ac.png](https://i-blog.csdnimg.cn/blog_migrate/5625aca10077b4e270982867e54fb155.jpeg)
以及其余10多名同学的作业,因篇幅限制就不一一展出啦,
在小妹看来大家都超棒der!
一个看似简单的功能都是知识点的应用,
也希望大家在不同的项目中巩固基础,运用所学,
早日成长为独当一面的技术大佬~
【课工场成都】经典面试题、最新招聘、就业数据、学校环境···都在这里啦:
![ac48a34fe6bc0fd0a7d9672b9067091a.png](https://i-blog.csdnimg.cn/blog_migrate/e36b738f5345d405ff2778ee1c376030.png)