基于Layui实现对数据库表增删改查的后台界面

不积跬步，无以至千里；不积小流，无以成江海。

| @Author：TTODS

前言

layui是一个非常好用的前端框架，对后端开发者也非常友好。本文将演示如何使用layui快速实现对数据库表的增删改查界面。

关于layui更详细的使用方法，请移步layui项目仓库查阅官方文档

数据库表结构与实体类对象

我们现在数据库中有一张客户表（表中的数据均为随机生成），其结构如下图所示：
在这里插入图片描述

其对应的实体类对象Customer类：

@Data
@EqualsAndHashCode
@TableName("customer")
public class Customer implements Serializable {private static final long serialVersionUID = 1L;/*** 主键*/@TableId(value = "id", type = IdType.AUTO)private Long id;/*** 真实姓名*/private String realName;/*** 性别*/private String sex;/*** 年龄*/private Integer age;/*** 邮箱*/private String email;/*** 手机号码*/private String phone;/*** 地址*/private String address;/*** 创建时间*/@TableField(fill = FieldFill.INSERT)private LocalDateTime createTime;/*** 修改时间*/@TableField(fill = FieldFill.UPDATE)private LocalDateTime modifiedTime;/*** 创建人*/private Long createAccountId;/*** 修改人*/private Long modifiedAccountId;/*** 逻辑删除标识(0、否 1、是)*/@TableLogicprivate Integer deleted;
}

客户管理主界面

下面是我客户管理主界面的截图，有了layui实现这样的表格非常的简单。
在这里插入图片描述

客户管理主界面的html代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>客户管理主界面</title><link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}">
</head>
<body>
<div>
<!--    用来模糊查询的表单  --><form class="layui-form" th:action="@{/customer}" method="get"><div class="layui-form-item layui-inline"><label class="layui-form-label ">姓名</label><div class="layui-input-inline"><input class="layui-input" type="text" id="name" name="name" autocomplete="off"></div></div><div class="layui-form-item layui-inline"><label class="layui-form-label">邮箱</label><div class="layui-input-inline"><input class="layui-input" type="text" id="email" name="email" autocomplete="off"></div></div><div class="layui-form-item layui-inline"><div class="layui-input-inline"><button class="layui-btn" lay-submit lay-filter="query" id="query-btn" >查询</button></div></div></form>
</div>
<!--增加按钮-->
<div><div class="layui-btn" onclick="toAdd()">增加</div>
</div>
<!--表格-->
<table id="customer-table" lay-filter="customerTable"></table>
<!--工具栏-->
<script type="text/html" id="toolbar"><div class="layui-btn layui-btn-sm" lay-event="detail">查看</div><div class="layui-btn layui-btn-sm" lay-event="modify">修改</div><div class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</div>
</script>
<script th:src="@{/webjars/jquery/jquery.js}"></script>
<script th:src="@{/webjars/layui/layui.all.js}"></script>
<script th:src="@{/js/customer/customer.js}"></script>
</body>
</html>

后端页面映射及数据查询接口：

/*** <p>* 客户表 前端控制器* </p>** @author ttods* @since 2021-10-30*/
@Controller
@RequestMapping("/customer")
@SuppressWarnings("deprecation")
public class CustomerController {@AutowiredCustomerService customerService;@GetMapping("/toList")public String toList() {return "customer/customerList";}@GetMapping@ResponseBodypublic R<Page<Customer>> page(@RequestParam(defaultValue = "1") Long page,@RequestParam(defaultValue = "10") Long limit,String name,String email) {LambdaQueryWrapper<Customer> query = Wrappers.<Customer>lambdaQuery().like(StringUtils.isNotBlank(name), Customer::getRealName, name).like(StringUtils.isNotBlank(email),Customer::getEmail,email);Page<Customer> myPage = customerService.page(new Page<>(page, limit), query);return R.ok(myPage);}
}

基于layui.table实现表格的自动化渲染

在html代码中表格我们只写了一个空标签，并没有写任何表格的内容（包括表头和数据）。

<!--表格-->
<table id="customer-list" lay-filter="customerList"></table>

我们可以使用layui.table.render(options)方法来对表格进行自动化渲染。进行客户表格渲染的js代码如下：

layui.table.render({elem: '#customer-table', url: '/customer/' //数据接口, page: true    // 开启分页, limit: 10     // 每页数据数, id: "customerTable" // 设置容器唯一id 默认为table标签的id属性值, cols: [[ //表头{field: "id", title: "用户编号", width: 100, align: "center"},{field: "realName", title: "姓名"},{field: "sex", title: "性别",width:80},{field: "age", title: "年龄",width: 80},{field: "email", title: "邮箱"},{field: "phone", title: "电话"},{field: "address", title: "地址"},// {field: "createTime", title: "创建时间"},{toolbar: "#toolbar", title: "操作"}]],parseData: function (res) {return {"count": res.data.total,"data": res.data.records,"code": res.code,"msg": res.msg}}
});

在使用layui.table.render()方法时，我们可以根据自己的需要选择合适的参数进行设置。其中elem、cols，url是必须有的。

elem:需要渲染的table元素选择器（推荐使用id选择器）

cols:列标题title及该列对应的数据的属性名field，当然还可以设置列宽width和对齐方式align等

url:数据接口，默认使用get请求，关于异步请求接口的参数还有method,where（请求参数）,contentType,headers等。

这里还使用了以下参数：

page:分页功能

limit:设置分页大小

id:设置容器唯一id 默认为table标签的id属性值,下面模糊查询功能中用到的就是这个id

parseData:解析服务器返回的数据

因为layui的table要求数据接口返回的数据res的格式如下：

{"code": 0,"msg": "","count": 1000,"data": [{}, {}]
}

而我现在请求返回的数据格式如下：

{"code": 0,"data": {"records": [{"id": 1,"realName": "徐怜烟","sex": "男","age": 41,"email": "abc18@gmail.com","phone": "15177778888","address": "地址86.0","createTime": "2021-10-27T22:13:22","modifiedTime": "2021-10-31T16:57:54","createAccountId": null,"modifiedAccountId": null,"deleted": 0},{"id": 2,"realName": "荤文昂","sex": "女","age": 30,"email": "abc34@gmail.com","phone": "15177778888","address": "地址62.0","createTime": "2021-10-27T22:13:22","modifiedTime": "2021-10-27T22:13:22","createAccountId": null,"modifiedAccountId": null,"deleted": 0}],"total": 628,"size": 2,"current": 1,"orders": [],"optimizeCountSql": true,"hitCount": false,"countId": null,"maxLimit": null,"searchCount": true,"pages": 314},"msg": "执行成功"
}

所以为了表格能够成功渲染数据，需要使用parseData方法对数据接口返回的数据进行处理。当然也可以修改服务器端数据返回的格式。

使用表格重载模糊查询

在进行模糊查询时，表中的数据需要根据输入的关键字进行更新，layui中的表格重载方法很好的实现了这个功能。我们可以调用layui.table.reload(ID,options)方法对表格进行重载。

其中ID为表格容器的id（render方法中设定的），options就是渲染表格时的各项基本参数。

本例中使用的代码如下：

// 查询表单提交事件处理
layui.form.on('submit(query)', function (data) {//data 中包含了表单的数据// let elem = data.elem; // 提交按钮DOM元素// let form1 = data.form;  // 对应表单DOM元素// let field = data.field; // 表单字段列表 {name:'',email:''}// 事件处理 本例中为 根据 name 和 email 更新客户表单layui.table.reload('customerTable', {page: {curr: 1 // page参数为1},where: {	name: $("#name").val(),email: $("#email").val()}})// 阻止表单跳转return false;
})

在姓名框中输入"文"字后，点击查询。可以发现请求url为：http://localhost:8080/customer/?page=1&limit=10&name=%E6%96%87&email=

查询结果如下图：
在这里插入图片描述

行工具条

在渲染表格参数的cols参数中，最后一条我们使用了工具条

{toolbar: "#toolbar", title: "操作"}

toolbar参数对应html代码中的工具栏模板的id选择器

<!--工具栏-->
<script type="text/html" id="toolbar"><div class="layui-btn layui-btn-sm" lay-event="detail">查看</div><div class="layui-btn layui-btn-sm" lay-event="modify">修改</div><div class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</div>
</script>

使用table.on("tool(filter)",function(obj){…})方法，进行工具条的事件绑定，其中filter为table原标签中的lay-filter属性值。

// 工具条事件
layui.table.on("tool(customerTable)", function (obj) {let data = obj.data;    // 获取当前行数据let layEvent = obj.event; // 获得 lay-event 对应的值let tr = obj.tr;    // 获得当前行tr的DOM对象// 从行数据中获取当前行对应客户的编号let customerId = data["id"];if (layEvent === 'detail') {// 处理查看事件} else if (layEvent === 'modify') {// 处理修改事件} else if (layEvent === 'delete') {// 处理删除事件}
})

增加客户

我们将表单置于layui弹出层的对话框中来进行交互。实现这个功能的流程类似与把大象装进冰箱，就是向后端请求表单界面，然后使用弹出层来实现表单界面，在绑定表单提交事件。

在这里插入图片描述

增加客户表单:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>用户增加页面</title>
</head>
<body>
<form class="layui-form" th:action="@{/customer}" method="post"><div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input class="layui-input" type="text" lay-verify="required" id="realName" name="realName"maxlength="50" autocomplete="off" placeholder="请输入姓名"></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男" checked ><input type="radio" name="sex" value="女" title="女" ></div></div><div class="layui-form-item"><label class="layui-form-label">年龄</label><div class="layui-input-block"><input class="layui-input" type="number" lay-verify="number" id="age" name="age"placeholder="请输入年龄" autocomplete="off"></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-block"><input class="layui-input" type="email" lay-verify="email" id="email" name="email" autocomplete="off"placeholder="请输入邮箱"></div></div><div class="layui-form-item"><label class="layui-form-label">电话</label><div class="layui-input-block"><input class="layui-input" type="text" lay-verify="phone" id="phone" name="phone" autocomplete="off"placeholder="请输入电话"></div></div><div class="layui-form-item"><label class="layui-form-label">地址</label><div class="layui-input-block"><input class="layui-input" type="text" lay-verify="required" id="address" name="address"placeholder="请输入地址" autocomplete="off"></div></div><div class="layui-form-item"><div class="layui-input-block"><div class="layui-btn" lay-filter="addCustomer" lay-submit>提交</div></div></div>
</form>
</body>
</html>

为了实现代码的复用，我们将打开对话框的功能封装成了openLayer函数、绑定提交事件的功能封装成了binSubmitEvent函数。

function openLayer(url, title) {$.ajax({url: url,type: "get",async: false,success: function (res) {// 开启对话框layer.open({type: 1,content: res,// res为请求返回的界面title: title,area: ['800px', '450px']});// 进行表单渲染layui.form.render();}})
}function bindSubmitEvent(filter) {layui.form.on('submit(' + filter + ')', function (data) {// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回// console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}$.ajax({url: $(data.form).attr("action"),type: $(data.form).attr("method"),data: JSON.stringify(data.field),contentType: "application/json;charset=utf-8",success: function (res) {if (res.code == 0) {query(); // 操作成功则调用query方法刷新(reload)表格}layer.msg(res.msg);}})// 关闭弹出层layer.closeAll();return false;// 阻止表单跳转})
}function toAdd() {openLayer("/customer/toAdd", "增加客户");// 绑定事件提交bindSubmitEvent("addCustomer");
}

客户详情、修改客户信息、删除客户信息

有了上面的基础，实现这些功能就比较简单了。三个功能处理逻辑都写在下面工具条的事件处理中

// 工具条事件
layui.table.on("tool(customerTable)", function (obj) {let data = obj.data;    // 获取当前行数据let layEvent = obj.event; // 获得 lay-event 对应的值let tr = obj.tr;    // 获得当前行tr的DOM对象// 从行数据中获取当前行对应客户的编号let customerId = data["id"];if (layEvent === 'detail') {openLayer("/customer/toDetail/" + customerId, "客户详情");} else if (layEvent === 'modify') {openLayer("/customer/toUpdate/" + customerId, "修改客户信息");bindSubmitEvent("updateCustomer");} else if (layEvent === 'delete') {layer.confirm("确定删除这行数据吗？", function (index) {$.ajax({url: "/customer/" + customerId,type: "delete",success: function (res) {if (res.code == 0) {query();}layer.msg(res.msg);},async: false})layer.close();})}
})

客户详情功能

我们只需要使用对于的客户编号拼接好请求url，从后端取得用户详情页后使用弹出层演示即可。
在这里插入图片描述

客户详情页html代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>客户详情</title>
</head>
<body>
<form class="layui-form" th:object="${customer}"><div class="layui-form-item"><div class="layui-form-label">姓名</div><div class="layui-form-block"><div class="layui-form-mid" th:text="*{realName}"></div></div></div><div class="layui-form-item"><div class="layui-form-label">性别</div><div class="layui-form-block"><div class="layui-form-mid" th:text="*{sex}"></div></div></div><div class="layui-form-item"><div class="layui-form-label">年龄</div><div class="layui-form-block"><div class="layui-form-mid" th:text="*{age}"></div></div></div><div class="layui-form-item"><div class="layui-form-label">邮箱</div><div class="layui-form-block"><div class="layui-form-mid" th:text="*{email}"></div></div></div><div class="layui-form-item"><div class="layui-form-label">手机号码</div><div class="layui-form-block"><div class="layui-form-mid" th:text="*{phone}"></div></div></div><div class="layui-form-item"><div class="layui-form-label">地址</div><div class="layui-form-block"><div class="layui-form-mid" th:text="*{address}"></div></div></div>
</form>
</body>
</html>

客户详情后端接口：

@GetMapping("/toDetail/{id}")
public String toDetail(@PathVariable Long id, Model model){Customer customer = customerService.getById(id);model.addAttribute("customer",customer);return "customer/customerDetail";
}

客户信息更新功能

与新增功能类似，不过需要在表单先填好原有值，还需要一个隐藏的input标签来保存用户id。
在这里插入图片描述

信息更新页html代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head><meta charset="UTF-8"><title>用户信息修改</title>
</head>
<body>
<form class="layui-form" th:action="@{/customer}" method="put" th:object="${customer}"><div class="layui-form-item"><input type="hidden" name="id" th:value="*{id}"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input class="layui-input" type="text" lay-verify="required" id="realName" name="realName"maxlength="50" autocomplete="off" placeholder="请输入姓名" th:value="*{realName}"></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男" th:checked="*{sex}=='男'" ><input type="radio" name="sex" value="女" title="女" th:checked="*{sex}=='女'"></div></div><div class="layui-form-item"><label class="layui-form-label">年龄</label><div class="layui-input-block"><input class="layui-input" type="number" lay-verify="number" id="age" name="age"placeholder="请输入年龄" autocomplete="off" th:value="*{age}"></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-block"><input class="layui-input" type="email" lay-verify="email" id="email" name="email" autocomplete="off"placeholder="请输入邮箱" th:value="*{email}"></div></div><div class="layui-form-item"><label class="layui-form-label">电话</label><div class="layui-input-block"><input class="layui-input" type="text" lay-verify="phone" id="phone" name="phone" autocomplete="off"placeholder="请输入电话" th:value="*{phone}"></div></div><div class="layui-form-item"><label class="layui-form-label">地址</label><div class="layui-input-block"><input class="layui-input" type="text" lay-verify="required" id="address" name="address"placeholder="请输入地址" autocomplete="off" th:value="*{address}"></div></div><div class="layui-form-item"><div class="layui-input-block"><div class="layui-btn" lay-filter="updateCustomer" lay-submit>提交</div></div></div>
</form>
</body>
</html>

客户信息更新后端代码：

@GetMapping("/toUpdate/{id}")
public String toUpdate(@PathVariable Long id,Model model){Customer customer = customerService.getById(id);model.addAttribute("customer",customer);return "customer/customerUpdate";
}@PutMapping
@ResponseBody
public R<Object> update(@RequestBody Customer customer){boolean success = customerService.updateById(customer);return ResultUtil.buildR(success);
}

删除功能

直接使用ajax发送请求进行操作，连对话框都不需要。
在这里插入图片描述

删除功能对应的后端代码

@DeleteMapping("/{id}")
@ResponseBody
public R<Object> delete(@PathVariable Long id){boolean success = customerService.removeById(id);return ResultUtil.buildR(success);
}

系统后台主界面

在系统后台主界面中使用了layui提供的后台管理布局框架和可关闭的选项卡，这里我只把代码贴出来，有兴趣的可以查阅一下官方文档。
在这里插入图片描述

index.html代码：

<!DOCTYPE html>
<html xmlns:th="http:www.thymeleaf.org">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>管理系统界面</title><link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}">
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">XXX后台</div><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img th:src="@{/img/avatar.jpg}" class="layui-nav-img">ttods</a><dl class="layui-nav-child"><dd><a href="">个人主页</a></dd><dd><a href="">设置</a></dd><dd><a href="">退出登录</a></dd></dl></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item"><a href="javascript:showTag('todo.html','主页',1);">后台管理主页</a></li><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">系统管理</a><dl class="layui-nav-child"><dd><a href="javascript:showTag('todo.html','账号管理',2);">账号管理</a></dd><dd><a href="javascript:showTag('todo.html','角色(权限)管理',3);">角色(权限)管理</a></dd></dl></li><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">客户管理</a><dl class="layui-nav-child"><dd><a href="javascript:showTag('customer/toList','客户管理',4);">客户管理</a></dd></dl></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div class="layui-tab" lay-filter="tabs" lay-allowClose="true"><ul class="layui-tab-title"></ul><div class="layui-tab-content"></div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div></div>
</div>
<script th:src="@{/webjars/layui/layui.js}"></script>
<script th:src="@{/webjars/jquery/jquery.js}"></script>
<script th:src="@{/js/index.js}"></script>
</body>
</html>

index.js代码：

function showTag(url, name, id) {let length = $("li[lay-id=" + id + "]").length;let element = layui.element;//对应id的选项卡不存在 新建选项卡if (length == 0) {let fullUrl = "/" + url;let height = $(window).height() - 190;let content = '<iframe style="width: 100%;height: ' + height + 'px" src="' + fullUrl + '" frameborder="0" scrolling="no">'element.tabAdd('tabs', {id: id,title: name,content: content})}element.tabChange('tabs', id);
}

- THE END -

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Mysql索引相关知识
MySql索引数据库索引是一种提高数据查询效率的数据结构数据结构示例地址： https://www.cs.usfca.edu/~galles/visualization/Algorithms.html 二叉树： 这种数据结构，缺点是如果插入递增的数据，会导致整个结构一侧长度递增. 数…...
2024/5/6 19:19:18
查看etcdctl信息
ETCDCTL_API3 /opt/etcd/bin/etcdctl --cacert/opt/etcd/ssl/ca.pem --cert/opt/etcd/ssl/server.pem --key/opt/etcd/ssl/server-key.pem --endpoints"https://192.168.182.128:2379,https://192.168.182.132:2379,https://192.168.182.133:2379" member list...
2024/5/2 16:40:39
小控件—— 原生js写轮播图
html css <div class"caricature w" id three><div class"headline">漫画简介</div><p class"subtitle">漫画导读</p><div class"focus"><a class"arrow-left" href"javascri…...
2024/4/26 13:51:43
双曲嵌入论文与代码实现——1. 数据集介绍
双曲嵌入论文与代码实现由于双曲嵌入相关的文章已经有了一系列的代码。本篇博客主要目的实现最开始的双曲嵌入论文，将论文中有些直接写出来的内容进行了细节的推导，同时实现对应的代码。学习的文章：Poincar Embeddings for Learning Hier…...
2024/4/15 14:22:41
IDEA11:构建JAVA maven项目
打开IDEA–file–new–project–Maven 1、选择jdk1.8 2、打勾Create from archetype 3、点击org.apache.maven.archetypes:maven-archetype-quickstart 4、点击next GroupId：可以理解为标志整个项目组，项目地址和GroupId正好相反例如： sp…...
2024/4/15 14:22:21
VTK显示CT图像视图
VTK显示CT图像视图...
2024/4/29 17:33:53
分布式dubbo+zookeeper
分布式系统是若干独立计算机的集合，这些计算机对于用户来说就像单个相关系统。是由一组通过网络进行通信，每个计算机之前相互通信，为了完成共同的任务而协调工作的计算机节点组成的系统。其目的是利用更多的机器、处理更多的数据。 dubbo&am…...
2024/5/6 18:51:22
HTML的全局标准属性
全局标注属性适用于大多数元素。在HTML规范中，规定了8个全局标准属性。 1.class： 用于定义元素的类名，通常指向CSS样式表中的类，class通常在<boyd>元素内部换句话说，class属性不能在以下元素使用<html>&…...
2024/4/13 12:35:35
Java----＞集合(上)
一、集合的框架 1.集合、数组都是对多个数据进行存储操作的结构，简称Java容器。 * 说明；此时的存储，主要是指能存层面的存储，不涉及到持久化的存储（.txt,.jpg,.avi,数据库中） 2.1数组在存储多个数据封面…...
2024/4/26 17:45:44
《算法笔记》读书记录DAY_44
CHAPTER_10 提高篇(4)——图算法专题 10.4.1最短路径最短路径是图论中一个很经典的问题：给定图G(V,E)，求一条从起点到终点的路径，使得这条路径上经过的所有边的边权之和最小。如下图所示，在从V0到V6的路径中，V0—…...
2024/4/24 15:18:51
python基础之函数详解(一)
1.函数参数 1.1参数分类必须参数默认参数关键字参数可变参数 # 1.必需参数 # 注意1：形参和实参的数量，类型，顺序的匹配 def add(n1,n2):print("%d %s %d" % (n1,n2,n1 n2)) add(2,3) # add(2) 数量 # add(3,"ab…...
2024/4/10 14:33:06
vue3 中获取dom节点
<div ref"dropRef"></div><script lang"ts">import {defineComponent, ref} from vueexport default defineComponent({name:Dropdown,setup(){const dropRef ref<null | HTMLElement>(null)return {dropRef //返回的名字与ref&q…...
2024/4/27 7:50:14
2021最强Android中高级大厂面试源码秘籍，为你备战2022金三银四，直通大厂
前言很多人都觉得阅读源码是一件比较困难的事情，虽然程序员每天都和代码打交道，但是经过数年的基础教育和职业培训，大部分程序员都会「写」代码，或者至少会抄代码和改代码。然而，会读代码的并不在多数，…...
2024/4/16 21:26:59
kkfileview——文件的上传，列表，删除
2021SCSDUSC...
2024/4/19 22:55:31
Promise 和 async awite
最佳实践： 执行器函数内部一定要有异步逻辑而且我们得让执行器决定的那个promise的状态与当前的异步逻辑挂钩! then对应的回调中一般都是要返回promise的! 这个promise一般也会和一个异步逻辑挂钩! 一定要让await等一个promise!!!!!! 1. promise本质上是一个…...
2024/5/3 6:33:52
Java基础重点知识总结 - 怒更中
文章目录Java基础重点知识总结一、Java基础内置对象1.Object2.String3.StringBuffer/StringBuilder4.BigInteger/BigDecimal5.数组工具类Arrays6.系统工具类System7.时间8.instanceof9.Comparable - compareTo二、高级功能1.反射2.断言3.异常4.日志5.泛型三、集合四、JDK1.8新特…...
2024/4/15 14:23:02
复习JQuery-2021-10-31
学如逆水行舟，不进则退切换tab栏 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport"…...
2024/4/16 20:37:36
ts中接口与类的关系
1.接口之间可以相互继承，从而实现接口的复用；类之间也可以相互继承，从而实现方法和属性的复用 2.接口可以通过类来实现，但是接口只能约束类的公有成员 3.接口可以抽离类的成员，抽离的时候包括共有成员，私…...
2024/4/15 14:23:22
Day12----100 days of python coding
设置一个variableTrue，直接用： like： if variable ：就好了； If we want to let the above function again, then we can just define what we have coded,and call it Recursion👆...
2024/4/29 22:57:09
日常任务-07-技术-16.Java正则表达式获取字符串当中的网址
//创建正则表达式截取内容详情中的网址（不全最后部分截取的不全） String reg "(ht|f)tp(s?)\\:\\/\\/[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*(:(0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\\\/\\\\\\&%\\$#_]*)([\\\"|\\]([^\\\"\\]*)[\…...
2024/4/29 21:03:38