Layui如何連接mysql數據庫并操作CRUD

Layui如何連接mysql數據庫并操作CRUD？其實要解決這個問題也不難，這篇文章給出了相對應的分析和解答，下面我們一起來看看解決方法吧。

一、使用layui框架實現權限登陸顯示樹形菜單

1、首先引用一下layui框架所需的包

2、創建二星權限顯現樹形菜單所需要的表和所需要操作的書本類型表

用戶表t_xm_user

樹形菜單展現所需的權限表 t_book_menu

中間權限表t_usermenuid

書本類型表t_book_category2

準備下面代碼中所需要的包工具包:

https://pan.baidu.com/s/1XnwIoJQUDyw0cJads5Pddw

在項目中配置與mysql數據庫連接

3、權限登陸

userDao類

package com.ht.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.ht.daoimpl.IUserDao;
import com.ht.util.JsonBaseDao;
import com.ht.util.JsonUtils;
import com.ht.util.PageBean;
import com.ht.util.StringUtils;public class UserDao extends JsonBaseDao implements IUserDao{    /**
     * 登陸查詢用戶表
     * @param paMap
     * @param pageBean
     * @return
     * @throws SQLException 
     * @throws IllegalAccessException 
     * @throws InstantiationException 
     */
    public List<Map<String,Object>> list(Map<String,String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
        String sql="select * from t_xm_user where true";
        String user_name=JsonUtils.getParamVal(paMap, "user_name");
        String user_pwd=JsonUtils.getParamVal(paMap, "user_pwd");        if (StringUtils.isNotBlank(user_name)) {
            sql= sql +" and user_name ="+user_name;
        }        if (StringUtils.isNotBlank(user_pwd)) {
            sql= sql +" and user_pwd ="+user_pwd;
        }        return super.executeQuery(sql, pageBean);
    }    /**
     * 通過中間表查詢登陸用戶所對應的權限
     * @param paMap
     * @param pageBean
     * @return
     * @throws InstantiationException
     * @throws IllegalAccessException
     * @throws SQLException     */
    public List<Map<String,Object>> listMenu(String user_id,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
        String sql="select * from t_usermenuid where true";        if (StringUtils.isNotBlank(user_id)) {
            sql= sql +" and user_id ="+user_id;
        }        return super.executeQuery(sql, pageBean);
    }
}

web層

userAction類

package com.ht.web;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;import com.ht.dao.UserDao;import com.zking.framework.ActionSupport;import com.ht.util.PageBean;import com.ht.util.ResponseUtil;import com.ht.util.StringUtils;public class UserAction extends ActionSupport {    private UserDao uesrDao = new UserDao();    public String login(HttpServletRequest req, HttpServletResponse rep) {        try {
            List<Map<String, Object>> list = this.uesrDao.list(req.getParameterMap(), null);            if (list != null && list.size() > 0) {
                List<Map<String, Object>> listmenu = this.uesrDao.listMenu(req.getParameter("user_name"), null);
                StringBuffer sb = new StringBuffer();                for (Map<String, Object> map : listmenu) {
                    sb.append("," + map.get("Menuid"));
                }
                req.getSession().setAttribute("menuhid", sb.substring(1));                return "index";
            }
        } catch (Exception e) {            // TODO Auto-generated catch block            e.printStackTrace();
        }        return "login";
    }    /**
     * datagrid所需數據后端程序員開發完畢
     * @param req
     * @param resp
     * @return
     */
    public String list(HttpServletRequest req,HttpServletResponse resp){        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Map<String, Object>> list = this.uesrDao.list(req.getParameterMap(), pageBean);
            ObjectMapper om=new ObjectMapper();            //數據格式轉換
            Map<String, Object> map=new HashMap<>();
            map.put("total", pageBean.getTotal());
            map.put("rows", list);
            ResponseUtil.write(resp, om.writeValueAsString(map));
        } catch (Exception e) {            // TODO Auto-generated catch block            e.printStackTrace();
        } 
        return null;
    }
    
}

login.jsp 顯示登陸界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="${pageContext.request.contextPath }/css/shop.css" type="text/css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath }/css/skin.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath }/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/css/font-awes0ome.min.css" rel="stylesheet" type="text/css" />
    <script src="${pageContext.request.contextPath }/static/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/static/js/layer.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/static/js/Sellerber.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath }/static/js/shopFrame.js" type="text/javascript"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/login.js"></script>
    <title>用戶登錄</title>
</head>
<body class="login-layout Reg_log_style" onload="mya()">
    <p class="logintop">
        <span>歡迎后臺管理界面平臺</span>
    </p>
    <p class="loginbody">
        <p class="login-container">
            <p class="center">
                <img src="images/logo.png" />
            </p>
            <p class="space-6"></p>
            <p class="position-relative">
                <p id="login-box" class="login-box widget-box no-border visible">
                    <p class="login-main">
                        <p class="clearfix">
                            <p class="login_icon">
                                <img src="images/login_img.png" />
                            </p>
                            <form action="${pageContext.request.contextPath}/userAction.action?methodName=login"
                                method="post"
                                style="width: 300px; float: right; margin-right: 50px;"
                                onsubmit="return vlogin()">
                                <h5 class="title_name">
                                    <img src="images/login_title.png" />
                                </h5>
                                <fieldset>
                                    <ul>
                                        <li class="frame_style form_error"><label                                            class="user_icon"></label> <input name="user_name"
                                            type="text" placeholder="請輸入用戶名" id="username" /><span
                                            id="username" style="color: red;"></span></li>
                                        <li class="frame_style form_error"><label                                            class="password_icon"></label> <input name="user_pwd"
                                            type="password" placeholder="請輸入密碼" id="userpwd" /><span
                                            id="userpwd" style="color: red;"></span></li>
                                        <li class="frame_style form_error"><label                                            class="Codes_icon"></label><input type="text" id="yzm" placeholder="請輸入正確驗證碼"/>
                                        <p class="Codes_region">
                                                <span id="yz" style="color: red;">X X X X</span>
                                            </p></li>
                                    </ul>
                                    <p class="space"></p>
                                    <p class="clearfix">
                                        <input type="submit" class="login_btn" value="登陸" />
                                    </p>
                                    <p class="space-4"></p>
                                </fieldset>
                            </form>
                        </p>
                </p>
                <!-- /login-box -->
            </p>
            <!-- /position-relative -->
        </p>
    </p>
    </p>
</body>
</html>

配置xml

<action path="/userAction" type="com.ht.web.UserAction">
        <forward name="login" path="/login.jsp" redirect="false" />
    </action>

效果如下：

4、樹形菜單顯示

對樹形菜單的格式進行描述  寫一個TreeNode 類

package com.ht.entity;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class TreeNode {    private String id;    private String name;    private Map<String, Object> attributes = new HashMap<>();    private List<TreeNode> children = new ArrayList<>();    public String getId() {        return id;
    }    public void setId(String id) {        this.id = id;
    }    public String getName() {        return name;
    }    public void setName(String name) {        this.name = name;
    }    public Map<String, Object> getAttributes() {        return attributes;
    }    public void setAttributes(Map<String, Object> attributes) {        this.attributes = attributes;
    }    public List<TreeNode> getChildren() {        return children;
    }    public void setChildren(List<TreeNode> children) {        this.children = children;
    }    public TreeNode(String id, String text, Map<String, Object> attributes, List<TreeNode> children) {
        super();        this.id = id;        this.name = name;        this.attributes = attributes;        this.children = children;
    }    public TreeNode() {
        super();
    }

    @Override    public String toString() {        return "TreeNode [id=" + id + ", name=" + name + ", attributes=" + attributes + ", children=" + children + "]";
    }

}

dao層 MenuDao類

在dao類中使用了遞歸來轉換josn格式，因為layui只能識別這種格式

package com.ht.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.ht.daoimpl.IMenuDao;
import com.ht.entity.TreeNode;
import com.ht.util.JsonBaseDao;
import com.ht.util.JsonUtils;
import com.ht.util.PageBean;
import com.ht.util.StringUtils;/**
 * 樹形權限管理類
 * @author Administrator
 * */public class MenuDao extends JsonBaseDao implements IMenuDao{    /**
     * 
     * @param map   req.getParameterMap
     * @param pageBean  分頁
     * @return
     * @throws Exception 
     */
    public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws Exception{
        List<Map<String, Object>> listMenu=this.listMenuSef(map, pageBean);
        List<TreeNode> treeNodeList=new ArrayList<>();
        menuList2TreeNodeList(listMenu, treeNodeList);        return treeNodeList;
    }    /**
     * 查詢子節點
     * @param map
     * @param pageBean
     * @return
     * @throws Exception     */
    public List<Map<String, Object>> listMenuSef(Map<String, String[]> map,PageBean pageBean)throws Exception{
        String sql=" select * from t_book_menu where true";
        String id=JsonUtils.getParamVal(map, "menuhid");        if(StringUtils.isNotBlank(id)) {
            sql= sql + " and Menuid in ("+id+")";    
        }        else {  
            sql= sql + " and Menuid =-1";
        }        return super.executeQuery(sql, pageBean);
    }    /**
     * 查詢Menu表的數據
     * @param map
     * @param pageBean
     * @return     */
    public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean)throws Exception{
        String sql=" select * from t_book_menu where true";
        String id=JsonUtils.getParamVal(map, "id");        if(StringUtils.isNotBlank(id)) {
            sql= sql + " and parentid ="+id;    
        }        else {
            sql= sql + " and parentid = -1";
        }        return super.executeQuery(sql, pageBean);
    }    
    /**
     * {Menuid:1,....[]}
     * ->{id:1,....[]}
     * menu表的數據不符合easyui樹形展示的數據格式
     * 需要轉換成easyui所能識別的數據格式
     * @param map
     * @param reTreeNode
     * @throws Exception 
     */
    public void menu2TreeNode(Map<String, Object> map, TreeNode treeNode) throws Exception {
        treeNode.setId(map.get("Menuid").toString());
        treeNode.setName(map.get("Menuname").toString());
        treeNode.setAttributes(map);
        Map<String, String[]> jspMap=new HashMap<>();
        jspMap.put("id", new String[] {treeNode.getId()});        this.listMenu(jspMap, null);
        List<Map<String, Object>> listMenu=this.listMenu(jspMap, null);
        List<TreeNode> treeNodeList=new ArrayList<>();
        menuList2TreeNodeList(listMenu, treeNodeList);
        treeNode.setChildren(treeNodeList);
    }    /**
     * [{Menuid:1,....[]},{Menuid:2,....[]}]
     * ->[{id:1,....[]},{id:2,....[]}]
     * @param mapList
     * @param treeNodeList
     * @throws Exception     */
    public void menuList2TreeNodeList(List<Map<String, Object>> mapList, List<TreeNode> treeNodeList)throws Exception {
        TreeNode treeNode =null;        for (Map<String, Object> map : mapList) {
            treeNode =new TreeNode();
            menu2TreeNode(map, treeNode);
            treeNodeList.add(treeNode);
        }
    }
}

web層

MenuAction類

package com.ht.web;import java.io.PrintWriter;import java.sql.SQLException;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;import com.ht.biz.MenuBiz;import com.ht.bizipml.IMenuBiz;import com.ht.dao.MenuDao;import com.ht.entity.TreeNode;import com.zking.framework.ActionSupport;import com.ht.util.ResponseUtil;public class MenuAction extends ActionSupport {    private IMenuBiz menuDao = new MenuBiz();    public String treeMenu(HttpServletRequest req, HttpServletResponse response) throws Exception {
        @SuppressWarnings("unchecked")
        List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
        ObjectMapper om = new ObjectMapper();
        String jsonStr = om.writeValueAsString(list);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
        out.println(jsonStr);
        out.flush();
        out.close();        return null;
    }
}

index.jsp  顯示樹形菜單

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html >
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/index.css"> 
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/index.js"></script>
</head>

<body>
<input type="hidden" id="menuhid" value="${menuhid}">
<p class="layui-layout layui-layout-admin " id="app">
    <p class="layui-header">
        <p class="layui-logo">后臺管理界面</p>
        <!-- 頭部區域（可配合layui已有的水平導航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="#" onclick="exit()">退出登錄</a></li>
        </ul>
    </p>
    <!-- 左邊tree頁面 -->
    <p class="layui-side layui-bg-black">
        <p class="layui-side-scroll ">
            <p id="demo" ></p>
        </p>
    </p>
    <!-- 選項卡要顯示的地方 -->
    <p class="layui-body">
        <p class="layui-tab" lay-filter="tabs" lay-allowClose="true">
            <ul class="layui-tab-title">
            </ul>
            <p class="layui-tab-content">
            </p>
        </p>
    </p>
    <p class="layui-footer" align="center" >
        <!-- 底部固定區域 -->
        ? layui.com - 底部固定區域    </p>
</p>
</body>
</html>

配置xml

<action path="/menuAction" type="com.ht.web.MenuAction">
        <forward name="index" path="/index.jsp" redirect="false" />
    </action>

效果圖：

二、使用layui框架實現增，刪，改，查

dao層，從數據庫中拿出數據并且對其進行增，刪，改，查操作

package com.ht.dao;import java.sql.SQLException;import java.util.List;import java.util.Map;import com.ht.daoimpl.IBooktypeDao;import com.ht.util.JsonBaseDao;import com.ht.util.JsonUtils;import com.ht.util.PageBean;import com.ht.util.StringUtils;/**
 * 書籍類別管理
 * @author Administrator
 * */public class BooktypeDao extends JsonBaseDao implements IBooktypeDao{    /**
     * 編輯用戶信息 查詢書本類型表
     * @param paMap
     * @return
     * @throws Exception     */
    public int edit(Map<String, String[]> paMap) throws Exception {
        String sql = "update t_book_category2 set book_category_name=? where book_category_id=?";        return super.executeUpdate(sql, new String[] { "book_category_name","book_category_id" }, paMap);
    }    /**
     * 新增 查詢書本類型表
     * @param paMap
     * @return
     * @throws Exception     */
    public int add(Map<String, String[]> paMap) throws Exception {
        String sql = "INSERT INTO t_book_category2(book_category_name) VALUES(?)";        return super.executeUpdate(sql, new String[] { "book_category_name" }, paMap);
    }    /**
     * 刪除 查詢書本類型表
     * @param paMap
     * @return
     * @throws Exception     */
    public int remove(Map<String, String[]> paMap) throws Exception {
        String sql = "DELETE FROM t_book_category2 WHERE  book_category_id=?";        return super.executeUpdate(sql, new String[] { "book_category_id" }, paMap);
    }    /**
     * 查詢的方法
     * @param paMap
     * @param pageBean
     * @return
     * @throws InstantiationException
     * @throws IllegalAccessException
     * @throws SQLException     */
    public List<Map<String, Object>> select(Map<String, String[]> paMap, PageBean pageBean)            throws InstantiationException, IllegalAccessException, SQLException {
        String sql = "select * from t_book_category2 where true";
        String book_category_name = JsonUtils.getParamVal(paMap, "book_category_name");        if (StringUtils.isNotBlank(book_category_name)) {
            sql = sql + " and book_category_name  like '%" + book_category_name + "%'";
        }        return super.executeQuery(sql, pageBean);
    }
}

web層

BooktypeAction類

package com.ht.web;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;import com.ht.biz.BooktypeBiz;import com.ht.bizipml.IBooktypeBiz;import com.ht.dao.BooktypeDao;import com.zking.framework.ActionSupport;import com.ht.util.PageBean;import com.ht.util.ResponseUtil;public class BooktypeAction extends ActionSupport{    private IBooktypeBiz booktypeDao=new BooktypeBiz();    /**
     * 查詢的請求方法
     * @param req
     * @param resp
     * @return
     */
    public String select(HttpServletRequest req,HttpServletResponse resp) {        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Map<String, Object>> list = this.booktypeDao.select(req.getParameterMap(), pageBean);
            ObjectMapper om=new ObjectMapper();
            Map<String, Object> map=new HashMap<>();
            map.put("total", pageBean.getTotal());
            map.put("rows", list);
            ResponseUtil.write(resp, om.writeValueAsString(map));
        } catch (Exception e) {            // TODO: handle exception            e.printStackTrace();
        }        return "index";
        
    }    /**
     * form組件提交所需數據后端程序員處理完畢
     * @param req
     * @param resp
     * @return
     */
    public String edit(HttpServletRequest req,HttpServletResponse resp){        try {            int edit = this.booktypeDao.edit(req.getParameterMap());
            ObjectMapper om=new ObjectMapper();
            ResponseUtil.write(resp, om.writeValueAsString(edit));
        } catch (Exception e) {            // TODO Auto-generated catch block            e.printStackTrace();
        } 
        return null;
    }    /**
     * 新增的請求方法
     * @param req
     * @param resp
     * @return
     */
    public String add(HttpServletRequest req,HttpServletResponse resp){        try {            int add = this.booktypeDao.add(req.getParameterMap());
            ObjectMapper om=new ObjectMapper();
            ResponseUtil.write(resp, om.writeValueAsString(add));
        } catch (Exception e) {            // TODO Auto-generated catch block            e.printStackTrace();
        } 
        return null;
    }    /**
     * 刪除的請求方法
     * @param req
     * @param resp
     * @return
     */
    public String remove(HttpServletRequest req,HttpServletResponse resp) {        try {            int remove=this.booktypeDao.remove(req.getParameterMap());
            ObjectMapper om=new ObjectMapper();
            ResponseUtil.write(resp, om.writeValueAsString(remove));
        } catch (Exception e) {            // TODO: handle exception            e.printStackTrace();
        }        return null;
    }
}

前臺代碼，用layui框架規劃顯示的頁面

userManage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/userManage.js"></script>
<title>書記類別管理</title>
</head>
<body class="child-body">
<p class="child-nav">
    <span class="layui-breadcrumb">
         <a>書籍類別管理</a>
         <a><cite>分類列表</cite></a>
    </span>
</p>
<blockquote class="layui-elem-quote">

<!--搜索維度  -->
 <p class="layui-form">
    <p class="layui-form-item">
        <label class="layui-form-label">書籍名稱</label>
        <p class="layui-input-inline">
            <input type="text" id="book_category_name" name="book_category_name" lay-verify="required" placeholder="請輸入書籍名" autocomplete="true" class="layui-input">
        </p>
        <button class="layui-btn layui-btn-normal layui-btn-radius" data-type="reload"><i class="layui-icon">&#xe615;</i>查詢</button>
        <button class="layui-btn layui-btn-normal"   data-type="add">新建</button>
    </p>
</p>   
</blockquote>

<!--隱藏域傳值  -->
<input type="hidden"  id="ht" value="${pageContext.request.contextPath}" >
<!--根據table id 來展示表格數據  -->
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--行內樣式按鈕   -->
<script type="text/html" id="lineBtns">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>編輯</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>


<!--彈出層  -->
     <p class="site-text" style="margin: 5%; display: none" id="bt"  target="test123">
        <form class="layui-form layui-form-pane" onsubmit="return false" id="booktype">
            <p class="layui-form-item">
               <label class="layui-form-label">類型編號</label>
                <p class="layui-input-block">
                    <input type="text" class="layui-input layui-disabled text_add "  id="book_category_id" name="book_category_id"  disabled="disabled">
                </p>
                <br>
                <label class="layui-form-label">書本類別名</label>
                <p class="layui-input-block">
                    <input type="text" class="layui-input"  id="book_category_name"  name="book_category_name"><br>
                </p>
            </p>
        </form>
    </p> 
</body>
</html>

userManage.js

處理從后臺傳來的數據，并且根據前端代碼進行展示

//執行渲染layui.use(['table','layer','form'],function(){
    var data=document.getElementById("ht").value;
    var table =layui.table;
    var layer=layui.layer;
    var form = layui.form;     /*展示數據表格  */
    table.render({
          elem:'#test'//表格id
        ,url:data+'/booktypeaction.action?methodName=select'//所對應調用的接口
        ,method:'post'        //提交方式        ,cols:[[            /*根據數據庫的表格所對應的名稱  */
             {field:'book_category_id',height:80, width:300, title: '書籍類別序號', sort: true}
             ,{field:'book_category_name', height:80,width:300, title: '書籍類別名稱'}
             ,{field:'createtime',height:80, width:300, title: '當前時間',templet:"<p>{{layui.util.toDateString(d.createtime, 'yyyy-MM-dd HH:mm:ss')}}</p>"}
             ,{field:'right',height:80, width:300, title: '操作', toolbar:'#lineBtns'}//操作欄         ]]
             ,page:'true'//分頁
             , id: 'testReload'
    });    
    //上方菜單操作欄(查詢、以及  增加  按鈕  )
    var $ = layui.$, active = {            //查詢            reload: function () {
                var book_category_name = $('#book_category_name');//書籍類別名稱 根據 id來取值                console.log(booktypename.val());                // 執行重載
                table.reload('testReload', {
                    page: {
                        curr: 1                        // 重新從第 1 頁開始                    },
                    where: {
                        key: 'book_category_name',
                        book_category_name: book_category_name.val(),
                    }
                });
            }, add: function () { //添加
                layer.open({//彈出框
                    type: 1,
                    title: '添加書本類別',
                    maxmin: true,
                    shadeClose: true, //點擊遮罩關閉層
                    area: ['80%', '80%'],
                    content: $('#box1'),
                    btn: ['確定', '取消'],
                    yes: function (index, layero) {//確定執行函數                        console.log(layero);                        //執行添加方法
                        $.getJSON(data+"/booktypeaction.action?methodName=add", {
                             booktypename: $("#book_category_name").val(), //書本類型名稱                        }, function (data) {                            /*根據后臺返回的參數來進行判斷  */
                            if (data==1) {
                                layer.alert('添加成功', {icon: 1, title: '提示'}, function (i) {
                                    layer.close(i);
                                    layer.close(index);//關閉彈出層
                                    $("#booktype")[0].reset()//重置form                                })
                                table.reload('testReload', {//重載表格                                    page: {
                                        curr: 1                                        // 重新從第 1 頁開始                                    }
                                })
                            } else if(data==2){
                                layer.msg('添加失敗,請勿重復添加書本類別名稱')
                            }
                        })

                    }, cancel: function (index, layero) {//取消
                        $("#booktype")[0].reset()//重置form  根據id                        layer.close(index)
                    }
                });
            }
    }
    $('.layui-form .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });    
    
    
    /*表格 行內操作(編輯  以及  刪除 按鈕操作)  */
        table.on('tool(test)', function(obj){
         var data = obj.data; //獲得當前行數據
         var urlex=document.getElementById("ht").value;
         var tr=obj.tr//活動當前行tr 的  DOM對象         console.log(data);
         var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
         if(layEvent === 'del'){ //刪除
             layer.confirm('確定刪除嗎？',{title:'刪除'}, function(index){                 //向服務端發送刪除指令og
                 $.getJSON(urlex+'/booktypeaction.action?methodName=del',{book_category_id:data.book_category_id}, function(ret){
                         layer.close(index);//關閉彈窗
                         table.reload('testReload', {//重載表格                             page: {
                                 curr: 1                                 // 重新從第 1 頁開始                             }
                         })
                 });
                 layer.close(index);
             });
         } else if(layEvent === 'edit'){ //編輯             layer.open({
                 type: 1 //Page層類型
                 ,skin: 'layui-layer-molv'
                 ,area: ['380px', '270px']
                 ,title: ['編輯書本類別信息','font-size:18px']
                 ,btn: ['確定', '取消'] 
                 ,shadeClose: true
                 ,shade: 0 //遮罩透明度
                 ,maxmin: true //允許全屏最小化
                 ,content:$('#bt')  //彈窗id                 ,success:function(layero,index){
                     $('#book_category_id').val(data.book_category_id);
                     $('#book_category_name').val(data.book_category_name);  
                 },yes:function(index,layero){                    /*  $.ajaxSettings.async = false; */
                      $.getJSON(urlex+'/booktypeAction.action?methodName=edit',{
                          book_category_id: $('#book_category_id').val(),
                          book_category_name: $('#book_category_name').val(), 
                          book_category_id: data.book_category_id,
                      },function(data){                      //根據后臺返回的參數，來進行判斷
                          if(data>0){
                              layer.alert('編輯成功',{icon:1,title:'提示'},function(i){
                                  layer.close(i);
                                  layer.close(index);//關閉彈出層
                                  $("#booktype")[0].reset()//重置form                              })
                              table.reload('testReload',{//重載表格                                  page:{
                                      curr:1
                                  }
                              })
                          }
                      });
                 }
               
             
             });
         }
      
        });
      
});/**
 * 頂部搜索框 模糊查詢
 * @returns *//*function dingselect(){
    var  select = $('#ks').val();
    $("#dg").datagrid({
        url : $("#txc").val()+'/booktypeaction.action?methodName=select&book_category_name='+select,
    })
}*//**
 * 查詢增刪改方法
 * @returns *//*function userManage(){    
    var url = "booktypeaction.action?methodName="+$("#xm").attr("data");
    $('#ff').form('submit', {   
        url:url,    
        success: function(param){    
            $('#dd').dialog('close');
            $('#dg').datagrid('reload');
            $('#ff').form('clear');
        }    
    });  
}*//**
 * 修改方法
 * @returns *//*function edit(){
    var row = $('#dg').datagrid('getSelected');
    if(row){
        $('#ff').form('load', row);
        $('#dd').dialog('open');
        $('#xm').html('編輯');
        $('#xm').attr("data","edit");
    }
}*//**
 * 新增方法
 * @returns *//*function add(){
    $('#ff').form('clear');
    $('#dd').dialog('open');
    $('#xm').html('新增');
    $('#xm').attr("data","add");
}*//**
 * 刪除方法
 * @returns *//*function remove(){
    var data=$('#dg').datagrid('getSelected');
    $.ajax({
        url : $("#txc").val()+'/booktypeaction.action?methodName=remove&book_category_id='+data.book_category_id,
        success: function(param){    
            $('#dg').datagrid('reload');
            }    
    })
}*/

配置xml

<action path="/booktypeaction" type="com.ht.web.BooktypeAction">
        <forward name="index" path="/index.jsp" redirect="false" />
        <forward name="userManage" path="/userManage.jsp" redirect="false" />
    </action>

以上就是Layui連接mysql數據庫并操作CRUD的方法，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎關注億速云行業資訊，感謝各位的閱讀。