WEB期末大作业痒痒鼠游戏系统

拖了好久终于想起来把WEB的期末作业传上来，系统里面的所有图片素材都来自于阴阳师官网。
大一上金老师的前端开发技术做的大作业就是阴阳师主题了，大三的WEB开发还是阴阳师主题，真是不忘初心呢（虽然已经把阴阳师卸掉了）

开发环境

Eclipse jee 2019-12+Tomcat 9.0+MySQL
其中JDK为1.8.0_241版本

文件目录

看着很多，其实名字读起来很通顺的那些就是角色的名字，不占地儿。

数据库

先来讲讲数据库好了。总共有5个表。
y_character就是放角色的一些信息，比如说拼音、稀有度、觉醒前的照片（后来发现觉醒前的照片可以直接用拼音+.png来引用，所以这个等于白写）等等；

y_news放新闻的标题、新闻的摘要和新闻的发布时间。

y_product是购物商城里的一些商品，包括商品的名字、价格和评论。

y_user这是用户登陆注册的用户名、密码、性别和生日等等。

y_mycart本来是想写购物车功能的，但是没时间写555.

网页展示

在浏览器地址栏输入localhost:8080/yys/Index进入网页。
首先是一个轮播图，有四张图片轮流播的这种效果，左下角是一个看板娘（因为可爱所以加进来的），金老师还说之前在博客上查资料就是这个小玩意挡着字了哈哈哈哈哈哈。

然后就是四个功能的入口了，日文翻译不标准的话也不要骂我是机翻的:>
这四张图片倒是我自己设计的，但是素材依来自阴阳师官网（阴阳师不要告我拜托拜托）

对了右边的茨球点击一下是可以返回顶部的。
先来注册一下好啦。

这个是注册页面

如果验证码错误的话是会显示验证码错误的

注册成功后就会显示成功注册了。

点击去登录就跳转到登录页面。

登录成功之后就会跳转到首页，其中导航栏会显示用户名。

然后来看看抽卡部分。

点击抽卡之后，会出来一个旋转的魔法阵

就会跳转到随机的式神页面上

再抽一张

再抽一张

点击就可以跳转到详细的式神介绍页面。
点击导航栏上的式神录就跳转到式神录的页面上。

总共十个式神，其中3个SSR，4个SR，3个R，稀有度的出率大大提升。
点击一个不知火。

点击一下觉醒或者皮肤按钮就有不同的立绘。
下面是不知火的传记或者情报啥的。

可以看看可爱的山兔的多种皮肤。

山兔的传记！

山兔的情报。

然后是商城。令人遗憾的是没做购物车的功能。

然后是新闻资讯。

然后就是一条联名的资讯。

项目说明书

详细功能说明

2.1.1. 注册子模块

用户进入阴阳师游戏系统后需要进行注册才能访问其他子模块；
在注册子模块中，用户需要输入用户ID、用户密码、用户生日、用户性别等基本信息；
在信息填写完毕后需要进行验证码验证；
当验证错误时，系统会提示是用户名或密码不合法还是验证码错误；
用户注册成功后跳转到注册成功页面提示进行下一步操作。

2.1.2. 登录子模块

用户在登录子模块上需要输入用户ID和用户密码进行登录；
系统会结合验证码来提高安全系数；
当验证错误时，系统会提示是用户名或密码错误或者验证码错误；
用户登录后，跳转到首页，并且导航条中显示用户的ID名称。

2.1.3. 抽卡子模块

用户可以点击抽卡页面上的抽卡按钮，此时会产生一个随机数，并和数据库y_character中的式神名称、式神拼音、式神等级等属性一起存储到会话中。
在属性存储到会话的过程中，会有一个魔法阵转动的等待效果；
魔法阵转动结束后会跳转到抽卡结果页面，而这个页面会读取会话中的属性用来引用式神图片、式神等级和文字。
页面会有一个按钮可以跳转到对应式神的介绍页面，让玩家对抽到的式神有更多的了解。

2.1.4. 式神录子模块

在式神录模块中，会先显示式神的头像和名字；
用户点击式神的链接后会跳转到相应的式神介绍页面，在这个页面里有式神的在初始、觉醒、皮肤三个时期的不同状态图片，还有式神的传记文字，以及式神的战斗参数供玩家参考；

2.1.5. 商城子模块

商城子模块一个有六种周边产品的界面，用户可以查看产品的信息，因为没有做完整个购买流程就不详细介绍了。

2.1.6. 资讯子模块

在资讯子模块，用户可以看到阴阳师游戏系统的第一手消息，如系统更新、庆典活动等；
资讯子模块的列表采用了<c:forEach>标签，节省了复制相同页面并修改的时间。

设计环境

Eclipse jee 2019-12，photoshop，MySQL，Navicat Premium，Chrome，Visio，Tomcat 9.0, HelloFont等

数据库设计

数据库名称: yys
本数据库共5张表，如下所示
y_user：用户信息表
y_character:式神信息表
y_product:周边产品信息表
y_mycart:购物车信息表
y_news:新闻资讯信息表
具体表结构及说明如下:

使用的前端框架

bootstrap v4,jquery v3

JSP页面的说明

心得体会

这次大作业做的很艰难，一边是因为上课的时候没听太懂，对了想给老师提个建议，老师下次可以一边讲课一边开一下钉钉直播，如果课上没跟上的话还可以课下看看视频补回去，这样能更好理解。还有一个问题就是因为eclipse实在是太难用了，真的好奇怪，img文件夹里放的图片越多eclipse就越容易闪退，闪退就占了好长的时间。还有一个方面是Servlet有时候不能把别的复制一下再修改，不然不能往后台发送消息，我卡在这个地方很久，实在没办法才新建一个Servlet自己写，这样才能发送消息，下次应该试试IDEA。再就是我发现ajax的post方法下不能执行目标Servlet下的转发操作，后来就想到把数据传进session里进行共享，再用另一个servlet进行获取和转发。看起来很简单，但是卡我卡了很久，写的也很烦躁，不过还好坚持下去，用eclipse真的磨练意志。
还有很多的时间花在了设计图片上，有些图片是我从阴阳师官网上扒下来，自己去做图片，虽然没有什么艺术细胞但是还是在设计上花了好多时间，感觉还挺充实的。

github指路

指路：https://github.com/skeptical5/yys/tree/master
另外如果项目导入eclipse报错的话，可以参考一下@DistressRroke _chen的博客，之前导入老师的代码报错也用这个方法解决了，指路：https://blog.csdn.net/cms18374672699/article/details/83045754

WEB大作业大概就是这样，感谢马哥在元旦开始就督促我写WEB，拖延症确实需要一个严厉的陪读嘎嘎嘎嘎，答完辩之后就去西湖玩了圈，那边真的好好玩哦。然后第二天去了趟灵隐寺嘿嘿。