Day06論壇—板塊管理,設計實體,表單驗證

時間 2019-12-13

標籤 day06 day 論壇板塊管理設計實體表單驗證欄目 HTML 简体版

原文原文鏈接

今日內容:分析需求,板塊管理(增刪改查,上下移動),寫全部論壇相關的JavaBean.javascript

分析需求

帖子的分類：置頂、精華、普通。（熱門、推薦、鎖定、...）css

普通帖：...html

置頂帖：排到最前面。（公告帖）java

精華帖：不影響排序，只是一個標誌，能夠列出全部的精華帖。mysql

-------jquery

熱門帖：只是一個標誌。git

鎖定帖：不能回覆。ajax

...sql

主題列表的排序：數據庫

最新狀態的帖子排到最前面，置頂帖在最上面。

分頁

數據列表的分頁效果：

分頁面 + 過濾條件 + 排序條件

回帖列表的排序：

最新的回覆排到最下面（最後一頁）

分頁

前幾個回覆的稱呼：

1樓、2樓、3樓、...

樓主、沙發、板凳、地板、...

在頁面中的"在線編輯器"。

所見即所得。

版塊管理中的上下移動。

二.版塊管理(增刪改查,上下移動)

增刪改查:

Forum.java:

package cn.itcast.oa.domain;

/**

* 實體:論壇版塊

* @author Tan

public class Forum {

private Long id;

private String name;

private String description;

private int position; //位置信息,用於上移下移操做

…

}

ForumManageAction:

@Controller

@Scope("prototype")

public class ForumManageAction extends BaseAction<Forum>{

/** 列表 */

public String list() throws Exception {

List<Forum> forumList = forumManagerService.findAll();

ActionContext.getContext().put("forumList", forumList);

return "list";

}

/** 刪除 */

public String delete() throws Exception {

forumManagerService.delete(model.getId());

return "toList";

}

/** 添加頁面 */

public String addUI() throws Exception {

return "saveUI";

}

/** 添加 */

public String add() throws Exception {

forumManagerService.save(model);

return "toList";

}

/** 修改頁面 */

public String editUI() throws Exception {

//準備數據

Forum forum = forumManagerService.getById(model.getId());

ActionContext.getContext().getValueStack().push(forum);

return "saveUI";

}

/** 修改 */

public String edit() throws Exception {

//從數據庫中取出要修改的對象

Forum forum = forumManagerService.getById(model.getId());

//設置要修改的屬性

forum.setName(model.getName());

forum.setDescription(model.getDescription());

//保存到數據庫

forumManagerService.update(forum);

return "toList";

}

/** 上移 */

public String moveUp() throws Exception {

forumManagerService.moveUp(model.getId());

return "tolist";

}

/** 下移 */

public String moveDown() throws Exception {

forumManagerService.moveDown(model.getId());

return "tolist";

}

List.jsp:

<thead>

</tr>

</thead>

<s:iterator value="forumList">

<td>${description} </td>

<s:a action="forumManage_editUI?id=%{id}">修改</s:a>

<s:a action="forumManage_moveUp?id=%{id}">上移</s:a>

<s:a action="forumManage_moveDown?id=%{id}">下移</s:a>

</td>

</tr>

</s:iterator>

</tbody>

</table>

<s:a action="forumManage_addUI">

</s:a>

</div>

</body>

</html>

saveUI.jsp:

<s:form action="forumManage_%{id == null ? 'add' : 'edit'}">

<s:hidden name="id"></s:hidden>

</div>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</s:form>

</div>

</body>

</html>

Struts.xml:

<result name="list">/WEB-INF/jsp/forumManageAction/list.jsp</result>

<result name="saveUI">/WEB-INF/jsp/forumManageAction/saveUI.jsp</result>

<result name="toList" type="redirectAction">forumManage_list</result>

</action>

Tips:Struts.xml中name="forumManage_*"就得這麼寫,寫成forum或其餘的話會報錯!!

上移和下移:

1，position的值不能重複。

2，列表顯示時應按照positon的值排序（升序）。

3，上下移動就是與上面的或下面的Forum交換position的值。

思路:將position的值設置成和id值同樣,這樣數據庫中全部數據就都是按position以升序排列(這是數據庫的最初狀態,進行上下移操做後就不必定了).想要將A上移,就是將A的position值和比A的position值小的全部數據中最大的那個值的position交換,在查詢列表時,按position的某種順序排列便可.

如:

select * from itcast_forum where position_ = (

select max(position_) from itcast_forum where position_<9

);

或者這樣更好:

select * from itcast_forum where position_<9 order by position_ desc limit 0,1;

limit 0,1 意思是:從第一個數開始(第一個數下標爲0),取一個數據.

ForumManageServiceImpl:

@Service

@Transactional

@SuppressWarnings("all")

public class ForumManagerServiceImpl extends DaoSupportImpl<Forum> implements ForumManagerService {

/**

* 重寫findAll(),在查詢列表時,按position的值排序

public List<Forum> findAll() {

return getSession().createQuery(//

"from Forum f order by f.position")//

.list();

}

/**

* 重寫sava(),添加的同時設置position的值

public void save(Forum forum) {

super.save(forum);

// 設置position的值,能夠用id值來設置

forum.setPosition(forum.getId().intValue());

}

/**

* 上移

public void moveUp(Long id) {

// 獲取要交換位置號的對象

Forum forum = getById(id);

Forum other = (Forum) getSession().createQuery(//

"from Forum f where f.position < ? order by f.position desc")//

.setParameter(0, forum.getPosition())//

.setFirstResult(0)//

.setMaxResults(1)//

.uniqueResult();

// 最上面的不能上移

if (other == null) {

return;

}

// 設置position的值

int temp = forum.getPosition();

forum.setPosition(other.getPosition());

other.setPosition(temp);

// 更新到數據庫

getSession().update(forum);

getSession().update(other);

}

/**

* 下移

public void moveDown(Long id) {

// 獲取要交換位置號的對象

Forum forum = getById(id);

Forum other = (Forum) getSession().createQuery(//

"from Forum f where f.position > ? order by f.position asc")//

.setParameter(0, forum.getPosition())//

.setFirstResult(0)//

.setMaxResults(1)//

.uniqueResult();

// 最下面的不能下移

if (other == null) {

return;

}

// 設置position的值

int temp = forum.getPosition();

forum.setPosition(other.getPosition());

other.setPosition(temp);

// 更新到數據庫

getSession().update(forum);

getSession().update(other);

}

Tips:重寫save()時,在保存以前id爲null,保存以後id就有值了.由於是持久化對象,全部就算是在保存以後再設置position值,它也能自動更新到數據庫(而不須要再保存一次).由於id是Long(封裝數據類型),而position是int(原始數據類型),因此要轉型:intValue().如果原始數據類型之間相互轉換,強轉便可.這些數據類型都是number的子類,number中有以下方法(查看方法:ctrl+shift+T找出Number類,再ctrl+O查看它因此的方法):

頁面效果:

List.jsp:

<thead>

</tr>

</thead>

<s:iterator value="forumList" status="status">

<td>${description} </td>

<s:a action="forumManage_editUI?id=%{id}">修改</s:a>

<s:if test="#status.first">

</s:if>

<s:else>

<s:a action="forumManage_moveUp?id=%{id}">上移</s:a>

</s:else>

<s:if test="#status.last">

</s:if>

<s:else>

<s:a action="forumManage_moveDown?id=%{id}">下移</s:a>

</s:else>

</td>

</tr>

</s:iterator>

</tbody>

</table>

<s:a action="forumManage_addUI">

</s:a>

</div>

三.設計實體,寫JavaBean,添加映射

需求頁面:

實體類圖:

Froum中的topicCount和articleCount是特殊字段,這麼設計是爲了額提升效率.Topic與User和Reply與User都是多對一關係,採用單向關聯,目的也是爲了提升效率.刪除某一回復,不會真的刪除,而是給它作個已刪除的標記.Topic,Reply與Article只是在JavaBean中存在繼承關係,在數據庫中沒有Article這張表.

Article.java:

/**

* 實體:文章

* @author Tan

public abstract class Article {

private Long id;

private String content; //內容(TEXT類型)

private Date postTime; //發表時間

private String ipAddr; //ip地址

private User author; //做者

……

}

Topic.java:

/**

* 實體:主貼

* @author Tan

public class Topic extends Article{

/** 普通貼 */

public static final int TYPE_NORMAL = 0;

/** 精品貼 */

public static final int TYPE_BEST = 1;

/** 置頂貼 */

public static final int TYPE_TOP = 2;

private String title; //標題

private int type; //類型

private int replyCount; //回覆數量

private Date lastUpdate; //最後文章的發表時間

private Forum forum; //版塊主貼與版塊:多對一

private Set<Reply> replies = new HashSet<Reply>(); //回覆主貼與回覆:多對一

private Reply lastReply; //最後回覆

……

}

Topic.hbm.xml:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE hibernate-mapping PUBLIC

"-//Hibernate/Hibernate Mapping DTD 3.0//EN"

"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping package="cn.itcast.oa.domain">

</id>

<many-to-one name="author" class="User" column="authorId"></many-to-one>

<many-to-one name="forum" class="Forum" column="forumId"></many-to-one>

<one-to-many class="Reply"/>

</set>

<!-- lastReply屬性,表示我與Reply的一對一關係

採用基於外鍵的方式.本方有外鍵 -->

<many-to-one name="lastReply" class="Reply" column="lastReplyId" unique="true"></many-to-one>

</class>

</hibernate-mapping>

Reply.java:

/**

* 實體:回覆

* @author Tan

public class Reply extends Article{

private boolean deleted; //刪除標誌

private Topic topic; //主貼回覆與主貼:多對一

……

}

Reply.hbm.xml:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE hibernate-mapping PUBLIC

"-//Hibernate/Hibernate Mapping DTD 3.0//EN"

"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping package="cn.itcast.oa.domain">

</id>

<many-to-one name="author" class="User" column="authorId"></many-to-one>

<many-to-one name="topic" class="Topic" column="topicId"></many-to-one>

</class>

</hibernate-mapping>

Forum.java:

/**

* 實體:論壇版塊

* @author Tan

public class Forum {

private Long id;

private String name;

private String description;

private int topicCount; //主貼數量

private int articleCount; //文章數量:主貼數量+回覆數量

private int position; //位置信息,用於上移下移操做

private Set<Topic> topics = new HashSet<Topic>(); //主貼數版塊與主貼:一對多

private Topic lastTopic; //最新主題

……

}

Forum.hbm.xml:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE hibernate-mapping PUBLIC

"-//Hibernate/Hibernate Mapping DTD 3.0//EN"

"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping package="cn.itcast.oa.domain">

</id>

<one-to-many class="Topic"/>

</set>

<!-- lastTopic屬性,表示我與Topic的一對一關係

採用基於外鍵的一對一映射.本方有外鍵 -->

<many-to-one name="lastTopic" class="Topic" column="lastTopicId" unique="true"></many-to-one>

</class>

</hibernate-mapping>

四.表單驗證:jquery的validate插件

說明：須要JQuery版本：1.2.6+

步驟：

1,導入的jQuery.js與jquery.validate.js等文件，注意順序不要顛倒!!

2, 指定哪一個（或哪些）表單要在提交前先進行驗證

$(function(){

$("#testForm").validate();

});

</script>

3, 指定每一個字段的驗證規則

名稱 *<input type="text" name="loginName" class="required">
其中class="required" 表示本字段必需要填寫。

效果以下圖：

實際操做:

爲提升效率,可將前兩步的代碼抽取出來,寫到公共頁面中,接下來任何表單中的任何字段須要驗證的話,在相應字段的class(cssClass)中加入驗證規則便可.

Header.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

$(function(){

$("form").validate();

});

</script>

若是想要對添加用戶的表單中的用戶名添加驗證:

<td><s:textfield type="text" name="loginName" cssClass="InputStyle required {minlength:3,maxlength:10}"/> *（登陸名要惟一）</td>

</tr>

頁面效果:

1. 指定驗證規則的方式

1.1. 把驗證規則寫到字段元素的class屬性中

例：

用戶名：<input type="password" name="password" class="required">

電子郵件：<input type="text" name="email" class="required email">

密碼：<input type="password" name="password" id="password1"

　　class="{required: true, minlength: 3}">

再次輸入密碼：<input type="password" name="password2"

class="{equalTo:'[#password1]'} required">

以上用了兩種方式：

1，指定多個class名稱（驗證規則），多個class名稱之間用空格隔開，如：class="required email"。

2，使用JSON對象，指定多個屬性，如：class="{required: true, minlength: 3}"。能夠爲某驗證規則指定所用的參數，如minlength規則須要指定最小長度，這裏爲3。

3，混合使用，如：class="{equalTo:'[#password1]'} required"。

說明：

1，若是使用第2種方式（JSON對象），就必須引入：jquery.metadata.js，做用是解析JSON對象。

2，若是表單字段的name不能重複，則只有最前面的配置起做用。

2. 可使用哪些驗證規則（內置的驗證規則）

required:true	必填字段
remote:"/checkName.do"	使用ajax方式訪問"/checkName.do"，經過返回true或false表示輸入值經過或未經過驗證
email:true	必須輸入正確格式的電子郵件
url:true	必須輸入正確格式的網址
date:true	必須輸入正確格式的日期
dateISO:true	必須輸入正確格式的日期(ISO)，例如：2010-01-01，2010/01/01 只驗證格式，不驗證有效性
number:true	必須輸入合法的數字(負數，小數)
digits:true	必須輸入整數
creditcard:	必須輸入合法的信用卡號
equalTo:"expr"	輸入值必須和$("expr").val()的值相同， expr例子：#fieldId
accept: "gif\|png\|jpg"	輸入擁有合法後綴名的字符串（上傳文件的後綴），多個後綴之間用'\|'隔開
maxlength:5	輸入長度最可能是5的字符串(漢字算一個字符)
minlength:3	輸入長度最小是3的字符串(漢字算一個字符)
rangelength:[5,10]	輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
range:[5,10]	輸入值必須介於 5 和 10 之間
max:5	輸入值不能大於5
min:10	輸入值不能小於10

說明：

1， remote是遠程驗證。好比註冊驗證用戶名是否已被註冊，返回值只能是true（驗證成功）或false（驗證失敗）。在訪問指定的url時，會自動把當前字段的值作爲參數傳遞過去（以字段的name值爲key，value爲參數值）。

2，例如使用remote驗證用戶名是否存在，當添加一個用戶後，在當前窗口中（同一個窗口），再次添加一個同名的用戶，validate不能提示該用戶已存在，這是由於緩存的緣由，jquery仍認爲該用戶名可用。解決方法是在頁面中添加以下代碼：

$().ready(function(){

$.ajaxSetup ({

cache: false //關閉ajax相應的緩存

});

3，某些屬性值中的引號不能省略，不然出錯。如accept、equalTo等，由於這時他須要的是一個字符串。

3. 有關錯誤提示消息

3.1. 更改默認的錯誤提示消息(直接插入那段script代碼便可,詳見下面的代碼)

jQuery.extend(jQuery.validator.messages, {

required: "請填寫本字段",

remote: "驗證失敗",

email: "請輸入正確的電子郵件",

url: "請輸入正確的網址",

date: "請輸入正確的日期",

dateISO: "請輸入正確的日期 (ISO).",

number: "請輸入正確的數字",

digits: "請輸入正確的整數",

creditcard: "請輸入正確的信用卡號",

equalTo: "請再次輸入相同的值",

accept: "請輸入指定的後綴名的字符串",

maxlength: jQuery.validator.format("容許的最大長度爲 {0} 個字符"),

minlength: jQuery.validator.format("容許的最小長度爲 {0} 個字符"),

rangelength: jQuery.validator.format("容許的長度爲{0}和{1}之間"),

range: jQuery.validator.format("請輸入介於 {0} 和 {1} 之間的值"),

max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),

min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")

});

實際操做:

Header.jsp:

……

$(function(){

jQuery.extend(jQuery.validator.messages, {

required: "請填寫本字段",

remote: "驗證失敗",

email: "請輸入正確的電子郵件",

url: "請輸入正確的網址",

date: "請輸入正確的日期",

dateISO: "請輸入正確的日期 (ISO).",

number: "請輸入正確的數字",

digits: "請輸入正確的整數",

creditcard: "請輸入正確的信用卡號",

equalTo: "請再次輸入相同的值",

accept: "請輸入指定的後綴名的字符串",

maxlength: jQuery.validator.format("容許的最大長度爲 {0} 個字符"),

minlength: jQuery.validator.format("容許的最小長度爲 {0} 個字符"),

rangelength: jQuery.validator.format("容許的長度爲{0}和{1}之間"),

range: jQuery.validator.format("請輸入介於 {0} 和 {1} 之間的值"),

max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),

min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")

});

$("form").validate();

});

</script>

3.2. 僅對當前表單改變提示消息

方法一：在class中指定某驗證規則的錯誤消息

<input type="file" name="parResource"

class="{

required: true, accept: 'zip',

messages: {required: '請選擇文件', accept:'請選擇正確的文件'}

}"> （提示：使用時不能換行）

方法二：在調用validate()方法時指定某驗證規則的錯誤消息

$(function() {

$("#myForm").validate({

messages:{

username:{ required: "請填寫用戶名" },

email: { required: '請填寫email', email: "請填寫正確的email"}

}

});

實際操做:

用戶的saveUI.jsp:

<td><s:textfield type="text" name="loginName" cssClass="InputStyle required {minlength:3, maxlength:10,

messages:{required:'請填寫用戶名!!!'}}"/> *登陸名要惟一）

</td>

</tr>

效果:

3.3. 設置錯誤消息的顯示樣式

指定label.error的樣式就能夠了，以下：

label.error{

margin-left: 10px;

color: red;

}

</style>

說明：label.error指class爲error的label元素，如：

實際操做:

首先找到相應錯誤消息提示在代碼中的具體信息:(這是火狐瀏覽器)

由此可知,它在laber標籤中,class名字叫error.而後在herder.jsp中添加指定樣式:

Header.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

$(function(){

jQuery.extend(jQuery.validator.messages, {

required: "請填寫本字段",

remote: "驗證失敗",

email: "請輸入正確的電子郵件",

url: "請輸入正確的網址",

date: "請輸入正確的日期",

dateISO: "請輸入正確的日期 (ISO).",

number: "請輸入正確的數字",

digits: "請輸入正確的整數",

creditcard: "請輸入正確的信用卡號",

equalTo: "請再次輸入相同的值",

accept: "請輸入指定的後綴名的字符串",

maxlength: jQuery.validator.format("容許的最大長度爲 {0} 個字符"),

minlength: jQuery.validator.format("容許的最小長度爲 {0} 個字符"),

rangelength: jQuery.validator.format("容許的長度爲{0}和{1}之間"),

range: jQuery.validator.format("請輸入介於 {0} 和 {1} 之間的值"),

max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),

min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")

});

$("form").validate();

});

</script>

label.error{

font-weight: bold;

}

</style>

頁面效果: (這裏效果爲加粗)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Day06論壇—板塊管理,設計實體,表單驗證

分析需求

二.版塊管理(增刪改查,上下移動)

三.設計實體,寫JavaBean,添加映射

四.表單驗證:jquery的validate插件

1. 指定驗證規則的方式

2. 可使用哪些驗證規則（內置的驗證規則）

3. 有關錯誤提示消息