实习实训

项目empManeger_2021

项目empManeger_2021

编辑功能

前台实现

编辑按钮

在员工列表页面empList.jsp加入编辑按钮，通过编辑按钮的点击事件跳转到编辑页面进行编辑。

<input type="button" class="btn btn-primary" value="编辑" onclick="editEmp()"/>

        //编辑员工
        function editEmp(){
    
    
            //用户如果没有选择记录，那么给出提出
            var isChk = false;
            //用于存储用户所选中的记录数
            var chk_num = 0;
            //用于存储被选中的员工编号
            var empno = "";

            var arrChk = document.getElementsByName("chk");
            for(var i=0; i<arrChk.length; i++){
    
    
                if(arrChk[i].checked){
    
    //当前复选框被选中
                    isChk = true;
                    chk_num ++;
                    empno = arrChk[i].value;
                }
            }
            if(!isChk){
    
    
                alert("请选择要编辑的员工信息");
                //结束当前方法，结束编辑的动作
                return;
            }

            //如果用户多选，那么提示用户只能选择一条进行修改
            if(chk_num > 1){
    
    
                alert("只能选择一条记录进行修改操作");
                return;
            }

            //以上两种都不满足，那么可以进行编辑操作
            //需要单独打开员工编辑的页面进行信息的修改

            //这里不能直接跳转编辑页面，因为编辑页面没有任何的员工信息
            //我们需要先获取这个员工的全部信息，传递到编辑页面中
            //我们去数据库中获取当前员工的全部信息
            window.location.href = "GetEmpByEmpnoServlet?empno=" + empno;
        }

获取学生信息

先跳转到后台GetEmpByEmpnoServlet获取被勾选的学生的信息，然后再跳转到员工信息编辑页面editEmp.jsp。

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/11
  Time: 8:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工编辑</title>
</head>
<body>
<div style="float:right;">当前用户：${uname}</div>
<div align="center">
    <h4>编辑员工信息</h4>
    <form action="EditServlet" method="post">
        <table>
            <tr>
                <td align="right">员工姓名：</td>
                <td>
                    <input type="hidden" name="empno" value="${emp.empno}">
                    <input type="text" name="ename" size="16px" value="${emp.ename}">
                </td>
            </tr>
            <tr>
                <td>员工性别：</td>
                <td>
                    <c:if test="${emp.sex == '男' or emp.sex == '' or emp.sex == null}">
                        <input type="radio" name="sex" value="男" checked> 男
                        <input type="radio" name="sex" value="女"> 女
                    </c:if>
                    <c:if test="${emp.sex == '女'}">
                        <input type="radio" name="sex" value="男" > 男
                        <input type="radio" name="sex" value="女" checked> 女
                    </c:if>
                </td>
            </tr>
            <tr>
                <td align="right">员工工作：</td>
                <td>
                    <%--设置隐藏域用来存储员工的工作--%>
                    <input type="hidden" id="jobStr" value="${emp.job}">
                    <select name="job" id="jobSel">
                        <option value="coder">coder</option>
                        <option value="行政">行政</option>
                        <option value="销售">销售</option>
                        <option value="市场">市场</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">入职日期：</td>
                <td><input type="date" name="hiredate" value="${emp.hiredate}"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" class="btn btn-primary" value="确定">
                    <input type="button" class="btn" value="取消" onclick="cancel()">
                </td>
            </tr>
        </table>
    </form>
</div>

<%--获取后台传递来的msg提示信息--%>
<%--隐藏域，页面中不显示，用它来接收后台传递的msg提示信息--%>
<input id="msg" type="hidden" value="${msg}">

<script>
    //window.onload只能出现一次
    window.onload = function () {
     
     
        //获取工作隐藏域的value值
        var job = document.getElementById("jobStr").value;
        //根据job的值决定下拉框选择哪一个
        document.getElementById("jobSel").value = job;

        //展示提示信息
        var msg = document.getElementById("msg").value;
        if(msg != "" && msg != null){
     
     
            alert(msg);
        }

    }

    function cancel(){
     
     
        //跳转回到员工列表页面
        //真正要跳转的是后台的GetAllEmpServlet
        //直接修改浏览器访问路径即可
        window.location.href = "GetAllEmpServlet";

    }

</script>


</body>
</html>

返回前台

最后将表单提交给后台EditServlet，通过后台将数据库中的信息更改。最后若编辑成功则通过GetAllEmpServlet将编辑好的信息带回到前台empList.jsp。

后台实现

分页查询功能

前台实现

在empList.jsp中加入页码按钮，通过页码的点击事件以及插叙条件来切换不同页的员工信息。

        <c:if test="${currPage == 1}">
            <button onclick="prev('${currPage}')" class="btn btn-primary" disabled>上一页</button>
        </c:if>
        <c:if test="${currPage != 1}">
            <button onclick="prev('${currPage}')" class="btn btn-primary">上一页</button>
        </c:if>

        <c:forEach var="pageIndex" begin="1" end="${totalPage}" step="1">
            <button onclick="queryPage('${pageIndex}')" class="btn btn-primary">${pageIndex}</button>
        </c:forEach>

        <c:if test="${currPage == totalPage}">
            <button onclick="next('${currPage}')" class="btn btn-primary" disabled>下一页</button>
        </c:if>
        <c:if test="${currPage != totalPage}">
            <button onclick="next('${currPage}')" class="btn btn-primary" >下一页</button>
        </c:if>

		//根据查询条件查询当前页
        function queryPage(pageIndex){
    
    
            var filter = document.getElementById("filter").value;
            window.location.href = "GetAllEmpServlet?pageIndex=" + pageIndex + "&filter=" + filter;
        }

		//根据查询条件查询前一页
        function prev(pageIndex) {
    
    
            var filter = document.getElementById("filter").value;
            var currPage = parseInt(pageIndex) - 1;
            window.location.href = "GetAllEmpServlet?pageIndex=" + currPage + "&filter=" + filter;
        }
		
		//根据查询条件查询下一页
        function next(pageIndex) {
    
    
            var filter = document.getElementById("filter").value;
            var currPage = parseInt(pageIndex) + 1;
            window.location.href = "GetAllEmpServlet?pageIndex=" + currPage + "&filter=" + filter;
        }

后台实现

数据库接口方法getEmpByPag声明

    List<Emp> getEmpByPag(int page,int limit,String ename);

数据库接口方法getEmpByPag实现

    @Override
    public List<Emp> getEmpByPag(int page, int limit, String ename) {
    
    
        Connection conn = DBUtil.getConn();
        List<Emp> list = new ArrayList<>();
        PreparedStatement pst = null;
        ResultSet rs = null;

        String sql = "select * from employee ";
        if (ename != null) {
    
    
           sql+="  where ename like ?  ";
        }
        //mysql的分页语法 select * from table limit 起始序号，每页显示条数
        //每页显示五条，第一页数据， select * from table limit 0,5
        //第二条的数据  select * from table limit 5,5
        //执行sql语句
        sql+="  limit ?,?";
        try {
    
    
            pst = conn.prepareStatement(sql);
            if (ename!=null){
    
    
                pst.setString(1, "%"+ename+"%");
                pst.setInt(2, (page-1)*limit);
                pst.setInt(3, limit);
            }else{
    
    
                pst.setInt(1, (page-1)*limit);
                pst.setInt(2, limit);
            }
            rs = pst.executeQuery();
            while (rs.next()){
    
    
                Emp emp = new Emp();
                emp.setEmpno(rs.getInt("empno"));
                emp.setEname(rs.getString("ename"));
                emp.setJob(rs.getString("job"));
                emp.setHiredate(rs.getString("hiredate"));
                emp.setSex(rs.getString("sex"));
                list.add(emp);
            }

        } catch (SQLException e) {
    
    
            e.printStackTrace();
        }finally {
    
    
            DBUtil.closeAll(conn, pst, rs);
        }
        return list;
    }

业务逻辑getEmpByPage声明

    List<Emp> getEmpByPage(int page,int limit,String ename);

业务逻辑getEmpByPage实现

  @Override
    public List<Emp> getEmpByPage(int page, int limit, String ename) {
    
    
        return empDao.getEmpByPag(page,limit,ename);
    }

GetAllEmpServlet

注意此处的GetAllEmpServlet是项目最终的样式，和第五天中查询功能的后台GetAllEmpServlet，此处的GetAllEmpServlet具备分页功能。其中业务逻辑层的方法selectByEname和第五天的相同。

package com.wangbiao.emp.servlet;

import com.wangbiao.emp.model.Emp;
import com.wangbiao.emp.service.IEmpService;
import com.wangbiao.emp.service.impl.EmpServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/GetAllEmpServlet")
public class GetAllEmpServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        //获取用户的查询条件
        //当我们从登录页面进入到该servlet时filter为null
        //如果点击查询按钮进入到该servlet时filter为前台填写的内容
        String filter = request.getParameter("filter");

        //我们规定每页显示五条数据
        //从登录进入默认显示第一页数据
        int page = 1;
        int limit = 5;

        //获取前台传递的页码数
        String pages = request.getParameter("pageIndex");
        //当从登录页面进入该servlet pages 为null
        //如果通过点击页码按钮进入到servlet，那么pages有具体值
        if(pages != null){
    
    
            page = Integer.parseInt(pages);
        }

        //前台需要展示页码的按钮，那么需要知道一共有多少页
        //我们需要获取总条数，然后除以每页显示条数

        IEmpService empService = new EmpServiceImpl();
        //不分页的查询
        List<Emp> list_all = empService.selectByEname(filter);
        //获取总条数
        int total = list_all.size();
        //计算总页数
        //int totalPage = 0;
        /*if(total % limit == 0){
            totalPage = total / limit;
        }else{
            totalPage = total / limit + 1;
        }*/
        //三目运算符
        int totalPage = total % limit == 0 ? total / limit : total / limit + 1;

        //根据分页条件进行分页查询
        List<Emp> list = empService.getEmpByPage(page,limit,filter);

        if(filter != null){
    
    
            //将查询条件回显
            request.setAttribute("filter",filter);
        }

        //将总页数返回到前台
        request.setAttribute("totalPage",totalPage);

        //把当前页面返回到前台
        request.setAttribute("currPage",page);

        //跳转到empList.jsp中，并将list集合响应给浏览器
        request.setAttribute("list",list);
        request.getRequestDispatcher("empList.jsp").forward(request,response);
    }
}

2021_01_11_实习实训_day07_员工后台管理项目_编辑功能以及分页查询功能

实习实训

项目empManeger_2021

编辑功能

前台实现

编辑按钮

获取学生信息

返回前台

后台实现

相关数据库接口与方法

数据库接口方法 getEmpByEmpno声明

数据库接口方法 editEmp声明

数据库接口方法getEmpByEmpno实现

数据库接口方法 editEmp实现

相关业务逻辑层声明与实现

业务逻辑getEmpByEmpno声明

业务逻辑editEmp声明

业务逻辑getEmpByEmpno实现

业务逻辑editEmp实现

相关Servlet实现

GetEmpByEmpnoServlet

EditServlet

分页查询功能

前台实现

后台实现

数据库接口方法getEmpByPag声明

数据库接口方法getEmpByPag实现

业务逻辑getEmpByPage声明

业务逻辑getEmpByPage实现

GetAllEmpServlet

猜你喜欢