前端技术(七)——less 教程

2024-09-09 05:28
文章标签 技术 教程 前端 frontend less

本文主要是介绍前端技术(七)——less 教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、less简介

1. less是什么？

less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网:https://lesscss.cn/

2. less编译工具

koala 官网 http://koala-app.com/

3. less中的嵌套规则

1.基本嵌套规则

⑴ css中的标签嵌套的写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;}#wrap .inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}</style>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
</html>

在这里插入图片描述

⑵ less中嵌套标签中样式设置的写法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/less">*{margin: 0;padding: 0;}#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}}</style>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

样式如下：

在这里插入图片描述

4. 使用koala将less文件编译成css文件

⑴ 先将之前的less样式拆分到css文件夹中的test.less文件中

拆分前的：
在这里插入图片描述
拆分后的
在这里插入图片描述

test.less

*{margin: 0;padding: 0;
}
#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}
}

test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/less" href="css/test.less"/>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

结果为：
在这里插入图片描述

⑵ 通过koala将.less文件编译成.css文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将.less编译后生成的.css文件引入的html文件中
在这里插入图片描述

test.css文件

* {margin: 0;padding: 0;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

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

5. less中的注释

以 // 开头的注释，不会被编译到css文件中
以 /**/包裹的注释会被编译到css文件中

6. less中的变量

使用@来声明一个变量：@pink:pink;
1.作为普通属性值来使用: @pink
2.作为选择器和属性名来使用: @{selector的值}
3.作为URL： @{url}

.less不使用变量和.less使用变量对比
在这里插入图片描述
编译前的.less文件和编译后生成的.css文件对比
在这里插入图片描述

编译前的.less

/*多行注释*/
//单行注释
@color:pink;//作为普通值来使用
@m:margin;//作为属性名来使用
@selector:#wrap;//作为选择器*{@{m}: 0;padding: 0;
}
@{selector}{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @color;height: 100px;width: 100px;}
}

.less编译后生成的.css文件

/*多行注释*/
* {margin: 0;padding: 0;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffc0cb;height: 100px;width: 100px;
}

在这里插入图片描述

7. 变量的延迟加载和&的使用

⑴ 变量的延迟加载

在这里插入图片描述

⑵ &的使用

在这里插入图片描述

在这里插入图片描述
编译前的.less

*{margin: 0;padding: 0;
}
#wrap{position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;//&符号主要用于引用父选择器，及 #wrap .inner &:hover{background-color: darkblue;}}
}

.less编译后生成的.css文件

* {margin: 0;padding: 0;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap .inner:hover {background-color: darkblue;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

效果如下：
在这里插入图片描述

二、less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

不用混合时候less的写法
在这里插入图片描述
编译生成.css文件
在这里插入图片描述
test.less文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}.inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

1. 普通混合和不带输出的混合改造

在这里插入图片描述
在这里插入图片描述
test.less文件

.juzhong{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong;}.inner2 {.juzhong;}
}

test.css文件

.juzhong {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: pink;height: 100px;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

2. 带参的混合

在这里插入图片描述
由图可以看出来，通过带参混合的方式给css设置不同的样式。大大简化了代码。
在这里插入图片描述
test.less文件

.juzhong(@w,@h,@c){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @c;height: @h;width: @w;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong(100px,100px,yellow);}.inner2 {.juzhong(50px,50px,green);}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100px;width: 100px;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #008000;height: 50px;width: 50px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

3. 带参数并且有默认值的混合

在这里插入图片描述
在这里插入图片描述
test.less文件

.juzhong(@w:200,@h:100,@c:yellow){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @c;height: @h;width: @w;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong();}.inner2 {.juzhong();}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100;width: 200;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100;width: 200;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

4. 命名参数

使用带参并且有默认值的混合的时候，想给部分参数设置，这时候可以使用名称参数来区分是给哪个参数设值的。
在这里插入图片描述

在这里插入图片描述
test.less文件

.juzhong(@w:200,@h:100,@c:yellow){position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: @c;height: @h;width: @w;
}
#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;.inner {.juzhong(@c:yellow);}.inner2 {.juzhong(@w:100px,@c:blue);}
}

test.css文件

#wrap {position: relative;width: 300px;height: 400px;border: 1px solid;margin: 0 auto;
}
#wrap .inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #ffff00;height: 100;width: 200;
}
#wrap .inner2 {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background-color: #0000ff;height: 100;width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner"></div><div class="inner2"></div></div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

5.匹配模式

传值的时候定义一个字符，在使用的时候使用哪个字符，就调用哪条规则
在这里插入图片描述
编译后的

在这里插入图片描述
sjx.less文件

.sjx(@_){width: 0px;height: 0px;overflow: hidden;
}.sjx(T,@w,@c){border-width:@w;border-color: transparent  transparent  @c transparent ;border-style:dashed dashed solid dashed  ;
}.sjx(B,@w,@c){border-width:@w;border-color: @c transparent  transparent   transparent ;border-style:solid dashed dashed  dashed  ;
}.sjx(L,@w,@c){border-width:@w;border-color:  transparent @c  transparent   transparent ;border-style: dashed solid dashed  dashed  ;
}.sjx(R,@w,@c){border-width:@w;border-color:  transparent   transparent   transparent @c;border-style: dashed  dashed  dashed  solid;
}

test.less文件

@import "./sjx.less";
#wrap{.sjx(B,100px,red);
}

test.css文件

#wrap {border-width: 100px;border-color: #ff0000 transparent transparent transparent;border-style: solid dashed dashed  dashed  ;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="sjx"></div></div>
</body>
</html>

在这里插入图片描述

6. arguments变量

什么是@arguments 变量：@arguments 代表所有的可变参数

注意：

@arguments 代表所有可变参数，参数的先后顺序就是()括号内的参数的顺序
赋值时，值的位置和个数是一 一对应的。只有一个值时，把值赋值给第一个；有两个值时，把值赋值给第一个和第二个……以此类推；需要注意的是如果想给第一个和第三个赋值，不能写(值
1，值 3)，必须把原来的默认值写上去

在这里插入图片描述
在这里插入图片描述

test.less文件

.border(@w,@style,@c){border: @arguments;
}
#wrap .sjx{.border(1px,solid,red);
}

test.css文件

#wrap .sjx {border: 1px solid #ff0000;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="sjx"></div></div>
</body>
</html>

在这里插入图片描述

三、less运算

‌Less支持算术运算，包括加法(+)、减法(-)、乘法(*)和除法(/)，这些运算可以对任何数字、颜色或变量进行操作。‌ Less中的运算功能提供了灵活性，使得开发者能够更方便地处理样式计算，尤其是在需要动态调整样式属性时。这些运算不仅限于数值计算，还包括颜色和单位之间的计算，尽管在某些情况下，单位换算可能不会发生，或者换算结果可能被忽略（例如，从px到cm的转换）
在这里插入图片描述
在这里插入图片描述
test.less文件

.border(@w,@style,@c){border: @arguments;
}
#wrap .sjx{.border(1+100px,solid,red);
}

test.css文件

#wrap .sjx {border: 101px solid #ff0000;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="sjx"></div></div>
</body>
</html>

在这里插入图片描述

四、less继承

1. 用less混合模式

样式

在这里插入图片描述
juzhong.less文件

.juzhong(@w,@h,@c){position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: @w;height: @h;background-color: @c;
}

test.less文件

*{margin: 0px;padding: 0px;
}
@import "mixin/juzhong.less";
#wrap{position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;.inner{&:nth-child(1){.juzhong(100px,100px,pink);}&:nth-child(2){.juzhong(50px,50px,deeppink)}}
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner">inner1</div><div class="inner">inner2</div></div>
</body>
</html>

test.css文件

* {margin: 0px;padding: 0px;
}
#wrap {position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;
}
#wrap .inner:nth-child(1) {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 100px;height: 100px;background-color: #ffc0cb;
}
#wrap .inner:nth-child(2) {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50px;height: 50px;background-color: #ff1493;
}

2. 用less继承模式

样式：

在这里插入图片描述
juzhong.less文件

.juzhong{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
.juzhong:hover{background-color: deepskyblue!important;
}

juzhong.css文件

.juzhong {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
.juzhong:hover {background-color: deepskyblue!important;
}

test.less文件

*{margin: 0px;padding: 0px;
}
@import "mixin/juzhong.less";
#wrap{position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;.inner{&:extend(.juzhong);&:nth-child(1){width: 100px;height: 100px;background-color: pink;}&:nth-child(2){width: 50px;height: 50px;background-color: deeppink;}}
}

test.css文件

* {margin: 0px;padding: 0px;
}
.juzhong,
#wrap .inner {position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
.juzhong:hover {background-color: deepskyblue!important;
}
#wrap {position: relative;width: 300px;height: 300px;border: 1px solid;margin: 0 auto;
}
#wrap .inner:nth-child(1) {width: 100px;height: 100px;background-color: pink;
}
#wrap .inner:nth-child(2) {width: 50px;height: 50px;background-color: deeppink;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body><div id="wrap"><div class="inner juzhong">inner1</div><div class="inner">inner2</div></div>
</body>
</html>

案例分析
在这里插入图片描述

五、 less避免编译

避免编译的格式：

*{margin: 10*10px;padding: ~"cacal(10*10px)";
}

在这里插入图片描述

这篇关于前端技术(七)——less 教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1150287。

相关文章

Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
通过Docker Compose部署MySQL的详细教程

通过Docker Compose部署MySQL的详细教程

《通过DockerCompose部署MySQL的详细教程》DockerCompose作为Docker官方的容器编排工具,为MySQL数据库部署带来了显著优势,下面小编就来为大家详细介绍一... 目录一、docker Compose 部署 mysql 的优势二、环境准备与基础配置2.1 项目目录结构2.2 基
阅读更多...
Linux安装MySQL的教程

Linux安装MySQL的教程

《Linux安装MySQL的教程》：本文主要介绍Linux安装MySQL的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux安装mysql1.Mysql官网2.我的存放路径3.解压mysql文件到当前目录4.重命名一下5.创建mysql用户组和用户并修
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
最新Spring Security实战教程之Spring Security安全框架指南

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security？同类框架对比Spring Security典型应用场景传统
阅读更多...
最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言
阅读更多...
Centos环境下Tomcat虚拟主机配置详细教程

Centos环境下Tomcat虚拟主机配置详细教程

《Centos环境下Tomcat虚拟主机配置详细教程》这篇文章主要讲的是在CentOS系统上,如何一步步配置Tomcat的虚拟主机,内容很简单,从目录准备到配置文件修改,再到重启和测试,手把手带你搞定... 目录1. 准备虚拟主机的目录和内容创建目录添加测试文件2. 修改 Tomcat 的 server.X
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2