前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）

目录

一、前言

1.什么是表格

2.表格的使用范围

二、案例实现

1.案例分析

①根据需求找到文档源码

②查询结果在实体中没有该属性

2.dao层编写

①BaseDao工具类

②UserDao编写

3.Servlet编写

①R工具类的介绍

②Useraction编写

4.jsp页面搭建

①userManage.jsp

 ②userEdit.jsp

③userManage.js

④userEdit.js

5.案例效果演示

①查询

②新增

③修改

④删除

---

一、前言

Layui之动态选项卡&iframe使用（附源码）

在上一次前端框架Layui分享选项卡的使用中，可以看到点击左侧右侧找不到路径（因为还未编写），所以这次基于上次的内容进行编写对用户管理页面进行增删改查操作。

因为这里的url页面我项目中还没有编写，所以404是必然的，不用管他！！！

1.什么是表格

表格（Table）是Web开发中常用的一种数据展示方式，用于以行和列的形式呈现结构化数据。表格由单元格（cell）组成，每个单元格可以包含文本、图像、链接等内容。

HTML中的表格通过

标签来定义，表示表格的行，

表示表格的单元格。可以使用	标签定义表格的表头（header）。 下面是一个简单的HTML表格示例： 姓名 年龄 小明 20 小红 22 在这个示例中，表格有两列（姓名和年龄），第一行是表头，下面两行是数据行。每个单元格中的内容被包含在	标签中，而表头单元格则使用	标签。 通过使用表格，我们可以清晰地组织和显示大量的数据，例如展示员工列表、商品价格表、课程时间表等。可以使用CSS对表格进行样式化，调整表格的边框样式、背景颜色、字体样式等，以满足特定的设计要求。 需要注意的是，在使用表格时，应根据具体的需求选择合适的数据结构和布局方式。在某些情况下，使用表格可能不是最佳的解决方案，可以考虑使用其他的数据展示方式，例如列表、卡片布局等。 2.表格的使用范围 表格在Web开发中被广泛应用于不同场景，以下是一些表格的常见使用范围： 1. 数据展示：表格是一种常见的数据展示形式，适用于展示结构化的数据集合。例如，可以使用表格展示面向用户的数据，如员工列表、产品目录、订单信息等。 2. 数据分析：表格可以用于以表格形式展示、比较和分析数据。通过对表格进行排序、过滤和计算，可以更好地理解和解读数据。数据分析工具和报表系统通常使用表格来呈现结果。 3. 排名和比较：表格可以用于比较不同项的属性或指标，从而进行排名和排序。例如，可以使用表格展示运动员的成绩排名、学生的考试成绩等。表格可以根据特定的字段对数据进行排序，方便查找和对比。 4. 表单输入：表格常用于用户输入和编辑数据的场景。例如，可以使用表格来创建注册表单、调查问卷等。每个表格单元格可以包含各种输入字段（如文本框、复选框、下拉菜单等），方便用户输入和提交数据。 5. 日程安排和时间表：表格可以用于展示日程安排、课程时间表、会议日程等。每个单元格可以表示一个时间段，每一行代表一个时间点或一个实体（如人员、地点等）。 6. 响应式布局：表格可以通过CSS和响应式设计技术进行适应性布局，使其在不同屏幕尺寸下保持良好的显示效果。通过使用滚动、隐藏列、自适应宽度等功能，可以在小屏幕设备上显示较大的表格。 需要注意的是，在使用表格时应考虑数据的复杂性和可读性。对于大型数据集或复杂的数据结构，可以使用分页、筛选和搜索功能来改善用户体验。另外，合理地使用样式和交互效果可以提升表格的可用性和美观性。 二、案例实现 1.案例分析 ①根据需求找到文档源码 Layui  这一次我们运用的组件是表格所以在官网中找到想要的组件内容进行“cv”操作即可。 ②查询结果在实体中没有该属性 我们可以观察到表中有字段rid(角色身份)，但是数据展示的时候需要将数字转换成相对应的字符，所以我们查询表的时候就要追加一个字段用来显示角色身份，但是我们eclipse的实体中并没有该属性，如果再写一个的以后遇到这种问题还是需要进行编写比较麻烦，所以我们可以采用Map集合的方式进行保存数据。 跟多细节在编写过程中慢慢讲解，下面请欣赏小编所写代码！！！ 2.dao层编写 ①BaseDao工具类 package com.zking.util; import java.lang.reflect.Field; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.ResultSetMetaData; import java.sql.SQLException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** * 所有Dao层的父类 BookDao UserDao OrderDao ... * * @author Administrator * * @param */ public class BaseDao { /** * 适合多表联查的数据返回 * @param sql * @param pageBean * @return * @throws SQLException * @throws InstantiationException * @throws IllegalAccessException */ public List> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException { List> list = new ArrayList<>(); Connection con = DBAccess.getConnection(); PreparedStatement pst = null; ResultSet rs = null; /* * 是否需要分页？ 无需分页（项目中的下拉框，查询条件教员下拉框，无须分页） 必须分页（项目中列表类需求、订单列表、商品列表、学生列表...） */ if (pageBean != null && pageBean.isPagination()) { // 必须分页（列表需求） String countSQL = getCountSQL(sql); pst = con.prepareStatement(countSQL); rs = pst.executeQuery(); if (rs.next()) { pageBean.setTotal(String.valueOf(rs.getObject(1))); } // 挪动到下面，是因为最后才处理返回的结果集 // -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%' // -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据 // -- countSql=select count(1) from (sql) t 符合条件的总记录数 String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据 pst = con.prepareStatement(pageSQL); rs = pst.executeQuery(); } else { // 不分页（select需求） pst = con.prepareStatement(sql);// 符合条件的所有数据 rs = pst.executeQuery(); } // 获取源数据 ResultSetMetaData md = rs.getMetaData(); int count = md.getColumnCount(); Map map = null; while (rs.next()) { map = new HashMap<>(); for (int i = 1; i <= count; i++) { // map.put(md.getColumnName(i), rs.getObject(i)); map.put(md.getColumnLabel(i), rs.getObject(i)); } list.add(map); } return list; } /** * * @param sql * @param attrs * map中的key * @param paMap * jsp向后台传递的参数集合 * @return * @throws SQLException * @throws NoSuchFieldException * @throws SecurityException * @throws IllegalArgumentException * @throws IllegalAccessException */ public int executeUpdate(String sql, String[] attrs, Map paMap) throws SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException { Connection con = DBAccess.getConnection(); PreparedStatement pst = con.prepareStatement(sql); for (int i = 0; i < attrs.length; i++) { pst.setObject(i + 1, JsonUtils.getParamVal(paMap, attrs[i])); } return pst.executeUpdate(); } /** * 批处理 * @param sqlLst * @return */ public static int executeUpdateBatch(String[] sqlLst) { Connection conn = null; PreparedStatement stmt = null; try { conn = DBAccess.getConnection(); // 设置不自动提交 conn.setAutoCommit(false); for (String sql : sqlLst) { stmt = conn.prepareStatement(sql); stmt.executeUpdate(); } conn.commit(); } catch (Exception e) { try { conn.rollback(); } catch (SQLException e1) { e1.printStackTrace(); throw new RuntimeException(e1); } e.printStackTrace(); throw new RuntimeException(e); } finally { DBAccess.close(conn, stmt, null); } return sqlLst.length; } /** * 通用的增删改方法 * * @param book * @throws Exception */ public int executeUpdate(String sql, T t, String[] attrs) throws Exception { // String[] attrs = new String[] {"bid", "bname", "price"}; Connection con = DBAccess.getConnection(); PreparedStatement pst = con.prepareStatement(sql); // pst.setObject(1, book.getBid()); // pst.setObject(2, book.getBname()); // pst.setObject(3, book.getPrice()); /* * 思路： 1.从传进来的t中读取属性值 2.往预定义对象中设置了值 * * t->book f->bid */ for (int i = 0; i < attrs.length; i++) { Field f = t.getClass().getDeclaredField(attrs[i]); f.setAccessible(true); pst.setObject(i + 1, f.get(t)); } return pst.executeUpdate(); } /** * 通用分页查询 * * @param sql * @param clz * @return * @throws Exception */ public List executeQuery(String sql, Class clz, PageBean pageBean) throws Exception { List list = new ArrayList(); Connection con = DBAccess.getConnection(); ; PreparedStatement pst = null; ResultSet rs = null; /* * 是否需要分页？ 无需分页（项目中的下拉框，查询条件教员下拉框，无须分页） 必须分页（项目中列表类需求、订单列表、商品列表、学生列表...） */ if (pageBean != null && pageBean.isPagination()) { // 必须分页（列表需求） String countSQL = getCountSQL(sql); pst = con.prepareStatement(countSQL); rs = pst.executeQuery(); if (rs.next()) { pageBean.setTotal(String.valueOf(rs.getObject(1))); } // 挪动到下面，是因为最后才处理返回的结果集 // -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%' // -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据 // -- countSql=select count(1) from (sql) t 符合条件的总记录数 String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据 pst = con.prepareStatement(pageSQL); rs = pst.executeQuery(); } else { // 不分页（select需求） pst = con.prepareStatement(sql);// 符合条件的所有数据 rs = pst.executeQuery(); } while (rs.next()) { T t = clz.newInstance(); Field[] fields = clz.getDeclaredFields(); for (Field f : fields) { f.setAccessible(true); f.set(t, rs.getObject(f.getName())); } list.add(t); } return list; } /** * 将原生SQL转换成符合条件的总记录数countSQL * * @param sql * @return */ private String getCountSQL(String sql) { // -- countSql=select count(1) from (sql) t 符合条件的总记录数 return "select count(1) from (" + sql + ") t"; } /** * 将原生SQL转换成pageSQL * * @param sql * @param pageBean * @return */ private String getPageSQL(String sql, PageBean pageBean) { // (this.page - 1) * this.rows // pageSql=sql limit (page-1)*rows,rows return sql + " limit " + pageBean.getStartIndex() + "," + pageBean.getRows(); } } 小贴士： 结合上面的案例需求，这里重构了executeQuery，可以发现这里的返回值不再是集合实体而是list集合里面存放Map集合，这样就算来再多字段我们也不用重新编写我们的实体类，直接调用该方法，利用Map进行存储即可。 ②UserDao编写 package com.xw.dao; import java.util.List; import java.util.Map; import com.xw.entity.User; import com.zking.util.BaseDao; import com.zking.util.PageBean; import com.zking.util.StringUtils; /** * 用户 * * @author 索隆 * */ public class UserDao extends BaseDao { // 分页模糊查询 public List list(User user, PageBean pageBean) throws Exception { // sql语句编写 String sql = "select * from t_oa_user where 1=1"; // 获取参数 long id = user.getId(); String name = user.getName(); // 进行参数非空判断 if (StringUtils.isNotBlank(name)) { sql += " and name like '%" + name + "%'"; } // 如果bid不等于0说明传递过来了bid,此时的bid是有值的 if (id != 0) { sql += "and id=" + id; } return super.executeQuery(sql, User.class, pageBean); } // 新增 public int add(User User) throws Exception { int n=0; // sql语句编写 String sql = "insert into t_oa_user (name,loginName,pwd)values(?,?,?)"; n = super.executeUpdate(sql, User, new String[] { "name", "loginName", "pwd" }); return n; } // 删除 public int del(User User) throws Exception { // sql语句编写 String sql = "delete from t_oa_user where id=?"; return super.executeUpdate(sql, User, new String[] { "id" }); } // 修改 public int edit(User User) throws Exception { // sql语句编写 String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id=?"; return super.executeUpdate(sql, User, new String[] { "name", "loginName", "pwd", "id" }); } // 登录校验 public User login(User User) throws Exception { // sql语句编写 String sql = "select * from t_oa_user where loginName='" + User.getLoginName() + "' and pwd='" + User.getPwd()+ "' "; List list = super.executeQuery(sql, User.class, null); if (list != null && list.size() == 1) { return list.get(0); } else { return null; } } //不包含原表字段的分页模糊查询 public List> userRole(User user, PageBean pageBean) throws Exception { // sql语句编写 String sql = "select u.*,\r\n" + "(CASE \r\n" + " WHEN u.rid='1' THEN '管理员'\r\n" + " WHEN u.rid='2' THEN '发起者'\r\n" + " WHEN u.rid='3' THEN '审批者'\r\n" + " WHEN u.rid='4' THEN '参与者'\r\n" + " WHEN u.rid='5' THEN '会议室管理员'\r\n" + "\r\n" + " ELSE\r\n" + " '其他'\r\n" + "END ) 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); } } 注意：这里的返回就是已经重构的executeQuery不要搞混了哦！！ 3.Servlet编写 ①R工具类的介绍 我们可以查看官网的表格内容显示的JSON格式是什么样子的，发现有以上几个属性： code,msg,count,data code:只能填写“0”（别人的Layui规则） mag:没实际含义，可随意填写 count:查询到的条数 data:实体内容 我们想要在页面显示数据，那么就必须要满足它的JSON格式，我们就可以利用R工具类来简化我们的代码，不然每次遇到这种场景就需要手动创建Map集合然后.put添加属性的方式造数据。 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; } }  这里也重构了和多次ok的方法，方便我们利用于不同的场景。 ②Useraction编写 package com.xw.web; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import com.xw.entity.User; import com.xw.dao.UserDao; 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 user = new User(); UserDao userdao = new UserDao(); /** * 登录验证 * * @param req * @param resp * @throws Exception */ public void login(HttpServletRequest req, HttpServletResponse resp) throws Exception { User login = userdao.login(user); // 保存域对象 if (login != null) { HttpSession session = req.getSession(); session.setAttribute("user", login); } ResponseUtil.writeJson(resp, login); } /** * 注册新增用户 * * @param req * @param resp * @throws Exception */ public void register(HttpServletRequest req, HttpServletResponse resp) throws Exception { int i = userdao.add(user); if (i > 0) { ResponseUtil.writeJson(resp, i); } else { ResponseUtil.writeJson(resp, null); } } /**带分类管理的模糊查询 * @param req * @param resp * @throws Exception */ public void UserRole(HttpServletRequest req, HttpServletResponse resp) throws Exception { // 初始化pageBean PageBean pageBean = new PageBean(); pageBean.setRequest(req); //调用带分页查询的方法 List> userRole = userdao.userRole(user, pageBean); //利用R工具类制造出符合要求的json格式数据 ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole)); } /**删除用户 * @param req * @param resp * @throws Exception */ public void del(HttpServletRequest req, HttpServletResponse resp) throws Exception { //调用删除的方法 int del = userdao.del(user); //利用R工具类制造出符合要求的json格式数据 ResponseUtil.writeJson(resp, R.ok(0, "删除成功")); } /**修改用户 * @param req * @param resp * @throws Exception */ public void edit(HttpServletRequest req, HttpServletResponse resp) throws Exception { //调用修改的方法 int del = userdao.edit(user); //利用R工具类制造出符合要求的json格式数据 ResponseUtil.writeJson(resp, R.ok(0, "修改成功")); } /**新增用户 * @param req * @param resp * @throws Exception */ public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception { //调用新增的方法 int del = userdao.add(user); //利用R工具类制造出符合要求的json格式数据 ResponseUtil.writeJson(resp, R.ok(0, "新增成功")); } @Override public User getModel() { return user; } } 4.jsp页面搭建 一定要注意我们的层级结构 ①userManage.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/static.jsp"%> 用户名： 查询 新增  ②userEdit.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/static.jsp"%> 用户名称 用户角色 ---请选择--- 管理员 发起者 审批者 参与者 会议管理员 登录账号 登录密码 将JSP页面的逻辑代码分离 ③userManage.js var table,$,layer; var row; layui.use(['table','jquery','layer'], function(){ table = layui.table ,layer=layui.layer ,$=layui.jquery; initTable(); //为查询按钮设置点击事件 $("#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(); } }); } //查询的点击事件 function query(){ //表格的重载 table.reload('test', { where: { //设定异步数据接口的额外参数，任意设 name: $("#name").val() } //默认limit需要改成我们自己工具类的名字 ,request: { pageName: 'page ' //页码的参数名称，默认：page ,limitName: 'rows' //每页数据量的参数名，默认：limit } }); //只重载数据 } //将分页查询方法封装 function initTable(){ table.render({ elem: '#test' ,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', width:80, fixed: 'left', unresize: true, sort: true} ,{field:'loginName', title:'账户名', width:120, edit: 'text'} ,{field:'name', title:'真实姓名', width:150, edit: 'text', templet: function(res){ return ''+ res.name +'' }} ,{field:'pwd', title:'密码', width:80, edit: 'text', sort: true} ,{field:'rname', title:'身份', width:100} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] ,page: true }); //监听行工具事件 table.on('tool(test)', function(obj){ row = obj.data; 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('编辑'); } }); } ④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'); } 5.案例效果演示 ①查询   ②新增   ③修改   ④删除   到这里我的分享就结束了，欢迎到评论区探讨交流！！ 如果觉得有用的话还请点个赞吧 ♥  ♥ 你可能感兴趣的:(Layui教学,layui,java,前端,管理系统,表格,增删改查) UI学习——cell的复用和自定义cell Magnetic_h ui学习 目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添 Long类型前后端数据不一致 igotyback 前端 响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问 LocalDateTime 转 String igotyback java开发语言 importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux 需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口 Python中os.environ基本介绍及使用方法 鹤冲天Pro #Pythonpython服务器开发语言 文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi 关于提高复杂业务逻辑代码可读性的思考 编程经验分享 开发经验java数据库开发语言 目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一 DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业 ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript 华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链 加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景 ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端 Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线 node.js学习 小猿L node.jsnode.js学习vim node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行 自我意识 徐立华 ----读帕克.帕尔默《教学勇气》（P18----19）5.铸造我们的学科帕克.帕尔默说学科知识对我们的自身认同和外部世界有启发意义。学科会铸造我们。“在我们与学科的命题概念和学科的生活框架相遇之前，自我意识知识处于潜伏状态，通过回想学科是怎样唤醒自我意识，我们就可以找回教学心灵。”《教学勇气》（P18）我们的自我意识像冰山表面下无限延伸的冰层，常常处于潜伏状态。但是在我们对所教授的学科进行深入思 那个严厉的启蒙老师 小米星的天空 本文参加鹏哥教师节征文活动我的启蒙老师李老师，大概是唯一动手打过我，但是我仍然很感恩的老师吧。李老师当年四十多岁，擅长珠心算教学，算是我们乡镇小学的王牌老师。李老师很严厉，不仅要骂学生，还要动手打人，他的大眼睛一瞪，全班同学都瑟瑟发抖。在九十年代，家长不像现在这样宠溺孩子。许多家长都跟老师说，管得严一点，不听话就给我打。那时候棍棒教育是很正常的，教室里的木质米尺，常常因为被用来打调皮男生的屁股而折 提高教师信息素养，提高道德与法治课教学效益 长白159宋彦红 提高教师信息素养，提高道德与法治课教学效益随着经济和社会的发展，信息技术已经运用到课堂教学中，为课堂教学展示了一个崭新的天地。的确，信息技术形象、生动、直观性强，能够将课本中的一些抽想的概念直接展示在学生面前，从而调动学生的眼、耳、脑，让他们兴奋起来，变被动学习为主动学习，充分发挥教师的教育引导作用，创造一个可以使学生积极参与的场景。在制作、使用信息技术的实践过程中，本文拟就教师提升信息素养的必要 2022-08-28 蔚蓝一片晴 初三暑假培训收获点滴从8月25至8月27日三天两晚的培训结束了，回到家中，该静下心来整理一下触动心灵的收获，成为成长的积淀。1.在优秀团队中快速成长与提升，做一名反思成长型教师一名专业型教师的教学指导包括了教学原理知识、案例知识、策略知识。面对教学中的遇到的有趣的情形、问题会去研究其理，寻找更好的教法学法对策。从新手到成熟型教师，再走向专业型教师，需要的是觉醒与反思，多进行案例研究，从案例中观察、 Java 重写(Override)与重载(Overload) 叨唧唧的 Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio 简单了解 JVM 记得开心一点啊 jvm 目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven Energet!c 开发语言 1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach Java企业面试题3 马龙强_ java 1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分 JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Javajava Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选javakafka 一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会 白骑士的Java教学基础篇 2.5 控制流语句 白骑士所长 Java教学java开发语言 欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘ python语法——三目运算符 HappyRocking pythonpython三目运算符 在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。 语文主题教学学习笔记之87 东哥杂谈 “语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细 ArrayList 源码解析 程序猿进阶 Java基础ArrayListListjava面试性能优化架构设计idea ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添 趁吾身未老 逍遥书生111 趁吾身未老池非2020年，一场突如其来的新冠脑炎疫情，打破了原有的状态。工作与生活的轨迹发生了不确定的变化。01因为隔离防疫，正常的教学不能进行，线上网课成为教学的新形式，年过五十的我面对新的教学形式有些应不暇。只得退而求次，不再负责高考班级的课程。这样，就不用上网课做直播了。感觉很轻松很闲的同时，也感觉到了英雄迟暮。不得不承认，老了。该交班了。因为不能出门，整天呆在家里，一开始还很兴奋，终于可以 Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务 一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast Java：爬虫框架 dingcho Javajava爬虫 一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分 vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端 问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported 设计模式介绍 tntxia 设计模式 设计模式来源于土木工程师 克里斯托弗 亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。 亚历山大与萨拉-石川佳纯和穆雷 西乐弗斯坦合作 android高级组件使用(一) 百合不是茶 androidRatingBarSpinner 1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。 使用AutoCompleteTex [网络与通讯]路由器市场大有潜力可挖掘 comsci 网络           如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题.....        这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入  &nbs 自写简单Redis内存统计shell 商人shang Linux shell统计Redis内存 #!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem 单例模式(饿汉 vs懒汉) oloz 单例模式 package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《 懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva springMvc json支持 杨白白 json springmvc 1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() { android播放，掃描添加本地音頻文件 小桔子         最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想， oracle常用命令 aichenglong oracledba常用命令 1 创建临时表空间 create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m  autoextend on  next 50m maxsize 20480m  extent management local 25个Eclipse插件 AILIKES eclipse插件 提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了 Spring MVC拦截器+注解方式实现防止表单重复提交 baalwolf spring mvc 原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。   1.新建注解：   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 《Javascript高级程序设计(第3版)》闭包理解 bijian1013 JavaScript “闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》         看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f AngularJS Module类的方法 bijian1013 JavaScriptAngularJSModule         AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。 一.Main方法在哪里         如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所 [Maven学习笔记七]Maven插件和目标 bit1129 maven插件 插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标   使用插件和目标使得我们可以干预 【Hadoop八】Yarn的资源调度策略 bit1129 hadoop 1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度   2. 多用户资源共享的调度 Nginx使用Linux内存加速静态文件访问 ronin47 Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。 先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下： 关于Unity3D中的Shader的知识 brotherlamp unityunity资料unity教程unity视频unity自学 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S CopyOnWriteArrayList vs ArrayList bylijinnan java package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO 内存中栈和堆的区别 chicony 内存 1、内存分配方面：     堆：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收 。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。     栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中 回答一位网友对Scala的提问 chenchao051 scalamap 本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。 问题 写道 对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢    先回答一点，在实际使用中，Scala毫无疑问就是这么简单。 mysql 取每组前几条记录 daizj mysql分组最大值最小值每组三条记录 一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a  WHERE 3> (SELECT COUNT(*) FROM  tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE HTTP深入浅出 http请求 dcj3sjt126com http   HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We 判断MySQL记录是否存在方法比较 dcj3sjt126com mysql 把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。 　　我这里总结了判断记录是否存在的常用方法： 　　sql语句： select   count ( * )  from  tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。 对HTML XML的一点认识 e200702084 htmlxml 感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 Node 层次 jquery分页插件 genaiwei jqueryWeb前端分页插件 //jquery页码控件// 创建一个闭包    (function($) {      // 插件的定义      $.fn.pageTool = function(options) {        var totalPa Mybatis与Ibatis对照入门于学习 Josh_Persistence mybatisibatis区别联系 一、为什么使用IBatis/Mybatis         对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、 C中怎样合理决定使用那种整数类型？ 秋风扫落叶 c数据类型 如果需要大数值(大于32767或小于32767), 使用long 型。 否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。 除此之外, 就使用 int 型。 如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。 但是, 要注意在表达式中混用有符号和无符号值的情况。    &nbs maven问题 zhb8015 maven问题   问题1： Eclipse 中 新建maven项目 无法添加src/main/java 问题    eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。     按照maven目录结构，添加src/main/ja (二)androidpn-server tomcat版源码解析之--push消息处理 spjich javaandrodipn推送 在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。 先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc 用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题 中华好儿孙 JavaScriptAjaxWeb上传文件FormData var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca mybatis常用jdbcType数据类型 ysj5125094 mybatismapperjdbcType   MyBatis 通过包含的jdbcType 类型 BIT         FLOAT      CHAR           按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他 首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉 版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.