今天笔者学习了LayUi框架的一些基础内容，总体来说，LayUi框架比BootStrap框架更倾向于后台的搭建和使用，样式更加多样，说明也对国人更加友好，毕竟是国人开发的框架嘛~废话不多少，开始介绍。
LayUI 的介绍
Layui（谐音：类UI) 是⼀款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和 BootStrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格， 只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
LayUI 的特点
Layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
Layui是提供给后端开发人员的ui框架，基于DOM驱动。
使用
在官网首页下载到 layui 的最新版，获得 layui 后，将其完整地部署（拷贝到项目中）到你的项目目录，你只需要引入下述两个文件：
./layui/css/layui.css
./layui/layui.js // 提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js
基本的入门页面Hello World
开始使⽤layui
还需要声明需要使用的模块和回调函数。参照官方文档，选择自己想要的效果就行。 比如：
页面元素
布局
布局容器
将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度， 让列可控。
可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应。
栅格系统
为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 引进了⼀套具备响应式能力的栅格系统。将容器进行了 12 等分 ，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格布局规则
采用 layui-row 来定义行，如：
采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量 md 代表的是不同屏幕下的标记；变量 * 代表的是该列所占⽤的12等分数（如6/12），可选值为 1 - 12；如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自另起一行。
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
可以在列（column）元素中放入你自己的任意元素填充内容
示例：
常规布局（以中型屏幕桌⾯为例）：
响应式规则
栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。
一眼看去，有没有感觉和BootStrap有点相似？
通过控制台切换设备显示即可查看效果
列边距
通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出 现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：
layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8
layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18
layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28
layui-col-space30
支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
示例：
列间距
注：
layui-col-space：设置后不起作用主要是因为设置的是padding,也就是说是向内缩，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加⼀个div，来达到目的。
间距一般不高于30px，如果超过30，建议使用列偏移。
列偏移
对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。 如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度
列偏移
注：列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
列嵌套
可以对栅格进行无穷层次的嵌套。在列元素（layui-col-md*）中插入行元素（layui-row），即可完成嵌套。
列嵌套
基本元素
按钮
用法
向任意HTML元素设定 class="layui-btn"，建立⼀个基础按钮。通过追加格式为 layui-btn-{type} 的 class 来定义其它按钮风格。
⼀个标准的按钮
⼀个可跳转的按钮
⼀个按钮
主题
示例：
默认按钮
原始按钮
百搭按钮
暖⾊按钮
警告按钮
禁⽤按钮 尺寸
⼤型
默认
⼩型
迷你 圆角
layui-btn-radius
默认按钮
原始按钮
百搭按钮
暖⾊按钮
警告按钮
禁⽤按钮 图标
可用字符集，也可用类样式选择
添加
导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。
依赖加载模块：element
实现步骤：
引入资源
依赖加载模块
显示指定类型的导航
水平（垂直、侧边）导航
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
水平导航：layui-nav
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
导航主题
通过对导航追加CSS背景类，让导航呈现不同的主题色
水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）
面包屑
吃饭
睡觉
游戏
视频 选项卡
依赖加载模块：element
选项卡风格
默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card
带删除的选项卡
可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
表格
常规用法
昵称
加⼊时间
签名
贤⼼
2016-11-29
⼈⽣就像是⼀场修⾏
许闲⼼
2016-11-28
于千万⼈之中遇⻅你所遇⻅的⼈，于千万年之中，时间的⽆涯的荒ᰀ⾥…
就是在 table 容器中加一个类
基础属性
表单
依赖加载模块：form
在一个容器中设定 class="layui-form" 来标识一个表单元素块
基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。
输入框
required：注册浏览器所规定的必填 字段
lay-verify：注册form模块需要验证 的类型
class="layui-input"：layui.css提供的通用CSS类
下拉选择框
北京
上海
广州
深圳
杭州
属性selected可设定默认项
属性disabled开启禁⽤，select和option标签都支持
可以通过 optgroup 标签给select分组
请选择
你⼯作的第⼀个城市？
你的⼯号？
你最喜欢的⽼师？
通过设定属性 lay-search 来开启搜索匹配功能
layer
form
layim
复选框
默认⻛格：
原始⻛格：
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格 （原始风格：lay-skin="primary"）
设置value="1"可自定义值，否则选中时返回的就是默认的on
开关
将复选框checkbox，通过设定 lay-skin="switch" 形成了开关风格
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本 （两种文本用 "|" 隔开）
设置value="1"可自定义值，否则选中时返回的就是默认的on
单选框
属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域
class="layui-textarea"：layui.css提供的通用CSS类
组装行内表单
class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内
忽略美化渲染
可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。
表单方框风格
通过追加 layui-form-pane 的class，来设定表单的方框风格。
组件示例
弹出层
模块加载名称：layer 独立版本：layer.layui.com
由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。
作为独立组件使用 layer
在 layui 中使用 layer
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});基础参数
type - 基本层类型
类型：Number，默认：0
可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层）
title - 标题
类型：String/Array/Boolean，默认：'信息'
title支持三种类型的值： 若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本；
若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意 css样式； 若你不想显示标题栏，可以 title: false；
content - 内容
类型：String/DOM/Array，默认：' '
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。
/* 信息框 */
layer.open({
type:0,
title:"系统消息",
// content可以传⼊任意的⽂本或html
content:"Hello"
});
/* ⻚⾯层 */
layer.open({
type:1,
title:"系统消息",
// content可以传⼊任意的⽂本或html
content:"Hello
"
});
/* iframe */
layer.open({
type:2,
title:"系统消息",
// content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: ['url',
'no']
content:"http://www.baidu.com"
// content:["http://www.baidu.com",'no']
});
/* tips层 */
layer.open({
type: 4,
content: ['内容', '#id'] //数组第⼆项即吸附元素选择器或者DOM
});area - 宽高
类型：String/Array，默认：'auto' 在默认状态下，layer是宽高都自适应的。
当定义宽度时，你可以area: '500px'，高度仍然是自适应的。 当宽高都要定义时，你可以area: ['500px', '300px']。
icon - 图标
注：信息框和加载层的私有参数。
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。
// eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开⼼。。', {icon: 5});
// eg3
layer.load(1); // ⻛格1的加载日期与时间选择
模块加载名称：laydate 独立版本：http://www.layui.com/laydate/
layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期 时间选择器 五种类型的选择方式。
和 layer 一样，可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照实际需求来选择。
在layui模块中使用
基础参数
elem - 绑定元素
类型：String/DOM，默认值：无
必填项，用于绑定执行日期渲染的元素，值⼀般为选择器，或DOM对象
laydate.render({
elem: '#test' //或 elem: document.getElementById('test')、elem:
lay('#test') 等
});type - 控件选择类型
类型：String，默认值：date
用于单独提供不同的选择器类型，可选值如下表：
//年选择器
laydate.render({
elem: '#test'
,type: 'year'
});
//年⽉选择器
laydate.render({
elem: '#test'
,type: 'month'
});
//⽇期选择器
laydate.render({
elem: '#test'
//,type: 'date' //默认，可不填
});
//时间选择器
laydate.render({
elem: '#test'
,type: 'time'
});
//⽇期时间选择器
laydate.render({
elem: '#test'
,type: 'datetime'
});format - 自定义格式
类型：String，默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定⼀个你所需要的日期格式。layDate 支持的格式如下：
value - 初始值
类型：String，默认值：new Date()
支持传入符合format参数设定的日期格式字符，或者 new Date()
// 传⼊符合format格式的字符给初始值
laydate.render({
elem: '#test'
,value: '2018-08-18' //必须遵循format参数设定的格式
});
// 传⼊Date对象给初始值
laydate.render({
elem: '#test'
,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});分页
模块加载名称：laypage
快速使用
laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。
基础参数
通过核心方法：laypage.render(options) 来设置基础参数。
数据表格
模块加载名称：table
快速使用
创建一个 table 实例最简单的方式是，在页面放置一个元素，然后通过 table.render() 方法指定该容器。
数据接口 user.json
{
"code": 0,
"msg": "",
"count": 50,
"data": [{
"id": 10000,
"username": "user-0",
"sex": "⼥",
"city": "城市-0",
"sign": "签名-0"
},
{
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1"
},
{
"id": 10002,
"username": "user-2",
"sex": "⼥",
"city": "城市-2",
"sign": "签名-2"
}
]
}三种初始化渲染方式
方法渲染
将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器，上面的例子便是方法渲染
注：table.render()方法返回⼀个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。
自动渲染
在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。
带有 class="layui-table" 的标签。
对标签设置属性 lay-data="" 用于配置一些基础参数
在标签中设置属性lay-data=""用于配置表头信息
转换静态表格
一个固定写死的表格，将自动表格的 lay-data去掉，然后和普通表格加上数据即可
昵称
积
分
签名
贤⼼1
66
⼈⽣就像是⼀场修⾏a
执行用于转换表格的JS方法
layui.use('table', function(){
var table = layui.table;
// 转换静态表格
table.init('demo', {
height: 315 // 设置⾼度
// ⽀持所有基础参数
});
});基础参数使用的场景
// 场景⼀：下述⽅法中的键值即为基础参数项
table.render({
height: 300
,url: 'user.json'
});
// 场景⼆：下述 lay-data ⾥⾯的内容即为基础参数项，切记：值要⽤单引号
// ……
// 更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); // 转化静态表格
> var tableObj = table.render({});
tableObj.reload(options); // 重载表格
开启分页
page:true // 开启分⻚
总结：LayUi框架的基础，我就学习了一些常用的，能够给大家带来一些帮助的东西，还有好多东西没有学习，笔者的学习之路任重而道远啊~
路漫漫其修远兮，吾将上下而求索
你可能感兴趣的:(前端框架,web)
【无标题】
是懒羊羊吖～
笔记
一.WED前端应用软件：c/s架构b/s架构web前端：html5css3javascripthtml5：超文本标记语言----超链接，文字，标签标签语法规范：结束-----双标签标签体------可以嵌套inputimg---------单标签属性：定制元素的行为，属性是不通用的，每一个标签存在自身的属性，当属性名等于属性值时,只需要写属性名，不需要写属性值。二.HTML1.样式//文档声明：告
Go Web 开发基础：从入门到实战
一小路一
掌握 Go 语言：编程世界的进阶钥匙 golang 前端 面试 后端 服务器
GoWeb开发基础：从入门到实战Go语言因其高效性和简洁性，成为了后端开发的热门选择之一。Go的net/http包提供了强大的Web服务功能，可以帮助我们快速搭建Web应用。本文将带领你从基础开始，逐步了解如何使用Go创建Web服务、处理路由、使用模板引擎、提供静态文件服务，并与数据库进行交互。文章内容包含常见的错误示例和面试题，帮助你更好地理解GoWeb开发。1.使用net/http创建一个简单
141，【1】buuctf web [SUCTF 2019]EasyWeb
rzydal
web 安全
进入靶场代码审计18){die('Oneinchlong,oneinchstrong!');}//使用正则表达式检查$hhh是否包含特定字符集（包括一些常见字符和控制字符等），如果包含则终止脚本执行if(preg_match('/[\x00-0-9A-Za-z\'"\`~_&.,|=[\x7F]+/i',$hhh))die('Trysomethingelse!');//获取$hhh中使用到的字符，
【Docker】百度网盘：基于VNC的Web访问及后台下载
T0uken
docker 前端 dubbo
本教程通过DockerCompose部署百度网盘的VNC版本，实现24小时不间断下载、双模式访问、数据持久化、自动重启和安全加密控制等核心功能。目录结构规划建议使用以下目录结构（可根据实际情况调整）：~/baidunetdisk/├──docker-compose.yml├──config/└──downloads/创建docker-compose.ymlservices:baidunetdisk
Linux操作系统：个人云存储服务搭建开发
暮雨哀尘
Linux的那点事 linux 运维 服务器 大数据 集群技术 nginx mysql
个人云存储服务搭建开发文档一、项目目标搭建一个类似Dropbox的个人云存储服务，实现文件的同步和备份功能，确保数据的安全性和便捷性。二、技术栈操作系统：Linux（推荐使用UbuntuServer或CentOS）云存储软件：Nextcloud或SeafileWeb服务器：Apache或Nginx数据库：MySQL或MariaDBSSL证书：自签名证书或Let'sEncrypt免费证书三、搭建步骤
【部署】Ktransformer是什么、如何利用单卡24GB显存部署Deepseek-R1 和 Deepseek-V3
仙人掌_lz
人工智能 人工智能 AI 部署 自然语言处理
简介KTransformers是一个灵活的、以Python为中心的框架，旨在通过先进的内核优化和放置/并行策略提升HuggingFaceTransformers的使用体验。它具有高度的可扩展性，用户可通过单行代码注入优化模块，获得兼容Transformers的接口、符合OpenAI和Ollama的RESTfulAPI，甚至简化的ChatGPT风格的WebUI。KTransformers的性能优化基
PHP 网络编程介绍
来恩1003
PHP 从入门到精通 php 网络 开发语言
PHP学习资料PHP学习资料PHP学习资料在当今数字化时代，网络编程是开发各类应用必不可少的技能。PHP作为一门广泛应用于Web开发的编程语言，同样具备强大的网络编程能力。接下来，我们将深入探讨PHP中网络连接的建立、Socket编程、HTTP请求与响应等网络相关的操作。一、网络连接的建立在PHP中建立网络连接，主要是通过使用内置的函数来实现与远程服务器的通信。最常见的是使用fsockopen函数
PHP 安全与加密：守护 Web 应用的基石
来恩1003
PHP 从入门到精通 php 安全 前端
PHP学习资料PHP学习资料PHP学习资料在当今数字化时代，Web应用无处不在，而PHP作为一种广泛使用的服务器端脚本语言，承载着无数网站和应用的核心逻辑。然而，随着网络攻击手段日益复杂，PHP应用面临着诸多安全威胁，如SQL注入、XSS攻击等，同时，数据的加密保护也至关重要。本文将深入探讨PHP中的安全问题及加密算法的应用，帮助开发者构建更安全可靠的Web应用。一、PHP安全之殇——SQL注入攻
uni-app使用websocket
外派叙利亚
uni-app websocket 网络协议
点击发送请求离开页面exportdefault{onLoad(){//进入这个页面的时候创建websocket连接【整个页面随时使用】this.connectSocketInit();},data(){return{socketTask:null,//确保websocket是打开状态is_open_socket:false}},//关闭websocket【必须在实例销毁之前关闭,否则会是under
前后端分离跨域问题解决方案
慕容屠苏
大前端爬坑之路 前后端分离 跨域问题解决方案
前后端分离跨域问题解决方案现在的web开发中经常会用到前后分离技术，前后端分解技术，都会涉及到跨域问题。解决跨域问题的方法：第一种解决方案jsonp(不推荐使用)这种方案其实我是不赞同的，第一，在编码上jsonp会单独因为回调的关系，在传入传出还有定义回调函数上都会有编码的”不整洁”.简单阐述jsonp能够跨域是因为javascript的script标签，通过服务器返回script标签的code，
Python从0到100（三十九）：数据提取之正则（文末免费送书）
是Dream呀
python mysql 开发语言
前言：零基础学Python：Python从0到100最新最全教程。想做这件事情很久了，这次我更新了自己所写过的所有博客，汇集成了Python从0到100，共一百节课，帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识，成为学习学习和学业的先行者！欢迎大家订阅专栏：零基础学Python：Python从0到100最新
【OpenTiny调研征集】共创技术未来，分享您的声音！
前端vue.js开源
欢迎参与2025年OpenTiny开源社区用户调研征集调研背景随着OpenTiny开源项目的不断发展，我们一直致力于为开发者提供高质量的Web前端开发解决方案。为了更好地满足用户需求，提升项目的实用性和易用性，我们决定发起一项用户调研活动，诚挚邀请您参与。调研目的了解用户需求：收集您在使用OpenTiny开源项目过程中的需求、问题和建议，以便我们更好地改进和优化。提升用户体验：通过您的反馈，我们将
cesium（vue）一些面试问题（包含Three.js）
GIS瞧葩菜
vue.js javascript cesium
1.在不同的应用场景和技术栈中，模型加载方法和格式有所不同，下面主要从Web前端三维场景（使用Three.js和cesium）使用Three.js加载模型常见模型格式及加载方法GLTF/GLB格式格式特点：GLTF（GraphicsLibraryTransmissionFormat）是一种开放的、基于JSON的三维模型传输格式，GLB是其二进制版本。它们具有文件小、加载快、支持动画、材质和骨骼等优
vue3的Element plus （一）
GIS瞧葩菜
Element plus vue elementui Element plus vue3
介绍ElementPlus是一个基于Vue3的UI组件库，它是对ElementUI组件库的升级和扩展。ElementPlus提供了一套美观、易用且高效的组件，可以用于构建现代化的Web应用程序。ElementPlus的主要特点包括：支持Vue3：ElementPlus是专为Vue3开发的，充分利用Vue3的新特性和优势。TypeScript支持：ElementPlus提供了完整的TypeScrip
nginx反向代理导致jupyter 或jupyterlab 无法输出
NEOzhuo
python nginx jupyter 服务器
代码运行能力依赖于websocket，因此需要设置nginx的反向代理server{server_nameDOMAINIP_ADDRESS;#服务器域名和IP地址listen80;location/{proxy_passhttp://127.0.0.1:JUPYTER_PORT/;#JUPYTER_PORT为Jupyter运行端口proxy_set_headerX-Real-IP$remote_a
Centos7 搭建 Jupyter + Nginx 服务
某龙兄
python nginx linux centos
JupyterNotebook（此前被称为IPythonnotebook）是一个交互式笔记本，支持运行40多种编程语言。JupyterNotebook的本质是一个Web应用程序，便于创建和共享文学化程序文档，支持实时代码，数学方程，可视化和markdown。用途包括：数据清理和转换，数值模拟，统计建模，机器学习等等。本文讲述如何搭建Jupyter+Nginx服务,仅供学习与交流，请勿用于商业用途一
Android. WebView出现net::ERR_UNKNOWN_URL_SCHEME错误
沙漠蓝色披头
小技巧 webview android
1.仔细观察图中url可以发现这是一个自定协议的url，究其原因，就是拦截webview中的url,如果url是自定义协议(如:tel,weixin,alipays等等)开头的,就url转换成原生调用(intent跳转),因为webview只能识别http,https这样的协议.webview其实就相当于pc端的浏览器,遇到http/https开头的url时会向host发起一个请求,而遇到自定义的
在线预览 Word 文档
你不讲 wood
word 开发语言 前端 vue.js javascript node.js docx-preview
引言随着互联网技术的发展，Web应用越来越复杂，用户对在线办公的需求也日益增加。在许多业务场景中，能够直接在浏览器中预览Word文档是一个非常实用的功能。这不仅可以提高用户体验，还能减少用户操作步骤，提升效率。实现原理1.后端服务假设后端服务已经提供了两个API接口：getFilesList:获取文件列表。previewFile:获取指定文件的内容。constexpress=require('ex
语聊房软件开发流程与基础功能
ALLSectorSorft
java html5 javascript
开发一款语聊房软件需要系统的规划和多领域技术整合。以下是关键流程、基础功能及示例代码：---一、开发流程1.需求分析-明确目标用户（社交/游戏/教育）-竞品分析（Clubhouse/Discord/狼人杀）-核心功能优先级排序2.技术选型-实时语音：声网Agora（推荐）/腾讯云TRTC/WebRTC-即时通讯：Socket.io/Sendbird/Firebase-后端框架：Node.js/Sp
Vue.js 基础与实战指南：从入门到跑路
王嘉俊705
前端 javascript visual studio code html 前端 vue.js
一、Vue的两种使用方式扩展核心包开发直接通过引入Vue.js，适用于简单页面或局部功能增强。优点：轻量，无需构建工具。缺点：难以管理复杂项目，缺少工程化支持。工程化开发使用VueCLI、Vite等工具创建项目，结合Webpack/Vite构建。支持单文件组件（.vue文件），结构清晰（`,,）。插件生态丰富（如VueRouter、Vuex、Pinia）。二、Vue实例的深入理解核心配置项 new
关于个人财务系统的javaweb小项目
竹木有心
tomcat java
个人财务管理系统-项目计划书1.项目背景与目的随着现代社会的进步与人们收入水平的提高，个人财务的管理变得越来越重要。如何有效地记录、管理、分析个人的收支状况，成为了很多人关注的焦点。本项目旨在设计并实现一个基于JavaWeb技术的个人财务管理系统，通过该系统，用户可以轻松管理自己的收入与支出，查看财务统计分析，帮助用户进行财务规划与控制。本系统适用于大三学生的课程设计要求，涉及JavaWeb技术、
Docker Compose部署大语言模型LLaMa3+可视化UI界面Open WebUI
m0_74824877
docker 语言模型 ui
一、介绍Ollama：部署+运行大语言模型的软件LLaMa3：史上最强开源AI大模型—Meta公司新发布的大语言模型OpenWebUI：AI用户界面，可通过浏览器访问二、Docker部署docker-compose.yml文件如下：version:'3'services:ollama:container_name:bruce-ollamaimage:ollama/ollamavolumes:-./
webpack性能优化策略
雅望天堂i
webpack 前端 node.js
1.代码分割（CodeSplitting）通过代码分割，可以将代码拆分成多个较小的文件，实现按需加载，减少首屏加载时间。使用SplitChunksPlugin将公共代码提取到单独的chunk中，避免重复打包。config.optimization.splitChunks({chunks:'all',cacheGroups:{//第三方组件libs:{name:'chunk-libs',test:/
ECMAScript与JavaScript：探索两者之间的联系与区别
程序媛小果
前端 ecmascript javascript 前端
在Web开发的早期，JavaScript成为了客户端脚本语言的代名词，而随着时间的推移，JavaScript已经发展成为一个功能强大的语言，它的影响力远远超出了浏览器的范畴。在这场语言演进的过程中，ECMAScript扮演了一个关键角色。本文将深入探讨ECMAScript与JavaScript之间的关系，以及它们之间的主要区别。1.什么是ECMAScript？ECMAScript是由欧洲计算机制造
CSS 滚动条样式修改（详细）
mr_cmx
css css3 html
1、滚动条整体部分使用::-webkit-scrollbar示例：.container::-webkit-scrollbar{width:20px;//修改滚动条宽度}2、滚动条中的滑块使用::-webkit-scrollbar-thumb示例：.container::-webkit-scrollbar-thumb{border-radius:8px;box-shadow:inset005pxrg
知识图谱构建概念、工具、实例调研
熟悉的黑曼巴
知识图谱 人工智能
一、知识图谱的概念知识图谱（Knowledgegraph）知识图谱是一种用图模型来描述知识和建模世界万物之间的关联关系的技术方法。知识图谱由节点和边组成。节点可以是实体，如一个人、一本书等，或是抽象的概念，如人工智能、知识图谱等。边可以是实体的属性，如姓名、书名或是实体之间的关系，如朋友、配偶。知识图谱的早期理念来自SemanticWeb（语义网络），其最初理想是把基于文本链接的万维网落转化为基于
【系统架构设计师】系统性能之性能指标
王佑辉
系统架构设计师 系统架构
目录1.说明2.计算机的性能指标3.路由器的性能指标4.交换机的性能指标5.网络的性能指标6.操作系统的性能指标7.数据库管理系统的性能指标8.Web服务器的性能指标9.例题9.1例题11.说明1.性能指标是软、硬件的性能指标的集成。2.在硬件中，包括计算机、各种通信交换设备、各类网络设备等；在软件中，包括操作系统、数据库、网络协议以及应用程序等。2.计算机的性能指标1.评价计算机的主要性能指标有
[附源码]计算机毕业设计基于SpringBoot的小说阅读系统
计算机毕设程序设计
spring boot java 后端
项目运行环境配置：Jdk1.8+Tomcat7.0+Mysql+HBuilderX（Webstorm也行）+Eclispe（IntelliJIDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM+mybatis+Maven+Vue等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也可以。2.ID
认识Spring IoC容器和组件
Mr_Zerone
SpringFramework spring java 后端
1.传统Web项目开发流程传统Web项目在实现业务流程时，往往需要将Controller/Service/Dao，这三层先分别创建一个全局属性,上图中用BookController/BookService/BookDao来具体说明。当浏览器发送过来请求时，我们先调用全局属性中的BookCotroller对象bookController，在bookController中引用全局属性中的BookSer
JavaScript的魔法世界：巧妙之处与实战技巧
skyksksksksks
综合个人杂记 javascript 开发语言 html5 css 前端
一、从浏览器玩具到全栈利器的蜕变之路JavaScript诞生于1995年，原本只是网景公司为浏览器设计的"小脚本"。谁能想到这个曾被戏称为"玩具语言"的家伙，如今已蜕变成支撑现代Web开发的擎天柱？就像一只破茧成蝶的幼虫，JavaScript经历了ECMAScript标准的持续进化，在Node.js的加持下突破了浏览器的桎梏，实现了从客户端到服务端的华丽转身。V8引擎的涡轮增压让它跑得比猎豹还快，
数据采集高并发的架构应用
3golden
.net
问题的出发点：
最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。
&n
不停止 MySQL 服务增加从库的两种方式
brotherlamp
linux linux视频 linux资料 linux教程 linux自学
现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。
一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku
Quartz——SimpleTrigger触发器
eksliang
SimpleTrigger TriggerUtils quartz
转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述
SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行；
二.SimpleTrigger的构造函数
SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称；
Simpl
Informatica应用（1）
18289753290
sql workflow lookup 组件 Informatica
1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。
2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置 （比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
python 获取图片验证码中文字
酷的飞上天空
python
根据现成的开源项目 http://code.google.com/p/pytesser/改写
在window上用easy_install安装不上 看了下源码发现代码很少 于是就想自己改写一下
添加支持网络图片的直接解析
#coding:utf-8
#import sys
#reload(sys)
#sys.s
AJAX
永夜-极光
Ajax
1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担
2.代码结构:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
创业OR读研
随便小屋
创业
现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。
研一的生活刚刚过去两个月，我们学校主要的是
需求做得好与坏直接关系着程序员生活质量
aijuans
IT 生活
这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。
系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完
如何定义和区分高级软件开发工程师
aoyouzi
在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。
初
Servlet的请求与响应
百合不是茶
servlet get提交 java处理post提交
Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介
1,Http的请求方式(get ,post);
客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法, http的get方式 servlet就是都doGet(
web.xml配置详解之listener
bijian1013
java web.xml listener
一.定义
<listener>
<listen-class>com.myapp.MyListener</listen-class>
</listener>
二.作用 该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
Web页面性能优化（yahoo技术）
Bill_chen
JavaScript Ajax Web css Yahoo
1.尽可能的减少HTTP请求数 content
2.使用CDN server
3.添加Expires头(或者 Cache-control) server
4.Gzip 组件 server
5.把CSS样式放在页面的上方。 css
6.将脚本放在底部(包括内联的) javascript
7.避免在CSS中使用Expressions css
8.将javascript和css独立成外部文
【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序
bit1129
mongodb
游标
游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括
声明
打开
循环抓去一定数目的文档直到结果集中的所有文档已经抓取完
关闭游标
游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize
ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
白糖_
ORA-12514
今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案：
①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息：
# listener.ora Network Configuration File: D:\database\Oracle\net
Eclipse 问题 A resource exists with a different case
bozch
eclipse
在使用Eclipse进行开发的时候，出现了如下的问题：
Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
编程之美-小飞的电梯调度算法
bylijinnan
编程之美
public class AptElevator {
/**
* 编程之美 小飞 电梯调度算法
* 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。
* 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。
* 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。
* 问：电梯停在哪
SQL注入相关概念
chenbowen00
sql Web 安全
SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。
首先让我们了解什么时候可能发生SQ
[光与电]光子信号战防御原理
comsci
原理
无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?
我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下
根据光
oracle 11g新特性:Pending Statistics
daizj
oracle dbms_stats
oracle 11g新特性:Pending Statistics 转
从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。
在 11g 之前的版本中，D
快速理解RequireJs
dengkane
jquery requirejs
RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能：
声明不同js文件之间的依赖
可以按需、并行、延时载入js库
可以让我们的代码以模块化的方式组织
初看起来并不复杂。 在html中引入requirejs
在HTML中，添加这样的 <script> 标签：
<script src="/path/to
C语言学习四流程控制if条件选择、for循环和强制类型转换
dcj3sjt126com
c
# include <stdio.h>
int main(void)
{
int i, j;
scanf("%d %d", &i, &j);
if (i > j)
printf("i大于j\n");
else
printf("i小于j\n");
retu
dictionary的使用要注意
dcj3sjt126com
IO
NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:
user.user_id , @"id",
user.username , @"username",
Android 中的资源访问(Resource)
finally_m
xml android String drawable color
简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。
在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生
Spring使用Cache、整合Ehcache
234390216
spring cache ehcache @Cacheable
Spring使用Cache
从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的
当druid遇上oracle blob(clob)
jackyrong
oracle
http://blog.csdn.net/renfufei/article/details/44887371
众所周知，Oracle有很多坑, 所以才有了去IOE。
在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】
用Druid连接池，通过JDBC往Oracle数据库的
easyui datagrid pagination获得分页页码、总页数等信息
ldzyz007
var grid = $('#datagrid');
var options = grid.datagrid('getPager').data("pagination").options;
var curr = options.pageNumber;
var total = options.total;
var max =
浅析awk里的数组
nigelzeng
二维数组 array 数组 awk
awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。
有这么一组数据：
abcd,91#31#2012-12-31 11:24:00
case_a,136#19#2012-12-31 11:24:00
case_a,136#23#2012-12-31 1
搭建 CentOS 6 服务器(6) - TigerVNC
rensanning
centos
安装GNOME桌面环境
# yum groupinstall "X Window System" "Desktop"
安装TigerVNC
# yum -y install tigervnc-server tigervnc
启动VNC服务
# /etc/init.d/vncserver restart
# vncser
Spring 数据库连接整理
tomcat_oracle
spring bean jdbc
1、数据库连接jdbc.properties配置详解 jdbc.url=jdbc:hsqldb:hsql://localhost/xdb jdbc.username=sa jdbc.password= jdbc.driver=不同的数据库厂商驱动，此处不一一列举 接下来，详细配置代码如下：
Spring连接池
Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常
xp9802
用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错
异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常
导入包 jaxen-1.1-beta-6.jar 解决;
&nb
