2. 程式人生 > >JFinal與Qui學習筆記（二）

JFinal與Qui學習筆記（二）

阿新 • • 發佈：2019-01-09
Qui是一套網頁框架，效果不錯，不過剛剛接觸，難度還是非常大的！完全是新手，這不，到前10分鐘才完成一個簡單的使用者登入。

之前說的JFinal這裡要補充一下：玩了這麼久，底層的東西雖然都不知道，但是基本會用吧，自認為。。呵呵。

工作環境：myeclipse9，tomcat7，mysql，Navicat。嗯就是這些了吧。

在myeclipse中新建一個web project。新建若干包，這個若干好像比較欠打，不過的確挺多包的。。

包名類裡面的類名，可以從Java檔案中體現出來，就不多說了。

第一個檔案：

package com.my.config;

import com.alibaba.druid.filter.stat.StatFilter;
import com.alibaba.druid.wall.WallFilter;
import com.jfinal.config.Constants;
import com.jfinal.config.Handlers;
import com.jfinal.config.Interceptors;
import com.jfinal.config.JFinalConfig;
import com.jfinal.config.Plugins;
import com.jfinal.config.Routes;
import com.jfinal.ext.handler.ContextPathHandler;
import com.jfinal.ext.interceptor.SessionInViewInterceptor;
import com.jfinal.plugin.activerecord.ActiveRecordPlugin;
import com.jfinal.plugin.druid.DruidPlugin;
import com.jfinal.plugin.druid.DruidStatViewHandler;
import com.jfinal.render.ViewType;
import com.my.controller.MainController;
import com.my.model.User;
import com.my.util.UrlHistoryHandler;



public class MyBaseConfig extends JFinalConfig {

	@Override
	public void configConstant(Constants me) {
		// TODO Auto-generated method stub
		//載入全域性配置檔案
		loadPropertyFile("config.properties");        //載入配置檔案
		me.setDevMode(getPropertyToBoolean("dev_model"));//從配置檔案中獲取dev_model引數，此處為true
		me.setEncoding(getProperty("encoding"));          //從配置檔案中獲取encoding編碼方式，並設定。此處為utf-8
		me.setViewType( ViewType.FREE_MARKER);            //設定檢視型別為FreeMaker
	}

	@Override
	public void configHandler(Handlers me) {       //handler方法
		 me.add(new ContextPathHandler("path"));//加入路徑
		  me.add(new DruidStatViewHandler(getProperty("consle")));//資料監控的路徑
		  me.add(new UrlHistoryHandler());
		
	}

	@Override
	public void configInterceptor(Interceptors me) {
		 me.add(new SessionInViewInterceptor());
	}

	@Override
	public void configPlugin(Plugins me) {
		 DruidPlugin druidPlugin = new DruidPlugin(getProperty("jdbcUrl"),
	                getProperty("user"), getProperty("password"));
	        
	        WallFilter wallFilter = new WallFilter();//這個的作用？過濾器？
	        wallFilter.setDbType(getProperty("db_type"));//資料庫型別此處為mysql
	        druidPlugin.addFilter(wallFilter);
	        druidPlugin.addFilter(new StatFilter());
	        
	        me.add(druidPlugin);
	        ActiveRecordPlugin arp = new ActiveRecordPlugin(druidPlugin);
			me.add(arp);
			arp.addMapping("user","User_Id",User.class);//引數表：表名，主鍵，類
			arp.setShowSql(true);
	}

	@Override
	public void configRoute(Routes me) {
		// TODO Auto-generated method stub
		me.add("/", MainController.class);//設定路由
		
	}
	
	
}

第一個檔案：

package com.my.controller;

import com.jfinal.aop.ClearInterceptor;
import com.jfinal.core.Controller;
import com.my.service.UserService;
import com.my.domain.ReturnJsonObject;
import com.my.model.User;
import com.my.util.GlobalUtils;

public class MainController extends Controller {
	UserService userService = new UserService();
	
	@ClearInterceptor      //清除清除上一級別(Controller級)的攔截器        
	public void index(){               
		/*
		 * 索引方法，跳轉到登入
		 */
//	    render("/_doc/system/login/login.html");//當viewType設定成jsp時還要訪問HTML，則用此。
	    render("/system/login/login.html");
}
	@ClearInterceptor
	public void login(){
		if(getSessionAttr("user")!=null){
		    /*
		     * 登入成功，進入系統
		     */
   			render("/system/layout_html/main.html");
   			
			
        }else{
            /*
             * 登入失敗，重新進入登入頁面
             */
            render("/system/login/login.html");
        }
        
	}
	@ClearInterceptor
	public void checklogin() throws Exception{
		ReturnJsonObject rjo = new ReturnJsonObject();
		//獲得帳號密碼清除多餘空格
		String userName = getRequest().getParameter("username").trim();//.trim()去掉前後多餘的空格
		String password = getRequest().getParameter("password").trim();
		
		User user = userService.queryForUser(userName, password);
		if(user!=null){                       //如果user不為空的話，則說明該使用者存在。
			setSessionAttr("user", user);
			rjo.setCode(GlobalUtils.OPERATOR_SUCCESS);		
		}else{
			rjo.setCode(GlobalUtils.OPERATOR_ERROR);
			rjo.setMessage("帳號或者密碼錯誤");
		}	
		renderJson(rjo);
		
		/*
		 * 將 user 物件轉換成 json 資料並渲染
		 * Json是什麼玩意？JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。
		 */
	}
	
	
}

第三個檔案： 
package com.my.domain;

/**
 * 返回的JSON物件失敗成功
 *
 */
public class ReturnJsonObject {
    /**
     * 操作成功或失敗標識
     */
    private String code;
    /**
     * 操作描述資訊
     */
    private String message;
    
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    
    
}
第四個檔案： 
package com.my.interceptor;

import com.jfinal.aop.Interceptor;
import com.jfinal.core.ActionInvocation;

public class LoginCheckInterceptor implements Interceptor{

	public void intercept(ActionInvocation ai) {
		if(ai.getController().getSession().getAttribute("user")!=null){
			ai.invoke();
			}
			else{
				ai.getController().setAttr("errorMsg","");
				ai.getController().setAttr("errorMsg","請先登入！！");
				ai.getController().render("/system/login/login.html");
			}
		
	}

}

第五個檔案： 
package com.my.model;

import com.jfinal.ext.plugin.tablebind.TableBind;
import com.jfinal.plugin.activerecord.Model;
import com.my.model.User;

@TableBind(tableName="user",pkName="User_Id")
public class User extends Model <User> {
	public static final User dao = new User();
}

第六個檔案： 
package com.my.service;

import com.my.model.User;

public class UserService {

	/**
	 * 根據使用者名稱和密碼查詢使用者
	 * @param userName
	 * @param password
	 * @return
	 */
	public User queryForUser(String userName, String password){
		String sqlStr = "select * " +
				"	from user " +
				"	where User_Name=? " +
				"	and User_Password=? ";
		User user = User.dao.findFirst(sqlStr, new Object[]{userName,password});
		return user;
	}

}

還有一個配置檔案：放在WEB-INF下
config.properties
dev_model = true
encoding = UTF-8
db_type = mysql
jdbcUrl= jdbc:mysql://localhost:3306/nimei
consle = /_admin/consle
user = nimei
password = nimei


這裡有些敏感資訊，我都改成nimei了，這是個人習慣勿噴。

還要把資料庫部分做好，說一下如何使用Navicat MySQL匯入.sql檔案。
開啟連線，右鍵相應資料庫，在左側導航欄裡選擇你要匯入的資料庫，右擊它，選“執行批次任務檔案”，然後選擇檔案。

接下來就是Qui中部分了

可以找到login.html頁面。程式碼需要改動一些部分，如下：


		<link href="${path}/system/login/skin/style.css" rel="stylesheet"
			type="text/css" id="skin" />
		<script type="text/javascript" src="${path}/libs/js/jquery.js"></script>
		<script type="text/javascript" src="${path}/libs/js/login.js"></script>
		
		<script type="text/javascript"
			src="${path}/libs/js/method/center-plugin.js"></script>
		
		
	function login() {
		var errorMsg = "";
		var userName = document.getElementById("username");
		var password = document.getElementById("password");
		if (!userName.value) {
			errorMsg += "  使用者名稱不能為空!";
		}
		if (!password.value) {
			errorMsg += "  密碼不能為空!";
		}

		if (errorMsg != "") {
			$(".login_info").html(errorMsg);
			$(".login_info").show();
		} else {
			$(".login_info").show();
			$(".login_info").html("  正在登入中...");
			//登入處理

			$.post("${path}/checklogin", {
				"username" : userName.value,
				"password" : password.value
			}, function(result) {//result沒有宣告？為何也能用？已經包含了！
				if (result.code == "error") {
					$(".login_info").html(result.message);
					return false;
				} else if (result.code == "success") {
					$(".login_info").html("登陸成功，正在跳轉到主介面");
					window.location="${path}/login";//進入主頁面。通過controller中的login方法
					
				}
			}, "json");
		}
		
	}

這裡看重點就好，不要複製貼上了，顯然直接是用不了的。另外登入成功後的頁面也要將js的路徑設對，按照這種方法改就行，但是隻是能用，顯然程式碼還有待提高。

這裡有一條語句活活折騰了我10個小時，window.location="${path}/login";沒錯就是這句。不過真的看起來挺簡單的，但是裡面的問題很多。前面說的所有東西路由都是在“/qui”下進行的，在這一句上我還是想這麼幹，但是在JFinal下不管怎麼幹，經過一次render後，後面的render總是不行。如果把這句直接改成登入成功的頁面，個人總是感覺不安全，因為在瀏覽器中檢視原始碼找到成功頁面的地址後直接輸入，就可以成功（除非在HTML中做檢查）。所以我還是提交給controller類去處理。

這裡有個小技巧：當你發現，出現網頁中一些js程式碼不正確時，可以在瀏覽器中檢視原始碼，檢查路徑是不是對的。

如果上面的程式碼報錯的話，可能你包含的jar不夠，我數了一下，我包含的jar，共18個。。自己真是有點嚇到了，新手嘛。。。

遇到的問題還是挺多的，稍微整理了一下：

遇到問題：在myeclipse9的情況下使用tomcat7，昨晚還可以執行的web project現在出現404，但是http://localhost:8080可以訪問，而且訪問的頁面是tomcat7的頁面，而且以前通過
myeclipse8.5和tomcat6新增得web project依然可以可以訪問。
嘗試解決方法：1，關閉myeclipse9中的tomcat7,到tomcat7的安裝目錄中啟動tomcat7。
訪問8080,tomcat7執行正常。
訪問以前新增的web project，執行正常。
訪問新新增的web project還是不能執行。
2，重啟計算機。
問題情況一致。
3，在該環境下重新匯入一份新的工程test_5555，並將config.properties中的URL更改為：jdbc:mysql://localhost:3306/nimei；注意：mysql資料庫中有這個資料庫。
執行正常。
4，在myeclipse9中將出現問題的web project重新載入進tomcat7。
執行正常，問題解決。
5，不服！將tomcat7重啟，觀察是否問題再次出現。
執行正常，問題解決。
問題總結：可能是某些誤操作，導致問題出現，也有可能是開發環境某一個部分的bug。

遇到的問題還有render系列問題，這裡先不整理了。

嗯，就這樣。


相關推薦

JFinal與Qui學習筆記（二）

Qui是一套網頁框架，效果不錯，不過剛剛接觸，難度還是非常大的！完全是新手，這不，到前10分鐘才完成一個簡單的使用者登入。 之前說的JFinal這裡要補充一下：玩了這麼久，底層的東西雖然都不知道，但是基本會用吧，自認為。。呵呵。 工作環境：myeclipse9，tomca

模式識別與機器學習筆記（二）機器學習的基礎理論

機器學習是一門對數學有很高要求的學科，在正式開始學習之前，我們需要掌握一定的數學理論，主要包括概率論、決策論、資訊理論。 一、極大似然估計（Maximam Likelihood Estimation，MLE ） 在瞭解極大似然估計之前，我們首先要明確什麼是似然函式（likelihoo

JFinal與tomcat學習筆記（一）

一直以來都想養成寫部落格的習慣，但是寫了幾篇，發現每次寫的重點都放在瞭如何表述的更好，離要寫的內容越走越遠，最後。。。直到今天我深刻的意識到寫這個是寫給自己看的，不是寫給別人看的，只是別人能看到而已！所以，管他呢，寫自己能看的懂的東西，先為自己寫部落格。 好的，我今天寫的是

thinkphp5.0學習筆記（二）API後臺處理與命名空間

mac code 輸入 -1 pub 基礎 select() color 第一個 命名空間 先來看命名空間吧； 命名空間是學習TP的基礎， <?php namespace app\lian\c1; class yi{ public $obj = "這是第一個

SOC中的DFT和BIST對比與比較-IC學習筆記（二）

獨立 讀取 c學習 連接 特殊 客戶服務 bsp design 來源 ATE：ATE是Automatic Test Equipment的縮寫，根據客戶的測試要求、圖紙及參考方案，采用MCU、PLC、PC基於VB、VC開發平臺，利用TestStand&LabV

React 學習筆記（二） （事件、約束與非約束性元件）

事件物件 方法一 方法二 方法三 表單取值 鍵盤事件 react實現雙向資料繫結 約束性元件和非約束性元件 非約束性元件 defaultValue：<input type="text" defaultValue=‘111’/>

HTML5學習筆記（二）視訊與音訊處理

一、<video>  1、<video>是H5的新標籤，用來處理視訊，在此之前，各網站用來處理視訊一直使用flash技術     flash的缺點有以下幾方面，首先原生瀏覽器原生不支援，需要外掛，其次過多的使用會導致網站效能變差，最後就是

IO流學習筆記（二）之BufferedWriter與BufferedReader及例項Demo

在之前的學習筆記（http://blog.csdn.net/megustas_jjc/article/details/72853059）中，FileWriter與FileReader的Demo使用的中轉資料buf實際就是緩衝區，是由我們自己建立的。 緩衝區可以提高效率，Java對緩衝區進行了封裝，封裝成了物

C++學習筆記（二）：開啟檔案、讀取資料、資料定位與資料寫入

1.開啟二進位制檔案（fopen）、讀取資料（fread），應用示例如下： FILE *fp = fopen("data.yuv", "rb+"); //開啟當前目錄中的data.yuv檔案 char *buffer = ( char*) malloc (sizeof(char)*FrameSi

實變函式與泛函數分析學習筆記（二）：賦範線性空間

導語：現代數學入門的鑰匙就是實變函式與泛函數分析。數學，物理學，計算機學科，神經生物學相互交叉構成了AI的基礎。深入研究AI，尤其是神經規則推理以及下一代AI技術，必須修煉好內功。非數學專業的學生，可能學過傅立葉變換，方向導數與梯度這些。但是對這些概念的理解還需要繼續深入，除

《資料結構與演算法 python語言描述》學習筆記（二）————抽象資料型別和Python類

第一部分：學習內容概要 抽象資料型別 Python的類 第二部分：學習筆記 抽象資料型別   1.抽象資料型別（Abstract Data Type，ADT），通過一套介面闡述說明這一程式部分的可用功能，但不不限制功能的實現方法。      2.抽象資料型

java學習筆記（二）--（物件程式設計-類與方法）

面向過程-程式設計正規化-c-行為 面向物件-能進行現實生活的抽象 面向介面程式設計 面向切面程式設計 函數語言程式設計正規化 -Scala，Koltin //lamdba表示式 （）-> { } 面向物件三大特徵： a.封裝        將客觀事物

影象處理與分析（岡薩雷斯第二版）學習筆記（二）

第二章，數字影象基礎 1，人眼視覺原理？ 眼球適當聚焦，眼睛外部的光在視網膜上成像。視網膜表面的光接收器：錐狀體和桿狀體。每隻眼睛的錐狀體數目在600萬到700萬之間，主要位於視網膜中間部分，被稱為中央凹（大概1.5mm凹坑相當於1.5*1.5的方形感測器陣列），對顏色敏感度很高，可以充

小白的資料結構與演算法學習筆記（二十六）----廣義表

 一、廣義表的概述 首先回憶一下原子型別和結構型別，簡單說來，原子型別就是不可再分的型別，結構型別就是可以再分的型別。我們前面講的線性表要求每個元素都是原子型別，而廣義表作為線性表的推廣，它的元素可以是原子型別，也可以是個表。元素是原子型別，叫原子結點；元素是表，叫表結點。

OpenLayers學習筆記（二）— QML與HTML通訊之畫圖

QML與 HTML通訊—實現QML中點選功能按鈕在地圖上畫圖 作者： 狐狸家的魚 Github： 八至  一、HTML-map  var drarGraphic; var drawType;function

PyTorch 學習筆記（二）：PyTorch的資料增強與資料標準化

本文擷取自《PyTorch 模型訓練實用教程》，獲取全文pdf請點選：https://github.com/tensor-yu/PyTorch_Tutorial 文章目錄 transform的使用 在實際應用過程中，我們會在資

應用統計學與R語言實現學習筆記（二）——資料收集

Chapter 2 Data Collection 本篇是第二章，內容是資料收集。 1.資料來源 做科學研究離不開資料，而資料的來源有哪些呢？ 這裡比較簡單地將資料來源分為兩類：直接（一手）資料和間接（二手）資料。 直接資料的資料獲取來源包括

《MySQL必知必會》學習筆記（二）、MySQL資料庫中資料的檢索與搜尋

一、對檢索結果排序 1.1 簡單排序 在MySQL中使用ORDER BY子句對檢索出的資料進行排序，而且預設為遞增排序。若想以遞減方式排序，需要在排列資料後面加上DESC關鍵字。利用《MySQL必知必會》中的資料表，實驗如下： SELE

機器學習學習筆記（二）-模型選擇與評估

緒論 模型評估與選擇（3） 線性模型 決策樹 神經網路 支援向量機 貝葉斯分類 整合學習 聚類 降維與度量學習 特徵選擇與稀疏學習 計算學習理論 半監督學習 概率圖模型 規則學習 強化學習 模型評估與選擇 2.1經驗誤差與過擬合 錯誤率：分類錯誤的樣本數

laravel學習筆記（二）路由與檢視

laravel中檢視的用途是用來存放應用程式中HTML內容，並且能夠將你的控制器層（或應用邏輯層）與展現層分開。檢視檔案目錄為 resources/views ，示例檢視如下： 1、檔名：檢視名.blade.php 2、獲取檢視對應的html內容： return view('資料夾.檢視名');