layui表格后端连接数据库

---

前言

之前也用过layui写项目，关于给到的数据接口都没用过，都是用的原生获取数据，真的就只是为了它的ui界面用而用，在这次的课设里，我想要去了解layui给到的接口，有所收获，之前查找资料也没找到具体的关于表格接口的使用，在这里写个笔记，也供自己和同行一起学习。不足的地方，欢迎指出。

---

一、JDBC连接数据库

   // 在此处获取数据并返回
        String url="jdbc:mysql://localhost:3306/salary";
        String dbUsername="root";
        String dbPassword="123456";
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection connection= DriverManager.getConnection(url,dbUsername,dbPassword);

如果connection不为null，则连接成功
这里我获取一张数据库里的表数据

//设置servelet的路径
@WebServlet("/data")
public class servlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 在此处获取数据并返回
        String url="jdbc:mysql://localhost:3306/salary";
        String dbUsername="root";
        String dbPassword="123456";
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection connection= DriverManager.getConnection(url,dbUsername,dbPassword);

            String sql = "SELECT * FROM salary_staff ";
            PreparedStatement pstmt = connection.prepareStatement(sql);

            ResultSet rs = pstmt.executeQuery();
            //用一个链表装map集合，每一个map集合都是一个值对象
            List<Map<String, Object>> recordList = new ArrayList<>();
            while (rs.next()) {
                Map<String, Object> recordMap = new HashMap<>();
                recordMap.put("id", rs.getInt("id"));
                recordMap.put("number", rs.getString("number"));
                recordMap.put("name", rs.getString("name"));
                recordMap.put("age_salary", rs.getString("age_salary"));
                recordMap.put("work_salary", rs.getString("work_salary"));
                // 以此类推，将每个字段名和字段值存入Map
                recordList.add(recordMap);
            }
			//创建一个map对象，设置layui接口的对应的数据格式
            Map<String, Object> result = new HashMap<>();
            result.put("code", 0); // 设置响应状态码，0 表示成功
            result.put("msg", ""); // 设置响应消息，这里可以不设置
            result.put("count", recordList.size()); // 设置数据总数
            result.put("data", recordList); // 设置数据列表

			//将获取的数据转换为json格式
            Gson gson = new Gson();
            String resultJson = gson.toJson(result);
			//编码设置
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(resultJson); // 将数据以 JSON 格式返回
        } catch (ClassNotFoundException | SQLException e) {
            throw new RuntimeException(e);
        }
    }

二、layui表格的url

<script>
  layui.use(function(){
    var $ = layui.$;
    var table = layui.table;
    // 渲染
    table.render({
      elem: '#ID-table-demo-filter',
      url:'/IMS_for_Productive_Enterprises_war_exploded/data', // 这里我的路径用过data，/data，/项目名/data都不起效果
      toolbar: 'default',
      height: 315,
      cols: [function(){
        var arr = [
          {field:'id', title:'ID', width:80, fixed: 'left'},
          {field:'number', title:'工号', width:120},
          {field:'name', title:'姓名'},
          {field:'age_salary', title:'工龄工资'},
          {field:'work_salary', title:'岗位工资'}
        ];

        // 初始化筛选状态
        var local = layui.data('table-filter-test'); // 获取对应的本地记录
        layui.each(arr, function(index, item){
          if(item.field in local){
            item.hide = local[item.field];
          }
        });
        return arr;
      }() ],
      done: function(){
        // 记录筛选状态
        var that = this;
        that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
          var input = $(this).prev()[0];
          // 此处表名可任意定义
          layui.data('table-filter-test', {
            key: input.name
            ,value: input.checked
          })
        });
      }
    });
  });
</script>

当我发现网址是这个样子的时候，我将中间的复制粘贴到路径中，竟然很神奇的解决了，数据能够正确的显示出来了，因为jsp是很久之前学的，忘了是怎么一回事了，先在这里做个笔记，能够帮助到同行的朋友我将非常荣幸，同时有大佬能帮我解除疑惑提前感谢。