Layui基本功能(增删改查)

这篇具有很好参考价值的文章主要介绍了Layui基本功能(增删改查)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

话不多说,根据我前面的博客我们直接进行操作。
记住以下的文件放置,防止操作出不来.

Layui基本功能(增删改查),layui,前端,javascript

 这是我们要完成的界面及功能

Layui基本功能(增删改查),layui,前端,javascript

 Layui基本功能(增删改查),layui,前端,javascript

后台功能实现 

数据查看

Layui基本功能(增删改查),layui,前端,javascript

  1. 我们在userDao方法里面进行增删改查的方法
  2. 我们在userAction进行方法的编写
  3. R工具类的介绍

查询

userDao方法

因为我们的数据库的rid需要转成权限名,我们sql就要写case函数进行编写sql

	/**
	 * List<User>、List<Map>都是转成json数组 查询结果携带rname
	 * 
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
		String sql = "select u.*,\r\n" + "(case u.rid\r\n" + "when 1 then '管理员'\r\n" + "when 2 then '发起者'\r\n"
				+ "when 3 then '审批者'\r\n" + "when 4 then '参与者'\r\n" + "when 5 then '会议管理员'\r\n"
				+ "else '其他角色' end) as rname\r\n" + "from t_oa_user u where 1=1";
		String name = user.getName();
		if (StringUtils.isNotBlank(name))
			sql += " and name like '%" + name + "%'";
		return super.executeQuery(sql, pageBean);
	}

userAction方法

因为我们用的是Layui的框架,所以我们要遵循他的规则来进行一个编写。

我们就用map集合进行保存。后面会用R工具类进行一个优化

public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Map<String, Object>> userRole = userDao.userRole(user, pageBean);
		 Map<String, Object> map = new HashMap<String, Object>();
		 map.put("code", "0");
		 map.put("masg", "查询成功");
		 map.put("count", pageBean.getTotal());
		 map.put("data", userRole);
		 ResponseUtil.writeJson(resp, map);

		ResponseUtil.writeJson(resp, map);
	}

R工具类的介绍

R工具类可以更好的进行代码的优化

package com.zking.util;

import java.util.HashMap;

public class R extends HashMap{
	public R data(String key, Object value) {
		this.put(key, value);
		return this;
	}
	
	public static R ok(int code, String msg) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.data("success", false).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R ok(int code, String msg,Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("data", data);
		return r;
	}
	
	public static R ok(int code, String msg, long count, Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
		return r;
	}
}

我们在userAction查询的方法上进行一个R工具类的使用

	public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Map<String, Object>> userRole = userDao.userRole(user, pageBean);
		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole));
	}

这样我们就进行了一个代码的优化。后面的代码我们也可以用R工具类的优化

增加

userDao

	/**
	 * 增加用户
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int add(User user) throws Exception {
		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd" });
	}

userAction

	public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		int i = userDao.add(user);
		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "新增成功"));
	}

修改

userDao

	/**
	 * 修改用户
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int edit(User user) throws Exception {
		String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";
		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd", "id" });
	}

userAction

	public void edit(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		int i = userDao.edit(user);
		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "修改成功"));
	}

删除

userDao

	/**
	 * 删除用户
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int del(User user) throws Exception {
		String sql = "delete from t_oa_user where id = ?";
		return super.executeUpdate(sql, user, new String[] { "id" });
	}

userAction

	public void del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		int i = userDao.del(user);
		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "删除成功"));
	}

后台完整代码

userDao

package com.zking.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.DBAccess;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

/**
 * 
 * @author tgq
 *
 */
public class UserDao extends BaseDao<User> {

	/**
	 * 查询所有用户
	 * 
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<User> list(User user, PageBean pageBean) throws Exception {
		String sql = "select * from t_oa_user where 1=1";
		return super.executeQuery(sql, User.class, pageBean);
	}

	/**
	 * 获取实体类
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public User login(User user) throws Exception {
		String sql = "select * from t_oa_user where loginName = '" + user.getLoginName() + "' and pwd = '"
				+ user.getPwd() + "'";
		List<User> list = super.executeQuery(sql, User.class, null);
		if (list != null && list.size() == 1) {
			return list.get(0);
		}

		return null;
	}

	/**
	 * 获取用户最大id
	 * 
	 * @return
	 * @throws Exception
	 */
	public int getMaxId() throws Exception {
		// 创建连接
		Connection conn = DBAccess.getConnection();
		int id = 0;
		String sql = "select MAX(id) from t_oa_user";
		PreparedStatement ps = conn.prepareStatement(sql);
		ResultSet rs = ps.executeQuery();
		if (rs.next()) {
			id = rs.getInt(1);
		}
		return id;
	}

	/**
	 * 注册
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int Register(User user) throws Exception {
		String sql = "insert into t_oa_user values(?,?,?,?,?)";
		return super.executeUpdate(sql, user, new String[] { "id", "name", "loginName", "pwd", "rid" });
	}

	/**
	 * List<User>、List<Map>都是转成json数组 查询结果携带rname
	 * 
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
		String sql = "select u.*,\r\n" + "(case u.rid\r\n" + "when 1 then '管理员'\r\n" + "when 2 then '发起者'\r\n"
				+ "when 3 then '审批者'\r\n" + "when 4 then '参与者'\r\n" + "when 5 then '会议管理员'\r\n"
				+ "else '其他角色' end) as rname\r\n" + "from t_oa_user u where 1=1";
		String name = user.getName();
		if (StringUtils.isNotBlank(name))
			sql += " and name like '%" + name + "%'";
		return super.executeQuery(sql, pageBean);
	}

	/**
	 * 增加用户
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int add(User user) throws Exception {
		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd" });
	}

	/**
	 * 修改用户
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int edit(User user) throws Exception {
		String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";
		return super.executeUpdate(sql, user, new String[] { "name", "loginName", "pwd", "id" });
	}

	/**
	 * 删除用户
	 * 
	 * @param user
	 * @return
	 * @throws Exception
	 */
	public int del(User user) throws Exception {
		String sql = "delete from t_oa_user where id = ?";
		return super.executeUpdate(sql, user, new String[] { "id" });
	}

}

userAction

package com.zking.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.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver<User> {

	private User user = new User();
	private UserDao userDao = new UserDao();

	/**
	 * 登录
	 * 
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public void login(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		User u = userDao.login(user);
		ResponseUtil.writeJson(resp, u);
	}

	/**
	 * 注册
	 * 
	 * @param req
	 * @param reps
	 * @throws Exception
	 */
	public void Register(HttpServletRequest req, HttpServletResponse reps) throws Exception {
		String loginName = req.getParameter("loginName");
		String password = req.getParameter("password");
		// 先获取最大的id数
		int maxId = userDao.getMaxId();
		user = new User(maxId + 1, req.getParameter("name"), loginName, password,
				Long.parseLong(req.getParameter("rid")));
		int register = userDao.Register(user);
		ResponseUtil.writeJson(reps, register);

	}

	public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Map<String, Object>> userRole = userDao.userRole(user, pageBean);
		// Map<String, Object> map = new HashMap<String, Object>();
		// map.put("code", "0");
		// map.put("masg", "查询成功");
		// map.put("count", pageBean.getTotal());
		// map.put("data", userRole);
		// ResponseUtil.writeJson(resp, map);

		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole));
	}

	public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		int i = userDao.add(user);
		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "新增成功"));
	}

	public void del(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		int i = userDao.del(user);
		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "删除成功"));
	}

	public void edit(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		int i = userDao.edit(user);
		// 利用R工具类
		ResponseUtil.writeJson(resp, R.ok(0, "修改成功"));
	}

	@Override
	public User getModel() {
		return user;
	}

}

前台功能实现

查询

jsp界面(userManage.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<script src="static/js/system/userManage.js"></script>
</head>
<body>
	<!-- 搜索栏 -->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">用户名:</label>
			<div class="layui-input-inline">
				<input type="text" id="name" placeholder="请输入用户名" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
			<div class="layui-input-inline">
				<button id="btn_search" type="button"
					class="layui-btn layui-btn-normal">
					<i class="layui-icon layui-icon-search"></i> 查询
				</button>
				<button id="btn_add" type="button" class="layui-btn">新增</button>
			</div>
		</div>

	</div>
	<!-- 数据表格及分页 -->
	<table class="layui-hide" id="userTable" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


</body>
</html>

js(userManage.js)

记得我们在userManage.jsp里面导入

<script src="static/js/system/userManage.js"></script>
var table, $;
var row;
layui.use([ 'table', 'jquery' ], function() {
	table = layui.table;
	$ = layui.jquery;
	userinit();

	$("#btn_search").click(function() {
		query();
	});

	$("#btn_add").click(function() {
		row = null;
		edit('新增界面');
	});

});

// 打开新增界面
function edit(title) {
	layer.open({
		type : 2, // layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
		title : title,
		area : [ '660px', '340px' ], // 宽高
		skin : 'layui-layer-rim', // 样式类名
		content : 'jsp/system/userEdit.jsp', // 书本编辑页面
		btn : [ '保存', '关闭' ],
		yes : function(index, layero) {
			// 调用子页面中提供的getData方法,快速获取子页面的form表单数据
			let data = $(layero).find("iframe")[0].contentWindow.getData();
			console.log(data);
			// 判断title标题
			let methodName = "add";
			if (title == "编辑")
				methodName = "edit";
			$.post('user.action?methodName=' + methodName, data, function(rs) {
				if (rs.success) {
					// 关闭对话框
					layer.closeAll();
					// 调用查询方法刷新数据
					query();
				} else {
					layer.msg(rs.msg, function() {
					});
				}
			}, 'json');
		},
		btn2 : function(index, layero) {
			layer.closeAll();
		}
	});

}

/**
 * 表格重载
 * 
 * @returns
 */
function query() {
	table.reload('userTable', {
		where : { // 设定异步数据接口的额外参数,任意设
			name : $("#name").val()
		},
		request : {
			pageName : 'page' // 页码的参数名称,默认:page
			,
			limitName : 'rows' // 每页数据量的参数名,默认:limit 我们的定义的是rows,所以更改为rows
		}
	}); // 只重载数据
}

function userinit() {

	table.render({
		elem : '#userTable',
		url : 'user.action?methodName=userRole',
		toolbar : '#toolbarDemo' // 开启头部工具栏,并为其绑定左侧模板
		,
		defaultToolbar : [ 'filter', 'exports', 'print', { // 自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
			title : '提示',
			layEvent : 'LAYTABLE_TIPS',
			icon : 'layui-icon-tips'
		} ],
		title : '用户数据表',
		cols : [ [ {
			type : 'checkbox',
			fixed : 'left'
		}, {
			field : 'id',
			title : 'ID',
			fixed : 'left',
			unresize : true,
			sort : true
		}, {
			field : 'name',
			title : '用户名',
			edit : 'text'
		}, {
			field : 'loginName',
			title : '用户账号',
			edit : 'text'
		},{
			field : 'pwd',
			title : '密码',
			edit : 'text',
		}, {
			field : 'rname',
			title : '权限名',
		}, {
			fixed : 'right',
			title : '操作',
			toolbar : '#barDemo',
			width : 150
		} ] ],
		page : true
	});

	// 头工具栏事件
	table.on('toolbar(test)', function(obj) {
		var checkStatus = table.checkStatus(obj.config.id);
		switch (obj.event) {
		case 'getCheckData':
			var data = checkStatus.data;
			layer.alert(JSON.stringify(data));
			break;
		case 'getCheckLength':
			var data = checkStatus.data;
			layer.msg('选中了:' + data.length + ' 个');
			break;
		case 'isAll':
			layer.msg(checkStatus.isAll ? '全选' : '未全选');
			break;

		// 自定义头工具栏右侧图标 - 提示
		case 'LAYTABLE_TIPS':
			layer.alert('这是工具栏右侧自定义的一个图标按钮');
			break;
		}
		;
	});

	// 监听行工具事件
	table.on('tool(test)', function(obj) {
		row = obj.data;
		// console.log(obj)
		if (obj.event === 'del') {
			layer.confirm('确认删除吗?', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.post('user.action', {
					'methodName' : 'del',
					'id' : row.id
				}, function(rs) {
					if (rs.success) {
						// 调用查询方法刷新数据
						query();
					} else {
						layer.msg(rs.msg, function() {
						});
					}
				}, 'json');
				layer.close(index);
			});
		} else if (obj.event === 'edit') {
			edit('编辑');
		}
	});
}

记住我们的userinit方法,这是一个把数据进行一个绑定的方法,做一个数据回显

运行效果

Layui基本功能(增删改查),layui,前端,javascript

我么要编写一个数据重载的方法,并且在查询的按钮上设置一个点击事件还要调用重载的方法。

$("#btn_search").click(function() {
		query();
	});
/**
 * 表格重载
 * 
 * @returns
 */
function query() {
	table.reload('userTable', {
		where : { // 设定异步数据接口的额外参数,任意设
			name : $("#name").val()
		},
		request : {
			pageName : 'page' // 页码的参数名称,默认:page
			,
			limitName : 'rows' // 每页数据量的参数名,默认:limit 我们的定义的是rows,所以更改为rows
		}
	}); // 只重载数据
}

这样我们就可以进行搜索了

Layui基本功能(增删改查),layui,前端,javascript

增加、修改

jsp界面(userEdit.js)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/js/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl {
	max-height: 150px;
}
</style>
<body>
	<div style="padding: 10px;">
		<form class="layui-form layui-form-pane" lay-filter="user">
			<input type="hidden" name="id" />
			<div class="layui-form-item">
				<label class="layui-form-label">用户名称</label>
				<div class="layui-input-block">
					<input type="text" id="name" name="name" autocomplete="off"
						placeholder="请输入用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户角色</label>
				<div class="layui-input-block">
					<select name="rid">
						<option value="">---请选择---</option>
						<option value="1">管理员</option>
						<option value="2">发起者</option>
						<option value="3">审批者</option>
						<option value="4">参与者</option>
						<option value="5">会议管理员</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">登录账号</label>
				<div class="layui-input-block">
					<input type="text" name="loginName" lay-verify="required"
						placeholder="请输入账号" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">登录密码</label>
				<div class="layui-input-block">
					<input type="password" name="pwd" placeholder="请输入密码"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</form>
	</div>
</body>
</html>

js(userEdit.js)

let layer, form, $;
layui.use([ 'layer', 'form', 'jquery' ], function() {
	layer = layui.layer, form = layui.form, $ = layui.jquery;
	initData();
});

function initData() {
	console.log(parent.row);
	if (null != parent.row) {
		// 因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
		// parent.row:表格行对象
		form.val('user', $.extend({}, parent.row || {}));
		$('#name').attr('readonly', 'readonly');
	}
}

function getData() {
	return form.val('user');
}

我们要在userManage.js里面写一个增加和修改的方法

function edit(title) {
	layer.open({
		type : 2, // layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
		title : title,
		area : [ '660px', '340px' ], // 宽高
		skin : 'layui-layer-rim', // 样式类名
		content : 'jsp/system/userEdit.jsp', // 书本编辑页面
		btn : [ '保存', '关闭' ],
		yes : function(index, layero) {
			// 调用子页面中提供的getData方法,快速获取子页面的form表单数据
			let data = $(layero).find("iframe")[0].contentWindow.getData();
			console.log(data);
			// 判断title标题
			let methodName = "add";
			if (title == "编辑")
				methodName = "edit";
			$.post('user.action?methodName=' + methodName, data, function(rs) {
				if (rs.success) {
					// 关闭对话框
					layer.closeAll();
					// 调用查询方法刷新数据
					query();
				} else {
					layer.msg(rs.msg, function() {
					});
				}
			}, 'json');
		},
		btn2 : function(index, layero) {
			layer.closeAll();
		}
	});

}

我么调用的都是userEdit.jsp的界面

userManage.js监听事件里面我们进行调用edit的方法就行

// 监听行工具事件
	table.on('tool(test)', function(obj) {
		row = obj.data;
		// console.log(obj)
		if (obj.event === 'del') {
			layer.confirm('确认删除吗?', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.post('user.action', {
					'methodName' : 'del',
					'id' : row.id
				}, function(rs) {
					if (rs.success) {
						// 调用查询方法刷新数据
						query();
					} else {
						layer.msg(rs.msg, function() {
						});
					}
				}, 'json');
				layer.close(index);
			});
		} else if (obj.event === 'edit') {
			edit('编辑');
		}
	});

Layui基本功能(增删改查),layui,前端,javascript

我们进行一个编辑 

Layui基本功能(增删改查),layui,前端,javascript

Layui基本功能(增删改查),layui,前端,javascript

删除

我们在userManage.jsp里面的监听事件进行一个删除的提示和调用
 

// 监听行工具事件
	table.on('tool(test)', function(obj) {
		row = obj.data;
		// console.log(obj)
		if (obj.event === 'del') {
			layer.confirm('确认删除吗?', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.post('user.action', {
					'methodName' : 'del',
					'id' : row.id
				}, function(rs) {
					if (rs.success) {
						// 调用查询方法刷新数据
						query();
					} else {
						layer.msg(rs.msg, function() {
						});
					}
				}, 'json');
				layer.close(index);
			});
		} else if (obj.event === 'edit') {
			edit('编辑');
		}
	});

我们删除账户sa
Layui基本功能(增删改查),layui,前端,javascript

删除之后会进行一个刷新

Layui基本功能(增删改查),layui,前端,javascript
 

我们就删除完成了 

分享就到这里,希望对您们有用!!!

后续我会加上源码!文章来源地址https://www.toymoban.com/news/detail-568393.html

到了这里,关于Layui基本功能(增删改查)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • LayUI之CRUD(增删改查)

    目录 一、前期准备 1.数据表格 2.弹出层 3.用户表数据查询  二、用户管理后台编写 三、前端JS编写 四、效果展示 1.数据表格 在layui官网找到我们需要的数据表格  根据需求复制修改代码,再找到表单复制一个输入框和按钮,做一个搜索功能 用户管理JSP页面---userManage.jsp 2.弹

    2024年02月17日
    浏览(48)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)二:登录界面及对应功能实现

      本章介绍系统登录界面、登录流程、登录接口等相关内容的开发,实现包括账号密码登录、短信验证登录等不同的登录方式,使用svg-capter生成图形验证码,使用expressjwt实现登录token的生成及验证。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击

    2024年02月11日
    浏览(68)
  • layui实现(学生)数据的增删改查

    查询 添加: 点击添加按钮: 添加成功! 修改: 点击编辑按钮: 修改信息数据,点击提交: 修改数据成功! 删除: 点击删除按钮: 点击确定,删除成功! 分页: 由于数据有限,选择5条/页,进行分页: 批量删除: 首先勾选想要删除的行,点击批量删除: 删除成功: 补

    2023年04月09日
    浏览(39)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)三:找回密码界面及对应功能实现

      本章实现找回密码功能,包括短信验证码找回、邮箱验证码找回等功能,并通过node-send-email发送邮箱验证码,实现找回密码界面、接口等功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载

    2024年02月12日
    浏览(55)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十六:统计报表模块相关功能实现

      本章使用Echarts及DataV实现常用图表、特殊图表、地图及综合图表等图表展示功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载 基于VUE3+Layui从

    2024年02月04日
    浏览(62)
  • LayUI框架实现OA会议系统——增删改查

    目录 前言 1. 配置准备 1.1 Layui框架 1.2  mysql数据库表 1.3 用户管理JSP页面 1.4 新增、修改用户共用界面   2. 后台编写  2.1 编写UserDao类增删改查方法 2.2  R工具类 2.3 BaseDao数据库查询方法  2.4 UserAction控制器类   3. 前台JS编写 3.1 userManage页面JS 3.2 user新增、修改iframe层JS 4. 功能运

    2024年02月16日
    浏览(39)
  • ​​Layui之用户管理实例(对数据的增删改查)

    目录 ​编辑一、R工具介绍() ​编辑二、数据表的增删改查 ​编辑2.1我们先得从查询数据库的语句入手 2.2优化dao类 2.4UserAction类 2.5前台的页面实现增删改查操作 2.6 userManage页面JS          2.7user新增、修改iframe层js 前言        上一篇我分享了使用layui菜单栏的动态添

    2024年02月16日
    浏览(38)
  • 开发实例:Spring Boot、MyBatis和Layui打造增删改查项目

    通过学习这个实例项目,我们将积累点滴技术知识和实践经验,进一步提升我们的开发能力。学习如何构建增删改查功能的完整应用,从数据库访问到前端界面的开发,涵盖了全栈开发的方方面面。此外,我们还将学会处理常见的业务逻辑和数据操作,提高编码质量和效率。

    2024年02月06日
    浏览(69)
  • Layui快速入门之第一节Layui的基本使用

    目录 一:Layui的基本概念 二:Layui使用的基本步骤 1.在官网下载layui的基本文件,引入css和js文件 ①:普通方式引入 ②:第三方 CDN 方式引入 2.在script标签体中编写代码 3.测试                        Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态

    2024年02月09日
    浏览(49)
  • 前端框架Layui的使用讲解(Layui搭建登录注册页面)

    目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面(公用页面) jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭建注册页面 静态效果图 jsp页面搭建 Servlet页面编写 最

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包