LayUI 心得1 (JS单独文件不能获取$(pageContext.request.contextPath)和JS中添加Date数据到数据库表中)

本文记录了使用LayUI时遇到的问题,包括如何在JS单独文件中获取$(pageContext.request.contextPath)以及如何处理JS发送的包含Date数据的JSON字符串在后台转换时遇到的错误。解决方案包括在JSP中设置变量供JS使用,以及在前端将Date类型转为String以避免后台转换异常。
摘要由CSDN通过智能技术生成

弄了一天的LayUI,虽然还是懵懵懂懂,也是在GitHub上Check下来的模板改,完成了基础的前后端增删改查。下面记录一下我碰到的问题吧。

获取$(pageContext.request.contextPath)

在JS中,我发现不能直接引用这个,所以导致我最开始的JS全是写在JSP里面 ,代码非常的乱。

在JSP中加一句

<input type="hidden" id="context" value="${pageContext.request.contextPath}">

然后我们就可以在对应的JS文件中直接去获取context,作为字符串来使用

var context= document.getElementById("context").getAttribute("value")

我也碰到了路径的问题,建议最好不要把JS文件放在Web-inf下,因为真的很难访问,我查了很多都没有看到,没有表情(很难受)。JSP的话可以通过Action在配置文件中通过视图解析器来进行访问。

获得对象的json字符串传回后台,无法转换Date型数据

前端的代码:

 form.on("submit(changeUser)",function(data){
        var index = layer.msg('提交中,请稍候',{icon: 16,time:false,shade:0.8})
题。 这是一个比较全面的JavaWeb应用,需要涉及到数据库操作、JSP页面、Servlet程序以及Filter过滤器等多个方面。下面我会分别介绍一下各个方面的实现。 一、数据库连接池C3P0及JDBC技术 1.1 数据库准备 首先需要准备好一个数据库,在本例我们使用MySQL数据库。创建一个名为student的数据库,并在该数据库创建一个名为stu_info的表,包含学号、姓名、性别、出生日期、所在院系、爱好、个人简介等信息。 1.2 C3P0连接池配置 使用C3P0连接池可以有效地提高数据库连接的效率和稳定性。在项目,我们需要在web.xml文件配置一个参数,用来指定C3P0配置文件的路径。 ```xml <context-param> <param-name>configLocation</param-name> <param-value>/WEB-INF/c3p0-config.xml</param-value> </context-param> ``` 然后在项目的WEB-INF目录下创建一个名为c3p0-config.xml的文件,并在其进行连接池的配置。 ```xml <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <default-config> <property name="jdbcUrl">jdbc:mysql://localhost:3306/student</property> <property name="driverClass">com.mysql.jdbc.Driver</property> <property name="user">root</property> <property name="password">123456</property> <property name="maxPoolSize">50</property> <property name="minPoolSize">5</property> <property name="initialPoolSize">10</property> <property name="maxIdleTime">1800</property> <property name="acquireIncrement">3</property> <property name="idleConnectionTestPeriod">60</property> <property name="checkoutTimeout">10000</property> </default-config> </c3p0-config> ``` 1.3 JDBC编程 在JavaWeb应用,我们需要使用JDBC技术来连接数据库并进行数据的增删改查。在本例,我们可以使用以下代码来连接数据库并查询学生信息。 ```java public class StudentDao { private ComboPooledDataSource dataSource; public StudentDao() throws Exception { dataSource = new ComboPooledDataSource(); } // 获取学生信息 public List<Student> getStudents() { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; List<Student> students = new ArrayList<Student>(); try { conn = dataSource.getConnection(); String sql = "SELECT * FROM stu_info"; stmt = conn.prepareStatement(sql); rs = stmt.executeQuery(); while (rs.next()) { Student student = new Student(); student.setSno(rs.getString("sno")); student.setName(rs.getString("name")); student.setSex(rs.getString("sex")); student.setBirthday(rs.getDate("birthday")); student.setDepartment(rs.getString("department")); student.setHobby(rs.getString("hobby")); student.setIntro(rs.getString("intro")); students.add(student); } } catch (SQLException e) { e.printStackTrace(); } finally { try { if (rs != null) rs.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); } } return students; } } ``` 二、JSP页面 在JavaWeb应用,我们通常需要使用JSP页面来实现前端页面的展示和用户交互。在本例,我们需要设计三个JSP页面,分别是addStu.jsp、editStu.jsp和stuList.jsp。其addStu.jsp页面用来添加学生信息,editStu.jsp页面用来编辑学生信息,stuList.jsp页面用来展示学生信息列表。 addStu.jsp页面代码: ```html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加学生信息</title> </head> <body> <h1>添加学生信息</h1> <form action="${pageContext.request.contextPath}/saveStudent" method="post"> <table> <tr> <td>学号:</td> <td><input type="text" name="sno"></td> </tr> <tr> <td>姓名:</td> <td><input type="text" name="name"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 </td> </tr> <tr> <td>出生日期:</td> <td><input type="date" name="birthday"></td> </tr> <tr> <td>所在院系:</td> <td><input type="text" name="department"></td> </tr> <tr> <td>爱好:</td> <td><input type="text" name="hobby"></td> </tr> <tr> <td>个人简介:</td> <td><textarea name="intro"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" value="保存"> <input type="reset" value="重置"> </td> </tr> </table> </form> </body> </html> ``` editStu.jsp页面代码: ```html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>编辑学生信息</title> </head> <body> <h1>编辑学生信息</h1> <form action="${pageContext.request.contextPath}/editStudent" method="post"> <table> <tr> <td>学号:</td> <td><input type="text" name="sno" value="${student.sno}" readonly></td> </tr> <tr> <td>姓名:</td> <td><input type="text" name="name" value="${student.name}"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男" ${student.sex == '男' ? 'checked' : ''}>男 <input type="radio" name="sex" value="女" ${student.sex == '女' ? 'checked' : ''}>女 </td> </tr> <tr> <td>出生日期:</td> <td><input type="date" name="birthday" value="${student.birthday}"></td> </tr> <tr> <td>所在院系:</td> <td><input type="text" name="department" value="${student.department}"></td> </tr> <tr> <td>爱好:</td> <td><input type="text" name="hobby" value="${student.hobby}"></td> </tr> <tr> <td>个人简介:</td> <td><textarea name="intro">${student.intro}</textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" value="保存"> <input type="reset" value="重置"> </td> </tr> </table> </form> </body> </html> ``` stuList.jsp页面代码: ```html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学生信息列表</title> </head> <body> <h1>学生信息列表</h1> <table border="1"> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> <th>所在院系</th> <th>爱好</th> <th>个人简介</th> <th>操作</th> </tr> <c:forEach items="${students}" var="student"> <tr> <td>${student.sno}</td> <td>${student.name}</td> <td>${student.sex}</td> <td>${student.birthday}</td> <td>${student.department}</td> <td>${student.hobby}</td> <td>${student.intro}</td> <td> <a href="${pageContext.request.contextPath}/editStu?sno=${student.sno}">编辑</a> <a href="${pageContext.request.contextPath}/delStudent?sno=${student.sno}">删除</a> </td> </tr> </c:forEach> </table> <br> <a href="${pageContext.request.contextPath}/addStu.jsp">添加学生信息</a> </body> </html> ``` 三、Servlet程序 在JavaWeb应用,我们需要使用Servlet程序来处理HTTP请求和响应。在本例,我们需要设计四个Servlet程序,分别是SaveStudentServlet、EditStudentServlet、DelStudentServlet和SearchStudentServlet。 SaveStudentServlet用来保存学生信息,EditStudentServlet用来编辑学生信息,DelStudentServlet用来删除学生信息,SearchStudentServlet用来查询学生信息。 SaveStudentServlet代码: ```java public class SaveStudentServlet extends HttpServlet { private static final long serialVersionUID = 1L; private StudentDao studentDao; public SaveStudentServlet() { super(); } public void init() throws ServletException { try { studentDao = new StudentDao(); } catch (Exception e) { e.printStackTrace(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String sno = request.getParameter("sno"); String name = request.getParameter("name"); String sex = request.getParameter("sex"); String birthday = request.getParameter("birthday"); String department = request.getParameter("department"); String hobby = request.getParameter("hobby"); String intro = request.getParameter("intro"); Student student = new Student(); student.setSno(sno); student.setName(name); student.setSex(sex); student.setBirthday(Date.valueOf(birthday)); student.setDepartment(department); student.setHobby(hobby); student.setIntro(intro); try { studentDao.addStudent(student); } catch (Exception e) { e.printStackTrace(); } response.sendRedirect(request.getContextPath() + "/stuList"); } } ``` EditStudentServlet代码: ```java public class EditStudentServlet extends HttpServlet { private static final long serialVersionUID = 1L; private StudentDao studentDao; public EditStudentServlet() { super(); } public void init() throws ServletException { try { studentDao = new StudentDao(); } catch (Exception e) { e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String sno = request.getParameter("sno"); Student student = null; try { student = studentDao.getStudent(sno); } catch (Exception e) { e.printStackTrace(); } request.setAttribute("student", student); request.getRequestDispatcher("/editStu.jsp").forward(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String sno = request.getParameter("sno"); String name = request.getParameter("name"); String sex = request.getParameter("sex"); String birthday = request.getParameter("birthday"); String department = request.getParameter("department"); String hobby = request.getParameter("hobby"); String intro = request.getParameter("intro"); Student student = new Student(); student.setSno(sno); student.setName(name); student.setSex(sex); student.setBirthday(Date.valueOf(birthday)); student.setDepartment(department); student.setHobby(hobby); student.setIntro(intro); try { studentDao.updateStudent(student); } catch (Exception e) { e.printStackTrace(); } response.sendRedirect(request.getContextPath() + "/stuList"); } } ``` DelStudentServlet代码: ```java public class DelStudentServlet extends HttpServlet { private static final long serialVersionUID = 1L; private StudentDao studentDao; public DelStudentServlet() { super(); } public void init() throws ServletException { try { studentDao = new StudentDao(); } catch (Exception e) { e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String sno = request.getParameter("sno"); try { studentDao.delStudent(sno); } catch (Exception e) { e.printStackTrace(); } response.sendRedirect(request.getContextPath() + "/stuList"); } } ``` SearchStudentServlet代码: ```java public class SearchStudentServlet extends HttpServlet { private static final long serialVersionUID = 1L; private StudentDao studentDao; public SearchStudentServlet() { super(); } public void init() throws ServletException { try { studentDao = new StudentDao(); } catch (Exception e) { e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String keyword = request.getParameter("keyword"); List<Student> students = null; try { students = studentDao.searchStudent(keyword); } catch (Exception e) { e.printStackTrace(); } request.setAttribute("students", students); request.getRequestDispatcher("/stuList.jsp").forward(request, response); } } ``` 四、Filter过滤器 在JavaWeb应用,我们需要使用Filter过滤器来对HTTP请求和响应进行过滤处理。在本例,我们需要使用Filter过滤器来解决POST提交方式时的文乱码问题。 Filter过滤器代码: ```java public class EncodingFilter implements Filter { private String encoding = "UTF-8"; public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException { request.setCharacterEncoding(encoding); response.setCharacterEncoding(encoding); filterChain.doFilter(request, response); } public void init(FilterConfig filterConfig) throws ServletException { String encodingParam = filterConfig.getInitParameter("encoding"); if (encodingParam != null) { encoding = encodingParam; } } public void destroy() { } } ``` 在web.xml文件配置Filter过滤器: ```xml <filter> <filter-name>encodingFilter</filter-name> <filter-class>com.example.EncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ``` 以上就是本例JavaWeb应用的实现,包括C3P0连接池的配置、JSP页面的设计、Servlet程序的编写以及Filter过滤器的使用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值