博主最近學習一個仿推特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">×</span>
</div>
</c:if>
<c:if test="${display == 'stop' }">
<div id="tixing">
<span class="tishiyu">該用戶已凍結！如需繼續使用服務，請前往xxxx.twitter.com申請解封。</span><span
class="cha">×</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;
}
以上是該項目登錄註冊功能的詳細代碼，分享給大家
碼字不易，給個讚唄。
