如何实现将数据库中的表展示到前端？

1实现实体类创建：以订单功能为例子

import lombok.Data;

import java.io.Serializable;
import java.util.Date;

@Data
public class Order implements Serializable { 
    private static final long serialVersionUID = -4415517704211731385L;
    //活动id
    private Integer orderArticleId;
    //用户ID
    private  Integer orderUserId;
    //订单 ID
    private Integer orderId;
    //管理员：1 用户：0；
    private  Integer orderRole;
    //创建时间
    private Date orderCreateTime;

    //订单用户名
    private  String orderAuthorName;

	//活动
    private Article article;
}

2.创建service接口 和 service实现类：pageInfo 也可以用List<order>

mport java.util.HashMap;

public interface OrderService { 

    /** * 获取所有评论列表 * * @param pageIndex 第几页开始 * @param pageSize 一页显示数量 * @return 列表 */
    PageInfo<Order> listOrderByPage(
            Integer pageIndex,
            Integer pageSize,
            HashMap<String, Object> criteria);


}

    @Override
    public PageInfo<Order> listOrderByPage(Integer pageIndex, Integer pageSize, HashMap<String, Object> criteria) { 
        List<Order> orderList = null;
        try { 

            orderList = orderMapper.listOrders(criteria);
            for (int i = 0; i < orderList.size(); i++) { 
            //getArticleByStatusAndId表示通过id查询用户信息
                Article article = articleMapper.getArticleByStatusAndId(ArticleStatus.PUBLISH.getValue(), orderList.get(i).getOrderArticleId());
                orderList.get(i).setArticle(article);

            }
        } catch (Exception e) { 
            e.printStackTrace();
            log.error("分页获得订单失败,pageIndex:{}, pageSize:{}, cause:{}", pageIndex, pageSize, e);
        }

        return new PageInfo<>(orderList);
    }

3实现orderMapper.xml中的

  <!--获取评论列表-->
  <select id="listOrders" resultType="com.liuyanzhao.ssm.demo.entity.Order">
    SELECT
    <include refid="Base_Column_List"/>
    FROM
    <include refid="tb"/>
    <where>
      <if test="userId != null">
        order_user_id = #{ userId}
      </if>
    </where>
    ORDER BY order_id DESC
  </select>

注意 ：其中order为数据库的关键字 不能直接用表名 必须加‘order’

  <sql id="tb">`order`</sql>

4.controller层和前端jsp代码也可以用其他的：

package com.l.ssm.demo.controller.admin;/* *@author hechun *@date 2021/5/22 13:50 * */

import com.github.pagehelper.PageInfo;
import com.liuyanzhao.ssm.demo.entity.Comment;
import com.liuyanzhao.ssm.demo.entity.Order;
import com.liuyanzhao.ssm.demo.entity.User;
import com.liuyanzhao.ssm.demo.enums.UserRole;
import com.liuyanzhao.ssm.demo.service.ArticleService;
import com.liuyanzhao.ssm.demo.service.OrderService;
import org.checkerframework.checker.units.qual.A;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.List;

@Controller
@RequestMapping("/admin/order")
public class BackOrderController { 
    @Autowired
    private OrderService orderService;
    @Autowired
    private ArticleService articleService;


//required = false 表示 这个值可以为空.
    @RequestMapping(value = "")
    public String orderList(@RequestParam(required = false,defaultValue = "1")Integer pageIndex,
                            @RequestParam(required = false,defaultValue = "10")Integer pageSize,
                            HttpSession session,
                            Model model){ 
        User user = (User) session.getAttribute("user");


        HashMap<String, Object> criteria = new HashMap<>();
        if(!UserRole.ADMIN.getValue().equals(user.getUserRole())){ 
            //用户查询自己的订单,管理员查询所有的订单
            criteria.put("userId",user.getUserId());

        }
        PageInfo<Order> orderPageInfo = orderService.listOrderByPage(pageIndex,pageSize,criteria);
        model.addAttribute("pageInfo",orderPageInfo);
        model.addAttribute("pageUrlPrefix","/admin/index?pageIndex");
        return "Admin/Order/index";
    }

}

<rapid:override name="content">
    <blockquote class="layui-elem-quote">
        <span class="layui-breadcrumb" lay-separator="/">
              <a href="/admin">首页</a>
              <a><cite>订单列表</cite></a>
        </span>
    </blockquote>
    <div class="layui-tab layui-tab-card">
        <table class="layui-table" lay-even lay-skin="nob">
            <colgroup>
                <col width="100">
                <col width="300">
                <col width=200">
                <col width="150">
                <col width="50">
            </colgroup>
            <thead>
            <tr>
                <th>作者</th>
                <th>操作</th>
                <th>于</th>
                <th>提交于</th>
                <th>ID</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${pageInfo.list}" var="c">
                <tr>
                    <td>

                        <strong>${ c.orderAuthorName}</strong>

                    </td>
                    <td class="dashboard-comment-wrap">
<%--                        <c:if test="${c.commentPid!=0}">--%>
<%--                            <span class="at">@ </span><a href="${c.commentAuthorUrl}">${ c.commentPname}</a>--%>
<%--                        </c:if>--%>
<%--                            ${ c.commentContent}--%>
                        <div class="row-actions">


<%--                            <c:if test="${sessionScope.user.userRole == 'admin'}">--%>
<%--&lt;%&ndash;                                        <span class=""> |&ndash;%&gt;--%>
<%--&lt;%&ndash;                                            <a href="/admin/comment/edit/${c.commentId}">编辑</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;                                         </span>&ndash;%&gt;--%>
<%--                            </c:if>--%>

                            <span class=""> |
                                        <a href="javascript:void(0)" onclick="deleteOrder(${c.orderId})">删除</a>
                                     </span>
                        </div>
                    </td>
                    <td>
                        <a href="/article/${c.article.articleId}"
                           target="_blank">${ c.article.articleTitle}</a>
                    </td>
                    <td>
                        <fmt:formatDate value="${c.orderCreateTime}" pattern="yyyy年MM月dd日 HH:dd:ss"/>
                    </td>
                    <td>${ c.orderId}</td>

                </tr>
            </c:forEach>
            </tbody>

        </table>

        <div id="nav" style="">
            <%@ include file="../Public/paging.jsp" %>
        </div>
    </div>


</rapid:override>

仅供借鉴 ，代码不完全。
其中点击删除的js代码：

function deleteOrder(id) { 
    if(confirmDelete()==true){ 
        $.ajax({ 
            async: false,
            type: "POST",
            url:'/admin/order/delete/'+id,
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "text",
            complete:function () { 
                window.location.reload();
            }
        })
    }
}