會議管理系統--項目總結

来源:互联网 发布:淘宝飞雷神苦无多少钱 编辑:程序博客网 时间:2024/05/10 20:18

- 前端

- 使用frameset框架搭建前段界面

<!--clos 左,中,右,左右為網頁兩側留白--><frameset cols="*,1010px,*" border="0px" class="fram_set" >    <frame  src="cool.html" scrolling="no"/>    <!--rows 上,中,下-->    <frameset rows="100,*,150" border="0px">        <frame name="top" src="top.html"  scrolling="no"/>        <frameset cols="150,*" border="0px" >             <!--為網頁左側選擇菜單,網頁正文-->            <frame name="left" src="left.html" scrolling="no" />            <!--右侧目标没写-->            <frame name="right" src="loginsuccess.html" scrolling="no"/>        </frameset>        <frame name="footer" src="footer.html" scrolling="no"/>        </frameset>    <frame  src="cool.html" scrolling="no"/></frameset><!--注意為各個標簽添加name屬性,否則不能正確顯示需要顯示的界面-->
 在對應的left選擇菜單中,想要在網頁right顯示,需要在A標簽中添加target='right'屬性,這樣網頁的顯示位置會被確定。

- Ajax的使用,以及傳值

  • 前端界面
var xmlHttp;<!--創建ajax對象-->function createXMLHttpRequest() {    if (window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }     else if (window.XMLHttpRequest) {        xmlHttp = new XMLHttpRequest();                    }}<!--因爲參數是輸出的,需要使用JS參數進行傳值,用來確定飾那一條數據-->function fun(key,num){<!--一些的JS效果,圖標的顯示隱藏-->    var rea=key+"in_1";    var reb=key+"sp_1";    var rec=key+"fig_in1"    var red=key+"fig_in2"    var ree=key+"fig_in3"    var inp=document.getElementById(rea);    var sp=document.getElementById(reb);    var ina=document.getElementById(rec);    var inb=document.getElementById(red);    var inc=document.getElementById(ree);        if(num=="1"){            inp.style.display="none";            sp.style.display="block";            ina.style.display="block";            inb.style.display="none";            inc.style.display="none";            sp.innerHTML=inp.value;        }else{            inp.value=sp.innerHTML;        }        var info=key+"#"+inp.value+"#"+num;        <!--到這裏才創建Ajax對象-->        createXMLHttpRequest();        <!--使用異步POST方式執行請求-->        xmlHttp.open("POST","/FirstProject/Passdepa",true);        <!--保存请求头-->        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        <!--保存参数-->        xmlHttp.send("info="+encodeURI(info));        <!--解析返回信息-->        xmlHttp.onreadystatechange=callback;        }function callback(){    <!--当返回完成并无异常-->    if(xmlHttp.readyState==4&&xmlHttp.status==200){    <!--以XML形式返回,解析xml-->     var flog=xmlHttp.responseXML.getElementsByTagName("flog")[0].firstChild.data;     <!--根据返回值,执行对应条件-->     if(flog=="yes"){        alert("修改完毕");        location.href("/FirstProject/departmentdata");     }else if(flog=="no"){        alert("执行失败");        location.href("/FirstProject/departmentdata");         }      }}</script>
  • servlet中要将请求处理,并以XML方式返回结果
//message 为返回的信息,使用字符串拼接的方式将值传递回去//以XML形式返回数据response.setContentType("text/xml;charset=utf-8");//PrintWriter 输出PrintWriter out=response.getWriter();response.setHeader("Cache-Control","no-cache");out.println("<?xml version='1.0' encoding='"+"utf-8"+"' ?>");out.println("<response>");out.println("<passed>" + Boolean.toString(flag) + "</passed>");out.println("<message>" + message + "</message>");out.println("</response>");out.close();
 这里不使用Ajax,真是直接使用onclick="location.href='xxxx?id=${EL}'"的URL形式访问更好,更加简单。

- 多选select选择框,以及左移右移

  • 关于select选择框多选
<!--直接在select标签中添加multiple字段 select即为多选 可以用CSS调节大小--><select name="select" id="select" multiple></select>
  • 使用JS来实现

  • 使用JQ来实现

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><!--注意ID与JQ的对应关系,两个select标签,两个Input标签--><script type="text/javascript">    $(document).ready(function(){          $('#add').click(function(){             var $options = $('#select1 option:selected');             var $remove = $options.remove();           $remove.appendTo('#select2');         });          $('#remove').click(function(){             var $removeOptions = $('#select2 option:selected');             $removeOptions.appendTo('#select1');        });           $('#select1').dblclick(function(){              var $options = $('option:selected', this);           $options.appendTo('#select2');          });          $('#select2').dblclick(function(){             $('#select2 option:selected').appendTo('#select1');          });     });          </script>

- 后端

  • 对部门员工进行分页管理–基于Oracle数据库

1.Sql语句

a是当前页的第一条b是当前页的最后一条"select * from (select row_number() over (order by ename) as rn, f.* from emp f) b where b.rn between "+a+" and "+b;

2.对应dao层代码

//搜索员工    public PageBean indexEmp(int pageNo,String name,String status){        //pageCount 每页的条数        int pageCount=3;        //a 当前页的第一条        int a=(pageNo-1)*pageCount+1;        //b 当前页的最后一条        int b=pageNo*pageCount;        String countSql="select count(*) from employee where employee_name='"+name+"'and status='"+status+"'";        String sql="select * from (select row_number() over (order by employee_id) as rn, "+" f.* from employee f        where employee_name='"+name+"' and status='"+status+"'"+") b where b.rn between "+a+" and "+ b";        ArrayList<Employee> emps = new ArrayList<Employee>();        ResultSet rs=null;        ResultSet countRs=null;        try {            rs=MyConn.query(sql1);            while(rs.next()){                String ename=rs.getString("employee_name");                String eusername=rs.getString("username");                String tel=rs.getString("phone");                String email=rs.getString("email");                         emps.add(new Employee(ename,eusername,tel,email));            }            countRs=MyConn.query(countSql);            int totalCount=0;            while(countRs.next()){                totalCount=countRs.getInt(1);            }            System.out.println(totalCount);            return new PageBean(emps,totalCount,pageNo,pageCount);        } catch (SQLException e) {            e.printStackTrace();        }           return null;        }

3.对应的分页模型类PageBean

package com.chinasofti.vo;import java.util.Collection;public class PageBean {    private Collection<Object> objs;//从数据库中读的集合    private int totalCount;//总的条数    private int pageNo;//当前的页数    private int pageCount;//每页的条数    private int totalPage;    public void setTotalPage(int totalPage) {        this.totalPage = totalPage;    }    //无参构造方法    public PageBean() {        super();        // TODO Auto-generated constructor stub    }    //全参构造方法    public PageBean(Collection<Object> objs, int totalCount, int pageNo, int pageCount) {        this.objs = objs;        this.totalCount = totalCount;        this.pageNo = pageNo;        this.pageCount = pageCount;    }    //属性的set,get 方法    public int getPageCount() {        return pageCount;    }    public void setPageCount(int pageCount) {        this.pageCount = pageCount;    }    public void setPageNo(int pageNo) {        this.pageNo = pageNo;    }    public int getPageNo() {        return pageNo;    }    public Collection<Object> getObjs() {        return objs;    }    public void setObjs(Collection<Object> objs) {        this.objs = objs;    }    public int getTotalCount() {        return totalCount;    }    public void setTotalCount(int totalCount) {        this.totalCount = totalCount;    }    //获取总页数    public int getTotalPage(){        if(totalCount % pageCount == 0){            return totalCount/pageCount;        }else{            return totalCount/pageCount+1;        }    }    //多写一个判断下一页的方法    public boolean isNext(){        return pageNo < getTotalPage();    }    //上一页的方法    public boolean isPrevious(){        return pageNo > 1;    }}
从数据库中读取的数据(对应的条数) 存在集合中,在JSP页面输出

4.对应JSP

<head>    <script type="text/javascript">        function page(num){            var myform = document.getElementById("myform");            var pageNo = document.getElementById("pageNo");             pageNo.value = num;            myform.submit();        }    </script></head><body bgcolor="gainsboro">    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>        <div id="div_right">            <div id="div_login">人员管理 > 搜索员工</div>            <form action="/FirstProject/indexemp" method="post" id="form_login">                <fieldset id="fie_set">                    <legend style="font-weight: bold">登录信息</legend>                    <table cellspacing="0px" cellpadding="8px" class="from_table">                        <tr>                            <td>                                姓名:                                <input type="text" name="name" id="name" />                            </td>                            <td>                                账号名:                                <input type="text" name="username" id="username" />                            </td>                            <td>                                状态:                                <input type="radio" name="che" value="1" checked/>已批准                                <input type="radio" name="che" value="0" />待审批                                <input type="radio" name="che" value="2" />已关闭                            </td>                        </tr>                        <tr>                            <td colspan="3" class="input_info">                                <input class="click_button" type="submit" value="搜索" />                                <input class="click_button" type="reset" value="重置" />                            </td>                        </tr>                    </table>                </fieldset>            </form>            <div class="div_info"><center>查询结果</center></div>            <div class="div_info_all">                <div class="div_info_all_text"><span class="span_txt">${requestScope.pagebean.totalCount}</span>                    条结果,分成                    <span class="span_txt">${requestScope.pagebean.totalPage}</span>页显示,当前第                    <span class="span_txt">${requestScope.pagebean.pageNo}</span></div>                <div class="div_input">                    <form action="/FirstProject/indexemp" id="myform" method="post">                    <input type="button" class="input_scan" value="首页" onclick="page(1);" />                    <c:if test="${requestScope.pagebean.previous}">                    <input type="button" class="input_scan" value="上页" onclick="page(${requestScope.pagebean.pageNo - 1})"/>                    </c:if>                    <c:if test="${requestScope.pagebean.next}">                    <input type="button" class="input_scan" value="下页" onclick="page(${requestScope.pagebean.pageNo + 1})"/>                    </c:if>                    <input type="button" class="input_scan" value="末页" onclick="page(${requestScope.pagebean.totalPage})"/>                    <span class="span_text">跳到第</span>                    <input type="text" name="pageNo" id="pageNo" class="input_text"/>                    <span class="span_text"></span>                    <input type="submit" class="input_scan" value="跳转" />                    </form>                </div>            </div>            <table border="1px" cellspacing="0px" cellpadding="5px" class="table_txt">                <tr class="table_head">                    <th>姓名</th>                    <th>账户名</th>                    <th>联系电话</th>                    <th>电子邮件</th>                    <th>操作</th>                </tr>                <c:forEach items="${requestScope.pagebean.objs}" var="key">                <tr>                    <td>${key.employee_name}</td>                    <td>${key.username}</td>                    <td>${key.phone}</td>                    <td>${key.email}</td>                    <td>                        <input type="button" class="fig_in" id="${key.username}" value="关闭帐号" onclick="fun('${key.username}','2')" />                    </td>                </tr>                </c:forEach>            </table>                </div>    </body>
0 0
原创粉丝点击