ASP.NETLayui连接mysql操作CRUD
在dao类中使用了递归来转换josn格式，因为layui只能识别这种格式
树形菜单展现所需的权限表 t_book_menu
userAction类
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类
对树形菜单的格式进行描述 写一个TreeNode 类
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层
准备下面代码中所需要的包工具包:
在项目中配置与mysql数据库连接
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/css/shop.css" type="text/css" rel="stylesheet"/>
<link href=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/css/skin.css" rel="stylesheet" type="text/css"/>
<link href=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/css/Sellerber.css" type="text/css" rel="stylesheet" />
<link href=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/css/bkg_ui.css" type="text/css" rel="stylesheet" />
<link href=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/css/font-awes0ome.min.css" rel="stylesheet" type="text/css" />
<script src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/layer.js" type="text/javascript"></script>
<script src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/bootstrap.min.js" type="text/javascript"></script>
<script src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/Sellerber.js" type="text/javascript"></script>
<script src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/shopFrame.js" type="text/javascript"></script>
<script type="text/javascript" src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src=https://www.ym97.com/wenku/cssm"${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=https://www.ym97.com/wenku/cssm"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=https://www.ym97.com/wenku/cssm"images/login_img.png" />
</p>
<form action=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath}/userAction.action?methodName=login"
method="post"
style="width: 300px; float: right; margin-right: 50px;"
onsubmit="return vlogin()">
<h4 class="title_name">
<img src=https://www.ym97.com/wenku/cssm"images/login_title.png" />
</h4>
<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
index.jsp 显示树形菜单
4、树形菜单显示
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框架规划显示的页面
二、使用layui框架实现增，删，改，查
处理从后台传来的数据，并且根据前端代码进行展示
1、首先引用一下layui框架所需的包
3、权限登陆 web层 一、使用layui框架实现权限登陆显示树形菜单 效果如下：
dao层，从数据库中拿出数据并且对其进行增，删，改，查操作
web层 2、创建二星权限显现树形菜单所需要的表和所需要操作的书本类型表 中间权限表t_usermenuid login.jsp 显示登陆界面
MenuAction类
//执行渲染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知识请关注PHP中文网layui教程栏目
以上就是Layui连接mysql操作CRUD的详细内容，更多请关注聚合云库其它相关文章！
userManage.js
userManage.jsp
用户表t_xm_user
https://pan.baidu.com/s/1XnwIoJQUDyw0cJads5Pddw
userDao类
书本类型表t_book_category2
BooktypeAction类
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html > <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/wenku/cssmcss/layui.css" media="all"> <script src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/wenku/cssmlayui.js"></script> <script type="text/javascript" src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/jquery-3.3.1.js"></script> <script type="text/javascript" src=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/wenku/cssmlayui.all.js"></script> <link rel="stylesheet" href=https://www.ym97.com/wenku/cssm"${pageContext.request.contextPath }/static/js/wenku/cssmcss/index.css"> <script type="text/javascript" src=https://www.ym97.com/wenku/cssm"${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
相关热词： MYSQL
本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jiaob/cssm/5056.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
其中border-left决定了底部直
时间：2021-01-23
-
当你自己回头来看你写的
时间：2021-01-23
-
④格式标签 粗体：b/b 斜
时间：2021-01-23
-
我们直接看代码： !DOCTY
时间：2021-01-23
-
这里就是吐槽的IE6！） 图
时间：2021-01-23
-
假设我们的HTML代码如下：
时间：2021-01-23
-
那么使用 CSS3 新增的选择
时间：2021-01-23
-
scaleGlassRectangle.y
时间：2021-01-23
热门文章
-
可以加我的HTML5前端交流群111645711 CSS源码
时间：2021-01-15
-
就可以对子元素进行 3D 变形操作了
时间：2021-01-12
-
用css让一个容器水平垂直
时间：2021-01-12
-
而没有设置高度
时间：2021-01-19
-
canvas与html5实现视频截图成果
时间：2021-01-19
-
所以通常不需要发送
时间：2021-01-19
-
我们尝试一下更新一下HTML结构
时间：2021-01-23
-
scaleGlassRectangle.y
时间：2021-01-23
-
HTML5生拖放实例分析
时间：2021-01-12
-
在全局:root{ }伪类中定义了一个 CSS 变量
时间：2021-01-21