jayLog

bootstrap5.x基础语法(一)

内容主要包括以下三个大块

布局
页面内容
表单

前置准备:到官网或者中文网下载好bootstrap5.x的包。其次是页面的基本文件引入，css文件在头部引入，js文件在底部引入确保能读取到节点。如下：

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!title>
  head>
  <body>
    <h1>Hello, world!h1>
    
    <script src="dist/js/bootstrap.bundle.min.js" >script>

    
    
  body>
html>

一、布局

断点（熟记）

断点即临界点。例如说手机端屏幕分辨率最大为576px，那么576px就是一个断点，一旦超过了576px，那么就判定设备不是手机。

响应式不是逐渐变化的，而是达到临界点瞬间变化的。倘若我们某个单元格占12个位置，设置了临界值sm(屏幕大小>=576px)时单元格6个位置。那么在576px之前，单元格默认占12个位置，一旦超过了576px，单元格就变为占用6个格子

bootstrap中定义了如下几个临界点：

断点	中缀	范围(px)
Small（小，平板或者老笔记本）	sm	>=576
Medium（中，窄屏电脑）	md	>=768
Large（大，宽屏电脑）	lg	>=992
Extra large（超大，宽屏电脑）	xl	>=1200
Extra extra large（特大，高清电脑或广告设备）	xxl	>=1400

容器（了解一下）

容器是bootstrap最基本的布局元素。它的容器类型有以下三种：

container, 默认容器，其宽度为在每个响应断点处之前，都是前一个断点的最大宽度。
container-fluid, 流式容器，始终占浏览器宽度的100%
container-{breakpoint}, 断点容器，在到达该断点前，其宽度始终占浏览器宽度的100%，在到达断电后，其宽度始终为断点最大宽度。其中断点值为以下几个值

{breakpoint}: 断点中缀。可用值： sm、md、lg、xl、xxl

栅格系统（重点来了）

首先，栅格系统需要包裹在容器内！

栅格系统把容器横切为了一个或个行

然后！每个行被划分为了12个位置，根据需要对单元格进行划分，比如说一个单元格要占3个位置，那么就是:

，当然，我们也可以做响应式，小屏幕设备(sm)占6个位置,中设备上占3个位置那么:

具体上个代码容易理解一点

...
<style type="text/css">
div{
    border:1px solid red;
}        
    style>

<div class="container">
    <div class="row">
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
        <div class="col-1">1div>
    div>
    <div class="row">
        <div class="col-4">4div>
        <div class="col-4">4div>
          
        <div class="col">4div>
    div>

    <div class="row">
        <div class="col-4">
            <div class="row">
                <div class="col-1">1div>
                <div class="col-2">2div>
                <div class="col-9">9div>
             div>
        div>
    div>
div>
...

效果如下，（栅格布局的高度是有内容撑起的）

间隙

这部分我没搞懂，待续~~

布局通用类

元素显示方式

语法： d-{value},d-{break-point}-{value}

value可用值： none``inline``inline-block``block``grid``table``table-cell``table-row``flex``inline-flex

例子：

// 默认隐藏，到中屏幕设备时显示
<div class="d-none d-md-block">div>

边距

语法设定： {m|p}{r|l|b|t|x|y|}-{size} (例如：mr-4、m-4、mt-4…)

翻译一下：m：margin，p：padding，r：right ，l：left，t:top，b:bottom，x：(r+l)，y：（t+b）

size范围设定：

值	范围
0	0
1	$spacer * .25
2	$spacer * .5
3	$spacer
4	$spacer * .1.5
5	$spacer * 3

例子：

// 左右外边距为3
<div class="mx-3">div>
// 四边的外边距为3
<div class="m-3">div>

显示和隐藏

带有.invisible类别的元素，属性将都在视觉上与屏幕阅读器的用户中隐藏。只是隐藏，还是会占着位置

语法： invisible|visible

例子：

// 隐藏
<div class="invisible">...div>
// 隐藏反的反操作
<div class="visible">...div>

堆叠层级（z-index）（这部分要求我们熟知，但不鼓励定制这些数值）

我们需要在我们的分层组件（工具提示、弹出框、导航栏、下拉菜单、模式）中使用这些标准集，以便我们可以在行为上保持合理一致。bootstra给这些组件定义了不同的层级：

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

二、页面内容

reboot（了解即可）

当你引入bootstrap.css后发现页面发生了写微妙的变化， bootstrap为页面的将页面的基础元素做了一些优化，使得它更加更能为我们接受。

它重写了包括但不限于p、div、ul、li、input、form、section的标签样式

文字排版（Typography）重要

标题

h1-h6 例如：

`最大标题`

。除此之外，如果你想突出标题，可以考虑用display heading以获得更大、更细、稍具有风格化的标题样式

语法： display-{size}

size范围： 1-6 （数值越大字体越小）

例如：

display head

前导主题

使用.lead让一个段落脱颖而出。

<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
p>

内联文本元素【这里不做多演示】

.mark 高亮
.small 小字体
.text-decoration-underline下划线
.text-decoration-line-through 删除线

来源引用【例如引用了鲁迅先生的话】

语法：用

来包裹引用和作者

例子：

<figure>
<blockquote class="blockquote">
我没有说过这话，不过确实有理
blockquote>
<figcaption class="blockquote-footer">
鲁迅
figcaption>
figure>

效果：

列表

a. 去除列表项符号

语法： .list-unstyled

例子：

b. 去除ul的列表项符号，并添加少许margin

例子：

<ul class="list-inline">
    <li class="list-inline-item">li>
    <li class="list-inline-item">li>
    <li class="list-inline-item">li>
ul>

图片

通过 Bootstrap 所提供的.img-fluid 类让图片支持响应式布局。其原理是将max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放

例子：

<img src="..." class="img-fluid" alt="...">`

除了它提供的 border-radius utilities 外，我们还可以使用.img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。

<img src="..." class="img-thumbnail" alt="...">

表格(熟练)

由于

横跨其他第三方套件广泛的使用，像是calendars和date pickers，因此可选择使用Bootstrap的表格。在任何

加上基本类别 .table，接着使用我们的可选修饰类别或是自定义样式进行扩展。

给表格定义颜色

语法： table-{style}

style：可用值：

primary、secondary、success、danger、warning、info、light、dark

例子：

表格的条纹（一行深色一行浅色)，可与style搭配食用

语法： table-striped

例子：

表格行悬停效果（hover）

语法: table-hover

例子：

通过添加.table-active高亮显示表行或单元格

例子：

<table class="table">
<thead>
...
thead>
<tbody>
<tr class="table-active">
...
tr>
<tr>
...
tr>
<tr>
<th scope="row">3th>
<td colspan="2" class="table-active">Larry the Birdtd>
<td>@twittertd>
tr>
tbody>
table>

三、表单（重要）

bootstrap在表单上为我们分了以下几大类：控件类、下拉列表、范围选择。功能上：有输入组合、浮动标签、表单验证

控件类(包括：文本框、文本域、数字、文件、颜色、邮箱、手机号)

a. 基础类： form-control

b. 设置大小(大小是额外的类)：form-control-{size}

size取值：lg、sm、{默认，即不加}

例如：

其他属性：禁用和只读文本

禁用使用原生的disabled属性、只读使用readonly只读输入看起来更轻（就像禁用的输入一样）。只读文本的话，除了加上只读属性还要添加form-control-plaintext类名

例子：

<div class="mb-3">

<label for="exampleFormControlInput1" class="form-label">Email addresslabel>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
div>
<div class="mb-3">

    <input type="email" class="form-control-plaintext"  readonly/>
div>
<div class="mb-3">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">textarea>
div>

c. 文件：也是控件类

d. 颜色：

颜色和大小一样，是属于额外的类。颜色选择器type要改为color

基础类：form-control-color

例如：

<label for="exampleColorInput" class="form-label">Color pickerlabel>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

下拉列表

基础类： form-select

例子：

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected>Open this select menuoption>
    <option value="1">Oneoption>
    <option value="2">Twooption>
    <option value="3">Threeoption>
select>

-设置大小

语法： form-select-{size code}。取值: sm、lg(设置大小是额外的类)

例子：如上例子

-禁用

标签加入disabled属性即可

单选和多选

基类： form-check

先看案例：

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
    <label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
label>
div>

是否有点疑惑？前面的控件直接加类名即可，这里为什么需要多一层div呢？答案是：因为引入了开关组件（switch）【本质上还是多选\单选】。如下

<div class="form-check form-switch">
     <input class="form-check-input" name="ckb[]" type="checkbox" value="" id="defaultCheck1">
     <label class="form-check-label" for="defaultCheck1">
Default checkbox
label>
 <div class="form-check form-switch">
     <input class="form-check-input"  name="ckb[]" type="checkbox" value="" id="defaultCheck1">
     <label class="form-check-label" for="defaultCheck1">
Checked switch
label>

效果大概是这样的

-内联，假如说你希望单选个多选再同一行上(bootstrap默认改为了块级元素)，那么：

通过将.form-check-inline添加到.form-check，将复选框或单选框在同一水平行上分组显示。

例如：

<div class="form-check form-check-inline">
     <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1label>
div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2label>
div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)label>
div>

总结就是：需要一个外层的form-check，input还需要添加form-check-input类名，关联文本需要添加form-check-label类名

范围选择（Range）

语法：使用创建自定义控件。需要添加类名form-range

禁用：一样是添加添加disabled属性
最大值、最小值和间距：max设置最大值，min设置最小值，step设置间距

需要说明的是间距,间距就是每次滑动选择器的最小增量或减量。看一个完整案例：

<label for="customRange3" class="form-label">Example rangelabel>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

效果如下：

输入组合

输入组合是把一个或活个表单元素组合到一块。每个表单组件都是有四边圆角的，组合后会消除掉除了多余圆角。

效果如下,示例中每行都是一个组合：

定义一个组合的语法类名为：input-group

组合内直接放入表单元素即可。如果需要添加组合文本，需要添加组合文本类input-group-text，上面示例中，灰色背景的字体即组合文本。

定义输入组合的大小，定义大小是额外的类名

语法：input-group-{size}

size取值： sm、lg

例子：

看一个案例来消化一下:

<div class="input-group mb-3">
<span class="input-group-text">$span>
<span class="input-group-text">0.00span>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
div>

<div class="input-group">
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<span class="input-group-text">$span>
<span class="input-group-text">0.00span>
div>

效果如下:

浮动标签

在.form-floating 中包装一对和元素，以启用带有Bootstrap文本表单字段的浮动标签。必须放在第一位！！！

可使用的地方：文本域、下拉框、布局中

例子：

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email addresslabel>
div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Passwordlabel>
div>

表单的验证

验证类：

用于input提示：is_valid(正确提示)、is_invalid(错误提示)
用于输入框下边的提示框的： invalid-feedback、valid-feedback。注意：必须跟在input之后

  <form class="row g-3"> 
   <div class="col-md-4"> 
    <label for="validationServer01" class="form-label">First namelabel> 
    <input type="text" class="form-control is-invalid" id="validationServer01" value="Mark" required="" /> 
    <div class="valid-feedback">
      Looks good! 
    div> 
    <div class="invalid-feedback">
      invalid! 
    div> 
   div> 
  form>

关于验证类，需要说明一下，文档里面距离挺多看的挺复杂的。bootstrap为我们提供的是验证的静态样式，动态的样式还需要添加一点js。

input提示类和文本提示类两者的同步关联是通过input的验证类来实现的。

流程是：判断input中的验证类是is-invalid还是is-valid。假如说使用了is-valid，input边框变为绿色，还会追加成功的icon，在输入框之后有文本提示类valid-feedback,的话，会显示出来；另一种情况，is-invalid，input边框变为警告色，追加警告icon，在输入框之后有文本提示类invalid-feedback的话，会将该该提示显示出来，然后隐藏掉valid-feedback

end：第一部分结束，后续还有第二部分：组件和统用类

你可能感兴趣的:(蓝桥web,bootstrap,前端,css)

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
SpringMVC执行流程（原理），通俗易懂国服冰 SpringMVC spring mvc
SpringMVC执行流程（原理），通俗易懂一、图解SpringMVC流程二、进一步理解Springmvc的执行流程1、导入依赖2、建立展示的视图3、web.xml4、spring配置文件springmvc-servlet5、Controller6、tomcat配置7、访问的url8、视图页面一、图解SpringMVC流程图为SpringMVC的一个较完整的流程图，实线表示SpringMVC框架提
包含日志获取webshell 陈望_ning
日志文件关闭：Apache目录下的httpd.conf文件#ErrorLog"logs/error.log"#CustomLog"logs/access.log"common加#号为注释不产生日志文件如果去掉#将会在Apache/logs/目录下产生日志文件linux:access_logerror_logwindows:access.logerror.logaccess_log每一行记录了一次网
js操作样式郝加升
DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge
Selenium 特殊控件操作与 ActionChains 实践详解小馋喵知识杂货铺 selenium 测试工具
1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
selenium特殊场景处理 Monica_ll Selenium selenium chrome python
文章目录前言一、多窗口处理二、浏览器弹窗处理包含alert、confirm、prompt三、鼠标和键盘事件处理前言在使用selenium操作浏览器的过程中可能需要借助键盘和鼠标功能完成一些操作，或者操作弹窗处理，本文主要是整理自己工作过程中使用过的一些方法一、多窗口处理在实际测试过程中经常会有通过点击或者连接打开新的窗口，这种情况下就需要切换webDriver到对应浏览器对象才能操作新窗口的元素。
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
基于Python的AI健康助手：开发与部署全攻略 AI算力网络与通信 AI算力网络与通信原理 AI人工智能大数据架构 python 人工智能开发语言 ai
基于Python的AI健康助手：开发与部署全攻略关键词：Python、AI健康助手、机器学习、自然语言处理、Flask、部署、健康管理摘要：本文将详细介绍如何使用Python开发一个AI健康助手，从需求分析、技术选型到核心功能实现，再到最终部署上线的完整过程。我们将使用自然语言处理技术理解用户健康咨询，通过机器学习模型提供个性化建议，并展示如何用Flask框架构建Web应用接口。文章包含大量实际代
vue element 封装表单影子信息 vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
Jupyter Notebook：数据科学的“瑞士军刀” a小胡哦机器学习基础人工智能机器学习
在数据科学的世界里，JupyterNotebook是一个不可或缺的工具，它就像是数据科学家手中的“瑞士军刀”，功能强大且灵活多变。今天，就让我们一起深入了解这个神奇的工具。一、JupyterNotebook是什么？JupyterNotebook是一个开源的Web应用程序，它允许你创建和共享包含实时代码、方程、可视化和解释性文本的文档。它支持多种编程语言，其中Python是最常用的语言之一。Jupy
selenium 特殊场景处理
文章目录前言一、windows的弹窗二、内嵌网页frame三、页签切换四、截图五、弹窗六、JS执行总结前言selenium处理web操作师，有很多特殊的情况需要处理，例如弹窗、内嵌网页，页签切换，js执行等，下面介绍一些可能会遇到的特殊场景一、windows的弹窗importwin32com.client'''创建了一个WScript.ShellCOM(ComponentObjectModel)对
Django学习笔记（一）
学习视频为：pythondjangoweb框架开发入门全套视频教程一、安装pipinstalldjango==****检查是否安装成功django.get_version()二、django新建项目操作1、新建一个项目django-adminstartprojectproject_name2、新建APPcdproject_namedjango-adminstartappApp注：一个project
新手如何通过github pages静态网站托管搭建个人网站和项目站点 vvandre Web技术 github
一、githubpages静态网站托管介绍githubpages它是一个免费快捷的静态网站托管服务。对比传统建站，它有哪些优点呢？在传统方式中，首先要租用服务器，服务器上需要运行外部程序，还需要再购买域名，要配置SSL证书，最后还要配置DNS，将域名解析到服务器。这一套繁琐操作，基本上就把小白劝退了。graphTDA[租用服务器]-->B[部署Web应用(运行外部程序，如Nginx)]B-->C[
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
使用Python和Gradio构建实时数据可视化工具 PythonAI编程架构实战家信息可视化 python 开发语言 ai
使用Python和Gradio构建实时数据可视化工具关键词：Python、Gradio、数据可视化、实时数据、Web应用、交互式界面、数据科学摘要：本文将详细介绍如何使用Python和Gradio框架构建一个实时数据可视化工具。我们将从基础概念开始，逐步深入到核心算法实现，包括数据处理、可视化技术以及Gradio的交互式界面设计。通过实际项目案例，读者将学习如何创建一个功能完整、响应迅速的实时数据
Python Gradio：实现交互式图像编辑 PythonAI编程架构实战家 Python编程之道 python 开发语言 ai
PythonGradio：实现交互式图像编辑关键词：Python,Gradio,交互式图像编辑,计算机视觉,深度学习,图像处理,Web应用摘要：本文将深入探讨如何使用Python的Gradio库构建交互式图像编辑应用。我们将从基础概念开始，逐步介绍Gradio的核心功能，并通过实际代码示例展示如何实现各种图像处理功能。文章将涵盖图像滤镜应用、对象检测、风格迁移等高级功能，同时提供完整的项目实战案例
登录功能详解开往1982 java 登录 spring boot
本项目由maven项目改造springboot项目导入依赖org.springframework.bootspring-boot-starter-parent2.7.6org.springframework.bootspring-boot-starter-web2.7.6org.springframework.bootspring-boot-starter-test2.7.5org.springf
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）笙囧同学 java 前端状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
从零到一：基于差分隐私决策树的客户购买预测系统实战开发笙囧同学决策树算法机器学习
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯文章导航快速导航前言-项目背景与价值项目概览-系统架构与功能技术深度解析-核心算法原理️系统实现详解-工程实践细节性能评估与分析-实验结果分析Web系统开发-前后端开发部署与运维-DevOps实践完整复现指南-手把手教程️实践案例与故障排除-问
从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能孤寒者 Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
webSocket双向通信 @泽栖 websocket 网络协议网络
webSocket基础使用webSocket小说明：作用浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。WebSocket与HTTP最大的区别HTTP通信是单向的，基于请求响应模式WebSocket支持双向通信。实现长连接适用场景：消息通信，视频弹幕，实时信息，等双向通信的使用需求使用：引入maven依赖org.springfram
java web开发实战经典当当_java web项目实战开发飞翔的酋长大人 java web开发实战经典当当
本书以问题为导向，涵盖JavaWeb开发技术中所有的核心知识点；实战开发案例丰富，所有的知识案例都来源于企业真实项目，实战性和可操作性强；代码注释详细准确，结构简洁清晰；语言简明易懂，由浅入深地带你学会JavaWeb技术及应用。本书面向广大Java开发工程师和普通高校学生，可作为高等学校计算机及其相关专业Web编程技术课程教材，也可供从事JavaWeb应用开发的技术人员学习参考。¥80.00定价：
构建高性能Web应用：深入Spring WebFlux 李多田
本文还有配套的精品资源，点击获取简介：SpringWebFlux是Spring框架的一部分，支持反应式编程模型，适合高并发和低延迟Web应用。它提供了非阻塞I/O和事件驱动模型，优化了多核处理器资源的使用。SpringWebFlux拥有两种编程模式，核心组件包括WebHandler,RouterFunction,WebFilter,和WebSession。它与高性能服务器集成，并提供反应式HTTP
为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25：错误码秋千码途架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
使用Java和Spring WebFlux构建响应式微服务微赚淘客系统开发者@聚娃科技 java spring 开发语言
使用Java和SpringWebFlux构建响应式微服务大家好，我是微赚淘客系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！今天我们将探讨如何使用Java和SpringWebFlux构建响应式微服务。SpringWebFlux是Spring框架的一部分，专为创建响应式应用程序而设计。在这篇文章中，我们将介绍如何使用SpringWebFlux构建响应式微服务，包括基本概念、代码示例以及如何
【Spring WebFlux】为什么 Spring 要拥抱响应式会飞的架狗师 Spring WebFlux spring java 后端
在现代分布式系统中，响应式系统已成为应对高并发、低延迟需求的核心方案。但构建响应式系统并非易事——它需要框架级别的支持来解决异步处理、资源调度、背压控制等底层问题。作为Java生态中最具影响力的框架，Spring对响应式的支持并非偶然，而是技术演进的必然选择。本文将从响应式系统的构建挑战出发，剖析Spring拥抱响应式的底层逻辑。一、响应式系统的构建困境：现有方案的局限性响应式系统的核心诉求是在有
矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
JDK timer antlove java jdk schedule code timer
1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm 应用服务器
堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx
JDBC连接数据库 Array_06 jdbc
package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
Unsupported major.minor version 51.0（jdk版本错误） oloz java
java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
用多个线程处理1个List集合 362217990 多线程 thread list 集合
昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
JSP简单访问数据库香水浓 sql mysql jsp
学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下： [html] view plain copy <RelativeLa
查询汇总的sql baalwolf sql
select list.listname, list.createtime,listcount from dream_list as list , (select listid,count(listid) as listcount from dream_list_user group by listid order by count(
Linux du命令和df命令区别 BigBird2012 linux
1，两者区别 du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。
AngularJS中的$apply，用还是不用？ bijian1013 JavaScript AngularJS $apply
在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。但是首先，让我们把$apply转换成一种简化的形式。 scope.$apply就像一个懒惰的工人。它需要按照命
[Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理 ClientCnxn构造方法 &
【Java命令一】jmap bit1129 Java命令
jmap命令的用法： [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
Apache 服务器安全防护及实战 ronin47
此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
unity 3d实例化位置出现布置？ brotherlamp unity教程 unity unity资料 unity视频 unity自学
问：unity 3d实例化位置出现布置？答：实例化的同时就可以指定被实例化的物体的位置,即 position Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了, 如果你省略了第二个参数(
《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java 重构
import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
struts2更改struts.xml配置目录 chiangfai struts.xml
struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下： <filter> <filter-name>struts2</filter-name> <filter-class&g
redis做缓存时的一点优化 chenchao051 redis hadoop pipeline
最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
mysql导出数据不输出标题行 daizj mysql 数据导出去掉第一行去掉标题
当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName" > exportResult.txt 结果为： studentid
phpexcel导出excel表简单入门示例 dcj3sjt126com PHP Excel phpexcel
先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE); if (PHP_SAPI == 'cli') die('
爱情格言 dcj3sjt126com 格言
1) I love you not because of who you are, but because of who I am when I am with you. 　　我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
转 Activity 详解——Activity文档翻译 e200702084 android UI sqlite 配置管理网络应用
activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。当用户离开 activity 时你可以在 onPause() 进行相应的操作。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
win7安装MongoDB服务 geeksun mongodb
1. 下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads 2. 解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
数据源架构模式之行数据入口 home198979 PHP 架构行数据入口
注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。一、概念行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。二、简单实现行数据入口为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
Linux各个目录的作用及内容 pda158 linux 脚本
1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
ubuntu12.04上编译openjdk7 ol_beta HotSpot jvm jdk OpenJDK
获取源码从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
哈哈，出差这么久终于回来了，回家的感觉真好！ PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。