课程名称：Web-Vue

课 程 报告

项目名称 待办列表-日记与便签-LOL英雄资料

班    级            

学    号                       

姓    名         刘建杰               

任课教师                        

开课学期：2021 至 2022 学年第 2 学期

完成时间： 2022   年  6 月  20  日

目录

一、安装运行说明.... 4

二、功能效果.... 4

1.注册与登录.... 4

1.1注册.... 5

1.2 找回密码.... 8

1.3 登录（验证码）.... 9

1.4 修改用户信息.... 11

2.待办列表.... 12

2.1待办列表页面.... 12

2.2增加待办项.... 13

2.3修改待办项.... 14

2.4删除待办项.... 15

2.5待办项状态改变.... 15

2.6待办列表排序.... 15

3.日记与便签.... 16

3.1日记与便签列表.... 16

3.2添加日记与便签.... 16

3.3编辑日记与便签.... 19

3.4删除日记与便签.... 21

4.LOL英雄联盟资料网页.... 23

4.1英雄列表页面.... 23

4.2英雄详情页面.... 24

4.2装备列表与详情.... 27

4.3召唤师技能.... 28

源码说明：

链接：Vue3待办列表-日记与便签-LOL英雄资料-课程大作业-Javascript文档类资源-CSDN下载

需安装模块：Json-Server，git使用地址：GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

并在代码中适当修改URL为本地链接

一、安装运行说明

因提交包括node_modules文件夹，所以无需额外安装第三方包，只需解压到目录，然后cmd窗口进入项目目录，运行npm run dev命令即可，如下图

1. Cmd窗口进入项目目录

1. 运行npm run dev命令

1. 在浏览器输入如上http://localhost:3001/地址即可

二、功能效果

1.注册与登录

输入如上地址后，进入首页，首页居中显示含有登录与注册的选项卡，默认展示登录的选项卡内容

1.1注册

点击“注册”选项卡，切换成注册选项卡内容，如下：

输入相应内容后，点击注册按钮后，先进行表单验证

(1). 昵称与密码：

不能为空；

长度必须在2~16之间；

(2) .确认密码：

必须与密码相同

(3).手机号

必须是手机号码格式

如不符合规则，会提示错误并且输入有误的表单自动聚焦

  

表单通过后，会验证用户名是否存在同名，同名会提示

如不满意，可以点击重置按钮重置信息

注册成功会切换为登录选项卡，提示“注册成功”信息并填好用户名和密码：

1.2 找回密码

在登录选项卡中点击“找回密码”按钮后，登录选项卡内容会变换如下

输入相关信息，点击确定后，会先验证昵称与手机号是否匹配，不匹配提示错误信息

若匹配成功则弹出用户的密码

1.3 登录（验证码）

登录必须输入验证码，验证码是会更新的，验证码不匹配也会提示

表单验证成功，会验证昵称与密码是否匹配，不匹配会提示信息

当昵称与密码匹配时才会登录成功，并且跳转到待办列表页面

1.4 修改用户信息

登录成功后在待办列表页面点击修改信息会跳转到修改个人信息页面

昵称改为“小建”点击修改，会根据修改结果提示

再点击返回按钮，待办页面也会更新为新昵称

2.待办列表

2.1待办列表页面

登录成功进入待办列表页面，页面显示当前登录用户的用户名和待办项，如下：

不同用户的待办项不同，如下是用户“小明”的待办任务项

可以点击返回按钮，返回登录页面，并且自动填好用户名与密码

2.2增加待办项

在文本框输入内容，点击提交按钮，待办项列表会增加此项

点击保存按钮，即可长久保存

2.3修改待办项

点击Edit按钮，文本框会显示待办名称，可以进行修改

点击提交后，即修改相应待办项，需点击保存按钮，才长久修改

2.4删除待办项

点击del待办项，可以删除相应的待办项, 需点击保存按钮，才长久删除

2.5待办项状态改变

点击status可以切换待办项显示状态

 

需点击保存按钮，才长久改变

2.6待办列表排序

点击待做在前按钮可以将待办列表按待办、进行中、已完成顺序排好序

点击完成在前按钮可以将待办列表按已完成、进行中、待办顺序排好序

3.日记与便签

3.1日记与便签列表

在Todo List页面点击日记便签按钮，跳转到日记与便签列表列表页面，每个用户的日记与便签列表不同，如下

3.2添加日记与便签

点击“增加”按钮，会进入添加新日记与便签页面

输入内容并点击返回后，日记与便签列表页面会更新过来，最新添加的在第一个

3.3编辑日记与便签

点击日记与便签列表项中的修改按钮，会进入修改日记与便签页面，文本域中显示原本有的文字

修改后，点击返回，日记与便签列表也更新过来了

3.4删除日记与便签

点击日记与便签列表项中的删除按钮，会弹出是否删除，点击确定后选定条项会被删除

删除成功后，会提示信息

4.LOL英雄联盟资料网页

只写以上的登录注册与待办列表、日记与便签后感觉内容有点枯燥，只是数据的增删改查，想有点动画显示，于是加上一个较小的英雄联盟资料网页。

（这里是拿以前PHP写的英雄资料改过来的，可以点击链接到CSDN 原blog：PHP-课程设计-LOL英雄资料网站_刘建杰的博客-CSDN博客）

在待办列表页面，点击”watch”按钮，可以打开LoL英雄资料页面，默认显示英雄列表页面，如下

4.1英雄列表页面

4.1.1 英雄分类

根据“刺客”分类

4.1.2 根据名称查询英雄

查找有“亚”字的英雄

4.2英雄详情页面

4.2.1 英雄详情

点击英雄头像可以进入英雄详细页面，展示相应英雄的背景故事、英雄属性、英雄皮肤。

 

4.2.2 英雄皮肤轮播

使用gsap库完成的动画切换，实现类似轮播效果

 

4.2装备列表与详情

4.2.1装备列表

在英雄列表页面中点击物品切换为装备列表

4.2.2装备分类与查询装备

移动速度分类

查询带有“合剂”的物品

4.2.3装备详情

鼠标移到不同物品上会显示相应的物品信息

4.3召唤师技能

点击召唤师技能选项卡后，会打开召唤师技能页面

4.3.1召唤师技能页面

4.3.2切换召唤师技能显示