JavaWeb 项目中一些小问题/功能的解决方案

---

一、资源路径问题

为了避免跳转页面发送请求引起的一些 404 问题，可以考虑在 jsp 页面一个 base 路径，叫做基础路径。一旦设置了基础路径，页面上发出的所有请求都是基于相对路径的。通常将程序的基础路径设置为程序的上下文路径。

即在 css 脚本和 js 脚本前作如下配置：

<base href="${pageContext.request.contextPath}/">

二、日期类型数据转换问题

MySQL 中存储日期数据 ： date 类型
MySQL 中存储日期 + 时间类型数据 ：datetime 类型
MySQL 中存储时间类型数据 ：time 类型

Java 中日期类型数据 ：

java.util.date
java.sql.date

如果 MySQL 中 用 date 类型数据 ：

Java 实体类中 用 java.util.date 类型，后台 servlet 获取前端传来的日期使用 String 来接收的。

String empDate  = req.getParameter("empDate")

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

Date date = null;

try {
    date = sdf.parse(empDate);
} catch (ParseException pe) {
	Logger.getLogger(AddEmployeeServlet.class.getName()).log(Level.SEVERE, null, ex);
}

如重复使用可以封装成 DateUtil 工具类。

JavaDoc 写法 ：

/**
* 描述
* @param date 
* @return 
*/

三、分页功能

原理 ：

就是运用 sql 语句进行分页查询 select * from 表 limit pageNo pageSize

例如，我们发起请求查询某个班的所有学生信息，并要求分页显示，并在分页界面我们点击下方页码可以查看不同页的内容。

要实现此功能，就是要用到上述分页查询的sql语句，此时我们要用到两个参数，pageNo 和 pageSize ，pageNo 在初始化分页时并没有给出，我们将其设置成1，后面我们点击页码查询时，会自动传此参数。

如此，在 servlet 中的逻辑为：

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    //1. 获取请求参数
    String batchName = req.getParameter("batchName");
    //需要用户在页面上提交一个页码，表示要查询第几页的数据
    String no = req.getParameter("pageNo");

    //这里判断是否有提交页码，如果没有，则设置页码为1，否则设置页码为提交的页码，转换成整数
    int pageNo = no == null ? 1 : Integer.parseInt(no);

    //2. 调用业务逻辑 ，完成请求处理
    List<Student> list = studentService.findStudentsByBatchNameAndPage(batchName, pageNo, 5);

    //这里根据班级名称查询该班级的总人数
    int total = studentService.getBatchSize(batchName);

    //将分页信息封装到一个Page对象中，这样，我们在页面上可以获取所有的分页信息
    Page page = new Page(pageNo, 5, total, list);

    //3. 生成动态响应
    //   这里直接将Page对象共享给jsp页面，用于获取所有分页信息
    req.setAttribute("page", page);
    req.getRequestDispatcher("/student_list.jsp").forward(req, resp);
}

在处理分页的过程中，我们把分页信息封装到一个Page对象中，这样便于处理分页信息。

package com.qdu.util;

import java.util.List;

/**
 * 创建一个Page类，用于封装分页时每页的数据信息
 *
 * @author NIIT
 */
public class Page {

    private int pageNo; //当前页码
    private int pageSize; //每页记录数
    private int total; //总记录数，用于计算分多少页
    private List data; //存储查到的当前页数据
    private int navSize=5; //设置导航页数
    
    //添加一个方法，用于计算导航页码
    public int[] getNavPages() { //navPages
        int start = 0, end = 0;
        int a = navSize / 2;
        start = pageNo - a;
        if (navSize % 2 == 0) {
            end = pageNo + a - 1;
        } else {
            end = pageNo + a;
        }
        // 分三种情况处理
        int totalPages = getTotalPages();
        int[] b = new int[navSize];
        // 左边界
        if (start < 1) {
            for (int i = 0, step = 1; i < navSize; i++, step++) {
                if (step <= totalPages) {
                    b[i] = step;
                } else {
                    break;
                }
            }
        } else if (end > totalPages) {	// 右边界
            for (int i = navSize - 1, step = totalPages; i >= 0; i--, step--) {
                if (step > 0) {
                    b[i] = step;
                } else {
                    break;
                }
            }
        } else {	// 中间
            for (int i = 0; i < navSize; i++) {
                b[i] = start++;
            }
        }
        return b;
    }

    //添加一个方法，计算分页数
    public int getTotalPages() {
        return total % pageSize == 0 ? total / pageSize : total / pageSize + 1;
    }

    //最好是能在适当的时候禁用下一页和上一页按钮/超链接
    
    //添加一个方法，获取下一页的页码，如果页码大于等于最后一页的页码，设置下一页为最后一页
    public int getNext() { //next
        return pageNo < getTotalPages() ? pageNo + 1 : getTotalPages();
    }

    //添加一个方法，获取上一页的页码，如果页码小于等于1，设置上一页为第一页
    public int getPrevious() { //previous
        return pageNo > 1 ? pageNo - 1 : 1;
    }

    public Page() {
    }

    public Page(int pageNo, int pageSize, int total, List data) {
        this.pageNo = pageNo;
        this.pageSize = pageSize;
        this.total = total;
        this.data = data;
    }

    public int getPageNo() {
        return pageNo;
    }

    public void setPageNo(int pageNo) {
        this.pageNo = pageNo;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List getData() {
        return data;
    }

    public void setData(List data) {
        this.data = data;
    }

}

dao 中方法：

 @Override
public List<Student> getStudentListByBatchNameAndPageNo(String batchName, int pageNo, int pageSize) {
    Connection con = null;
    PreparedStatement ps = null;
    ResultSet rs = null;
    List<Student> list = new ArrayList<>();

    try {
        con = DatabaseUtil.getConnection();
        ps = con.prepareStatement("select * from Student where Sbatch=? limit ?,?");
        ps.setString(1, batchName);
        ps.setInt(2, (pageNo - 1) * pageSize); //分页的这里是*pageSize，不是乘以固定的10
        ps.setInt(3, pageSize);
        rs = ps.executeQuery();
        while (rs.next()) {
            list.add(new Student(rs.getString(1), rs.getString(2), rs.getString(3), rs.getString(4), rs.getString(5)));
        }
    } catch (Exception e){
        e.printStackTrace();
    } finally {
        DatabaseUtil.close(rs, ps, con);
    }
    return list;
}

jsp 界面：

<div class="text-center">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li><a href="sblbp?pageNo=1&batchName=${param.batchName}">首页</a></li>
            <li><a href="sblbp?pageNo=${page.previous}&batchName=${param.batchName}">上一页</a></li>
            <!--Page类的getTotalPages()方法用于获取总页数-->
            <!--但是在jsp页面上的EL表达式中不需要调用get方法，直接写属性名即可-->
            <c:forEach items="${page.navPages}" var="i">
                <!--判断i的值是否等于当前页码，如果是，给该元素添加一个active类，让其看起来不一样-->
                <li class="${page.pageNo==i?'active':''}">
                    <a href="sblbp?pageNo=${i}&batchName=${param.batchName}">${i}
                    </a>
                </li>
            </c:forEach>
            <li><a href="sblbp?pageNo=${page.next}&batchName=${param.batchName}">下一页</a></li>
            <li><a href="sblbp?pageNo=${page.totalPages}&batchName=${param.batchName}">尾页</a></li>
        </ul>
    </nav>
</div>

四、文件上传

这里我们主要讲图片上传，是用 cos.jar 实现上传功能的。在实现上传之前，我们需要在 Tomcat 中配置虚拟路径。

在实际开发中，有时候需要把静态文件或者图片上传到tomcat中，但是如果上传到跟项目同目录的webapp下，当项目重新部署或者tomcat由于其他原因重启后，这些文件将会消失，势必会影响到现网的生产，所以我们需要把这些文件放到服务器的其他物理路径下，通过tomcat的server.xml 文件的配置来对这个路径做映射，使其通过ip地址也可以访问到这些文件。

 <Context path="/网站名/img" docBase="实际位置"></Context>

详见如下代码，代码中有详细说明。

jsp页面

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>添加新员工</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>

            $(document).ready(function () {

                $("#btn3").click(function () {
                    
                    //如果希望发送ajax请求提交一个包含文件选择框的表单
                    //需要将表单封装成一个FormData对象，发送给服务器
                    var formData=new FormData($("#add_form")[0]);

                    $.ajax({
                        url: 'aes3',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (fileName) { //添加一个参数，用于接收返回的重命名后的名称
                            //将上传的图片显示在id为photo的img元素中
                            //attr()函数用于修改或获取元素的属性
                            $("#photo").attr("src","img/"+fileName);
                            $("#warning").fadeIn(3000).fadeOut(2000);
                        },
                        error: function () {
                            alert("error");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="container text-warning">

            <h1 class="text-center bg-success text-success padding10">添加新员工-上传单张头像</h1>
            <hr>
            <br>

            <!--如果表单包含了type="file"的元素-->
            <!--表单必须以post方法提交-->
            <!--表单的enctype属性必须设置为multipart/form-data-->
            
            <form class="form-inline" id="add_form"
                  method="post" enctype="multipart/form-data">
                <label for="iempid">员工编号：</label>
                <input id="iempid" type="text" name="empId" placeholder="输入员工编号，如E001" class="form-control sinfo">
                <br><br>
                <label for="iname">员工姓名：</label>
                <input id="iname" type="text" name="empName" placeholder="输入姓名，不超过4个中文字符" class="form-control sinfo">
                <br><br>
                <label for="igender">员工性别：</label>
                <select id="igender" name="empGender" class="form-control select">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <br><br>
                <label for="idob">出生日期：</label>
                <input id="idob" name="empDob" type="date" class="form-control">
                <br><br>
                <span class="title">个人头像： </span>
                <input type="file" id="fileInput" name="file" >
                <br><br><br>
                <button type="submit" formaction="aes1" class="btn btn-success">添加员工1</button>
                &nbsp;&nbsp;
                <button type="submit" formaction="aes2" class="btn btn-danger">添加员工2</button>
                &nbsp;&nbsp;
                <button type="button" id="btn3" class="btn btn-info">添加员工3-ajax</button>
            </form>
            <br>

            <div class="text-center fixed">
                <img id="photo" src="images/lxh01.gif" alt="头像" class="img-thumbnail img-circle">
                <br><br>
                <a href="index.jsp" class="btn btn-sm btn-danger">返回首页</a>
            </div>

            <div class="alert alert-success" id="warning">
                <h4>添加成功，请返回首页查看员工列表！！！</h4>
            </div>

        </div>
    </body>
</html>

EmployeeService employeeService = new EmployeeServiceImpl();
private String save_directory = "c:/photo";

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    ///1. 获取请求参数

    //使用cos.jar实现文件上传，需要将请求封装到一个MultipartRequest对象中
    
    //该类的构造函数可以接受的参数有
    //1. 原始请求对象，该对象包含了所有请求信息，包括所有请求参数和要上传的文件的信息
    //2. 文件上传的目标目录，也就是上传的文件存放到哪里
    //3. post请求的大小限制，单位是字节，所以1024*1024为1M
    //4. 请求使用的字符集编码，主要为了解决请求中有中文可能导致的乱码
    //5. 传入一个文件重命名策略对象，这样可以将上传的文件重命名
    CustomFileRenamePolicy1 policy=new CustomFileRenamePolicy1();
    
    MultipartRequest request
            =new MultipartRequest(
                    req,
                    save_directory,
                    100*1024*1024,
                    "UTF-8",
                    policy);
    //如果将请求封装到了MultipartRequest对象中
    //则所有的请求参数都要通过这个MultipartRequest对象获取
    String eid = request.getParameter("empId");
    String ename = request.getParameter("empName");
    String egender = request.getParameter("empGender");
    Date edob = DateUtil.parseDate(request.getParameter("empDob"));
    
    //获取上传的文件的信息, 这里的file是页面上type="file"对应的组件的name的值，也就是请求参数的值
    //这里调用getName()获取了上传的文件的名称
    String fileName=request.getFile("file").getName();

    //获取员工的5项信息，封装成一个Employee对象
    Employee employee = new Employee(eid, ename, egender, edob, fileName);

    //2. 调用业务逻辑，完成请求处理
    //   这里调用addNewEmployee()将新员工插入数据库
    int rows = employeeService.addNewEmployee(employee);

    //3. 生成响应内容
    //   因为上传的文件在该Servlet中进行了重命名
    //   如果需要在页面上显示图片，需要将新的名称返回到页面
    //   对于ajax请求，打印的响应内容就是返回的数据
    resp.getWriter().println(fileName);
}

图片文件重命名的策略：

//只要在该方法中编写重命名逻辑即可，该方法会自动被调用
@Override
public File rename(File file) {

    //获取上传的文件的名称
    String fileName = file.getName();
    //获取上传的文件的扩展名
    String extensionName = fileName.substring(fileName.lastIndexOf("."));
    //产生一个UUID字符串作为上传的文件的新名称，再连接上文件的扩展名
    //构成其完整的名称
    String newName = UUID.randomUUID().toString().replace("-", "") + extensionName;
    File newFile = new File(file.getParent(), newName);
    return newFile;
}

要实现多个图片上传，jsp界面图片上传那块修改为：

<label id="realBtn" class="img-thumbnail upload" for="fileInput">+点此选择图片</label>
<input type="file" id="fileInput" multiple="true" name="file" style="display: none;">
<button type="button" id="btn_upload" class="btn btn-success">上传</button>

servlet 中基本相同，只是将原本的修改单个图片名称，更改为修改多个图片名称

//添加了一个列表，用于存储上传的多个文件重命名后的名称 

private List<String> fileNames=new ArrayList<>();

//如果一次上传多个文件，会导致rename()调用多次
//上传了几个文件，rename()方法就会调用几次
@Override
public File rename(File file) {
    String fileName = file.getName();
    String extensionName = fileName.substring(fileName.lastIndexOf("."));
    String newName = UUID.randomUUID().toString().replace("-", "") + extensionName;
    fileNames.add(newName);
    File newFile = new File(file.getParent(), newName);
    return newFile;
}

public static void main(String[] args) {
    File file = new File("D:/photo/pic1.jpg");
    CustomFileRenamePolicy2 policy = new CustomFileRenamePolicy2();
    File newFile = policy.rename(file);
    System.out.println(newFile.getName());
}

//这里生成了fileNames属性的getter方法，用于获取新名称列表
public List<String> getFileNames() {
    return fileNames;
}

五、富文本编辑器

为了实现日志功能，这里我们使用 WangEditor 编辑器

使用说明都在以下程序中 ：

jsp界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发表新日志</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <!--可以使用CDN链接来在线引用wangEditor的js文件-->
        <!--<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>-->
        <!--也可下载下来wangEditor的js文件，离线引用-->
        <script src="js/wangEditor.min.js"></script>
        <script>
            $(document).ready(function () {

                const E = window.wangEditor;
                const editor = new E('#div1');
                editor.config.height = 280;
                // 配置处理上传图片的请求的组件的url
                // 本程序使用url为/uploadServlet的servlet处理本地图片上传的请求
                editor.config.uploadImgServer = 'uploadServlet';
                editor.create();

                $("#btn_publish").click(function () {

                    //获取富文本编辑器的内容
                    //alert(editor.txt.html());

                    $.ajax({
                        url: 'ands',
                        type: 'POST',
                        data: {
                            //获取第一个文本框输入的日志标题
                            //这里获取id为title的文本框输入的值
                            diaryTitle: $("#title").val(),
                            //获取富文本编辑器的内容，作为日志内容
                            dairyContent: editor.txt.html()
                        },
                        success: function () {
                            alert("发表成功，请返回首页，查询日志列表！");
                        },
                        error: function () {
                            alert("error");
                        }
                    });
                });
            });
        </script>

    </head>
    <body>

        <div class="container">

            <h1 class="text-center text-primary">发表新日志</h1>
            <hr>

            <div class="text-right">
                <button id="btn_publish" type="button" class="btn btn-sm btn-success">发表</button>
            </div>

            日志标题：<br><br>
            <input type="text" id="title" placeholder="这里输入日志标题" class="form-control">
            <br>

            <!--Alt+Shift+F 格式化-->

            <div id="div1">
            </div>

            <hr>
        </div>

    </body>
</html>

servlet 中

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    ///1. 获取请求参数
    req.setCharacterEncoding("utf-8");
    
    //为了简化程序，使用当前系统的时间（毫秒表示）作为新日志编号
    String did=System.currentTimeMillis()+"";
    //为了简化程序，使用固定的名字作为日志发表人
    String downer="Anna";
    
    String title = req.getParameter("diaryTitle");
    String content = req.getParameter("dairyContent");
    
    System.out.println("--------------------------------------------------");
    System.out.println(title);
    System.out.println(content);

    //将日志的信息封装到一个Diary对象中，调用方法将日志信息插入数据库
    Diary diary=new Diary(did, title, content, downer);
    diaryService.addNewDiary(diary);
}

剩下的对于数据库的操作，我们不再详细说明。