发表于 | 更新于

最近遇到一个小需求，就是在网页前端实现点击视频播放的同时，实现视频最大化，简单学习一下。

技术原理

网页前端实现点击视频播放的同时，实现视频最大化的技术原理如下：

  • 捕捉点击视频播放的事件，在该事件中执行视频最大化方法

技术实现

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>视频技术测试</title>
    <style>
        html, body {
            width:  100%;
            height: 100%;
            margin: 0;
            padding:0;
        }

        #max{
            margin: 5% auto;
            width: 600px;
        }
    </style>
</head>

<body>
    <div id="max">
        <video id="media" controls width="600">
            <source src="./media/cc0-videos/flower.webm" type="video/webm" />
          
            <source src="./media/cc0-videos/flower.mp4" type="video/mp4" />
          
            Download the
            <a href="./media/cc0-videos/flower.webm">WEBM</a>
            or
            <a href="./media/cc0-videos/flower.mp4">MP4</a>
            video.
          </video>
    </div>
</body>

<script>
    const video = document.querySelector("#media");

    video.addEventListener("play", (event) => {
        video.requestFullscreen();
    });
    
</script>

</html>

参考链接

  1. 深入理解HTML5视频标签：掌握全方位的播放控制和交互技巧,by 未闻花名_review.

发表于 | 更新于

最近遇到一个小需求，就是在网页前端实现图片自动轮播，简单学习一下。

技术原理

网页前端实现图片自动轮播的技巧如下：

  • 图片所在容器元素采用绝对定位，从而实现所有图片叠加到一块。
  • 通过CSS实现左右箭头
  • 通过js调整图片所在容器的透明度，从而实现图片的轮播。同时调整播放顺序按钮的背景色，从而实现顺序指示的功能。

技术实现

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>图片轮播技术测试</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #max {
            width: 900px;
            margin: 0 auto;
            margin-top: 0%;
        }

        .re {
            position: relative;
        }

        .arrow {
            height: 20px;
            width: 20px;
            border: solid #333;
            border-width: 0 4px 4px 0;
            display: inline-block;
            padding: 3px;
        }

        .left {
            transform: rotate(135deg);
            cursor: pointer;
            margin-top: 240px;
            margin-left: 20px;
            float: left;
        }

        .right {
            transform: rotate(-45deg);
            cursor: pointer;
            margin-top: 240px;
            margin-right: 10px;
            float: right;
        }

        .re ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .re ul>li {
            position: absolute;
            transition: 2s;
            opacity: 0;
        }

        .re ul>li img {
            width: 900px;
            height: 500px;
            border-radius: 1%;
            border: 5px solid #fffbd6;
        }

        #max ol {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, 75px);
            grid-template-rows: auto;
            grid-gap: 1em;
            gap: 1em;
            float: right;
            margin-top: 450px;
            list-style: none;
            top: 0;
            left: 0;
        }

        #max ol li {
            width: 20px;
            height: 20px;
            font-size: 15px;
            line-height: 20px;
            float: left;
            text-align: center;
            border-radius: 2em;
            border: 5px solid #999999;
        }
    </style>
</head>

<body>
    <div id="max">
        <div class="re" onmouseover="mouseover()" onmouseout="mouseout()">
            <ul>
                <li><img src="./pic/big_size/p1.jpg" alt=""></li>
                <li><img src="./pic/big_size/p2.jpg" alt=""></li>
                <li><img src="./pic/big_size/p3.jpg" alt=""></li>
                <li><img src="./pic/big_size/p4.jpg" alt=""></li>
                <li><img src="./pic/big_size/p5.jpg" alt=""></li>
            </ul>
            <div class="arrow left" onClick="prev()"></div>
            <div class="arrow right" onClick="next()"></div>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
</body>

<script>
    function fun(i, j) {//转换图片函数，就是把透明度改了一下
        lik[i].style.opacity = 1;
        lik[j].style.opacity = 0;
        lik[i + 5].style.backgroundColor = "#ffffff";//改一下小图标
        lik[j + 5].style.backgroundColor = "#00000000"
    }

    function auto() {//轮播循环函数
        if (++i >= 5) {
            i = 0;
            fun(0, 4);
        }
        else fun(i, i - 1);
    }

    function mouseover(){
        console.log('clear timer!');
        clearInterval(timer);
    }

    function mouseout(){
        console.log('set timer!');
        timer = setInterval(auto, transition); //调用定时器
    }

    function prev(){
        if (--i < 0) {
            i = 4;
            fun(4, 0);
        }
        else fun(i, i + 1);
    }

    function next(){
        if (++i >= 5) {
            i = 0;
            fun(0, 4);
        }
        else fun(i, i - 1);
    }

    var transition = 5000;
    var box = this.document.getElementsByClassName("re")[0];
    var lik = box.getElementsByTagName("li");

    fun(0, 1);//初始化下
    var i = 0;
    
    timer = this.setInterval(auto, transition);

    var j = 0;
    for (; j < 5; j++) {//点击小图标也可以转换图片
        lik[j + 5].ind = j;
        lik[j + 5].onclick = function () {
            fun(this.ind, i)
            i = this.ind;
        }
    }
</script>

</html>

参考链接

  1. 超简单全面的html图片自动轮播,by 学习是人类进化的阶梯.
  2. 简单的HTML网页图片轮播自动切换,by 时钟与夏蝉.
  3. 利用CSS实现上下左右箭头,by 墨初.

发表于

C语言中的位域（Bit-fields）可以用于对结构体成员进行位级别的控制和优化。在一些应用中，比如网络协议，经常会涉及对数据的某些比特位进行操作，尽管可以使用位的相关运算，但是C语言提供了位域用以支持对一个字节的某几个位进行访问，操作起来也更加方便。

位域的定义与引用

位域不同于一般的结构体成员，它以位为单位来定义成员的长度，因此在结构体中定义位域时，必须要指明位域成员所需要占用的二进制位数。

1
2
3
4
5
6
struct MsgHeader {
    int a: 5;   // 数据类型名    变量名：二进制位数
    int b: 3;
    int c: 2;
    int d：6;
};

由于位域本质上是一种特殊的结构体成员，因此一般结构体成员的引用方法同样适用于位域成员。不过，需要特别注意的是，位域成员存储是以二进制位作为单位的，而内存的最小寻址单元是字节，所以不能直接引用位域成员的地址。

位域与大小端

结构体内位域成员在大小端系统上的内存分配规则如下：

  • 无论是大端或小端模式，位域的存储都是由内存低地址向高地址分配，即从低地址字节的低位bit开始向高地址字节的高位bit分配空间；
  • 位域成员在已分配的内存区域内，按照机器定义的比特序对数据的各个bit位进行排列。即在小端模式中，位域成员的最低有效位存放在内存低bit位，最高有效位存放在内存高bit位；大端模式则相反。

参考链接

  1. C语言中位域（Bit-fields）的高级玩法，8个案例代码告诉你怎么玩,by
    晓亮Albert.
  2. C语言结构体位域及其存储,by Aspiresky.
  3. 3分钟理解C语言结构体位域（小白扫盲篇）,by 天黑黑.

发表于 | 更新于

项目采购管理过程围绕合同进行，采购管理过程所涉及的各种活动过程了合同生命周期。

合同类型

按项目范围分：

  • 项目总承包合同
  • 项目单项承包合同
  • 项目分包合同

按项目付款方式划分：

  • 总价合同
  • 成本补偿合同
  • 工料合同

合同管理过程

合同的签订管理

合同的履行管理

工程验收的基本流程通常包括预验收、初步验收和最终验收三个阶段。在预验收阶段，施工单位需要自查自纠，确保工程各项指标符合设计要求和施工规范。初步验收则是在预验收的基础上，由建设单位组织设计、监理等相关部门共同参与，对工程质量进行全面检查。最终验收是在初步验收合格后，经过一段时间的试运行，确认工程无重大问题后进行的正式验收。

有幸作为专家参加一个合同的最终验收，记录一下最终验收的具体流程：

  • 建设方项目介绍
  • 承建方和监理方介绍预验收或初步验收之后存在的问题和整改情况
  • 专家组现场查看项目建设成果
  • 专家组评审项目材料，查漏补缺（因评审时间有限，重点对评审材料的完备性和科学性进行审查）
  • 专家组出具评审意见

合同的变更管理

合同的档案管理

合同违约索赔管理

参考链接

  1. 信息系统项目管理师教程（第4版）,by douban.

发表于 | 更新于

记录学习一些人工智能领域的专业名词含义，方便理解。

人工智能

1956年夏天，计算机科学家约翰·麦卡锡（John McCarthy）首次提出”人工智能”（AI）这个概念。

人工智能指的是，通过软件和硬件，来完成通常需要人类智能才能完成的任务。它的研究对象，就是在机器上模拟人类智能。

机器学习

早期，人工智能研究分成两个阵营。

第一个阵营是规则式（rule-based）方法，又称专家系统（expert systems），指的是人类写好一系列逻辑规则，来教导计算机如何思考。

可想而知，对于复杂的、大规模的现实问题，很难写出完备的、明确的规则。所以，这种方法的进展一直很有限。

第二个阵营就是机器学习（machine learning），指的是没有预置的规则，只是把材料提供给计算机，让机器通过自我学习，自己发现规则，给出结果。

神经网络

神经网络（neural network）是机器学习的一种主要形式。

神经网络就是在机器上模拟人脑的结构，构建类似生物神经元的计算网络来处理信息。

一个计算节点就是一个神经元，大量的计算节点组成网络，进行协同计算。

神经网络需要极大的算力，以及海量的训练材料。以前，这是难以做到的，所以20世纪70年代开始，就陷入了停滞，长期没有进展。

深度学习

深度学习是神经网络的一种实现方法，在20世纪80年代由杰弗里·辛顿提出。它让神经网络研究重新复活。

深度学习是一种让多层神经元可以进行有效计算的方法，大大提高了神经网络的性能。”深度学习”这个名字，就是比喻多层神经元的自主学习过程。

多层神经元包括一个输入层和一个输出层，它们之间有很多中间层（又称隐藏层）。以前，计算机算力有限，只能支撑一两个中间层，深度学习使得我们可以构建成千上万个中间层的网络，具有极大的”深度”。

Transformer

早些年，深度学习用到的方法是卷积神经网络（CNN）和循环神经网络（RNN）。

2017年，谷歌的研究人员发明了一种新的深度学习处理方法，叫做 Transformer（转换器）。

Transformer 不同于以前的方法，不再一个个处理输入的单词，而是一次性处理整个输入，对每个词分配不同的权重。

这种方法直接导致了2022年 ChatGPT 和后来无数生成式 AI 模型的诞生，是神经网络和深度学习目前的主流方法。

由于基于 Transformer 的模型需要一次性处理整个输入，所以都有”上下文大小”这个指标，指的是一次可以处理的最大输入。

比如，GPT-4 Turbo 的上下文是 128k 个 Token，相当于一次性读取超过300页的文本。上下文越大，模型能够考虑的信息就越多，生成的回答也就越相关和连贯，相应地，所需要的算力也就越多。

Token 词元

Token，也称为标记或词元，是语言处理中的一个基本单元。它通常代表一个单词、标点符号或一个特定的符号序列。Token是文本的基本组成单元，用于表示文本中的有意义的语言元素。例如，“Hello, world!”这个句子可以被划分为多个Token：“Hello”、“,”、“world”和“!”。

深度学习成为当今显学的原因

深度学习成为当今显学的主要原因是性能优越。实际上深度学习的基础技术几十年前就已经提出来了，那为什么最近十多年深度学习才开始火热？这主要是制约深度学习的两大因素：大数据集和高性能硬件在十多年前才达到深度学习的门槛。大数据集使深度学习能够充分的进行训练，而高性能硬件如CPU和GPU使深度学习的训练速度以指数级提升。

参考链接

  1. 自然语言处理中的文本token和tokenization详解,by KAKAKA.
  2. 深度学习基础介绍,by Yunhui1998.
  3. It all started with a Perceptron,by Vincent.
  4. 科技爱好者周刊（第 330 期）：李开复梳理人工智能,by 阮一峰.

发表于

反射是指在程序运行时，动态获取类或对象的所有属性和方法。这种语言的反射机制可以提高程序设计的通用性和便利性。但遗憾的是，当前C++标准不支持反射机制。

参考链接

  1. C++ 反射机制（实例讲解）,by 那年聪聪.
  2. C++ 实现反射机制,by –Allen–.
  3. [C++11札记]： type traits简介,by 云水木石.
  4. 重大变更（一）：关于C++26的十大猜想,by 极客时间APP.
  5. C++ type traits的学习,by 燃脂二师兄.

发表于 | 更新于

三层架构是软件架构中常用的架构，它从上往下分为表示层、业务逻辑层、数据访问层。下面重点介绍 C++ 程序的数据访问层设计。

什么是 DAO

在计算机软件中，数据访问对象（data access object，DAO）是为某种类型的数据库或其他持久性机制提供一个抽象接口的对象。通过映射应用程序对持久层的调用，DAO 提供一些特定的数据操作，而无需暴露数据库细节。这种隔离支持单一功能原则。

数据访问对象模式（Data Access Object Pattern）或 DAO 模式用于把低级的数据访问 API 或操作从高级的业务服务中分离出来。

数据访问对象模式的参与者主要有:

  • 数据访问对象接口（Data Access Object Interface） - 该接口定义了在一个模型对象上要执行的标准操作。
  • 数据访问对象实体类（Data Access Object concrete class） - 该类实现了上述的接口。该类负责从数据源获取数据，数据源可以是数据库，也可以是 xml，或者是其他的存储机制。
  • 模型对象/数值对象（Model Object/Value Object, VO） - 该对象是简单的 POJO，包含了 get/set 方法来存储通过使用 DAO 类检索到的数据。

主流的 ORM 框架

C++ 中主流的 ORM 框架有以下几个：

其中，LiteSQL 和 ODB 不依赖于特定的框架，而 QxOrm 依赖于 Qt，Wt::Dbo 依赖于 Wt。由于使用QT进行开发，最终决定使用QxOrm。本想使用QDB，但是在QT上开发太麻烦。

参考链接

  1. C++实现的DAO(数据访问对象模式),by Jinkai.
  2. QxOrm使用教程(ORM for C++ 对象关系映射),by ljjyy.
  3. 浅谈C++三层架构,by eric0803.
  4. C++架构之美：设计卓越应用,by qt.video.
  5. Dao层设计,by c++天下第一.
  6. 如何设计一个简单的 C++ ORM,by bot-man-jl.
  7. C++ ORM ODB入门,by aliyun.
  8. TinyORM：一个简单的C++ ORM框架,by davidpp.
  9. C++版本 ORM 访问数据库之ODB 的Window环境编译(一),by Software_hul.
  10. Windows下Qt5.5.1中使用ODB,by 严慈善.
  11. 【一】ODB - C++ 访问数据库的利器–Hello World On Windows（Version-24）,by C++程序员Carea.
  12. error LNK2001: 无法解析的外部符号 “__declspec(dllimport) public 解决办法,by 鸡啄米的时光机.
  13. qxBlog project - blog management in C++,by QxOrm.
  14. Qt三层架构应用程序设计及开发,by wyh20171105.
  15. Qt项目架构经验总结,by cps666.
  16. Qt SQL的使用 MySQL,by 一杯清酒邀明月.

发表于

注解是JDK1.5版本开始引入的一个特性，用于对代码进行说明，可以对包、类、接口、字段、方法参数、局部变量等进行注解。它是框架学习和设计者必须掌握的基础。

注解作用

主要的作用有以下四方面：

  • 生成文档，通过代码里标识的元数据生成javadoc文档。

  • 编译检查，通过代码里标识的元数据让编译器在编译期间进行检查验证。

  • 编译时动态处理，编译时通过代码里标识的元数据动态处理，例如动态生成代码。

  • 运行时动态处理，运行时通过代码里标识的元数据动态处理，例如使用反射注入实例。

注解分类

注解的常见分类：

  • Java自带的标准注解，包括@Override、@Deprecated和@SuppressWarnings，分别用于标明重写某个方法、标明某个类或方法过时、标明要忽略的警告，用这些注解标明后编译器就会进行检查。

  • 元注解，元注解是用于定义注解的注解，包括@Retention、@Target、@Inherited、@Documented，@Retention用于标明注解被保留的阶段，@Target用于标明注解使用的范围，@Inherited用于标明注解可继承，@Documented用于标明是否生成javadoc文档。

  • 自定义注解，可以根据自己的需求定义注解，并可用元注解对自定义注解进行注解。

参考链接

  1. Java 基础 - 注解机制详解,by pdai.
  2. Java注解,by 何学长在奔跑.

发表于

IntelliJ IDEA是一种商业化销售的Java集成开发环境（Integrated Development Environment，IDE）工具软件，由JetBrains软件公司（前称为IntelliJ）开发，提供Apache 2.0开放式授权的社区版本以及专有软件的商业版本，开发者可选择其所需来下载使用。

创建Spring Boot项目的方法

请参考：

启动Spring Boot项目的方法

请参考：

参考链接

  1. IntelliJ IDEA,by wikipedia.
  2. 使用idea创建第一个springboot项目 及 如何启动springboot项目 及 如何指点端口和上下文,by wudinaniya.

发表于

项目对象模型 (POM) 是 Maven 中的基本工作单元。它是一个 XML 文件，包含有关项目的信息以及 Maven 用于构建项目的配置详细信息。它包含大多数项目的默认值。例如，构建目录为target；源目录为src/main/java；测试源目录为src/test/java；等等。执行任务或目标时，Maven 在当前目录中查找 POM。它读取 POM，获取所需的配置信息，然后执行目标。

POM.xml最简示例

1
2
3
4
5
6
7
<project>
  <modelVersion>4.0.0</modelVersion>
 
  <groupId>com.mycompany.app</groupId>
  <artifactId>my-app</artifactId>
  <version>1</version>
</project>

POM.xml结构

项目基本信息

必填项标签：

  • groupId：项目的组名，通常为反转的域名，例如：com.example
  • artifactId: 项目的唯一标识，通常为项目名称
  • version：项目版本号
  • packaging：项目打包方式，通常是 jar、war 或 pom, 如果没有指定packaging，则默认是 jar

其他重要标签：

  • modules

modules 标签用于声明当前 Maven 项目包含的模块子项目，每个子项目都是一个独立的 Maven 项目，具有自己的 pom.xml 文件，可以进行独立构建和测试。在父项目的 pom.xml 文件中，使用 标签来列出所有子项目的名称。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<project>
    <modelVersion>4.0.0</modelVersion>
	
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi</artifactId>
    <version>3.8.7</version>

    <modules>
        <module>ruoyi-admin</module>
        <module>ruoyi-framework</module>
        <module>ruoyi-system</module>
        <module>ruoyi-quartz</module>
        <module>ruoyi-generator</module>
        <module>ruoyi-common</module>
    </modules>
</project>
  • parent

parent 标签用于声明当前 Maven 项目的父项目，它可以将若干个 Maven 项目组织成一个整体，指定版本号，插件版本号等，便于管理和维护，在一个 Maven 项目中，使用标签来引用父项目。

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<project>
    <parent>
        <artifactId>ruoyi</artifactId>
        <groupId>com.ruoyi</groupId>
        <version>3.8.7</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>ruoyi-framework</artifactId>
</project>
  • properties

properties 严格来说，并不一定是项目本身的信息，而是人为设置的属性或者说宏，这个标签用来定义和管理项目中所需要的属性，其作用有以下几个：

(1) 统一管理项目中的常用属性，比如版本号、路径、插件版本等，方便统一修改和管理。

(2) 可以在配置过程中使用 ${…}占位符引用这些属性，使得配置更加灵活和便捷。

(3) 避免硬编码，提高代码的可维护性和可读性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<project>
    <properties>
        <ruoyi.version>3.8.7</ruoyi.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
        <spring-framework.version>5.3.33</spring-framework.version>
        <druid.version>1.2.20</druid.version>
        <bitwalker.version>1.21</bitwalker.version>
        <swagger.version>3.0.0</swagger.version>
        <kaptcha.version>2.3.3</kaptcha.version>
        <pagehelper.boot.version>1.4.7</pagehelper.boot.version>
        <fastjson.version>2.0.43</fastjson.version>
        <oshi.version>6.5.0</oshi.version>
        <commons.io.version>2.13.0</commons.io.version>
        <poi.version>4.1.2</poi.version>
        <velocity.version>2.3</velocity.version>
        <jwt.version>0.9.1</jwt.version>
    </properties>
</project>

项目的依赖列表

dependency

与项目的依赖列表相关的标签最外层由 dependencies 来囊括，内部包含了各种具体的依赖 dependency，该标签用于指定一个依赖项，它包含以下几个子标签：

  • groupId：指定依赖项的groupId，项目的组名
  • artifactId：指定依赖项的artifactId，项目的唯一标识符
  • version：指定依赖项的版本号。
  • scope：指定依赖项在项目中的使用范围。

其中的 一般包含以下几种范围：常用的有compile、test、provided 和 runtime。

repository

我们还能在pom文件中支持指定Maven仓库，即使用 repositories 和 repository 标签，repository 用于指定一个Maven仓库。

项目的构建配置

项目的构建配置信息，包括编译器版本、插件列表、源代码目录等。

具体请参考：

参考链接

  1. 全面详解Maven的配置文件pom.xml（含常用plugin）,by Slow菜鸟.
  2. Introduction to the POM,by apache.
  3. Maven的三种项目打包方式——pom，jar，war的区别,by Mr.史.
  4. 基于Springboot的maven父子工程pom文件打包配置,by Sherlock先生.