实现CSU网站主页,并设计实现一个简单全栈登陆系统
- 实现要求
- 短信验证码实现:臻子云
- 关键功能解析
- 运行结果
实现要求
1)前端页面的基本布局
- 布局类似于学校门户
- 顶部需有 LOGO 栏目;
- 提供轮播图;
- 提供账号密码登录方式;
- 提供手机号码(邮箱)+ 动态验证码登录方式;
- 登录成功后跳到类似CSU主页,并显示登陆用户;
- *提供忘记密码和修改密码功能;
- *提供用户的增删改查。(未实现)
2)完成前后端数据交互
3)数据操作要求:
- 数据统一存储在后端数据库中;
- 账号密码登录方式需进行验证,验证通过方能登录;
- 手机(邮箱)验证码需调用第三方短信接口发送验证码并进行验证;
- 后端实现技术不限、数据库系统不限。
短信验证码实现:臻子云
传送门
注册登录成功,在财务管理进行充值后,就可以根据开发文档使用API发送短信了
通过臻子云SDK开发文档就可以轻松利用API发送短信验证码啦
项目中导入臻子云官网下载的jar包后就可以使用相应的API进行短信验证码的发送(这里以Java开发为例)
-
下载jar包
-
导入jar包(IDEA为例)
在WEB-INF下新建文件夹lib统一存放项目中需要的依赖包,选中lib文件夹右键将其导入到项目中
-
编写函数发送短信
使用注册成功后申请的appId、appSecret初始化ZhenziSmsClientapiUrl为请求地址,个人开发者使用https://sms_developer.zhenzikj.com,企业开发者使用https://sms.zhenzikj.com
在平台中编写短信模板后,就可以调用函数发送短信验证码了
请求参数说明
关键功能解析
1.首页图片轮播与鼠标移动暂停轮播
通过设置计时器改变图片的显示状态实现图片轮播,同时更新相关联的按钮状态,设置监听onmousemove和onmouseout,实现鼠标移到图片时,销毁计时事件,当移走鼠标时重新创建计时事件。
2.首页导航栏的动态效果与“回到顶部”的动态显示与隐藏
通过函数检测滚动条滚动距离,当其距页面顶部距离等于banner模块到网页顶部距离时,通过函数更改header的className来实现不同类名下的header的高度height属性的更改,更改导航栏第一行菜单项display属性进行隐藏,再通过改变类名实现大logo与小logo的切换。
通过函数检测滚动条滚动距离,当其距页面顶部距离大于等于中南要闻模块到网页顶部距离时,显示“回到顶部”按钮,否则隐藏。
3.获取验证码后倒计时功能
通过编写Js函数创建计时器,更改传入dom对象的内容实现发送验证码时的倒计时效果,同时设置button属性为不可点击,保证倒计时结束前用户无法频繁再次请求发送短信验证码。
4.使用ajax异步请求短信动态码
请求动态码时,点击“发送动态码”触发onclick事件,同时判断手机号、学号等需要输入信息不能为空时,才允许发送验证码,通过函数serializeObject()函数获取输入框内容封装成Json字符串通过ajax异步传输给相应的Servlet,在Servlet中判断验证码是否正确,验证码正确时调用函数sendDynamicCode()实现发送短信动态码。
5.用户“修改密码”与“忘记密码”操作
用户忘记密码或修改密码时,首先需要输入学号、手机号,同时要求输入验证码与动态码,防止反复提交表单,通过学号(工号)、手机号验证是否存在该用户,若存在则可成功进行更改密码,否则失败返回登录界面。
6.用户从登录界面登录成功后跳转到首页并显示对应用户名称
用户登录成功时,将用户User对象存入对话Session中,页面跳转后读取Session中内容,若不为空则显示相应用户名
7.实现用户注销功能
用户点击注销时,对应Servlet注销Session中的登录信息,并重定向到登录界面。
8.通过Java的反射简化Servlet中doPost()方法判断请求参数调用不同函数而导致的大量if判断语句
父类BaseServlet中doPost()中获取前端传来的action参数的数据,再通过Class类的getDeclareMethod()获取Servlet中对应action方法的Method对象,再通过invoke()调用子类UserServlet中的业务方法完成登录注册等功能,实现根据前端action参数的不同而调用UserServlet中不同功能函数的目的。
运行结果
百度网盘分享
https://pan.baidu.com/s/11SImV3NAyCwXEI7vBK2GeA
提取码:kln8