JFinal學習筆記（二）實現簡單的用戶登錄

原創

2020-02-21 04:30

經過了兩個多月的研究，在昨天終於將我的個人網站基本完成併成功的部署到了服務器上，網址是www.tcprogrammer.com，歡迎各位朋友訪問，如有問題可以在網站上給我留言。

言歸正傳，經過兩個月的研究和實踐，我對jfinal這個框架有了一個基本的瞭解，不得不說這是一個十分好用的、適合快速開發的j2ee框架，接下來我將把我在過去兩個月中學到的jfinal的使用方法和遇到的問題慢慢的進行總結。本文將從最簡單的用戶登錄方面來說明jfinal中最基本的Controller類和Model類的使用方法。

爲了實現用戶登錄首先要建立一個簡單的數據庫，我這裏用的是mysql數據庫，並利用navicat來進行的數據庫建立。這裏我將建立一個jfinal數據庫，並在其中建立一個account表，表內有四欄，分別是id，name，password，nickname，具體如下圖所示。

完成數據庫建立後就可以開始進行用戶登錄實現了，首先先建立一個jfinal環境的工程，步驟參考JFinal學習筆記（一）在Tomcat下的JFinal環境配置，這裏不再做說明。然後點此下載jar包，將其放入lib文件夾中。完成後先建立一個Account類，該類繼承自Model類用於實現與account表的ORM映射。其代碼如下。

<span style="font-size:18px;">import com.jfinal.plugin.activerecord.Model;

@SuppressWarnings("serial")
public class Account extends Model<Account> {
	public static final Account dao = new Account();
}</span>

然後在繼承了config的配置類中進行數據庫配置，本文是在JFinal學習筆記（一）在Tomcat下的JFinal環境配置中建立的項目中進行的配置，所以配置類就是TomcatConfig類，在該類的configPlugin方法中添加如下代碼來完成與數據庫的ORM映射的配置。

<span style="font-size:18px;">C3p0Plugin cp = new C3p0Plugin("jdbc:mysql://localhost:3306/jfinal",
				"root", "01491696");//該方法的第二個參數是數據庫登錄的用戶名，第三個參數是登錄密碼，請根據數據庫的配置情況進行調整
		me.add(cp);
		ActiveRecordPlugin arp = new ActiveRecordPlugin(cp);
		me.add(arp);
		arp.addMapping("Account", Account.class);</span>

下面開始製作登錄頁面，將原來的index.jsp中的代碼改爲如下代碼。

<span style="font-size:18px;"><%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>首頁</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="JS/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="JS/jquery.form.js" type="text/javascript"></script>
</head>

<body>
	<form id="loginForm" action="login" method="post">
		<label for="name">帳號：</label>
		<input type="text" id="name" name="name" />
		<label for="name">密碼：</label>
		<input type="password" id="password" name="password" />
		<input type="button" value="登錄" id="login" />
	</form>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#login").click(function(){
				$("#loginForm").ajaxSubmit({
					dataType: "json",
					success: function(data){
						if(data.flag) {
							window.location="manage";
						}
						else {
							alert(data.msg);
						}
					}
				});
			});
		});
	</script>
</body>
</html>
</span>

注意我因爲我的表單提交採用了jquery-form插件，因此要在項目中引入jquery-1.10.2.js和jquery.form.js兩個文件，點此下載。

然後在IndexController類中添加登路驗證方法login，代碼如下。

<span style="font-size:18px;">	public void login() {
		boolean flag = false;
		String msg = "";
		JSONObject json = new JSONObject();
		String name = getPara("name");//獲取表單數據，這裏的參數就是頁面表單中的name屬性值
		String password = getPara("password");
		Account item = Account.dao.findFirst("select * from account where name=?", name);//根據用戶名查詢數據庫中的用戶
		if(item != null) {
			if(password.equals(item.getStr("password"))) {//判斷數據庫中的密碼與用戶輸入的密碼是否一致
				flag = true;
				getSession().setAttribute("nickname", item.getStr("nickname"));//設置session，保存登錄用戶的暱稱
			}
			else {
				msg = "密碼不正確";
			}
		}
		else {
			msg = "帳號不存在";
		}
		json.put("flag", flag);
		json.put("msg", msg);
		renderJson(json);
	}</span>

然後再在IndexController類中添加一個manage方法，用於用戶登錄成功後的跳轉，代碼如下。

<span style="font-size:18px;"><span style="white-space:pre">	</span>public void manage() {
		render("manage.jsp");
	}</span>

最後在添加一個manage中的跳轉頁面manage.jsp，代碼如下。

<span style="font-size:18px;"><%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>登錄成功</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<%
	String nickname = (String) session.getAttribute("nickname");//獲取session中的用戶暱稱
%>
<body>
	<h1>登錄成功，歡迎回來<%=nickname %>！</h1>
</body>
</html>
</span>

至此用戶登錄的功能就實現了，運行後情況如下圖所示。