javaweb开发的仿推特项目之登录注册功能

最新推荐文章于 2024-05-26 10:02:43 发布

彭祥.

最新推荐文章于 2024-05-26 10:02:43 发布

阅读量971

点赞数 5

分类专栏：经验积累

本文链接：https://blog.csdn.net/pengxiang1998/article/details/104155351

版权

经验积累专栏收录该内容

134 篇文章 6 订阅

订阅专栏

博主最近学习一个仿推特javaweb项目，其采用Jsp+Servlet的方式进行设计，MySQL数据库，Tomcat8服务，界面上十分美观，功能也较为健全，给大家分享一下：
项目地址
在这里插入图片描述

登录界面：
核心代码：login.jsp 其先会检查用户状态是否正常

<body>
	<div id="loader">
		<div>
			<ul class="zhuye">
				<li><img src="img/index.ico"><a href="index.jsp"><b>主页</b></a></li>
			</ul>
		</div>
	</div>

	<c:if test="${display == 'show' }">
		<div id="tixing">
			<span class="tishiyu">您的用户名和密码与我们的记录不匹配，请重新检查后重试。</span><span
				class="cha">&times;</span>
		</div>
	</c:if>
	<c:if test="${display == 'stop' }">
		<div id="tixing">
			<span class="tishiyu">该用户已冻结！如需继续使用服务，请前往xxxx.twitter.com申请解封。</span><span
				class="cha">&times;</span>
		</div>
	</c:if>

	<div id="body">
		<div id="shang">
			<div id="biao">
				<div class="deng">登录 Twitter</div>
				<form action="user.do?method=checklogin" method="post">
					<input class="txt" type="text" placeholder="邮件地址或用户名"
						style="margin-top: 20px" autofocus name="username" /><br> <input
						class="txt" type="password" placeholder="密码"
						style="margin-bottom: 20px" name="password" /><br> <input
						id="btn" type="submit" value="登录" /><br>
				</form>
			</div>
		</div>
		<div id="xia">

			<div>
				首次使用 Twitter?<span id="zhuce"> 现在注册 »</span>
			</div>
		</div>
	</div>
</body>
<script>
	$(".txt").val("");
	$(".txt").on({
		focus : function() {
			$(this).css("border", "1px solid rgba(29,141,242,1.00)");
		},
		blur : function() {
			$(this).css("border", "1px solid gray");
		}
	});

	$(".zhuye li").on({
		mouseover : function() {
			$(this).css("borderBottom", "3px solid rgba(29,161,241,1.00)");
		},

		mouseout : function() {
			$(this).css("borderBottom", "");
		}
	});

	$("#zhuce").on({
		mouseover : function() {
			$(this).css("borderBottom", "1px solid rgba(29,161,241,1.00)");
		},
		mouseout : function() {
			$(this).css("borderBottom", "");
		},
		click : function() {
			location = "register.jsp";
		}
	});

	$(".cha").on({
		mouseover : function() {
			$(this).css("color", "black");
		},
		mouseout : function() {
			$(this).css("color", "gray");
		},
		click : function() {
			$("#tixing").fadeOut();
		}
	});

	$("#btn").on({
		mouseover : function() {
			$(this).css("backgroundColor", "rgb(0, 109, 191 ,1.00)");
		},
		mouseout : function() {
			$(this).css("backgroundColor", " rgba(29, 161, 241, 1.00)");
		}
	});
</script>

UserServlet.java。验证用户登录

private void checkUser(HttpServletRequest request, HttpServletResponse response) throws IOException {

		String username = request.getParameter("username");
		boolean success = usersDao.checkUsername(username);

		if (success) {
			response.getWriter().print("no");
		} else {
			response.getWriter().print("yes");
		}
	}

UserDao.java 查询数据库验证并返回结果，若用户名密码匹配则存在即登录成功

public Users checkLogin(String username, String password) {
		String sql = "select uid, uname,  urealname, uaite, ustate, utime, uonline   from users where (uname=? and upwd=?) or (uaite=? and upwd=?)  limit 1";
		List<Users> list = DBUtil.query(Users.class, sql, username, password, username, password);
		if (list.size() > 0) {
			return list.get(0);
		}
		return null;

	}

注册功能的设计与实现：
register.jsp

<div id="body">
			<p style="font-weight: bold">现在就加入 Twitter。</p>
			<form action="user.do?method=register&order=second" method="post">
				<input class="txt" id="name" type="text" placeholder="姓名"
					name="name" maxlength="100" /><span class="check"></span><br>
				<input class="txt" id="username" type="text" placeholder="邮件地址"
					name="uname" maxlength="20" /><span class="check"></span><br>
				<input class="txt" id="password" type="password" placeholder="密码"
					name="pwd" maxlength="18" /><span class="check"></span><br>
				<div id="level" class="pw-strength">
					<div class="pw-bar"></div>
					<div class="pw-bar-on"></div>
					<div class="pw-txt"></div>
				</div>
				<input type="checkbox" checked="checked" /> <span class="dingzhi">根据你在网上哪里看过
					Twitter 内容来对 Twitter 个性化。<a href="" class="a"
					style="color:rgba(29,141,242,1.00)">了解更多</a>
				</span><br>
				<button class="btn" name="signup">注册</button>
			</form>
			<div id="zhengce">
				<span>注册意味着你同意<a href="" style="color:rgba(29,141,242,1.00)"
					class="a">服务条款</a>与<a href="" style="color:rgba(29,141,242,1.00)"
					class="a">隐私政策</a>，包括 <a href="" class="a"
					style="color:rgba(29,141,242,1.00)">Cookie 使用条款</a>。其他用户将可以通过你所提供的邮件地址或手机号码找到你。
				</span>
			</div>
			<div>
				<a class="xuan a" href="javascript:void(0)">高级选项</a>
				<div id="xi">
					<hr style="color: gainsboro">
					<div class="yun">
						<input type="checkbox" checked="checked">允许其他人通过我的邮件地址找到我
					</div>
					<div class="yun">
						<input type="checkbox" checked="checked">允许其他人通过我的手机号码找到我
					</div>
				</div>
			</div>

RegisterServlet.java
获取输入的账户信息，并保存到session中，注：此时并没有将用户信息进行数据库操作

String name = request.getParameter("name");
		String uname = request.getParameter("uname");
		String pwd = request.getParameter("pwd");
		String order = request.getParameter("order");
		pwd = Md5Util.getMd5(pwd);
		request.setAttribute("name", name);
		request.setAttribute("uname", uname);
		request.setAttribute("pwd", pwd);

		if ("first".equals(order)) {
			request.getRequestDispatcher("register.jsp").forward(request, response);
			return;
		}

		HttpSession session = request.getSession();
		session.setAttribute("name", name);
		session.setAttribute("uname", uname);
		session.setAttribute("pwd", pwd);
		request.getRequestDispatcher("next.jsp").forward(request, response);

其会跳转至next.jsp界面，当然这个完全是因为要模拟推特才做的
在这里插入图片描述
next.jsp 通过UserServlet的signup方法真正完成注册

$(function() {
		var slider = new SliderUnlock("#slider", {
			successLabelTip : "完成"
		}, function() {
			if ($("#txt").val() == "" || $(".check:eq(0)").html().indexOf("img/icon_tick_blue.png") < 0) {
				location.reload();
				return;
			}
			$(".yonghu").hide();
			$(".yuan").show();
			window.setInterval(function() {
				window.location.href = "user.do?method=signup&aite=" + $("#txt").val();
			}, 3000);
		});
		slider.init();

UserServlet.java的SignUp方法，调用数据库操作，在注册成功会自动登录后，跳转至start.jsp界面，此时，会连同session的数据一起显示，如用户信息，注册人数等

String name = (String) session.getAttribute("name");
		String uname = (String) session.getAttribute("uname");
		String pwd = (String) session.getAttribute("pwd");
		String aite = request.getParameter("aite");
		Timestamp utime = Times.getSystemTime();

		int n = usersDao.addUser(uname, pwd, name, aite, utime);
		if (n > 0) {
			ServletContext application = session.getServletContext();
			Integer zhuceNum = (Integer) application.getAttribute("zhuceNum");
			if (zhuceNum == null) {
				zhuceNum = 1;
			} else {
				zhuceNum += 1;
			}
			application.setAttribute("newTweetNum", zhuceNum);
			Users user = usersDao.checkLogin(uname, pwd);

			int m = usersinfoDao.addUserinfo(user.getUid());
			if (m > 0) {
				Usersinfo info = usersinfoDao.getInfos(user.getUid());

				String folder = request.getSession().getServletContext().getRealPath("/img/" + user.getUname());
				String img = request.getSession().getServletContext().getRealPath("/img");
				File file = new File(folder);
				file.mkdir();

				InputStream is = new FileInputStream(img + "/" + info.getUlogo());
				OutputStream os = new FileOutputStream(folder + "/" + info.getUlogo(), true);
				byte[] b = new byte[1024];
				int a = is.read(b); // 实际读到的文件的长度

				while (a > 0) {
					os.write(b, 0, a);
					a = is.read(b);
				}

				os.close();
				is.close();

				session.setAttribute("info", info);
				session.setAttribute("user", user);
				response.sendRedirect("start.jsp");
			}
		}

UserDao.java 将用户数据插入数据库

public int addUser(String username, String password, String urealname, String aite, Timestamp utime) {
		String sql = "insert into users(uname, upwd, urealname, uaite,utime) values(?,?,?,?,?)";
		int n = DBUtil.update(sql, username, password, urealname, aite, utime);
		return n;
	}

以上是该项目登录注册功能的详细代码，分享给大家
码字不易，给个赞呗。

彭祥.

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
4
评论
javaweb开发的仿推特项目之登录注册功能

博主最近学习一个仿推特javaweb项目，其采用Jsp+Servlet的方式进行设计，MySQL数据库，Tomcat8服务，界面上十分美观，功能也较为健全，给大家分享一下：登录界面：核心代码：login.jsp 其先会检查用户状态是否正常<body> <div id="loader"> <div> <ul class="zhuye...
复制链接

扫一扫