layui 图片展示添加一个x_【学员作品】从零基础小白到一个人完成网站开发

本文以郭同学的个人游戏网站为例,展示了一个从零基础到独立完成前后端结合的网站开发过程。网站具备游戏收藏、点赞、评论、评星和搜索功能。在个人中心,用户可进行相关操作,管理员则能添加游戏资讯。文章讨论了项目中的难点、收获以及涉及的技术,如表单验证、layui插件、ajax等,强调了实践中巩固基础的重要性。
摘要由CSDN通过智能技术生成

f97519b068a9b41fac108112f12dabf6.png

大家好,我是课小妹~
7月8日,课工场D1901大数据班的同学们进行了作业答辩。

【作业要求】

此次作业将前端与后端结合,要求在2周时间内,将Web阶段的学习内容运用到项目制作中。

另外,与之前的分组合作不同,这次的网站作业将以个人形式进行。

时间紧,任务重,

一个人完成前+后两端的任务是个不小的挑战。

作业答辩时,同学们的网站有电影网、餐饮平台、户籍管理系统、生鲜超市等等类别。

课小妹以D1901大数据班郭同学游戏网站为例,

为大家展示展示作业效果,

一起来看看呢~

网站功能

The Function

e1dc7b25366a1ad4a871c00c4841221c.png

主体为游戏资讯网站展示游戏信息,可以实现收藏、点赞、评论、评星以及对游戏名称或标签进行搜索。

个人中心(后台)提供个人相关操作展示,

额外提供管理员账户,可添加新的游戏资讯以及因其他用户操作得到消息反馈。

这些也都是很多网站的主要功能,是基本雏形和框架。

具体功能展示

Showtime

网站结构:首页、游戏详情页、资讯页、个人中心。

映入眼帘的全屏大横幅海报右上角为登录入口,

登录方式为三种:手机、邮箱、账密。

263c84d30a0ef0495816c8efb6c59892.png

往下拉是游戏推荐,分为四块:类别、免费、上新、评分。

3bc938f7c171b056a906a359f34bdff1.png

b2c32071326403d0c3951f66b8909a49.gif

接着是3款预览游戏展示,且对应播放游戏视频。

3bc938f7c171b056a906a359f34bdff1.png

5a84ae97c78eada31ac9b9ce72b866c3.gif

下一部分是游戏评分栏,显示游戏标签和星级。

虽然点击和跳转等等功能正常,

但很明显在样式上郭同学划水了,

让后端工程师做前端就是这样的死亡设计···

感受下:

556663a69edbcadb65214bdd511bbc93.png

在这里点击某款游戏进入的是游戏详情页

展现形式包括视频、文字、图片

内容上为推荐介绍、星级、评论

右侧同类游戏推荐,来自数据库中对同标签游戏的抓取。

3bc938f7c171b056a906a359f34bdff1.png

6241d63fa2060682dbc5b9107eaf7923.gif

游戏视频下方的游戏图片可点击滑条切换。

3bc938f7c171b056a906a359f34bdff1.png

d224efad2e87c0ab71d6fd6ab97c50f0.gif

在登录状态下才可进行评分、收藏、点赞和评论等操作。

毕竟ID是驰骋网络世界的必需品噻。

(评论内容是个亮点哈哈哈哈)

b5ef26fcf8fb784ad31916310bcb0d3a.png

评论的时间为了展示效果而设置,有穿越实属正常~

6be35ee8fb5d83f087db70885bfe12bc.png

接下来去个人中心看看。

除了个人资料,个人中心还有你看上的游戏、评价和心愿单。

当然,这里也和前面的可怕样式一脉相承嘤···

4f281692692ad113ba5f190bb280e350.png

把它们拉变形到这个地步,

不怕这些游戏封面晚上来找你嘛!

b44b4106d65bb299783f2217404e5e50.png

郭同学笔记

1.涉及的小知识点
表单验证,过滤器,文件上传,JSTL标签,EL表达式,ajax,短信/邮箱验证码,video.js视频播放以及Layui分页及其他各类插件的使用等。

2.作业难点
业务逻辑层的关联很需要注意细节;
Layui插件的使用之初会有些不知所措,熟练之后很方便;
页面内容通过大量JSTL标签和EL表达式加载以及动态从ajax处获取数据,这些过程需要多动脑来思考,很容易遗漏细节。3.个人收获
web中有很多丰富的内容,这段时间的学习使自己也能够完成了一些以前在其他网站见到过的精致的效果。
还是那句话,基于现阶段对于java的认识想实现的功能就没有java做不到的,重点是自己想做出什么样的东西以及花费怎样的精力去实现。

总体来说,

网站想要展现的主要功能大体完成,

并都得到了实现(收藏点赞、留言评星、个人中心)。

71aca480e98e19c44744a88e152bef1d.png

同时,除了郭同学的游戏网站,还有宴同学的电影网

589d5218e49fda57cc93e6b31f0b738d.png

赵同学的图书管理系统:

e23e141622ac439df17bae0d3a679773.png

袁同学的博客(暗黑风,很有故事的样子)

9cb645d62422735c503b9e8faf8485ac.png

以及其余10多名同学的作业,因篇幅限制就不一一展出啦,

在小妹看来大家都超棒der!

一个看似简单的功能都是知识点的应用,

也希望大家在不同的项目中巩固基础,运用所学,

早日成长为独当一面的技术大佬~

【课工场成都】经典面试题、最新招聘、就业数据、学校环境···都在这里啦:

ac48a34fe6bc0fd0a7d9672b9067091a.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值