struts2+Oracle實現管理員查看使用者提交的意見功能

標籤：oracle   css   web前端   struts2   

說一下需求：這個功能類似於郵件功能，當使用者在網站中提交一些建議及意見後，後台將其存入到Oracle資料庫中。然後管理員登入網站，會看到還沒有讀過以及讀過的意見及建議，並可以將未讀過的意見及建議標示讀取。

下面，這是管理員的查看介面：

點擊已讀切換到這個介面：

下面開始貼出代碼。

首先我們需要一個Tab切換選項卡，CSS代碼如下：

.tabPanel ul{height:30px;border-bottom:1px solid #aaa;}.tabPanel ul li{float:left;margin:0 2px 0 0;border:1px solid #aaa;font-size:14px;height:29px;line-height:30px;width:111px;text-align:center;cursor:pointer;text-shadow:0 1px 0 #fff;border-radius:4px 4px 0 0;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5);background:#ddd;background:-moz-linear-gradient(top, #eee, #ddd);background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));}.tabPanel .hit{border-bottom:1px solid #fff;cursor:pointer;color:black;text-shadow:0 1px 0 #fff;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff));background:-moz-linear-gradient(top, #e1e1e1, #fff);}.pane{border:1px solid #aaa;border-top:0;min-height:100px;background-color:#fff;display:none;}.pane p{padding:15px 15px 0 10px;}.pane h4{padding:15px 15px 0 10px;font-size:18px;font-weight:bold;}

還需要一小段JS來控制tab選項卡，給它賦hit的class和移除hit的class已完成點擊轉場效果：

<script type="text/javascript">$(function(){$('.tabPanel ul li').click(function(){$(this).addClass('hit').siblings().removeClass('hit');$('.panes>div:eq('+$(this).index()+')').show().siblings().hide();})})</script>

這個部分是從網上找的，你也可以自己寫一個合適的。

選項卡的HTML模板代碼如下：

 <div class="tabPanel"><ul><li class="hit">Tab1</li><li>Tab2</li><li>Tab3</li></ul><div class="panes"><div class="pane" style="display:block;"><h4>First tab content</h4><p>First tab content</p></div><div class="pane"><h4>Secend tab content</h4><p>First tab content</p></div><div class="pane"><h4>Third tab content</h4><p>First tab content</p></div></div>    </div>

前端部分大致完成！

接下來寫後台。

首先我們看一下資料庫的表結構：

然後根據此表欄位寫action代碼。這裡面，我們主要有兩個操作，一是查詢出所有的表中資料然後將其分別放在兩個Tab選項中；第二個操作則是將看過的資訊標示讀取。在這裡我唯寫一個action類，用flag欄位來判斷進行哪個操作。當flag=1時進行第一個操作；當flag=3時進行第二個操作。

這樣我的action類代碼如下：

package com.cn.useraction;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;import java.util.Map;//import javax.servlet.http.HttpServletRequest;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;import com.cn.beans.UserBean;import com.cn.util.DBConnection;@SuppressWarnings({ "serial", "unused" })public class AdminCommentAction extends ActionSupport {private static Log log = LogFactory.getLog(AdminCommentAction.class);private List<UserBean> userlist;private String commentid;private String flag;static int i = 0;public String getCommentid() {return commentid;}public void setCommentid(String commentid) {this.commentid = commentid;}public String getFlag() {return flag;}public void setFlag(String flag) {this.flag = flag;}public List<UserBean> getUserlist() {return userlist;}public void setUserlist(List<UserBean> userlist) {this.userlist = userlist;}/** * 查看使用者意見及建議 *  * @return List<UserBean> list */private List<UserBean> adminComment() {log.info("get admin comment info ...");List<UserBean> list = new ArrayList<UserBean>();UserBean user;String sql=null;Connection conn = DBConnection.getConn();sql ="select * from ts_comment order by create_date desc ";PreparedStatement pstmt;try {pstmt = conn.prepareStatement(sql);ResultSet rs = pstmt.executeQuery();while (rs.next()) {user = new UserBean();user.setUsername(rs.getString("username"));user.setContact(rs.getString("contact"));user.setComment(rs.getString("commented"));user.setCommentid(rs.getString("comment_id"));user.setAdminflag(rs.getString("admin_flag"));user.setDate(rs.getString("create_date"));list.add(user);}} catch (SQLException e) {e.printStackTrace();}return list;}/** * 管理員標記已讀 *  * @return i */private static int adminflagUpdate(String commentid) {Connection conn = DBConnection.getConn();String sql=null;sql ="update ts_comment set admin_flag=1 where comment_id='"+commentid+"'";PreparedStatement pstmt;try {pstmt = conn.prepareStatement(sql);i = pstmt.executeUpdate();System.out.println("update resutl: " + i);pstmt.close();conn.close();} catch (SQLException e) {e.printStackTrace();}return i;}public String admin_comment() throws Exception {log.info("admin_comment.action...");if (flag.equals("3")) {       //標記已讀的操作System.out.println(commentid);adminflagUpdate(commentid);if (i==0) {return "error";} else {return "success_read";}} else {userlist = adminComment();if (userlist.size() > 0) {return "success";} else {return "error";}}}}

UserBean我就不貼了，就是幾個get和set。

觸發這個action的前台代碼如下（即從一個介面跳轉到這個介面）：

<input style="cursor:pointer;border-radius:4px 4px 4px 4px;padding:5px;width:100%;margin:2px 0;" type="button" onclick="window.location.href='admin_comment.action?flag=0'" value="查看使用者意見建議">

另外這裡有個小技巧，就是我點擊“標示讀取”後，直接頁面重新整理，顯示操作後的結果，而不跳轉到其它介面。這就用到了struts2的一個action跳轉到另一個action的功能，即完成第二個操作的action後，跳轉到第一個操作的action。這裡面，struts.xml應該這麼配置：

<action name="admin_comment" class="com.cn.useraction.AdminCommentAction" method="admin_comment"><result name="success">/admin_comment.jsp</result><result name="success_read" type="redirectAction">/admin_comment.action?flag=1</result><result name="error">/error.jsp</result></action>

後台結束。最後就是前端的顯示了。我是從後台將未讀的資料和已讀的資料（資料庫中admin_flag分別等於0和1）都查詢出來，在前端需要分類顯示，這時候就用到了struts2的<s:if>標籤了，即admin_flag=0的資料放到未讀中，等於1的資料放到已讀中。最後再加一些CSS特效，就形成上面的樣子了。這部分前端代碼如下（替換掉上面Tab選項卡的模板代碼）：

<div class="tabPanel" style="width:900px;margin:30px auto;"><ul style="list-style:none;"><li class="hit">未讀</li><li>已讀</li></ul><div class="panes"><div class="pane" style="display:block;"><h4>使用者意見及建議</h4><p><s:iterator value="userlist" var="user"><s:if test="#user.adminflag == 0"><li style="list-style:none;margin:22px 10px 2px 10px;padding:0 5px;background:#bcbcbc;clear:both;" id="title">使用者 <b><s:property value="username" /></b> 的留言（連絡方式：<b><s:property value="contact" /></b>）說：<input type="button" value="標示讀取" style="float:right;margin:7px 0 0 0;" onclick="window.location.href='admin_comment.action?flag=3&commentid=<s:property value="commentid" />'"></input><span style="float:right;margin:0 15px 0 0;"><s:property value="date" /></span></li><li style="list-style:none;margin:0 30px;" id="comment"><s:property value="comment" /></li></s:if></s:iterator></p></div><div class="pane"><h4>使用者意見及建議</h4><p><s:iterator value="userlist" var="user"><s:if test="#user.adminflag == 1"><li style="list-style:none;margin:22px 10px 2px 10px;padding:0 5px;background:#bcbcbc;clear:both;" id="title">使用者 <b><s:property value="username" /></b> 的留言（連絡方式：<b><s:property value="contact" /></b>）說：<span style="float:right;margin:0 15px 0 0;"><s:property value="date" /></span></li><li style="list-style:none;margin:0 30px;" id="comment"><s:property value="comment" /></li></s:if></s:iterator></p></div></div>    </div>

這樣整個由前到後由後到前的一個過程就完成了，效果還是不錯的！

struts2+Oracle實現管理員查看使用者提交的意見功能