FuNan https://www.gravatar.com/avatar/3f6a4005adc8f8749f606bc69cb330b6 2022-04-14T10:02:37.669Z http://www.ifunan.cn/ FuNan 1186174184@qq.com Hexo WeChatApp http://www.ifunan.cn/posts/b718f216/ 2022-04-14T09:59:20.000Z 2022-04-14T10:02:37.669Z 微信全局配置文件app.json

app.json常用配置项：

  • pages：记录当前小程序所有页面的存放路径
  • windows：全局设置小程序窗口的外观
  • tabBar：设置小程序底部的tabBar效果
  • style：是否启用新版的组件样式

app.json组成示意图：

小程序窗口的组成部分：
窗口组成部分

Windows配置项

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持black/white
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式，仅支持dark/light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px

tabBar配置项

作用： 是移动端应用常见的页面效果，用于实现多页面的快速切换。

  • tabBar分为底部tabBar和顶部tabBar。
  • 当设置为顶部tabBar时不显示icon(即按钮图标）,只显示文本。
  • tabBar最少2个、最多5个tab页签。
    tabBar组成示意图及说明如下：

tabBar配置项如下

属性类型必填默认值描述
positionString否bottomtabBar的位置，仅支持bottom/top
borderStyleString否blacktabBar上边框的颜色，仅支持black/white
colorHexColor否 tab上文字的默认（未选中）颜色
selectedColorHexColor否 tab上的文字选中时的颜色
backgroundColorHexColor否 tabBar的背景色
listArray是 tab页签的列表，最少2个、最多5个tab

每个tab项的配置选项如下

属性类型必填描述
pagePathString是tab 上显示的文字
textString是页面路径，页面必须在pages中预先定义
iconPathString否未选中时的图标路径；当postion 为top时，不显示icon
selectedIconPathString否选中时的图标路径；当postion为top时，不显示icon
]]> <h2 id="微信全局配置文件app-json"><a href="#微信全局配置文件app-json" class="headerlink" title="微信全局配置文件app.json"></a>微信全局配置文件app.json</h2><p>app.json常用配置项： DJI调光教程 http://www.ifunan.cn/posts/fdbca6c1/ 2022-03-14T12:19:20.000Z 2022-03-14T12:22:28.154Z 大疆调光

写在前面：调节三个参数：快门速度、感光度（iso）、白平衡

白平衡

白平衡的调节改为手动，根据天气调整白平衡,具体的数值参照下表:

直方图

开启直方图和过曝提示。

  1. 在遥控器上点设置——拍摄——打开直方图、过曝提示。
  2. 直方图尽量向右曝光，同时也要使画面轻微过曝或不过曝(在过曝的边缘)

    注：直方图向左聚集表示画面暗的部分较多，聚集在右边表示较亮的部分多

感光度

iso白天设置最低，通过设置快门速度来调整过曝。

注：当快门速度调节到最慢，画面还不够亮时，再去调节ISO(如天快黑了或者傍晚)

快门速度

  1. 使用快门速度调整过曝。
  2. 180度快门角法则：快门速度=1/(帧速率*2)
    eg：帧速率30fps，则快门速度为1/60s

    注：此条准则与第二条注意事项冲突，是因为本应该以本条法则为准，但需要搭配ND滤镜，所需偷懒用了第二条的方法。

  3. 同时拍摄天空和地底，先根据天空的亮度调好参数

参考链接

参考自：哔哩哔哩UP

]]> <h1 id="大疆调光"><a href="#大疆调光" class="headerlink" title="大疆调光"></a>大疆调光</h1><p>写在前面：调节三个参数：快门速度、感光度（iso）、白平衡</p> <h2 id="白平衡"><a href="#白平衡" CSS http://www.ifunan.cn/posts/ee69e452/ 2022-02-28T02:49:35.000Z 2022-02-28T02:58:06.271Z CSS语法
  1. CSS主要由两部分构成：选择器、一条或多条声明
  • 选择器表示需要改变样式的HTML标签名
  • 每条声明由一个属性和一个值组成，表示需要设置的样式属性。声明使用大括号括起来，属性和值使用冒号分隔，不同声明间使用分号分隔。示例如下：
    1
    2
    3
    4
    5
    p
    {
        color:red;
        text-align:center;
    }
  1. CSS注释：/*注释*/

选择器（id和class）

选择器用于选择指定的html元素设置样式

id选择器

id选择器使用id为特定的HTML元素指定样式

注意：HTML中的id属性值是不允许重复的。class值允许重复

首先在HTML为元素设置id属性，再在CSS中使用#定义id选择器，示例如下：

1
2
3
4
5
#para1
{
    text-align:center;
    color:red;
}

class选择器

class选择器用于描述一组元素的样式。class与id的区别是，class可以在多个元素中使用。
与id类似，先在HTML为元素设置class属性，再在CSS中使用.定义class选择器。

1
.center {text-align:center;}

样式表

插入样式表的方法有三种：

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

  1. 使用场景：样式需要应用于很多页面时。
  2. 外部样式表是写在后缀名为.css的文件中。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。
  3. 每个页面使用<link>标签链接到样式表，href后的值。<link>标签写在HTML头部。示例如下：
    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
  4. 在外部css文件中不能包含任何html标签，css例子如下：
    1
    2
    3
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("/images/back40.gif");}

内部样式表

  1. 使用场景：单个文档需要特殊的样式时。
  2. 使用<style>标签在HTML头部定义内部样式表，例子如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <head>
        <style>
            hr{
                color:sienna;
            }
            p{
                margin-left: 20px;
            }
            body{
                background-image: url("images/back40.gif");
            }
        </style>
    </head>

内联样式

  1. 使用场景：当样式仅需要在一个元素上应用一次时。（慎用，不推荐）
  2. 在相关标签内使用style属性设置CSS样式。例子如下：
    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

优先级顺序

  • 通用选择器（*）
  • 元素(类型)选择器
  • class选择器
  • 属性选择器
  • 伪类
  • ID选择器
  • 内联样式

背景

CSS背景属性用于定义HTML元素背景
几种定义背景的样式：

  • background：简写属性，默认颜色优先
  • background-color：设置元素背景颜色
  • background-image：将图片设为背景
  • background-repeat：背景图像是否以及如何重复
  • background-attachment：背景图像是否固定或者随着页面其余部分滚动
  • background-position：设置背景图像的起始位置
  • background-size：设置图片大小，默认单位是像素px

color

使用background-color定义颜色

1
2
3
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

image

使用background-image定义背景图片。默认情况下，背景图像为平铺重复显示。
如未设置background-position属性，图像默认显示在左上角。

repeat

先介绍下几个词的释义：

  • 平铺：div设置宽高40，图片的宽高只有20，那么图片会自动填满div剩余的空位
  • 水平平铺（X）：只填满横向的空位
  • 垂直平铺（y）：只填满纵向的空位

使用background-repeat设置图像只在水平方向平铺（repeat-x)。
使用场景：因为默认情况下image会在页面的水平和垂直方向平铺,如果看着不协调，可以设置为只在一个方向平铺。

1
2
3
4
5
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

backgrouond-repeat的几个值：

值描述
repeat默认，背景图像将在垂直方向和水平方向重复
repeat-x背景图像在水平方向重复
repeat-y背景图像在垂直方向重复
no-repeat背景图像只显示一次
inherit从父元素继承 background-repeat 属性的设置

position

使用background-position改变图片在背景中的位置。下面介绍几个position的值。

第一种值：

topcenterbottom
leftleft topleft centerleft bottom
rightright topright centerright bottom
centercenter topcenter centercenter bottom

注：如果只写了一个值，那么第二个值默认为center。

第二种值：

x%y%
水平位置垂直位置

注：左上角是0%0%，右下角是100%100%。如果只规定了一个值，另一个默认是50%

第三种值：

xposypos
水平位置垂直位置

注：左上角是0 0。默认单位是像素px,可以设置为其他单位。如果只规定了一个值，另一个**默认是50%**。x%和xpos可以混用。

1
2
3
4
5
6
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

文本格式

文本颜色

color用于设置文字的颜色（即仅对文字生效）。
三种指定颜色的方式：

  • 十六进制：#FF0000
  • RGB：RGB(255,0,0)
  • 颜色英文：red
1
2
3
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对齐方式

使用text-align属性定义对齐方式。

值功能
left左对齐，默认值
right右对齐
center居中对齐
justify两端对齐
inherit从父元素继承 text-align 属性的值
1
2
3
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

使用text-decoration设置或删除文本的修饰。主要用于删除链接的下划线。
<p>链接到: <a href="//www.runoob.com/">runoob.com</a></p>

大小写转换

使用text-transform设置单词的大小写。

  • uppercase：全部大写
  • lowercase：全部小写
  • capitalize：单词首字母大写

文本缩进

使用text-indent指定文本第一行缩进
p {text-indent:50px;}

更多CSS文本属性

本文参考自菜鸟教程

]]> <h2 id="CSS语法"><a href="#CSS语法" class="headerlink" title="CSS语法"></a>CSS语法</h2><ol> <li>CSS主要由两部分构成：选择器、一条或多条声明<br><img src= "/img/loading.g HTML http://www.ifunan.cn/posts/2eec1551/ 2022-02-22T03:37:43.000Z 2022-02-22T14:53:08.754Z HTML 简介

HTML 标签

  • HTML标签由尖括号包围的关键词,如<html>
  • 标签通常成对出现，如<p></p>
  • 通常HTML标签和HTML元素表达的是一个意思
  • 标签大全
  • 正常情况下HTML都会在标签前后自动添加空行
  • 您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果，当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML属性

HTML 基础

标题

通过h1>-<h6>标签定义,数字越大标题越小
不要为了粗体和大号字体而使用标签

段落

通过<p>标签定义

文本格式化

标签描述
<b>定义粗体文字
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<ins>定义插入字
<del>定义删除字

链接

通过<a>标签定义

  • href属性：在开始标签定义，用于指定链接地址
  • target：_blank新窗口打开；_parent父窗口打开；_self默认选项 当前页面跳转；_top在当前窗体打开链接，并替换当前整个窗体
  • id属性：相当于页内快速跳转的功能，下面详解
  1. 首先在HTML中插入ID<a id="tips">要跳转到的地方</a>
  2. 当前页面使用href属性跳转<a href="#tips">点击跳转</a>
  3. 其他页面使用href属性跳转到需要的位置<a href="https://www.baidu.com#tips">点击跳转</a>

    注意：请始终将正斜杠添加到子文件夹，如href=”https://www.baidu.com/html"会产生两次HTTP请求，而href="https://www.baidu.com/html/"只会产生一次，应该用后面这种

图像

通过<img>标签定义，此标签无结束标签

  • src属性：找到图片所存放的位置
  • alt：图片加载失败后自定义提示信息
  • width：图片的宽度，默认单位像素
  • height：图片的高度

表格

通过<table>标签定义，tr(table row)表示行，td(table data)表示列，th(table head)表示表格标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

  1. 无序列表使用<ul>表示(unordered list)，后跟<li>
    1
    2
    3
    4
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
  2. 有序列表使用<ol>表示(orderly list)，后跟<li>
    1
    2
    3
    4
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

区块div

div用于组合其他HTML元素的容器，与CSS一同使用可用于对大的内容块设置样式属性

注意：<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

div和span的区别

divspan
块级元素内联元素
会自动换行不会自动换行

表单

表单使用<form>标签包含，表单的输入类型是由类型属性（type）的值决定的，常用的type输入类型如下：

  • type=”text”：文本域
  • type=”password”：密码字段
  • type=”radio”：单选按钮，注意：多个单选按钮的name值必须相同，否则会出现单选按钮能多选的情况。name值相同则为同一组的意思
  • type=”checkbox”：复选框
  • type=”submit”：提交按钮。当单击提交按钮时，表单的内容会被传送到其他文件中。表单的动作属性（action）定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。method属性规定用什么方法将表单中的数据发送出去（POST方法和GET放法二选一，默认为GET方法）。示例如下：
    1
    2
    3
    4
    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>

文本域和密码字段应该加上name属性
单选按钮和复选框应该加上name属性和value属性

  • name属性：用于对提交到服务器后的表单数据进行标识，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
  • value属性：用于表示选择到的按钮对应的值是什么。submit和button的value属性表示按钮上的文字
1
2
3
4
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

其他

  1. <br/>：手动换行，后面有一个/用于关闭空元素
  2. <hr/>：水平线
  3. <!-- 注释 -->

head中的元素

  1. <base>元素 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
  2. <link>元素 标签定义了文档与外部资源之间的关系。**通常用于链接到样式表**
    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
  3. 每30秒刷新当前页面``设置网页使用的字符集`charset="utf-8"`关于head的[详细文档](https://www.runoob.com/html/html-head.html)
]]> <h2 id="HTML-简介"><a href="#HTML-简介" class="headerlink" title="HTML 简介"></a>HTML 简介</h2><h3 id="HTML-标签"><a href="#HTML-标签" class="headerlink 样式绑定（v-bind、class、style） http://www.ifunan.cn/posts/f88104a5/ 2021-12-01T09:32:16.000Z 2021-12-01T09:33:41.164Z 样式绑定

前言：在HTML中，通过class属性和style属性都可以定义DOM元素的样式

  • class属性用于定义元素的类名列表
  • style属性用于定义元素的内联样式
  • v-bind指令对这两个属性进行绑定

class属性绑定

首先是对元素的class属性进行绑定，绑定的对象可以是对象或数组，下面详细介绍两种对象

对象语法

将绑定的数据设置为一个对象（即类似字典），可以动态地切换元素的class。主要有3种形式

内联绑定

这种绑定，将元素的class属性直接绑定为对象的形式，其中class里有两个参数，格式如下：
<div v-bind:class="{参数1 : 参数2}"></div>

  • 参数1：是style里的某个样式名称，即要用哪个样式
  • 参数2：是数据对象(data)里的属性，是一个布尔值，因为用于定义是/否使用该样式

另外，在对象中还可以添加多个样式，且v-bind:class可以和普通的class属性共存
上面的简单示例如下：

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
<head>
    <style type="text/css">
        .default {
            text-decoration: underline;
        }
        .size {
            font-size: 18px;
        }
        .color {
            color: #6699FF;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="default" v-bind:class="{size : isSize,color:isColor}">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            isColor: true
        }
    });
</script>

非内联绑定

将元素的class属性绑定的对象定义在data选项中（而不是直接在v-bind中定义),格式如下：
<div v-bind:class="样式组名称"></div>
在data里定义的样式组，其里面的属性名即为某个样式名称
将上边的例子修改后如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="box">
    <div class="default" v-bind:class="classObject">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            classObject: {
                size: true,//size即样式名
                color: true, //color即样式名
            }
        }
    });
</script>

用计算属性返回样式对象

将元素的class属性绑定一个返回对象的计算属性。这是一种常用且强大的模式,格式如下：
<div v-bind:class="计算属性名称"></div>
将上边的例子修改后如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="box">
    <div class="default" v-bind:class="show">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            isColor: true,
        },
        computed: {
            show: function () {
                return {
                    size: this.isSize,
                    color: this.isColor
                }
            }
        }
    });
</script>

上述代码的执行过程：

  1. 先执行v-bind:class="show"
  2. 再去计算方法里找show
  3. 计算方法里样式是否使用（true和false），则在data选项里定义

数组语法

将绑定的数据设置为一个数组（即类似列表），以应用一个class列表。也主要有3种形式

普通形式

将元素的class属性直接绑定为一个数组，格式如下：
<div v-bind:class="[element1, element2]"></div>
在上述格式中，element1和element2是数据对象(data)中的属性(即这两个参数名称和data选项中的属性名相同，对应的数据对象中的值为class列表中类名
简单示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    .size {
        font-size: 18px;
    }
    .color {
        color: #6699FF;
    }
</style>
<div id="box">
    <div v-bind:class="[isSize,isColor]">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: 'size',
            isColor: 'color',
        }
    });
</script>

注意：在data选项中的class列表类名要用单引号包含

数组中使用条件运算符（三目运算符）

数组形式绑定class属性，可以使用条件运算符构成的表达式来切换列表中的class，格式如下：
<div v-bind:class="[参数1?'参数2':'',参数3]">

  • 参数1：data中的属性名称
  • 参数2：class类名，即样式名称，注意用单引号包含
  • 冒号后的单引号为空，意思是当参数1不满足条件时，什么也不做
  • 参数3：其他样式的名称

示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="box">
    <div v-bind:class="[isSize?'size':'',colorClass]">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            colorClass: 'color',
        }
    });
</script>

数组中使用对象

使用条件运算符可以实现简单的元素class是否显示，但数量一多就显得繁琐。这种情况下，可以在数组中使用对象来更新class列表，格式如下：
<div v-bind:class="[{size:isSize},isColor]"></div>
示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="box">
    <div v-bind:class="[{size:isSize},colorClass]">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            isSize: true,
            colorClass: 'color',
        }
    });
</script>

注：注意区分当使用数组语法时，data选项里的参数是属性值:'class类名'的形式，而不是属性值:true/false

内联样式绑定(style)

上面介绍的是对元素的class属性进行绑定，下面介绍对元素的style属性进行绑定
同样的，绑定的数据可以是对象或数组

对象语法

  1. 对元素的style属性进行绑定，可以将绑定的数据设置为一个对象
  2. 对象中CSS属性名可以用驼峰式或短横线分隔命名

内联绑定

将元素的style属性直接绑定为对象。绑定后如可以设置文字的粗细大小等，格式如下：
<div v-bind:style="{'参数1':值1,'参数2':值2}">

  • 参数1：样式的某个参数，如font-size设置字体大小
  • 值1：样式参数对应的值，此变量会去找data里的同名的属性的值

示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="box">
    <div v-bind:style="{fontWeight:weight,'font-size':fontSize+'px'}">
        Vue.js样式绑定
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            weight: 'bold',
            fontSize: 130,
        }
    });
</script>

非内联绑定

]]> <h1 id="样式绑定"><a href="#样式绑定" class="headerlink" title="样式绑定"></a>样式绑定</h1><p>前言：在HTML中，通过<strong>class属性</strong>和<strong>style属性</strong>都 Hexo主题配置 http://www.ifunan.cn/posts/d11bc064/ 2021-11-28T13:15:52.000Z 2021-11-28T13:27:17.021Z 主题配置与使用

代码高亮

代码书写时

当使用```这种形式来包含代码时，开头处应该加上代码块语言的类型

比如：```python

主题文件配置

仅针对Butterfly主题

先展示一下Hexo默认的主题配置部分：

1
2
3
4
5
6
7
8
9
10
11
12
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

首先在Hexo主配置文件

  • 修改highlight.enable为true
  • 修改highlight.hljs为false

再主题配置文件

  • 修改highlight_theme为对应要使用的主题

参考链接

  1. Hexo官方文档-代码高亮
  2. 代码块后支持的语言类型有哪些
  3. Butterfly主题代码高亮文档
]]> <h1 id="主题配置与使用"><a href="#主题配置与使用" class="headerlink" title="主题配置与使用"></a>主题配置与使用</h1><h2 id="代码高亮"><a href="#代码高亮" class="headerlink" titl 计算属性与监听属性(computed和watch) http://www.ifunan.cn/posts/48563237/ 2021-11-28T08:03:47.000Z 2021-11-28T13:17:04.711Z 计算属性与监听属性（computed和watch）

计算属性

  • 计算属性定义在computed选项中
  • 当计算属性依赖的数据发生变化时，计算属性会自动更新，所有依赖该属性的数据绑定也会同步更新
  • 最重要的一点：计算属性是一个属性，不是一个方法
    简单示例如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div id="box">
        <p>原字符串：{{str}}</p>
        <p>新字符串：{{netstr}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#box',
            data: {
                str: 'HTML*JavaScript*Vue.js'
            },
            computed: {
                netstr: function () {
                    return this.str.split('*').join('+');
                }
            }
        });
    </script>
    注：当data里的str发生变化时，newstr也会自动更新

计算属性＋过滤器的一个实例：

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
<div id="box">
    <div class="title">
        <div>商品名称</div>
        <div>单价</div>
        <div>数量</div>
        <div>金额</div>
    </div>
    <div class="content" v-for="value in shop">
        <div>{{value.name}}</div>
        <div>{{value.price}}</div>
        <div>{{value.count}}</div>
        <div>{{value.price*value.count | twoDecimal}}</div>
    </div>
    <p>总计：{{totalprice | formatPrice("￥")}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            shop: [{
                name: 'OPPO R15',
                price: 2999,
                count: 3,
            }, {
                name: '华为P20',
                price: 3699,
                count: 2,
            }]
        },
        computed: {
            totalprice: function () {
                var total = 0;
                this.shop.forEach(function (s) {
                    total += s.price * s.count;
                });
                return total;
            }
        },
        filters: {
            twoDecimal: function (value) {
                return value.toFixed(2);
            },
            formatPrice: function (value, symbol) {
                return symbol + value.toFixed(2);
            }
        }

    });
</script>

getter和setter

  • 每一个计算属性都包含一个getter和setter
  • getter用来执行读取值的操作，setter用来执行设置值的操作
  • 当没有指明方法时(属性名后的function)，默认使用getter来读取数据
  • 在未设置setter的情况下给计算属性重新赋值，是不会触发更新的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="box">
    <p>{{fullname}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            firstname: '张',
            lastname: '斯特',
        },
        computed: {
            fullname: {
                get: function () {
                    return this.firstname + this.lastname;
                },
                set: function (value) {
                    this.firstname = value.substr(0, 1);
                    this.lastname = value.substr(1);
                }
            }
        }
    });
    vm.fullname = '利乌斯';
</script>

上述示例执行过程：

  1. 定义了一个计算属性fullname
  2. 在给fullname重新赋值时会自动调用setter，并将新值作为参数传递给set()方法
  3. 在set()方法中定义去修改data里的属性值，当data属性值改变后，fullname也会跟着改变（而不是直接改变fullname的值，直接改变是无效的）

计算属性缓存

  • 使用计算属性时，每次获取的值都是基于依赖的缓存值（即基础值）
  • 当页面重新渲染时，如果依赖的数据未发生改变，则计算属性值也不会改变。只有依赖的数据改变，才会重新执行getter

下面给出计算属性和方法的区别

计算属性：只有依赖的值发生改变时，计算属性才会变
方法：每当页面重新渲染时，方法就会再次执行

监听属性

  • 定义：监听属性用于监听和响应Vue实例中的数据变化
  • 在监听数据对象中的属性时，每当监听的属性发生变化时，都会执行特定的操作
  • 监听属性的名字和要监听的对象相同，即要监听哪个属性，命名就和那个属性名一样
  • 定义监听属性有两种方式：watch选项和实例方法vm.$watch()
  1. watch选项：watch:{}
  2. vm.$watch()在Vue实例后面定义：vm.$watch('监听对象名',function(参数){代码})

两种方法简单示例如下，第一个参数是新值，第二个参数是旧值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            fullname: '张三',
        },
        watch: {
            fullname: function (newValue,oldValue) {
                alert('原值：' + oldValue + '  新值：' + newValue);
            }
        }
    });
    vm.fullname = '李四';
</script>
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            fullname: '张三',
        },
    });
    vm.$watch('fullname', function (newValue, oldValue) {
        alert('原值：' + oldValue + '  新值：' + newValue)
    });
    vm.fullname = '李四';
</script>

deep选项

handler
先简单介绍一下handler，当deep的值为true时，必须使用handler函数

如果监听的属性是一个对象（即字典），为了监听对象内部值的变化，必须在watch选项中设置deep的值为true，简单示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            shop: {
                name: 'XiaoMi10',
                price: 3899,
            },
        },
        watch: {
            shop: {
                handler: function (val) {
                    alert(val.name + '新价格为' + val.price);
                },
                deep: true
            }
        }
    });
    vm.shop.price = 4899;
</script>

参考链接

  1. vue中watch的handler，deep，immediate用法详解
  2. vue handler ()的参数是什么
]]> <h1 id="计算属性与监听属性（computed和watch）"><a href="#计算属性与监听属性（computed和watch）" class="headerlink" title="计算属性与监听属性（computed和watch）"></a>计算属性与监听属性（c 条件判断与列表渲染（v-if、v-show、v-for） http://www.ifunan.cn/posts/d1fa448f/ 2021-11-18T07:43:00.000Z 2021-11-28T13:17:04.709Z 条件判断（v-if、v-show）

Vue.js提供了多个指令实现条件判断：v-if、v-else、v-else-if、v-show

v-if指令

  • 如果表达式的值为true就输出DOM元素和包含的子元素，否则就不输出
  • v-if属于指令，指令必须添加到一个元素上，根据表达式的结果判断是否输出元素。
  • 格式：<p v-if="表达式">内容</p>，简单示例如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="box">
    <p>a的值是：{{a}}</p>
    <p>b的值是: {{b}}</p>
    <p v-if="a<b">a大于b</p>
    <p v-else>a小于b</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            a : 8,
            b : 4,
        }
    });
</script>

模板<template>元素中使用v-if

如果需要对一组元素进行判断，需要使用<template>将多个元素包含起来，并在template上使用v-if，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="box">
    <template v-if="show">
        <input type="radio" value="A">A
        <input type="radio" value="B">B
        <input type="radio" value="C">C
        <input type="radio" value="D">D
    </template>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            show: false
        }
    });
</script>

v-else指令

v-else配合v-if使用，下例判断是否闰年并弹框:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="box">
    <p v-if="(year%4==0&&year%100!=0) || year%400==0">
        {{show(29)}}
    </p>
    <p v-else>
        {{show(28)}}
    </p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            year: 2021,
        },
        methods: {
            show: function (value) {
                alert(this.year + '年2月有' + value + '天')
            }
        }
    });
</script>

v-else-if指令

和前面的if和else用法类似

注：v-else和v-else-if必须和v-if配套使用，紧跟在v-if后

v-show指令

  • v-show根据表达式的值来判断是否显示和隐藏DOM元素（表达式为true元素显示，为false元素隐藏）
  • 与v-if的区别：使用v-show指令的元素无论表达式的值为true还是false，该元素始终会被渲染并保留在DOM中。绑定值的改变只是简单切换元素的CSS属性display
  • v-show不支持元素，也不支持v-else指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="box">
    <input type="button" :value="bText" v-on:click="toggle">
    <div v-show="show">
        <img src="../img/img_demo003.png">
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            show: true,
            bText: '隐藏图片',
        },
        methods: {
            toggle: function () {
                if (this.bText == '隐藏图片') {
                    this.bText = '显示图片'
                } else
                    this.bText = '隐藏图片'
                this.show = !this.show
            }
        }
    });
</script>

重点：v-if和v-show比较

v-ifv-show
切换角度考虑有一个局部编译/卸载的过程仅发生样式的变化
初始渲染的角度考虑是惰性的，在初始条件为false时，v-if什么都不会做不管初始条件真假，DOM元素总是会被渲染

由上表可知：
从切换角度考虑：v-if消耗的性能比v-show大
从初始渲染考虑：v-show消耗的性能比v-if小
因此：
如果需要频繁地切换，使用v-show较好。
如果运行时条件很少改变，使用v-if较好

列表渲染

Vue的列表渲染功能，即将数组或对象中的数据循环渲染到DOM中。使用v-for指令，效果类似于遍历

items:{}items:[]
数组对象（类似字典）

重点：v-for遍历数组

  • 根据接收数组中数据重复渲染DOM元素，格式如下，items是数组名称：
    <li v-for="item in items">{{item.name}}</li>
    简单示例如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div id="box">
        <ul>
            <li v-for="item in items">{{item.name}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el : '#box',
            data : {
                items : [
                    {name : '张三'},
                    {name : '李四'},
                    {name : '王五'},
                ]
            },
        });
    </script>

  • 可指定一个参数作为当前数组元素的索引，格式如下(item在前,index在后)：
    <li v-for="(item,index) in items">{{index}} {{item.name}}</li>

数组的增删改查

方法名说明
push()数组末尾添加一个或多个元素
pop()移除数组最后一个元素
shift()移除数组第一个元素
unshift()数组开头添加一个或多个元素
splice()添加或删除数组中元素
sort()对数组元素排序
reverse()颠倒数组元素顺序

举例一个格式：
vm.items.push({name : '赵六'})
vm为Vue实例名称，items为数组名称

v-for遍历对象（字典）

与遍历数组类似v-for="(value,key,index) in object"

  • value是对象的值
  • key是对象的键
  • index是对象的索引
    注意value是第一个参数，key才是第二个参数，后两个参数是可选的，示例如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="box">
    <ul>
        <li v-for="(value,key) in items">{{key}}-{{value}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            items : {
                name : '张三',
                sex : '男',
                age : '19',
            }
        }
    });
</script>

插入属性（键值对）到对象

格式：

  • 全局方法：Vue.set(Vue实例名.object,'key','value')(在Vue实例后使用）
  • 实例方法：vm.$set(Vue实例名.object,'key','value')

全局方法示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box">
    <ul>
        <li v-for="(value,key,index) in items">{{index}}-{{key}}-{{value}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            items : {
                name : '张三',
                sex : '男',
                age : '19',
            }
        }
    });
    Vue.set(vm.items,'interest','swimming')
</script>

实例方法：将Vue.set改为vm.$set即可

如果想要一次性添加多个属性（多个键值对）,格式如下：
Vue实例名.字典名 = Object.assign({},Vue实例名.字典名,{键:'值',键:'值'});
示例如下：

1
2
3
4
vm.items = Object.assign({},vm.items,{
    interest : 'swimming',
    address : '海南',
});

v-for遍历整数

接收的整数即为循环次数，会将模板重复显示，下面使用v-for打印99乘法表：

1
2
3
4
5
6
7
8
9
10
11
12
<div id="box">
    <div v-for="m in 9">
        <span v-for="n in m">
            {{n}}*{{m}}={{m*n}}
        </span>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box'
    });
</script>
]]> <h1 id="条件判断（v-if、v-show）"><a href="#条件判断（v-if、v-show）" class="headerlink" title="条件判断（v-if、v-show）"></a>条件判断（v-if、v-show）</h1><p>Vue.js提供了多 Windows下Hexo配置 http://www.ifunan.cn/posts/86958cb8/ 2021-11-03T09:15:51.000Z 2021-11-03T09:19:58.344Z Windows提交Hexo到GitHub

nodejs

npm: nodejs下的包管理器

  1. 访问nodejs官网下载nodejs
  2. 下载后点击安装Nodejs，改变安装路径，点击选择Add to PATH，最后点击Finish完成安装
  3. 在cmd窗口node -v查看nodejs安装情况，npm -v查看npm安装情况（默认情况下npm版本都有点旧）

Hexo

在安装好nodejs、npm、git后，执行以下步骤

  1. 在选择的目录下打开git界面，配置安装Hexo
    npm install hexo-cli -g，npm install hexo --save

配置Git

  1. 配置用户名和邮箱
    git config --global user.name "XXX"，git config --global user.email "XXX"
  2. 查看用户名和邮箱
    git config user.name，git config user.email
  3. 查看当前Git环境所有配置
    git config --list

配置GitHub

  1. 在Git生成配置密钥，生成过程中按三次回车，存放在windows用户目录的.ssh下
    ssh-keygen -t rsa -C "邮箱"
  2. 复制id_rsa.pub文件中的密钥
  3. 在GitHub上点击头像——Settings——SSH and GPG keys——New SSH key，粘贴复制的密钥
  4. 完成后保存回到Git界面，验证配置SSH Key是否成功，弹出的选项选择yes(出现Hi Fu-Nan! You’ve successfully…类似文字即为成功
    ssh -T git@github.com

上传内容到GitHub

  1. 编辑好内容后使用hexo g生成页面
  2. 在当前文件夹初始化git（不影响当下的资源）
    git init
  3. 添加该项目下所有文件到队列
    git add .
  4. 将文件添加到仓库中
    git commit -m '说明信息'
  5. 在GitHub创建一个仓库
  6. 将本地仓库关联到远程仓库
    git remote add origin 仓库http地址
  7. 将本地代码推送到指定远程仓库中
    git push -u origin main

友情链接

Windows安装npm教程：https://www.cnblogs.com/jianguo221/p/11487532.html
nodejs详细安装步骤：https://blog.csdn.net/muzidigbig/article/details/80493880
Git上传项目：https://www.cnblogs.com/ql123456/p/10626810.html
GitHub配置SSH Key：https://blog.csdn.net/u013778905/article/details/83501204

]]> <h1 id="Windows提交Hexo到GitHub"><a href="#Windows提交Hexo到GitHub" class="headerlink" title="Windows提交Hexo到GitHub"></a>Windows提交Hexo到GitHub</h1>< Vue前端开发 http://www.ifunan.cn/posts/3b8f226c/ 2021-11-03T08:43:00.000Z 2021-11-28T12:46:13.134Z 简介
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>第一个实例</title>
   <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
   <h1>{{message}}</h1>
</div>
<script type="text/javascript">
   var vm = new Vue({
      el : '#box',
       data : {
            message : 'I Like Vue!'
       }
  });
</script>
</body>
</html>

首先引入Vue文件。div块里的message变量与vuedata中的message变量相关联，改变data里message值就会同步改变页面的内容。注意在创建Vue实例后加上一个分号。message里的内容必须是单引号包含的，不能是双引号。

  1. var为声明变量
  2. //是注释

基础特性

Vue实例和选项

在创建对象实例时，可以在构造函数中传入一个选项对象。选项对象包括挂载元素、数据、方法、生命周期钩子函数。

挂载元素

Vue实例中的el选项为实例本身提供挂载元素。定义挂载元素后接下来的全部操作都在该元素里进行，元素外部不受影响。

即el是绑定的由id标识的div块，后续的实例操作也是仅仅操作那一个div，而不影响另外的div。

<div id="box" class="box"></div>
这里挂载元素有三种方式：el:'#box'，el:'.box'，el:'div'。

数据

使用data选项定义数据，数据可以绑定到实例对应的模板(即div)中。示例如下：

<div id="box">    <h1>网站名称：{{name}}</h1>    <h1>网站地址：{{url}}</h1></div><script type="text/javascript">    var vm = new Vue({        el : '#box',        data : {            name : 'ifunan',          url : 'www.ifunan.cn'        }    });</script>

首选创建了一个Vue实例vm，模板中{{name}}用于输出name属性值，{{url}}用于输出url属性值。即data数据与DOM进行了关联

  • 放在双大括号标签内的文本称为绑定表达式
  • 在创建Vue实例时，如果给data赋值一个对象，那么Vue实例会代理data对象中所有的属性。
    当属性值发生变化，HTML视图也会发生相应变化。所以data对象中定义的属性称为响应式属性。示例如下：
1
2
3
4
5
6
7
8
9
10
11
<div id="box">
    <h1>网站名称：{{name}}</h1>
    <h1>网站地址：{{url}}</h1>
</div>
<script type="text/javascript">
    var data = {name:'ifunan',url:'www.ifunan.cn'};
    var vm = new Vue({
        el : '#box',
        data : data,
    });
</script>

注：只有在对象实例里的数据才是响应式的。

方法

使用methods选项定义方法，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="box">
    <h3>{{showInfo()}}</h3>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            name : 'ifunan',
            url : 'www.ifunan.cn',
        },
        methods : {
            showInfo : function () {
                return this.name + ': ' +this.uri;
            }
        }
    });
</script>
  1. 调用方法和使用data属性值相同，在div块里使用两个{{方法名}}包括住方法。
  2. methods和data是平级的，所以在data写完后加上一个逗号，下面写方法。（data和methods在格式上有很多相似之处）
  3. return写完后要加上一个分号;

生命周期钩子函数

数据绑定

建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动更新。

插值

文本插值

文本插值是数据绑定最基本的形式，双大括号标签{{}}，示例如下：

1
2
3
4
5
6
7
8
9
10
11
<div id="box">
    <h2>{{name}}</h2>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            name : 'vue.js',
        }
    });
</script>

此处将{{name}}与data里的name属性进行了绑定，当name属性发生了变化，{{name}}也将一起发生变化

如果只渲染一次数据，可以使用单次插值：v-once指令，即在第一次插入文本后，当数据对象中属性值发生变化时，{{name}}并不会发生变化。示例如下：

<div id="box">    <h2 v-once>hello {{name}}</h2></div>

插入HTML（v-html指令）

在双大括号标签{{}}里的值会当作普通文本处理。如果想在标签里再插入一个HTML标签，可以使用v-html，示例如下：

1
2
3
4
5
6
7
8
9
10
11
<div id="box">
    <p v-html="message"></p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            message : '<div>科技是第生产力</div>',
        }
    });
</script>

注意： v-html是在标签里使用等号；
标签使用双引号包含，而非双大括号

属性（v-bind指令）

先简单介绍一下HTML属性(标签和元素一个意思）：

  1. 属性提供一个标签/元素的补充信息
  2. 属性总是在开始标签/元素中指定
  3. 属性以键值对形式出现，比如键名="键值"
    eg:<a href="http://www.baidu.com">This is a link</a>
    在这里<a>是开始标签，</a>是结束标签；href=是标签<a>的属性

下面开始介绍vue的属性

要为HTML标签绑定属性，不能直接使用文本插值的方式。需要使用v-bind指令对属性进行绑定。示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="box">
    <h1>{{message}}</h1>
    <a v-bind:href="url">百度链接</a>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            message : '一个链接页面',
            url : 'https://www.baidu.com/',
        }
    });
</script>

在上述例子中，使用v-bind绑定<a>标签的href属性，href属性的值将在data里面去寻找。

注： v-bind:href可以缩写为:href；并且v-bind可以绑定任何属性

表达式

在双大括号标签中进行数据绑定时，标签中的内容可以是一个JavaScript表达式，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="box">
    {{number + 10 }}<br>
    {{boo ? '真的':'假的'}}<br>
    {{str.toLowerCase()}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            number: 10,
            boo: true,
            str: 'MJH MY LOVE'
        }
    });
</script>

结果：20
真的
mjh my love

过滤器

简单的表达式可能无法实现需要经过复杂计算的数据绑定，这时可以使用过滤器进行处理。

过滤器作用：自定义的过滤器可以对文本进行格式化

使用过滤器的两种方法：

  1. 在双大括号插值标签中：{{ message | myfilter }}，第一个参数是绑定值，第二个参数是过滤器ID。
  2. 在v-bind指令中： <div v-bind:id="rawId | formatID"></div>

定义过滤器的两种方法：

  1. 使用全局方法**Vue.filter()**定义
  2. 使用选项对象中的filters选项定义

Vue.filter()定义全局过滤器

使用全局方法Vue.filter()过滤器需要定义在创建Vue实例之前

Vue.filter('ID',function(){})

第一个参数： 过滤器的ID，为自定义过滤器的唯一标识，使用单引号括起来

第二个参数： 具体的过滤器函数，此函数以表达式的值作为第一参数，再将接收到的参数格式化为想要的结果。

过滤器中的function()的第一个参数，已经被规定死了，永远都是 过滤器管道符前面 传递过来的数据。示例如下：

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
<div id="box">
    <span>{{date | nowdate}}</span>
</div>
<script type="text/javascript">
    Vue.filter('nowdate', function (value) {
        var year = value.getFullYear();     //当前年份
        var month = value.getMonth()+1;     //当前月份(索引从0开始所以+1)
        var date = value.getDate();         //当前日
        var day = value.getDay();           //当前星期(数字形式)
        var week = "";
        switch (day) {
            case 1:
                week = "星期一";
                break;
            case 2:
                week = "星期二";
                break;
            case 3:
                week = "星期三";
                break;
            case 4:
                week = "星期四";
                break;
            case 5:
                week = "星期五";
                break;
            case 6:
                week = "星期六";
                break;
            default:
                week = "星期天";
                break;
        }
        return "今天是：" + year + "年" + month + "月" + date + "日" + week;
    });
    var vm = new Vue({
        el: '#box',
        data: {
            date: new Date()
        }
    });
</script>

注：Vue.filter()里的过滤器ID需要单引号包括起来；里面每一句写完用分号;结束

filters定义本地过滤器

  • 在filters定义的过滤器包括过滤器名称和过滤器函数两部分，其中过滤器函数以表达式的值作为第一个参数。示例如下：
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
<div id="box">
    <ul>
        <li><a href="#"><span>[特惠]</span>{{title1 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title2 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title3 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title4 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title5 | subStr}}</a></li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            title1: '商城爆品1分秒杀',
            title2: '商城与长春市签署战略合作协议',
            title3: '洋河年末大促，低至两件五折',
            title4: '华北、华中部分地区配送延迟',
            title5: '家电狂欢千亿礼券 买1送1!',
        },
        filters: {
            subStr: function (value) {
                if (value.length > 10) {
                    return value.substr(0, 10) + "...";
                } else {
                    return value;
                }

            }
        },
    });
</script>

  • 多个过滤器可以串联使用，格式如下:
    {{message | filterA | fileterB}}
    首先message的值作为参数去执行filterA过滤器的规则，完成之后的结果作为参数再去执行filterB

  • 过滤器实质是一个函数，所以也可以接受额外的参数，格式如下：
    {{message | filterA(arg1, arg2)}}
    message的值作为第1个参数，arg1为第2个参数，arg2为第3个参数传递刚给过滤器filterA，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="box">
    <span>{{price | formatPrice('$')}}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            price : 199,
        },
        filters : {
            formatPrice : function (value,symbol) {
                return symbol + value.toFixed(2) //保留两位小数
            }
        },
    });
</script>

指令

  • 绑定表达式：放在双大括号标签内的文本称为绑定表达式
  • 指令是带有v-前缀的特殊属性，指令的值限定为绑定表达式
  • 指令用于在绑定表达式的值发生改变时，将这种数据的变化应用到DOM上。以上三条示例如下：
    <p v-if="show">ifunan</p>

还有一些指令语法略有不同，能接收参数和修饰符

  1. 参数
    如v-bind指令、v-on指令能够接收一个参数。该参数位于指令和表达式之间，并用冒号分隔
    v-bind指令示例如下：
    <img v-bind:src="imageSrc">
    上述示例中，src即为参数，imageSrc即为表达式，通过v-bind指令将<img>元素的src属性与表达式imageSrc的值进行绑定

  2. 修饰符
    修饰符是在参数后面，以半角句点符号指明的特殊后缀。示例如下：
    <form v-on:submit.prevent="onSubmit"></form>
    上述示例中，当提交表单时会调用event.preventDefault()方法阻止浏览器默认行为。

]]> <h1 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span c Docker(七)Kubernetes基础 http://www.ifunan.cn/posts/8481a3fc/ 2020-10-23T03:25:39.000Z 2020-10-23T03:25:43.315Z kubernetes基础

写在前面

Rancher镜像分为两种:
Rancher1.X：镜像名为rancher/server
Rancher2.X：镜像名为rancher/rancher
此教程使用Rancher2.X，镜像rancher/rancher

实验准备

两种方法：
方法一： 一台全新的虚拟机，并完成Docker(一)安装
方法二： 如果有项目一的快照，则不需要新建虚拟机,克隆快照后修改IP地址即可

克隆快照方法：

  1. 打开快照编辑器，选择快照并开始克隆
  2. 进入后选择需要克隆的快照
  3. 选择链接克隆
  4. 指定克隆后的虚拟机名称以及克隆虚拟机的存储位置，完成克隆
  5. 克隆完成后进入修改IP地址

关闭防火墙及SeLinux

  1. 关闭SELinux
    sed -i 's/SELINUX=.*/SELINUX=disabled/g' /etc/selinux/config
    setenforce 0
  2. 关闭防火墙及防火墙的开机自启动
    systemctl stop firewalld.service
    systemctl disable firewalld.service

Rancher安装与配置

  1. 更改IP后需重启Docker
    systemctl restart docker.service
  2. Pull Rancher镜像到本地
    docker pull rancher/rancher
  3. 运行Rancher
    docker run -d --restart=unless-stopped --privileged -p 80:80 -p 443:443 rancher/rancher

    在Kubernetes之外运行时，必须使用–privileged标志运行Rancher

  4. 浏览器输入IP地址访问Rancher，首次登录需修改密码
    27
    28
  5. 进入后可将界面设置为中文
    29

Kubectl安装与配置

添加集群

  1. 点击全局——添加集群
    30
  2. 选择从现有节点添加K8S
    31
  3. 填写集群名称
    32
  4. 展开Kubernetes选项，将云提供商设置为无，完成后点击下一步
    33
  5. 将角色选择的三个角色全选上，并点开高级选项填写内网地址(即本机的IP地址)，然后复制下方的命令并复制到Centos执行，完成后下方会弹出新主机注册成功
    34
  6. 点击完成后等待集群状态变为Active(注：此过程耗时较长,可能会在pull images时卡很久,全程可能会超过半小时)
    35

集群相关操作

  1. 点击集群查看集群状态
    36
  2. 点击执行kubectl命令行按钮，可使用命令行查看集群信息
    37

扩展

  1. 查看某个容器日志
    docker logs Name/ID
  2. 读取docker容器日志的后一千行信息
    docker logs -f --tail=1000 Name/ID
  3. docker启动所有的容器
    docker start $(docker ps -a | awk '{ print $1}' | tail -n +2)
  4. docker关闭所有的容器
    docker stop $(docker ps -a | awk '{ print $1}' | tail -n +2)

相关链接

Rancher 1.X(rancher/server)安装k8s教程：https://blog.csdn.net/qqqqll3/article/details/90635154
Rancher 2.X(rancher/rancher)安装k8s教程：https://blog.csdn.net/miss1181248983/article/details/87970338
kubectl常用命令：https://www.cnblogs.com/miclesvic/articles/10997060.html

]]> <h1 id="kubernetes基础"><a href="#kubernetes基础" class="headerlink" title="kubernetes基础"></a>kubernetes基础</h1><h2 id="写在前面"><a href="#写在前面" cla Docker(五)容器相关技术 http://www.ifunan.cn/posts/a7347212/ 2020-10-14T15:46:42.000Z 2020-10-15T08:16:57.890Z 容器相关技术

Harbor查看镜像安全

添加扫描模块

  1. 进入Harbor安装目录
    cd /root/harbor/
  2. 添加扫描模块
    ./prepare --with-clair
  3. 重启Harbor服务
    docker-compose -f docker-compose.yml up -d
  4. 所需条件：需在Harbor创建一个项目并上传镜像到Harbor

Harbor扫描漏洞

  1. 浏览器点击审查服务可看见刚刚添加的扫描器
  2. 点击漏洞——扫描，可扫描所有镜像
  3. 选择一个自建的项目——镜像仓库——点击一个镜像——选中镜像——扫描，可扫描指定镜像

Harbor查看Docker layers

项目——进入一个项目——进入一个镜像——查看镜像详细信息——点击构建历史
命令下方每一行即为Docker的每一layer

参考

Harbor镜像漏洞扫描：https://www.cnblogs.com/Dev0ps/p/12401615.html
Harbor搭建与使用,配置漏洞扫描：https://blog.csdn.net/weixin_42851117/article/details/106682628
Harbor使用：https://www.cnblogs.com/adjk/p/11043856.html

]]> <h1 id="容器相关技术"><a href="#容器相关技术" class="headerlink" title="容器相关技术"></a>容器相关技术</h1><h2 id="Harbor查看镜像安全"><a href="#Harbor查看镜像安全" class="head Docker(四)容器存储和网络基础(新建虚拟机版) http://www.ifunan.cn/posts/924dfae8/ 2020-10-05T14:17:59.000Z 2020-10-23T03:21:09.968Z 容器存储和网络基础(新建虚拟机版)

实验准备

两种方法：
方法一： 一台全新的虚拟机，并完成Docker(一)安装
方法二： 如果有项目一的快照，则不需要新建虚拟机,克隆快照后修改IP地址即可

克隆快照方法：

  1. 打开快照编辑器，选择快照并开始克隆
  2. 进入后选择需要克隆的快照
  3. 选择链接克隆
  4. 指定克隆后的虚拟机名称以及克隆虚拟机的存储位置，完成克隆
  5. 克隆完成后进入修改IP地址

关闭防火墙及SeLinux

  1. 关闭SELinux
    sed -i 's/SELINUX=.*/SELINUX=disabled/g' /etc/selinux/config
    setenforce 0
  2. 关闭防火墙及防火墙的开机自启动
    systemctl stop firewalld.service
    systemctl disable firewalld.service

Docker-compose编排工具

  1. 安装Docker编排工具docker-compose(Harbor依赖该服务)
    yum -y install epel-release.noarch
    yum makecache fast
    yum -y install docker-compose.noarch

Docker-compose部署GitLab

  1. 新建gitlab安装目录
    mkdir /usr/local/gitlab/
    cd /usr/local/gitlab/
  2. 新建配置文件
    vi docker-compose.yml并添加以下内容(注意IP改为你的IP和配置项的缩进格式)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    version: '3'
    services:
      web:
        image: 'twang2218/gitlab-ce-zh'
        restart: always
        hostname: 'IP地址'
        environment:
          TZ: 'Asia/Shanghai'
          GITLAB_OMNIBUS_CONFIG: |
            external_url 'http://IP地址'
            gitlab_rails['gitlab_shell_ssh_port'] = 2222
            unicorn['port'] = 8888
            nginx['listen_port'] = 80
        ports:
          - '80:80'
          - '8443:443'
          - '2222:22'        
        volumes:    
          - ./config:/etc/gitlab
          - ./data:/var/opt/gitlab
          - ./logs:/var/log/gitlab
  3. 创建gitlab所需使用的相关目录(此步骤可忽略，也可将上边配置文件的volumes选项修改为此路径)
    mkdir /opt/gitlab/{config,data,logs} -p
  4. 拉取gitlab中文版镜像
    docker pull twang2218/gitlab-ce-zh
  5. 查看镜像是否拉取成功
    docker images
  6. 重启Docker
    systemctl restart docker.service
  7. 启动gitlab的容器
    docker-compose up -d
  8. 查看容器是否正常运行
    docker ps -a

GitLab相关操作

GitLab创建项目

  1. 浏览器输入http://IP地址,第一次访问需设置密码(账户名：root)
  2. 新建一个项目,项目名称随意填写，设置好后点击create project创建项目

  3. 创建好项目后如下图所示，点击按钮复制项目ssh地址，之后会用到

添加密钥

  1. 在Linux中生成密钥(输入命令后三次回车)
    ssh-keygen
  2. 进入文件复制ssh密钥
    vi /root/.ssh/id_rsa.pub
  3. 回到浏览器点击右边的头像——设置
  4. 将复制的密钥添加到gitlab中,点击Add key添加密钥

Git上传代码到Gitlab仓库

  1. 移动到任意一个目录下，克隆远程仓库到本地,仓库地址为上边复制过的SSH地址
    cd /root
    git clone 你的仓库地址
    cd 仓库名称

  2. 添加git账户
    git config --global user.name "自定义账户名"

    例：git config --global user.name "root"

  3. 添加git邮箱
    git config --global user.email "你的邮箱"

    例：git config --global user.email "1186174184@qq.com"

  4. 上传代码到GitLab(操作与Windows里上传到Github操作一样),以下操作省略详细步骤
    git add .
    git commit -m "1.0.0"
    git push origin master

  5. 推送代码后再次查看浏览器上的GitLab仓库,可看见上传成功的结果

]]> <h1 id="容器存储和网络基础-新建虚拟机版"><a href="#容器存储和网络基础-新建虚拟机版" class="headerlink" title="容器存储和网络基础(新建虚拟机版)"></a>容器存储和网络基础(新建虚拟机版)</h1><h2 id="实验准备">< Docker(四)容器存储和网络基础(修改端口版) http://www.ifunan.cn/posts/f125ee8b/ 2020-10-05T14:07:59.000Z 2020-10-15T08:16:57.888Z 写在开始

此实验将Harbor和GitLab装在了同一台虚拟机中，虽然修改了GitLab的端口，但经实验因个体差异导致某些电脑修改端口后GitLab也无法启动，故有了第二篇文档：容器存储和网络基础(新建虚拟机版)
第二篇文档将GitLab独立出来，解决了Harbor和GitLab的端口问题，请根据自身情况选择合适的方案

容器存储和网络基础(修改端口版)

开启Harbor

  1. 关闭SELinux
    sed -i 's/SELINUX=.*/SELINUX=disabled/g' /etc/selinux/config
    setenforce 0
  2. 进入Harbor的安装目录下
    cd /root/harbor/
  3. 虚拟机重启后需要手动开启Harbor
    docker-compose start
  4. 或者可以设置Harbor为开机自启动
    vi harbor.service 在文件中添加以下内容：
    1
    2
    3
    4
    5
    6
    7
    [Unit]
    Description=Redis
    After=network.target
    [Service]
    ExecStart= /usr/bin/docker-compose start
    [Install]
    WantedBy=multi-user.target

Docker-compose部署GitLab

  1. 新建gitlab安装目录
    mkdir /usr/local/gitlab/
    cd /usr/local/gitlab/
  2. 新建配置文件
    vi docker-compose.yml并添加以下内容(注意IP改为你的IP和配置项的缩进格式)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    version: '3'
    services:
      web:
        image: 'twang2218/gitlab-ce-zh'
        restart: always
        hostname: '192.168.200.120'
        environment:
          TZ: 'Asia/Shanghai'
          GITLAB_OMNIBUS_CONFIG: |
            external_url 'http://192.168.200.120:82'
            gitlab_rails['gitlab_shell_ssh_port'] = 2222
            unicorn['port'] = 8888
            nginx['listen_port'] = 82
        ports:
          - '82:82'
          - '8443:443'
          - '2222:22'        
        volumes:    
          - ./config:/etc/gitlab
          - ./data:/var/opt/gitlab
          - ./logs:/var/log/gitlab

    注：此处因为将Harbor和GitLab装在了同一台服务器上，为避免端口冲突，所以将GitLab的Http端口设置为82。如果82端口不行，改为8181


3. 创建gitlab所需使用的相关目录(此步骤可忽略，也可将上边配置文件的volumes选项修改为此路径)
mkdir /opt/gitlab/{config,data,logs} -p
4. 拉取gitlab中文版镜像
docker pull twang2218/gitlab-ce-zh
5. 查看镜像是否拉取成功
docker images
6. 启动gitlab的容器
docker-compose up -d
7. 查看容器是否正常运行
docker ps -a

8. 设置gitlab开机启动(第二句echo需设置成你自己的安装目录下)
chmod +x /etc/rc.local
echo "cd /usr/local/gitlab && docker-compose up -d" >> /etc/rc.local

GitLab相关操作

GitLab创建项目

  1. 浏览器输入http://IP地址:82,第一次访问需设置密码(账户名：root,且此处需要指定端口号为82)
  2. 新建一个项目,项目名称随意填写，设置好后点击create project创建项目

  3. 创建好项目后如下图所示，点击按钮复制项目ssh地址，之后会用到

添加密钥

  1. 在Linux中生成密钥(输入命令后三次回车)
    ssh-keygen
  2. 进入文件复制ssh密钥
    vi /root/.ssh/id_rsa.pub
  3. 回到浏览器点击右边的头像——设置
  4. 将复制的密钥添加到gitlab中,点击Add key添加密钥

Git上传代码到Gitlab仓库

  1. 移动到任意一个目录下，克隆远程仓库到本地,仓库地址为上边复制过的SSH地址
    cd /root
    git clone 你的仓库地址
    cd 仓库名称

  2. 添加git账户
    git config --global user.name "自定义账户名"

    例：git config --global user.name "root"

  3. 添加git邮箱
    git config --global user.email "你的邮箱"

    例：git config --global user.email "1186174184@qq.com"

  4. 上传代码到GitLab(操作与Windows里上传到Github操作一样),以下操作省略详细步骤
    git add .
    git commit -m "1.0.0"
    git push origin master

  5. 推送代码后再次查看浏览器上的GitLab仓库,可看见上传成功的结果

扩展

重启服务器后启动Gitlab

  1. 进入Gitlab的安装目录下
    cd /usr/local/gitlab/
  2. 启动Gitlab
    docker-compose up -d
  3. 可使用lsof查看端口占用情况
    lsof -i :80
  4. 导出镜像
    docker save 镜像ID > 导出的名称.tar
  5. 导入镜像
    docker load -i twang2218-gitlab-ce-zh.tar
  6. 修改镜像名称
    docker tag 镜像ID 修改后ID
  7. 停止创建的容器
    docker-compose stop
  8. 重启当前目录下的容器
    docker-compose -f docker-compose.yml up -d
  9. 删除容器
    docker rm 选项 容器ID

    -f :强制删除一个运行中的容器

-l :移除容器间的网络连接，而非容器本身
-v :删除与容器关联的卷

参考链接

Docker-compose部署gitlab中文版：https://www.cnblogs.com/linuxk/p/10100431.html#2%E3%80%81%E5%AE%89%E8%A3%85docker-compose
Docker-compose安装GitLab：https://blog.csdn.net/weixin_44155097/article/details/102550036
Git相关命令：https://www.cnblogs.com/wwtao/p/12019190.html
GitLab使用自定义端口01：https://blog.csdn.net/shan165310175/article/details/92797199
GitLab使用自定义端口02：https://blog.csdn.net/qq_37171817/article/details/107791947

]]> <h1 id="写在开始"><a href="#写在开始" class="headerlink" title="写在开始"></a>写在开始</h1><p>此实验将Harbor和GitLab装在了同一台虚拟机中，虽然修改了GitLab的端口，但经实验因个体差异导致某些电脑修改端口 Docker(三)应用容器化 http://www.ifunan.cn/posts/6f33d2a6/ 2020-09-24T00:26:57.000Z 2020-10-15T08:16:57.892Z 应用容器化

安装

  1. 安装Docker编排工具docker-compose(Harbor依赖该服务)
    yum -y install epel-release.noarch
    yum makecache fast
    yum -y install docker-compose.noarch

  2. 解压harbor安装包(将包传至目录后再解压)
    tar -zxvf harbor-offline-installer-v2.0.1.tgz

  3. 关闭防火墙和Selinux
    systemctl stop firewalld.service
    setenforce 0

  4. 关闭防火墙后需要重启docker，不然会报错
    systemctl restart docker.service

配置

  1. 进入目录
    cd harbor/
  2. 备份主配置文件
    cp harbor.yml.tmpl harbor.yml
  3. 进入配置文件(将文件里的hostname值修改为hostname: 你的IP地址)
    vi harbor.yml
  4. 注释掉https相关的内容,全部配置如下图所示
  5. 保存修改后安装Harbor服务
    ./install.sh
  6. 查看Harbor的状态
    docker-compose ps
  7. 在浏览器访问,http://你的IP地址,默认账号admin,密码Harbor12345

Harbor操作

  1. 进入网页后新建一个项目
  2. 修改docker配置文件,添加以下内容(注意红圈处有一个逗号)
    vi /etc/docker/daemon.json
    "insecure-registries":["你的ip地址"]
  3. 重启docker
    systemctl restart docker
  4. 登录自建的Harbor镜像仓库(账号密码为登录网页的密码)
    docker login 你的IP地址
  5. 使用tag更改一个镜像
    docker tag choerodon/cibase:latest 你的IP地址/刚才新建项目的名称/choerodon

    例子：docker tag choerodon/cibase:latest 192.168.200.120/test/choerodon

  6. 将镜像推送到仓库
    docker push 你的IP地址/刚才新建项目的名称/choerodon

    例子：docker push 192.168.200.120/test/choerodon

  7. 下载镜像
    docker pull 你的IP地址/刚才新建项目的名称/choerodon:latest

    例子：docker pull 192.168.200.120/test/choerodon:latest

]]> <h1 id="应用容器化"><a href="#应用容器化" class="headerlink" title="应用容器化"></a>应用容器化</h1><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安 Docker(二)常用操作 http://www.ifunan.cn/posts/12cd49f3/ 2020-09-16T16:11:23.000Z 2020-10-15T08:16:57.890Z Docker常用操作

1、查询docker镜像
docker search choerodon/cibase
参数说明:
-s 10：列出收藏数不小于10的镜像
–no-trunc：显示完整镜像描述
–automated：只列出automated build类型的镜像

例2：查询nginx镜像

详解：
NAME：镜像仓库源的名称
DESCRIPTION：镜像的描述
STARS：点赞、喜欢数(类似Github的star)
AUTOMATED：是否支持自动构建

2、下载镜像
docker pull choerodon/cibase
参数说明：
-a：拉取所有目标镜像(即拉去含有名字的所有镜像)
–disable-content-trust：忽略镜像的校验,默认开启

3、查看所有镜像
docker images
参数说明：
-a：列出本地所有镜像(包括中间映像层,默认是过滤掉的)
–digests：显示镜像摘要信息
–no-trunc：显示完整镜像信息
-q：只显示镜像ID

详解：
REPOSITORY：镜像名称
TAG：镜像的标签
IMAGE ID：镜像ID
CREATED：镜像创建时间
SIZE：镜像大小

4、创建并运行一个容器
docker run -tid choerodon/cibase:latest
参数说明：
-d：后台运行并返回容器ID
-i：交互模式运行容器,通常与-t连用
-t：为容器重新分配一个伪输入终端,通常与-i连用
–name=”youName”：指定容器名称
-p：指定端口映射,格式：主机端口：容器端口
-v：建立本地路径到容器路径的映射，格式：/本地路径：/容器内路径

5、查看正在运行的容器
docker ps -a
参数说明：
-a：显示所用容器，包括未运行的
-l：显示最近创建的容器
-n：列出最近创建的n个容器
-s：显示总的文件大小

详解：
CONTAINER ID：容器ID
IMAGE：使用的镜像
COMMAND：启动容器时运行的命令
CREATED：容器创建时间
PORTS: 容器的端口信息和使用的连接类型(tcp/udp)
NAMES: 自动分配的容器名称
STATUS：容器状态
有7种状态：
created（已创建）
restarting（重启中）
running（运行中）
removing（迁移中）
paused（暂停）
exited（停止）
dead（死亡）

]]> <h1 id="Docker常用操作"><a href="#Docker常用操作" class="headerlink" title="Docker常用操作"></a>Docker常用操作</h1><p>1、查询docker镜像<br><code>docker search ch Docker(一)安装 http://www.ifunan.cn/posts/4533a720/ 2020-09-10T03:05:32.000Z 2020-10-15T08:16:57.886Z Docker安装

安装Docker

  1. 删除已安装的Docker
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    sudo yum remove docker \
    docker-client \
    docker-client-latest \
    docker-common \
    docker-latest \
    docker-latest-logrotate \
    docker-logrotate \
    docker-selinux \
    docker-engine-selinux \
    docker-engine
  2. 配置阿里云Docker Yum源
    yum install -y yum-utils device-mapper-persistent-data lvm2
    yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
  3. 查看Docker版本
    yum list docker-ce --showduplicates
  4. 安装较旧版本（需要指定完整的 rpm 包的包名，并且加上–setopt=obsoletes=0 参数）
    1
    2
    3
    yum install -y --setopt=obsoletes=0 \
    docker-ce-17.03.2.ce-1.el7.centos.x86_64 \
    docker-ce-selinux-17.03.2.ce-1.el7.centos.noarch
  5. 安装Docker最新版本(最新版本不需要指定版本号)
    yum install docker-ce
  6. 启动Docker服务
    systemctl enable docker
    systemctl start docker

Docker添加阿里云镜像加速器

配置阿里云加速器

  1. 登录阿里云右上角登录或注册
  2. 在搜索栏输入容器镜像服务
  3. 找到容器镜像服务，点击立即开通
  4. 点击进入后，找到下方的镜像加速器并点击
  5. 点击后即可看见加速器地址，复制后继续后边的步骤即可

将加速器配置到docker的daemon.json文件中

  1. 编辑daemon.json(新建)
    vim /etc/docker/daemon.json
  2. 设置加速器地址
    1
    2
    3
    { 
     "registry-mirrors": ["你的加速器地址"]
    }
  3. 最后重新加载重启Docker
    systemctl daemon-reload
    systemctl restart docker
  4. 测试Docker是否安装成功
    docker -h
]]> <h1 id="Docker安装"><a href="#Docker安装" class="headerlink" title="Docker安装"></a>Docker安装</h1><h2 id="安装Docker"><a href="#安装Docker" class="head Shell通配符 http://www.ifunan.cn/posts/b707d6e0/ 2020-05-21T04:27:12.000Z 2020-10-15T08:16:57.905Z Shell通配符

Shell常用通配符

字符含义实例
*匹配0或多个字符a*b,表示a与b之间可以有任意长度的任意字符，也可以一个都没有,如aabcb、axyzb、a012b、ab
?匹配任意一个字符a?b,表示a与b之间必须也只能有一个字符,可以是任意字符,如aab、abb、acb、a0b
[list]匹配list中的任意单一字符a[xyz]b,表示a与b之间必须也只能有一个字符,但只能是x或y或z,如:axb、ayb、azb
[!list]匹配除list中的任意单一字符a[!0-9],表示a与b之间必须也只能有一个字符,但不能是阿拉伯数字,如axb、aab、a-b
[c1-c2]匹配c1-c2中的任意单一字符,如：[0-9][a-z]a[0-9]b,表示0与9之间必须也只能有一个字符如a0b、a1b、a9b
{string1,string2}匹配string1或string2（或更多）其一字符串a{abc,xyz,123}b,表示a与b之间只能是abc或xzy或123

Shell元字符

字符说明
^只匹配行首
$只匹配行尾
*只一个单字符后紧跟*，匹配0个或多个此单字符
+匹配一个或多个字符
?匹配模式出现频率，例如使用/XY?Z/匹配X Y Z或Y Z
[]只匹配[]内字符。可以是单个字符，也可以是字符序列。可以使用-表示[]内字符序列范围，如用[1-5]代替[1 2 3 4 5]
[x-y]匹配以字符范围组成的组中的一个字符
[^]匹配一个不在范围内的字符
.只匹配任意单字符
pattern{n}只用来匹配前面pattern出现次数,n为次数
pattern{n,}m含义同上,但次数最少为n*
pattern{n,m}含义同上,但pattern出现次数在n与m之间

Shell转义字符

字符说明
‘’（单引号）又叫硬转义,其内部所有的Shell元字符、通配符都会被关掉。注：硬转义中不允许出现’（单引号）
(反斜杠)又叫转义，去除其后紧跟的元字符或通配符的特殊意义

Shell逻辑运算符及表达式

条件运算符

运算符号代表意义应用说明
=等于整型或字符串比较:str1=str2字符串str1和字符串str2相等时返回真,如果在[]中,只能是字符串
==等于整型或字符串比较:str1==str2字符串str1和字符串str2相等时返回真,如果在[]中,只能是字符串
!=不等于整型或字符串比较:str1!=str2字符串str1和字符串str2不相等时返回真,如果在[]中,只能是字符串
<小于整型或字符串比较:str1<str2按字典顺序排序,字符串str1在字符串str2之前,在[]中,它表示字符串,如需使用请转义<
>大于整型或字符串比较:str1>str2在[]中,它表示字符串,如需使用请转义>
-eq等于整型比较:int1 -eq int2如果int1等于int2,则返回真
-ne不等于整型比较:int1 -ne int2如果int1不等于int2,则返回真
-lt小于整型比较:int1 -lt int2如果int1小于int2,则返回真
-gt大于整型比较:int1 -gt int2如果int1大于int2,则返回真
-le小于或等于整型比较:int -le int2如果int1小于或等于int2,则返回真
-ge大于或等于整型比较:int1 -ge int2如果int1大于或等于int2,则返回真
-z空字符串字符串比较:-z string字符串string为空串(长度为0）时返回真
-n非空字符串字符串比较:-n string字符串string为非空字符串时返回真

逻辑运算符

运算符号代表意义应用说明
-a双方都成立(and)逻辑表达式 -a 逻辑表达式在[]表达式中使用
-o单方成立(or)逻辑表达式 -o 逻辑表达式在[]表达式中使用
!逻辑否,条件为假,结果为真  
&&双方都成立（and）逻辑表达式 && 逻辑表达式在[[]]表达式中使用
\\ 单方成立(or)

文件和目录判断符

逻辑符号代表意义应用说明
-f判断文件是否存在-f filename当filename存在并且是正规文件时返回真
-d判断目录是否存在-d pathname当pathname存在并且是一个目录时返回真
-b判断是否为一个块文件-b filename当filename存在并且是块文件时返回真(返回0)
-c判断是否为一个字符文件-c filename当filename存在并且是字符文件时返回真
-S判断是否为一个socket-S filename当filename存在并且是socket时返回真
-L判断是否为一个符号链接文件-L filename当filename存在并且是符号链接文件时返回真
-e判断文件或目录是否存在-e pathname当由pathname指定的文件或目录存在时返回真

程序的逻辑卷标判断符

逻辑符号代表意义应用说明
-G判断是否由GID所执行的程序所拥有-G pathname当由pathname指定的文件或目录存在,并且属于当前进程有效用户ID的用户的用户组时返回真
-O判断是否由UID所执行的程序所拥有-O pathname当由pathname指定的文件或目录存在,并且被当前进程有效用户ID的用户拥有时返回真
-p判断是否为程序间传送信息的命名管道或FIFO-p filename当filename存在并且是命名管道时返回真

档案的属性判断符

逻辑符号代表意义应用说明
-r判断是否为可读的属性-r pathname当由pathname指定的文件或目录存在并且可读时返回真
-w判断是否为可以写入的属性-w pathname当由pathname指定的文件或目录存在并且可写时返回真
-x判断是否为可执行的属性-x pathname当由pathname指定的文件或目录存在并且可执行时返回真
-s判断是否为非空白档案-s filename当filename存在并且文件大小大于0时返回真
-u判断是否具有SUID的属性-u pathname当由pathname指定的文件或目录存在并且设置了SUID位时返回真
-g判断是否具有SGID的属性-g pathname当由pathname指定的文件或目录存在并且设置了SGID位时返回真
-k判断是否具有粘滞的属性-k pathname当由pathname指定的文件或目录存在并且设置了“粘滞”位时返回真

两个档案之间的判断与比较符

逻辑符号代表意义应用说明
-nt第一个比第二个档案新file1 -nt file2file1比file2新时返回真
-ot第一个比第二个档案旧file1 -ot file2file1比file2旧时返回真
-ef第一个与第二个档案为同一个档案file1 -ef file2file1和file2是同一个档案时返回真
]]> <h1 id="Shell通配符"><a href="#Shell通配符" class="headerlink" title="Shell通配符"></a>Shell通配符</h1><h2 id="Shell常用通配符"><a href="#Shell常用通配符" class=" Ceph分布式存储系统搭建 http://www.ifunan.cn/posts/a0556a43/ 2020-04-26T04:35:55.000Z 2020-10-15T08:16:57.893Z Ceph分布式存储系统搭建

实验环境：

主机名CPU核心系统磁盘IP地址（NAT）系统
ceph011*240GB192.168.200.20CentOS 7
ceph021*240GB192.168.200.30CentOS 7
ceph031*240GB192.168.200.40CentOS 7

注：以下操作须在不同server上进行，请看清后再行操作

环境配置

ceph01 & ceph02 & ceph03

  1. 配置IP到主机名映射
    [root@ceph01]# echo "192.168.200.20 ceph01" >> /etc/hosts
    [root@ceph01]# echo "192.168.200.30 ceph02" >> /etc/hosts
    [root@ceph01]# echo "192.168.200.40 ceph03" >> /etc/hosts
  2. 关闭SELinux
    [root@ceph01]# sed -i 's/SELINUX=.*/SELINUX=disabled/g' /etc/selinux/config
    [root@ceph01]# setenforce 0
    [root@ceph01]# getenforce
  3. 关闭防火墙
    [root@ceph01]# iptables -F
    [root@ceph01]# iptables -X
    [root@ceph01]# iptables -Z
    [root@ceph01]# systemctl stop firewalld
    [root@ceph01]# systemctl disable firewalld.service

    请在ceph02和ceph03上重复以上操作

ceph01

1.设置SSH无密码登录ceph02和ceph03
[root@ceph01]# ssh-keygen
[root@ceph01]# ssh-copy-id -i /root/.ssh/id_rsa.pub root@ceph02
[root@ceph01]# ssh-copy-id -i /root/.ssh/id_rsa.pub root@ceph03
2. 安装时钟同步
[root@ceph01]# yum install ntp ntpdate -y
3. 配置ntp,注释掉其他ntp服务器,设置为本机提供时钟同步
[root@ceph01]# vi /etc/ntp.conf
添加以下两行：

1
2
server 127.127.1.0
fudge 127.127.1.0 stratum 10

[root@ceph01]# systemctl start ntpd.service
[root@ceph01]# systemctl enable ntpd.service

ceph02 & ceph03

  1. 同步为ceph01的时间
    [root@ceph02]# yum install ntp ntpdate -y
    [root@ceph02]# ntpdate 192.168.200.20
    [root@ceph02]# systemctl enable ntpd.service
    [root@ceph02]# systemctl status ntpd.service

    ceph03重复以上操作

ceph01

  1. 安装FTP
    [root@ceph01]# yum install vsftpd -y
  2. 设置FTP匿名访问的路径
    [root@ceph01]# echo "anon_root=/files/" >> /etc/vsftpd/vsftpd.conf
    [root@ceph01]# systemctl restart vsftpd
    [root@ceph01]# systemctl enable vsftpd
  3. 配置yum源（设置光驱连接到虚拟机中）
    [root@ceph01]# mkdir -p /files/centos
    [root@ceph01]# mount /dev/cdrom /mnt
    [root@ceph01]# cp -rfv /mnt/* /files/centos
    [root@ceph01]# umount /mnt
    更换XianDian-IaaS-v2.0-20170420.iso到光驱中
    [root@ceph01]# mount /dev/cdrom /mnt
    [root@ceph01]# cp -rfv /mnt/* /files
    [root@ceph01]# umount /mnt
  4. 安装python包
    [root@ceph01]# rpm -ivh /files/iaas-repo/base/python-backports-1.0-8.el7.x86_64.rpm
    [root@ceph01]# rpm -ivh /files/iaas-repo/base/python-backports-ssl_match_hostname-3.4.0.2-4.el7.noarch.rpm
    [root@ceph01]# rpm -ivh /files/iaas-repo/base/python-setuptools-0.9.8-4.el7.noarch.rpm

ceph01 & ceph02 & ceph03

[root@ceph01]# cd /etc/yum.repos.d
[root@ceph01]# mkdir backup
[root@ceph01]# mv C* backup/
[root@ceph01]# vi local.repo
添加如下内容：

1
2
3
4
5
6
7
8
9
10
[centos]
name=centos
baseurl=ftp://192.168.200.20/centos
gpgcheck=0
enable=1
[iaas]
name=iaas
baseurl=ftp://192.168.200.20/iaas-repo
gpgcheck=0
enable=1

[root@ceph01]# yum clean all
[root@ceph01]# yum repolist

安装配置Ceph

ceph01

  1. 安装Ceph
    [root@ceph01]# yum install ceph-deploy -y
    [root@ceph01]# mkdir /etc/ceph
    [root@ceph01]# cd /etc/ceph
  2. 创建新的集群
    [root@ceph01]# ceph-deploy new ceph01
  3. 所有节点安装Ceph
    [root@ceph01]# ceph-deploy install ceph01 ceph02 ceph03
  4. 检查Ceph版本
    [root@ceph01]# ceph -v
  5. 创建第一个Ceph monitor
    [root@ceph01]# ceph-deploy --overwrite-conf mon create-initial
  6. 查看集群状态
    [root@ceph01]# ceph -s
  7. 检查ceph01上可用磁盘
    [root@ceph01]# ceph-deploy disk list ceph01
  8. 创建OSD所用目录并设置权限
    [root@ceph01]# mkdir -p /opt/osd1
    [root@ceph01]# chmod 777 /opt/osd1

ceph02

[root@ceph01]# mkdir -p /opt/osd2
[root@ceph01]# chmod 777 /opt/osd2

ceph03

[root@ceph01]# mkdir -p /opt/osd3
[root@ceph01]# chmod 777 /opt/osd3

ceph01

  1. 创建OSD节点
    [root@ceph01]# ceph-deploy osd prepare ceph01:/opt/osd1 ceph02:/opt/osd2 ceph03:/opt/osd3

  2. 激活OSD节点
    [root@ceph01]# ceph-deploy osd activate ceph01:/opt/osd1 ceph02:/opt/osd2 ceph03:/opt/osd3

  3. 检查集群状态
    [root@ceph01]# ceph -s

    health(健康)显示：OK则为成功
    cluster 147354a2-e174-4ea6-8464-58f1839fbd2f
    health HEALTH_OK
    monmap e1: 1 mons at {ceph-node1=192.168.200.211:6789/0}
    election epoch 2, quorum 0 ceph-node1
    osdmap e13: 3 osds: 3 up, 3 in
    pgmap v19: 64 pgs, 1 pools, 0 bytes data, 0 objects
    25907 MB used, 55365 MB / 81272 MB avail
    64 active+clean

  4. 开放权限给其他节点，进行灾备处理
    [root@ceph01]# ceph-deploy admin ceph-node{1,2,3}
    [root@ceph01]# chmod +r /etc/ceph/ceph.client.admin.keyring

Ceph运维操作

ceph01 & ceph02 & ceph03

  1. 检查ceph的安装状态
    [root@ceph01]# ceph status
  2. 观察集群的健康状况
    [root@ceph01]# ceph -w
  3. 检查ceph monitor仲裁状态
    [root@ceph01]# ceph quorum_status --format json-pretty
  4. 导出monitor信息
    [root@ceph01]# ceph mon dump
  5. 检查集群使用状态
    [root@ceph01]# ceph df
  6. 检查ceph monitor、osd、PG状态
    [root@ceph01]# ceph mon stat
    [root@ceph01]# ceph osd stat
    [root@ceph01]# ceph pg stat
  7. 列表pg，导出pg
    [root@ceph01]# ceph pg dump
  8. ceph 存储池列表
    [root@ceph01]# ceph osd lspools
  9. 检查osd的crush
    [root@ceph01]# ceph osd tree
  10. 列表集群的认证密钥
    [root@ceph01]# ceph auth list
]]> <h1 id="Ceph分布式存储系统搭建"><a href="#Ceph分布式存储系统搭建" class="headerlink" title="Ceph分布式存储系统搭建"></a>Ceph分布式存储系统搭建</h1><p>实验环境：</p> <table> <thead> Ansible安装配置 http://www.ifunan.cn/posts/bfa5a896/ 2020-04-21T16:35:56.000Z 2020-10-15T08:16:57.897Z Ansible安装配置

概要：Ansible是一款基于Python开发的自动化运维开源工具，主要实现批量系统配置、批量程序部署、批量运行命令、批量执行任务等。

实验环境：

主机类别主机名IP地址操作系统
Ansible 控制主机ansible-ctl192.168.200.20CentOS 7
Ansible 被控节点web01192.168.200.30CentOS 7
Ansible 被控节点web02192.168.200.40Cent0S 7

安装Ansible

此处使用阿里云的源（需要联网操作）
[root@localhost ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
安装Ansible
[root@localhost ~]# yum install ansible -y

配置Ansible环境

Ansible的配置文件以ini格式存储。在运行Ansible命令时，命令将采用预先设定的顺序查找配置文件，默认步骤如下：

  • 首先检查系统环境变量；
  • 其次，检查当前目录下的ansible.cfg配置文件；
  • 再次，检查当前用户home目录下的.ansible.cfg文件；
  • 最后，检查ansible默认yum安装时自动产生的文件/etc/ansible/ansible.cfg。

修改配置文件/etc/ansible/ansible.cfg

[root@localhost ~]# vi /etc/ansible/ansible.cfg
修改如下参数并取消注释:

1
2
3
4
5
6
7
8
inventory      = /etc/ansible/hosts
library        = /usr/share/my_modules/
forks          = 5
sudo_user      = root
remote_port    = 22
host_key_checking = False
timeout = 60
log_path = /var/log/ansible.log

配置控制主机SSH无密码访问被控节点

  1. Ansible控制主机创建密钥(默认在 /root/.ssh/id_rsa.pub)，id_rsa为私钥，id_rsa.pub为公钥
    [root@localhost ~]# ssh-keygen
  2. 将此公钥下发到两个被控节点(弹出提出输入 yes即可）
    [root@localhost ~]# ssh-copy-id -i /root/.ssh/id_rsa.pub root@192.168.200.30
    [root@localhost ~]# ssh-copy-id -i /root/.ssh/id_rsa.pub root@192.168.200.40
  3. 验证无密码SSH是否成功
    [root@localhost ~]# ssh root@192.168.200.30
    [root@localhost ~]# exit
    [root@localhost ~]# ssh root@192.168.200.40
    [root@localhost ~]# exit

测试Ansible

主机连通

  1. 配置ansible被控节点的主机与组(注意去掉注释）
    [root@localhost ~]# vi /etc/ansible/hosts
  2. 使用Ansible的ping模块对单台主机分别进行ping操作，出现如图所示表示连通
    [root@localhost ~]# ansible 192.168.100.129 -m ping

    注：如上命令如由输出WARNING信息，可按提示更改主配置文件ansible.cfg，取消警告信息

  3. ping webservers组
    [root@localhost ~]# ansible webservers -m ping

在控制主机发送命令到被控节点

  1. 批量执行命令
    [root@localhost ~]# ansible webservers -m command -a "pwd"
  2. 在用户home目录下创建一个资源清单文件invertory.cfg并写入内容
    [root@localhost ~]# ansible webservers -m command -a "touch /root/inventory.cfg"
    [root@localhost ~]# ansible webservers -m command -a "echo Hello Ansible! > /root/inventory.cfg"
]]> <h1 id="Ansible安装配置"><a href="#Ansible安装配置" class="headerlink" title="Ansible安装配置"></a>Ansible安装配置</h1><p>概要：Ansible是一款基于Python开发的自动化运维开源工具，