CSU前端网站 +登陆系统

news/2024/5/20 12:29:18/文章来源:https://blog.csdn.net/m0_50226268/article/details/122508389

实现CSU网站主页,并设计实现一个简单全栈登陆系统

    • 实现要求
    • 短信验证码实现:臻子云
    • 关键功能解析
    • 运行结果

实现要求

1)前端页面的基本布局

  1. 布局类似于学校门户
  2. 顶部需有 LOGO 栏目;
  3. 提供轮播图;
  4. 提供账号密码登录方式;
  5. 提供手机号码(邮箱)+ 动态验证码登录方式;
  6. 登录成功后跳到类似CSU主页,并显示登陆用户;
  7. *提供忘记密码和修改密码功能;
  8. *提供用户的增删改查。(未实现)

2)完成前后端数据交互

3)数据操作要求:

  1. 数据统一存储在后端数据库中;
  2. 账号密码登录方式需进行验证,验证通过方能登录;
  3. 手机(邮箱)验证码需调用第三方短信接口发送验证码并进行验证;
  4. 后端实现技术不限、数据库系统不限。

短信验证码实现:臻子云

传送门
在这里插入图片描述
在这里插入图片描述

注册登录成功,在财务管理进行充值后,就可以根据开发文档使用API发送短信了

通过臻子云SDK开发文档就可以轻松利用API发送短信验证码啦
在这里插入图片描述
项目中导入臻子云官网下载的jar包后就可以使用相应的API进行短信验证码的发送(这里以Java开发为例)

  1. 下载jar包

  2. 导入jar包(IDEA为例)
    在这里插入图片描述
    在WEB-INF下新建文件夹lib统一存放项目中需要的依赖包,选中lib文件夹右键将其导入到项目中
    在这里插入图片描述

  3. 编写函数发送短信
    使用注册成功后申请的appId、appSecret初始化ZhenziSmsClient

    apiUrl为请求地址,个人开发者使用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()实现发送短信动态码。
jsp中发送Json数据的Ajax请求

Servlet中解析Json符合要求时发送短信动态码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_825224.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux中搭建静态网站(练习题)

在rhel8的系统上搭建网站:该网站ip地址主机位为11,设置documentroot为/www/你的名字拼音的缩写,网页内容为:my name is… 做题思路: #面对这类的题目,确定好做题思路: #配置题目要求的IP地址关…

搭建https的静态网站

搭建一个基于https://www.zuoye.com访问的web网站,网站首页在/www/https/,内容为exercise。 思路: #思路:准备好https所需要的东西关闭防火墙及SElinux创建目录编写网页内容编写配置文件https相关的东西: [rootloca…

网站架构方案全解析

1、HTML静态化其实大家都知道,效率最高、消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法。但是对于大量内容并且频繁更新的网站,我们无法全部手动…

[au3]下载css文件里的图片,保存别人的网站时有用。

;by onepc 153785587 #NoTrayIcon#Region ;**** 参数创建于 ACNWrapper_GUI ****#AutoIt3Wrapper_iconC:\windows\system32\SHELL32.dll|-123#EndRegion ;**** 参数创建于 ACNWrapper_GUI ****#include <INet.au3>#include <ButtonConstants.au3>#include <Edit…

老鸟传经:做网站的实用建议

做网站现在似乎是每个企业或团队都必做的一项工作了——不管你所在的行业是不是和互联网相关。我平均每周都会接到一两个朋友的电话问&#xff1a;我们要做一个网站&#xff0c;该用什么技术&#xff0c;PHP、Java还是.NET&#xff1f;我们该从哪里请开发人员&#xff1f;我们现…

可以判断用户打开页面次数吗?_SEO搜索优化,你可以不做外链吗?

自从2015年谷歌建立了Rainbrain&#xff0c;利用机器学习对内容分析与判断以后&#xff0c;很多SEO专家就开始讨论一个问题&#xff0c;SEO关键词排名&#xff0c;我们是不是可以不需要发布链接了&#xff0c;虽然百度也在一度强调&#xff1a;我们将逐渐摒弃技术排名的方法&am…

python抓取网站图片_实例详解Python实现简单网页图片抓取

本文主要介绍了Python实现简单网页图片抓取完整代码实例&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。 利用python抓取网络图片的步骤是&#xff1a; 1、根据给定的网址获取网页源代码 2、利用正则表达式把源代码中的图片地址过滤出来 3、根据过滤出来的图片…

大表多表关联查总数如何优化_咻咻SEO:网站上线前检查哪些内容,如何处理

前期准备工作&#xff1a;已完成站内优化可参考相关文章&#xff1a;一休&#xff1a;咻咻SEO&#xff1a;当网站收录不好&#xff0c;或兼职网站优化&#xff0c;开始优化前如何评测网站&#xff1f;​zhuanlan.zhihu.com网站上线前URL结构怎样优化&#xff1f;什么样的结构是…

用一朵云重建软件开发者的声望——讲述iTechTag网站的故事

&#xff08;本文发表于《程序员》2007年12期&#xff09; &#xff08;本文发表之后&#xff0c;iTechTag又有了较大的变化&#xff0c;请看 http://www.itechtag.com/feeds/46/blogs/92 &#xff09; 用一朵云重建软件开发者的声望 ——讲述iTechTag网站的故事 在接受In…

VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程

开篇语&#xff1a;最近在弄ocx控件发布到asp.net网站上使用&#xff0c;就是用户在使用过程中&#xff0c;自动下载安装ocx控件。&#xff08;此文章也是总结了网上好多人写的文章&#xff0c;我只是汇总一下&#xff0c;加上部分自己的东西&#xff0c;在这里感谢所有在网上发…

wp.qq.com set.html,WordPress网站设置第三方软件登录

WordPress网站当需要用户方便登录时&#xff0c;那么使用QQ、微信、微博这类第三方的信用软件登录不仅便捷也安全&#xff0c;那么该怎样为WordPress网站设置 第三方软件登录的方法呢&#xff1f;以下为具体设置内容&#xff1a;要想在互联网上登录&#xff0c;必须取得唯一id&…

大型网站架构阅读(一)架构演变

大型网站系统特点&#xff1a; 高并发&#xff0c;大流量 高可用&#xff0c;海量数据 用户分布式广泛&#xff0c;网络情况复杂&#xff0c;安全环境恶劣&#xff0c;需求快速变更&#xff0c;发布频繁&#xff0c;渐进式发展。 大型网站演变过程&#xff1a; 大型网站是从小网…

大型网站架构阅读(二)架构模式

1.网站架构模式简介&#xff1a; 随着网站架构的逐渐演变&#xff0c;在其为了解决高并发访问&#xff0c;海量数据处理&#xff0c;高可靠运行等问题&#xff0c;大型互联网公司提出了很多解决方案&#xff0c;这些解决方案逐渐形成了大型网站架构模式。 2.分类&#xff1a; …

大型网站架构阅读(四)网站架构高性能

网站性能&#xff1a; 网站性能是客观的指标,可以具体体现到响应时间、吞吐量等技术指标,同时也是主观的感受,而感受则是一种与具体参与者相关的微妙的东西,用户的感受和工程师的感受不同,不同的用户感受也不同。 1.不同角度下的网站性能&#xff1a; 用户视角的网站性能 …

大型网站架构阅读(五)网站架构高可用

可用性概述&#xff1a; 网站的可用性( Availability)描述网站可有效访问的特性(不同于另一个网站运营指标: Usability,通常也被译作可用性,但是后者强调的是网站的有用性,即对最终用户的使用价值),相比于网站的其他非功能特性,网站的可用性更牵动人们的神经,大型网站的不可用事…

大型网站架构阅读(六)网站架构伸缩性

网站伸缩性设计&#xff1a; 1.网站的伸缩性&#xff1a;不需要改变网站的软硬件设计&#xff0c;仅仅通过改变部署的服务器就可以扩大或者缩小网站的服务处理能力。 2.分为两类&#xff1a; 一 类是根据功能进行物理分离实现伸缩&#xff0c; 一类是单一功能通过集群实现伸缩。…

大型网站架构阅读(七)网站架构可扩展性

扩展性( Extensibility) 指对现有系统影响最小的情况下,系统功能可持续扩展或提升的能力。表现在系统基础设施稳定不需要经常变更,应用之间较少依赖和耦合,对需求变更可以敏捷响应。它是系统架构设计层面的开闭原则(对扩展开放,对修改关闭),架构设计考虑未来功能扩展,当系统增加…

大型网站架构阅读(八)网站架构安全性

随着网络技术的不断发展&#xff0c;实体交易逐渐的扩展位网上交易&#xff0c;这位很多大型互联网公司提功能很多赚钱的门道&#xff0c;网上各种平台铺天盖地适应这种趋势&#xff0c;但是&#xff0c;网络交易的安全性成为了各大互联网公司的重中之重。 常见的网络攻击手段…

大型网站架构阅读(十)秒杀系统架构分析

秒杀系统描述&#xff1a; 秒杀是电子商务网站常见的一种营销手段:将少量商品(通常只有一件)以极低的价格,在特定的时间点开始出售。比如一元钱的手机,五元钱的电脑,十元钱的汽车等。 秒杀活动的技术挑战&#xff1a; 1.对现有网站业务造成冲击 秒杀活动只是…

大型网站架构阅读(十一)网站架构总结

网站系统架构层次&#xff1a; 1.前端架构 前端是指用户请求到达网站应用服务器之间经理的环节&#xff0c;通常不包含网站业务逻辑&#xff0c;不处理动态内容。 浏览器优化技术 并不是优化浏览器,而是通过优化响应页面,加快浏览器页面的加载和显示…