如果傘皮不能用代码改变世界，那就改变自己就好了~ 请把您的赞留给大神们，把下次一定留给俺，俺下次一定好好写（^ 狗头 ^）~
将数据从数据库取得数据后，主要用到 request.getSession().setAttribute(“data”,data); response.sendRedirect(“success.jsp”); 这两句代码进行将数据传到前台，和进行页面的跳转
@WebServlet("/GradeServlet") public class GradeServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String s=request.getParameter("search"); List data; Service service = new Service(); if(s.equals("查询")) { data = service.getSql(request.getParameter("name")); }else { data=service.getSql(); } request.getSession().setAttribute("data",data); response.sendRedirect("success.jsp"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } }在jsp里通过写java代码，将数据取出来后，利用for循环将数据遍历取出来，主要通过 < td>< % =grade.getStudent_number() %>< /td>这句代码将其取出。其中grade是一个实体类，有get，set方法
<table style="margin: auto "> <caption>成绩查询结果</caption> <tr> <th>学号</th> <th>姓名</th> <th>数学</th> <th>英语</th> <th>计算机原理</th> <th>C语言</th> <th>java</th> <th>Android</th> <th>算法</th> <th>平均成绩</th> </tr> <% if( request.getSession().getAttribute("data")!=null){ List data= (List) request.getSession().getAttribute("data"); for(int i=0;i<data.size();i++){ Grade grade= (Grade) data.get(i); %> <tr> <td><%=grade.getStudent_number()%></td> <td><%=grade.getStudent_name()%></td> <td><%=grade.getMath()%></td> <td><%=grade.getEnglish()%></td> <td><%=grade.getComputer()%></td> <td><%=grade.getC()%></td> <td><%=grade.getJava()%></td> <td><%=grade.getAndroid()%></td> <td><%=grade.getAlgorithm()%></td> <td><%=grade.getAverage()%></td> </tr> <% } } %> </table>全部代码，记表单提交到servlet的action填这个$ { pageContext.request.contextPath }/ GradeServlet
<%@ page import="java.util.List" %> <%@ page import="Bean.Grade" %><%-- Date: 2020/4/26 Time: 10:59 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=utf-8" language="java" %> <html> <head> <title>登录成功界面</title> <style type="text/css"> tr:hover{ background-color: #c4e4ff; } div{ margin-top: 200px; } table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; } caption { font-size: larger; border-radius: 9px 9px 0 0; background: #ccc; /*margin: 1em auto;*/ } th,td { padding: .65em; } th { background: #555 no-repeat scroll 0 0; /* border: 1px solid #777; */ color: #fff; } td { background: #ccc; /*border: 1px solid #777;*/ } tbody tr:nth-child(odd) { background: #ccc; } th:first-child { border-radius: 0 0 0 0; } th:last-child { border-radius: 0 0 0 0; } tr:last-child td:first-child { border-radius: 0 0 0 9px; } tr:last-child td:last-child { border-radius: 0 0 9px 0; } </style> </head> <body> <% request.setCharacterEncoding("UTF-8"); %> <div> <table style="margin: auto "> <caption>成绩查询结果</caption> <tr> <th>学号</th> <th>姓名</th> <th>数学</th> <th>英语</th> <th>计算机原理</th> <th>C语言</th> <th>java</th> <th>Android</th> <th>算法</th> <th>平均成绩</th> </tr> <% if( request.getSession().getAttribute("data")!=null){ List data= (List) request.getSession().getAttribute("data"); for(int i=0;i<data.size();i++){ Grade grade= (Grade) data.get(i); %> <tr> <td><%=grade.getStudent_number()%></td> <td><%=grade.getStudent_name()%></td> <td><%=grade.getMath()%></td> <td><%=grade.getEnglish()%></td> <td><%=grade.getComputer()%></td> <td><%=grade.getC()%></td> <td><%=grade.getJava()%></td> <td><%=grade.getAndroid()%></td> <td><%=grade.getAlgorithm()%></td> <td><%=grade.getAverage()%></td> </tr> <% } } %> </table> </div> </body> </html>关于表格的实现，官方文档最详细，在这里只是做一些解释，在这之前，要先引入好layUI，不会的请看这
在这，使用table.render将表格渲染出来，在这里，数据交互中就是URL的接口，请一定按照layUI规定的格式生成json。 elem:填写的是table的id； height：填写的是表格的高度，宽度是动态改变的； URL：填写的是后台的数据接口，数据是按照layUI规定的json格式； page：代表是否要分页； cols：field后面依次是你json数据中（实体类/数据库）的字段,title：是表格是表头； sort：代表是否开启排序，这是layUI包装好的； templet：一种模板，可去官网进行学习
<script> layui.use('table', function(){ var table = layui.table; var laydate=layui.laydate; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/index/preBook' //数据接口 ,page: true //开启分页 ,cols: [ [ //表头 {field: 'pId', title: 'ID', width:80, sort: true} ,{field: 'bookId', title: 'isbn', width:80} ,{field: 'bookName', title: '书名', width:80, sort: true} ,{field: 'pManId', title: '借书人', width:80} ,{field: 'pbTime', title: '借书时间',templet : "<div>{{layui.util.toDateString(d.pbTime, 'yyyy-MM-dd HH:mm:ss')}}</div>", width: 177} ,{field: 'prTime', title: '还书时间',templet : "<div>{{layui.util.toDateString(d.prTime, 'yyyy-MM-dd HH:mm:ss')}}</div>", width: 177} ] ] }); }); </script>想了想还是贴出json代码吧，一条龙搞完哈哈，以其中一个接口为例
//预约记录界面 @GetMapping("/preHistoryInterface") public String preHistoryInterface(){ List<PreBorrow> borrows=bookService.getAllPreBor(); JSONObject obj1=new JSONObject(); obj1.put("code", 0); obj1.put("msg", ""); obj1.put("count",100); obj1.put("data",borrows); // System.out.println("search"+obj1); return obj1.toJSONString(); }再看看效果吧，毕竟这才是最直观的
首先得在springboot工程中导入thymeleaf包，可以在建工程中选择，可见教程
由于HTML需要thymeleaf的模板引擎才能编译所以先贴出代码，将下列代码替换原本的头代码
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org">向HTML传数据主要用到了model，这一强大功能 List < BorrowDetail > list = bookService.getBorInfo(user); //从数据库中取出数据 model.addAttribute(“list”, list);//把数据通过model传到前台
@GetMapping("/borrow") public String listBorListById(Model model, HttpServletRequest request) { User user = (User) request.getSession().getAttribute("user"); model.addAttribute("user", user); List<BorrowDetail> list = bookService.getBorInfo(user); model.addAttribute("list", list); return "user_borrow"; }这要接收后台的数据了，并运用thymeleaf的功能进行处理 通过 < tr th:each=“booklist: $ {list}” >取得数据的引用，并循环遍历数据 通过 < td th:text=" $ {booklist.isbn}" >< /td>取出数据显示出来 然后会自动根据数据多少进行渲染
<table class="table table-hover" style="text-align:center"> <thead> <tr> <th>isbn</th> <th>书名</th> <th>出版社</th> <th>作者</th> <th>出版时间</th> </tr> </thead> <tbody> <tr th:each="booklist: ${list}"> <td th:text="${booklist.isbn}"></td> <td th:text="${booklist.bname}"></td> <td th:text="${booklist.publisher}"></td> <td th:text="${booklist.writer}"></td> <td th:text="(${booklist.ptime.getYear()}+1900)+'年'"></td> </tr> </tbody> </table>