vault backup: 2022-05-07 23:03:15

随时随地/Yan Ruyu_Vue学习笔记.md

@@ -0,0 +1,205 @@
+![](/images/welcome-to-vue.png)
+
+### Vue基本认知
+
+**Vue是一个JavaScript框架，它的特点在于使用者不用再思考DOM的操作，一切都由Vue来承担，这就是Vue的MVVM模式，使用Vue框架你只需要操作数据而不是DOM。**
+
+Vue的v-for: 是Vue中一个简单的for循环，目前学到的课程中它可以用来遍历数组。
+Vue的v-on: 是Vue中用于绑定事件的指令，它的作用是绑定一个事件，它可以简写成@。
+Vue的v-bind: 用于传递数据，它可以帮你在组件之中传递值。
+Vue的v-model: 数据的双向绑定。
+
+Vue的el: 是Vue实例的“管辖范围”，它用于确定Vue实例的生效区域。
+Vue的data: 是Vue实例的数据区域，它一般用于放置Vue实例中的数据内容。
+Vue的methods: 用于放置Vue实例的方法，任何Vue中的使用的函数方法都要在其中定义。
+
+### Vue 的深入理解
+
+#### Vue的组件间传值
+
+需要用到`props`、`v-bind`、`$emit`等方法的配合。
+
+##### Vue的生命周期函数
+Vue在实例生成之前和生成之后总共有8个生命周期函数，他们分别是：
+
+* `beforeCreate`：在实例生成之前
+* `created`：实例生成之后
+* `beforeMount`：实例渲染之前
+* `mounted`：实例渲染之后
+* `beforeUpdata`：实例数据修改之前
+* `updatad`：实例数据修改之后
+* `beforeDestroy`：实例销毁之前
+* `destroyed`：实例销毁之后
+
+<!--more-->
+
+#### Vue的模板语法
+
+Vue中的模板语法有插值表达式、`v-text`、`v-html`等等。
+
+任何v-开头的Vue指令，后面接的都是JS的表达式，也就是说可以在后面接上加减乘除等JS语句，插值表达式也是如此。
+
+#### 计算属性，方法和侦听器
+
+##### 计算属性 ```computed```：
+直接通过属性名就能使用，因为原因和上面说的一样：
+>任何v-开头的Vue指令，后面接的都是JS的表达式。也就是说可以在后面接上加减乘除等JS语句。
+>
+
+缓存功能在计算的成员值不变的情况下将不会进行第二次计算，节省资源。
+##### 方法methods：
+也可以直接通过属性名使用（注意方法独有的括号），但是它没有计算属性的缓存功能，在计算成员值不变的情况下每次都会重新计算一次，在网页元素比较多的情况下可能会有比较明显的资源浪费。
+##### 监听器watch：
+可以监听指定的方法，当监听的方法发生变化时会执行指定的操作，保留了计算属性的缓存功能。
+
+当以上三种方法同是适用的候，优先推荐计算属性 `computed`，既简洁，也保留了性能。
+
+#### 计算属性的getter和setter
+
+计算属性你可以使用 `Get`方法，通过其他值算出一个新值，也可以使用 `Set`方法，通过设置一个值改变相关联的值，从而使用计算属性的特性引起第二次计算。
+
+#### Vue中的样式绑定
+
+可以使用 `isActivated`来控制样式名字的显示和隐藏，在 `data` 或 `methods` 中设置 `isActivated` 为true就会绑定上CSS的样式。也可以使用数组来控制样式名字，设置数组的第一个值为空，标签就没有绑定CSS样式，设置数组第一个值为CSS样式名字则会绑定，还可以使用`V-bind:style="CSS样式名字"`的方式来进行绑定，这样CSS样式名字就是一个Vue的 `data` 值，可以在Vue的`data` 中控制它的属性，以此类推，这种方法后面也能接一个数组，更多样化。
+
+#### Vue的条件渲染
+
+##### v-if、v-else-if、v-else：
+`v-if`是一个Vue的指令，它的值决定了它所在的这个DIV标签是否渲染显示，每次的隐藏和显示都相当于删除和增加一个DOM元素，它还能搭配 `v-else` 或 `v-else-if`一起组合使用（警告，`v-if` 和 `v-else`、`v-else-if`必须紧靠在一起使用！）。
+由于Vue的特性，Vue在渲染网页的时候会尽量复用页面上已有的DOM，这可能会产生一些问题，为了解决这些问题就有`key`值这个概念，`key`值是独一无二的，Vue并不会复用key值不一样的DOM元素。
+
+##### v-show：
+`v-show` 与 `v-if`类似，但是它每次的隐藏和显示并非是在页面上删除和增加一个新的DOM，而是通过隐藏DOM标签，在相同的环境下，`v-show`所需要的性能相对要低于前者。
+
+#### Vue的列表循环
+
+##### key、数组操作：
+当使用`v-for`遍历来实现列表渲染编写`key`值时，考虑到性能和一些未知的问题，尽量不要使用数组的下标作为`key`值，而是使用数组中一些独一无二的值。
+
+当你直接对Vue的数组操作其下标时，数据会发生变化，但是页面不会发生变化，你需要使用Vue提供的7个数组操作方法来对数组进行操作，它们分别是：
+
+* `push`：向数组的末尾添加一个元素
+* `pop`：删除数组的最后一个元素
+* `shift`：删除数组的第一个元素
+* `unshift`：向数组的开头添加一个或多个元素
+* `splice`： 向数组中删除或添加元素
+* `sort`： 对数组进行排序
+* `reverse` 对数组进行取反
+
+还有通过改变数组的引用来实现对数据的操作，即直接改变遍历的数组，这种方法也能在数据变化的同时页面同时变化
+
+##### 遍历对象：
+列表渲染不但可以使用数组，也可以使用一个对象，使用的方式和数组相同，但是使用对象进行列表渲染时，网页并不会渲染对象的键名，而是直接显示对象的值，取而代替的是一个叫`key`的变量，其中对象的`index`和数组相同。
+
+在使用对象进行列表渲染时，你无法使用Vue提供的7个数组操作方法，你可以直接修改对象里的数据，数组变的同时页面也会跟着发生变化，但是和数字相同：直接往对象里添加数据时，页面是不会发生变化，与之类似，你可以直接改变对象的引用来实现数据的变化页面跟着变。
+
+#### 使用组件的细节点
+
+当你使用Vue的组件功能实现组件化时，你定义了一个组件，这个组件的名字可能与HTML自有的标准不符，使用这些组件的时候会产生一些问题，这时Vue提供了 `is="组件名"` 的语法来解决这种问题，这种方法的作用就是在遵守HTML标准的同时使用你自定义的组件。
+在组件中定义`data` 时，`data` 必须是一个函数而不是一个对象。
+
+##### ref：
+当你在HTML标签中使用ref时，你获取到的是 `ref` 对应标签的DOM元素，而当你在组件中使用 `ref` 时，你获取到的是子组件的引用。
+
+#### 父子组件传值
+
+##### 隐形的规定——单向数据流：
+父组件可以随意的向子组件传值，子组件也可以修改父组件传递过来的值，但是这样可能会导致一些问题，所以在子组件中使用父组件传递来的值时，需要使用子组件自己的 `data` 来复制一份来自父组件的值。
+
+##### emit()：
+子组件向父组件传值需要用的 `$emit()` 这个方法，这个方法不但可以向外触发事件，还可以在触发事件的同时传递一个值（向外触发的事件名可能不允许大写）。
+
+#### 组件参数校验与非props特性
+
+##### 参数校验：
+父组件可以任意向子组件传值，子组件对传递过来的值可以进行一个校验，也就是对传递的值有一定的约束，要使用这个特性，子组件里的props就不再是一个数组，而是一个对象，在对象中可以对传递过来的值进行一个约束，约束的条件还可以是一个数组，甚至是一个对象。
+当 `props` 是一个对象时，你可以使用 `validator` 这一个函数还对传递值进行校验，还可以使用 `default` 来规定一个未传值时的默认值，required来规定父组件必须传值，当然还有 `type` 来约束传递的值类型。
+##### 非props特性：
+当父组件向子组件传值的时候，子组件需要声明 `props` 来获取来自父组件的值，这个时候父组件传递的值并不会显示在子组件DOM中，但是子组件如果并没有声明 `props` 来获取父组件的值，那么这个值会显示在子组件的DOM中，这就是 `非props` 特性。
+
+##### 给组件绑定原生事件
+当你直接在子组件的中使用父组件的函数，这时候绑定的其实是组件的自定义事件，需要用 `$emit` 来向外触发和监听，你需要在子组件中的模板中绑定这个事件，这时候绑定和触发的才会是父组件的函数，如果你确实需要直接用子组件绑定父组件的事件，你可以在子组件的自定义事件后面添加 `.native`，这个时候绑定的也是父组件的函数。
+
+#### 非父子组件间的传值
+
+##### bus：
+在使用Vue进行组件化传值的时候，会遇到这样一个问题：非父子组件间传值。如果按照传统的方法将值一层一层传递上去，这样写出来的代码将会非常冗长，这是就有了 `bus`这个概念，在使用 `bus`前你需要事先给 `Vue.prototype.bus`赋值一个新的Vue实例： `Vue.prototype.bus = new Vue()`，这句话的意思在 `Vue.prototype`上挂载了一个名叫 `bus`的属性，它指向一个Vue的实例。每当你去创建一个Vue实例或者一个组件时，都会有bus这个属性。
+有了 `bus`，非父子组件间传值就变的非常容易了，就像子组件向父组件传值那样，传值组件中用 `bus`向外触发一个事件：`this.bus.$emit("事件名","数据")`。然后在Vue的8个生命周期钩子之一：`mounted`（实例渲染之后）中写一个函数，这个函数 `bus`中的 `$on`函数监听 `bus`向外触发的事件名和数据，再传递给接收组件。这样就完成了非父子组件间传值的需要。（警告：在接受组件的 `mounted`函数中操作数据时，`this`的作用域可能会发生变化，需要用 `var this_ = this`来保存 `this`的数据。）
+
+#### 在Vue中使用插槽
+
+##### 插槽：
+子组件内的某些元素需要由来自父组件或者其他组件的值来决定时，子组件自带的模板似乎就不是那么好用，这时Vue就提供了一个新的功能：插槽。插槽使用的方法很简单，只需要在子组件的模板中添加一行要插入的内容，之后在 `template`中相应的位置插入 `<slot></slot>`就可以了，在这个元素中还可以加入默认值以表示插槽未定义时的值。
+##### 具名插槽v-slot：
+假如你需要由来自两个不同的组件的值来显示在不同的插槽位置时，单单`<slot></slot>`是不够的，为了解决这个问题，Vue有一个新的指令 `v-slot`，它用于给插槽指定一个名字，之后在 `template`使用`name="插槽名"`就可以实现不同位置显示不同的插槽的需求。（注意：`v-slot`只能写在模板占位符即 `template`中）
+##### 作用域插槽slot_sope：
+组件化的使用过程中还有可能遇到一种情况：当子组件的 DOM结构应该由外部传递进来的时候，这个时候就要使用作用域插槽来解决问题，子组件插槽可以向父组件插槽传数据，子组件用 `v-bind`传，父组件用 `slot-scope="属性名"`接受数据。
+
+#### 动态组件与v-once指令
+
+##### 动态组件：
+在之前的笔记中可以看到：在一个 DOM元素中使用 `is="组件名"`的方式可以在不影响语法要求的情况下将原来的DOM元素替换为定义的组件，这种特性与`<component></component>`结合就成了Vue的动态组件（也可以不是`<component></component>`），在 `data`中定义一个变量，变量的值是组件名，通过改变这个变量的名为其他组件名来实现动态组件。
+##### v-once：
+在上面的方法每当 `is="组件名"`的值变化，在渲染显示一个组件的同时，Vue会将其他的未被渲染的组件隐藏销毁，也就是说用上面的方法每次动态组件切换时Vue就会渲染组件的同时和销毁隐藏的组件，如果频繁切换组件这种方法无疑会影响性能，`v-once`指令会将组件在隐藏时放入内存中，重新调用的时候再从内存中拿出来，通过 `v-once`指令，可以有效提高一些静态内容的展示效率。
+
+#### Vue中的CSS动画原理
+
+为Vue元素添加动画时，需要用`<transition>`标签包住元素，这样才能为Vue元素添加动画效果，当你不为`<transition>`标签指定一个`name`时，动画样式的前缀默认为`v-`，还可以在`<transition>`使用`-class`为`enter`和`leave`动画指定一个CSS样式名字，这样Vue就会使用你指定的样式名字。（这个时候就不在需要`name`）
+Vue动画从开始到结束会有3个过程即从开始到结束和中间，进入过程：Vue会为这三个不同的过程中添加不同的CSS样式：`enter`、`enter-active`、`enter-to`。
+与之相似，退出过程也会有三个CSS样式：`leave`、`leave-active`、`leave-to`。
+
+##### 为什么使用enter作为动画的入场开始：
+使用`enter`作为入场开始是因为动画在默认情况下`opacity`为1，这时需要在第一帧是将其写为0，在之后的进行中中过程中`enter`会被移除，这时`opacity`为0。
+##### 为什么使用leave-to作为动画的出场开始：
+使用`leave-to`作为出场开始是因为动画第一帧`opacity`需要为1，从第二帧开始`leave`被移除，这时`opacity`的值还是1，需要将其改为0，动画才会被正常触发。
+
+#### 在Vue中使用animate.css库
+
+库的动画是CSS3标准的动画。由于Vue可以更改CSS样式的名字，所以我们可以使用在实现复杂的动画时可以使用使用一些CSS库如animate.css，用`-class`为动画指定名字为CSS库的样式名字，实现CSS库的绑定。
+
+#### 在Vue中同时使用过渡和动画
+
+##### 元素第一次显示的动画效果：
+当需要元素第一次显示时也有动画效果，需要在`<transition>`标签中写入两个属性：`appear`、`appear-active-class`，第一个表示第一次显示元素时也有动画效果，第二个表示动画效果的CSS规则，它的值就是CSS动画规则名。
+##### 同时使用CSS库和过渡动画:
+要实现这种效果，需要为在`<transition>`标签中为元素绑定两个CSS规则，分别为CSS库动画和过渡动画——`enter`和`leave`
+##### CSS库和过渡动画执行时间不一致:
+在使用CSS库的时候，而它往往都是固定的，而自定义的过渡效果可能和它不一样，这是可以在`<transition>`标签中写一个新的属性type，它的值决定了最终动画时长以谁为准（`animation` 或 `transition`）
+
+>**来自官方的解释**：Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 `transitionend` 或 `animationend`，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。
+>但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 `animation` 很快的被触发并完成了，而 `transition` 效果还没结束。在这种情况中，你就需要使用 `type attribute` 并设置 `animation` 或 `transition` 来明确声明你需要 Vue 监听的类型。
+
+##### 显性的过渡持续时间:
+在大多数情况下，Vue可以自动得出动画所需要的执行时长，当然也可以用`duration`属性定制执行时长（这个属性需要用v-bind绑定，并且以毫秒表示）。`duration`属性的值还可以是多个，用{}符号包裹，这个情况下可以分别为`enter`和`leave`动画定制执行时长。
+
+#### Vue中的JS动画
+
+在Vue动画的开始和结束，有6个JS钩子，它们分别是：
+`before-enter`：入场动画之前
+`enter`：入场动画执行中
+`after-enter`：入场动画之后
+`before-leave`：出场动画之前
+`leave`：出场动画执行中
+`after-leave`：出场动画之后
+
+#### Vue中多个元素或组件的过渡
+
+Vue在渲染网页的时候会尽量复用页面上已有的`DOM`，在使用Vue的动画效果时可能会产生一些问题，这时候也需要为元素指定`Key`值，保证动画的正常执行。
+`<transition>`标签中有一个属性叫：`mode`，它有两个值：`in-out`和`out-in`，`mode`的值为`in-out`时，动画会先显示再隐藏，而`out-in`则与之相反，不使用`mode`属性时，动画就会同时执行。多个组件的过渡动画可以使用动态组件来实现。
+
+#### Vue的列表过渡
+
+与单个元素使用动画效果不同，列表渲染相当于渲染多个元素的，这是`<transition>`标签不支持的，这时候就需要使用`<transition-group>`标签，这个标签相当于为每一个渲染的元素添加上一个`<transition>`标签。
+
+#### Vue中的动画封装
+
+在很多时候一个相同的动画会用上很多次，尽管他们的元素各不相同，这样一来，每为一个元素设定这个动画都需要重复编写`<transition>`，这是很不方便的，为了解决这个问题，我们可以使用Vue组件来对重复使用的动画进行封装。除此之外还可以将CSS规则进行封装，用Vue动画的6个JS钩子将它改写为JS动画写在组件的`methods`中。
+
+#### 拓展
+
+或许我可以用Vue的模板功能来生成一个带有Vue实例接管的模板，例如：
+`template: "<li id="app">Hello Wrold</li>"`
+
+在Vue框架的使用中，你可以使用一个叫`<template>`的新标签，这个标签并不会真的渲染到页面之上，但是它可以结合Vue指令来实现一些意想不到的效果，一个既不会真的渲染多一个标签但又确实存在的效果。
+
+还有一个特别的方法能改变列表渲染时的值：Vue.set方法

随时随地/纯JS实现下拉加载.md

@@ -0,0 +1,60 @@
+![[纯JS实现下拉加载.jpg]]
+
+## 写在前面
+
+>最近在深入学习Vue框架，想试着模仿[echo回声](https://www.app-echo.com/ "echo回声")的移动端网页写一个网页出来，参考了 uncleLian 大佬的[vue2-echo](https://github.com/uncleLian/vue2-echo "uncleLian/vue2-echo")的一些实现。在这之中遇到了一个问题：uncleLian大佬使用Mint UI组件库来实现页面的下拉加载更多功能，但是我的项目并没有使用Mint UI，所以自然这个功能我就没法直接使用，没有就没有吧，大不了自己动手写，于是就有了这么一篇文章。
+
+## 实现思路
+
+实现的思路很简单，就是判断 滚动高度 + 可视高度 是否大于文档高度
+
+```javascript
+const {} = wino
+window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight
+```
+
+如果判断结果为真，就向后端请求更多数据，再使用push方法添加新请求返回的数据
+
+## 实现过程
+
+实现每次下拉都返回不同的数据，就要对内容进行分页，根据页数返回不同的数据，但是这个项目并没有后端，后端返回的数据用的是Mock.js模拟的，问题来了Mock.mock在拦截GET请求的时候是无法拦截到url后面带的参数，这样一来就没法在Mock.js对传入的参数进行判断,这时候有两种解决思路，一种是数据分6页就写6个Mock.mock分别拦截不同的页数，使用这种方法的代码会很冗余，还有一种是uncleLian大佬的实现方法：使用for循环让Mock.mock拦截不同的页数
+<!--more-->
+
+```javascript
+for (let Page = 1; Page <= 6; Page++) {
+  let params = {
+    'data': []
+  }
+  Mock.mock(`${baseURL}/list?Page=${Page}`, function () {
+    return params
+  })
+}
+```
+
+ 这样一来就实现了Mock.js对GET请求参数的模拟，光是这样还不行，需要对mock模拟的数据进行拆分，根据页数的不同返回的内容也不同，这里用到了JS的slice方法对数据拆成了6份
+
+```javascript
+for (let Page = 1; Page <= 6; Page++) {
+  let params = {
+    'data': []
+  }
+  Mock.mock(`${baseURL}/list?Page=${Page}`, function () {
+    params.data = listJson.slice((Page - 1) * 6, Page * 6)
+    return params
+  })
+}
+```
+
+获取到了返回的分页数据，下一步就是要把数据给渲染出来，这里直接使用`push(params)`添加数据是不行的，因为params是一个数组，这里需要用到JS的展开运算(`...`)
+
+```javascript
+this.MusicListJson.push(...params);
+```
+
+这样就完成了请求数据的添加操作
+
+## 最后
+
+解决了实际代码编写时可能遇到的一些难点，剩下的就是添加页数控制，事件触发之类的操作，这样无插件实现JS下拉加载的功能就完成了。
+
+~~果然使用插件会更方便一些~~

随时随地/通过Vue源代码解析$on、$emit实现原理.md

@@ -0,0 +1,50 @@
+![More OOXX With Vue](/images/Vue_on&emit.png)
+
+##  写在前面
+
+**阅读Vue的源码对深入学习Vue框架是非常有必要的，只知道它表面的用法，而不知道它内部的原理那就说不上是真正熟悉掌握了这一门框架，常常出了问题一头雾水**
+
+**Vue的$emit、$on和Node.js的EventEmitter的使用方法非常类似。**
+
+## 正式开始
+
+#### $on绑定事件
+
+> Vue中的$on是一种将函数与事件绑定的方法。
+
+通过Vue的源代码可以看到，$on调用时需要两个参数，第一个是字符串或数组类型作为事件的名称，第二个是触发事件执行的回调函数。$on第一步会对第一个参数做一个是否为数组的判断，这里可以看出$on允许为多个事件绑定同一个回调函数。
+
+<!--more-->
+
+如果参数为数组，那么它会使用for遍历这个数组，并进行递归。
+如果参数为字符串，那么它会在已有的事件(_events)中寻找是否已经存在相同的事件，如果没有会创建并初始化为空数组同时将传递的第二个参数也就是事件被触发时需要执行的回调函数添加进去。
+
+![$on方法](/images/$on方法.png)
+
+> 总结：$on方法允许为多个事件绑定同一个回调函数，还在里面使用了递归~~自己日自己~~
+
+
+
+#### $emit 触发事件
+
+> Vue中的$emit是一种触发事件的方法。
+
+它接受的第一个参数是一个字符串类型，这个字符串参数也就是需要触发的事件名称，第二个参数是触发事件时需要传递的数据。
+
+第一步$emit会将传递的事件名称转换成小写，并进行一系列的检查判断是否符合语法标准，然后它会在事件列表(_events)中寻找事件对应的回调函数，也就是在$on中传递并添加的回调函数，这里如果没有找到会直接返回，找到了会先进行一次判断，判断回调函数是否大于1，如果大于就把它转换成一个数组。
+
+这时候第一个参数事件名已经不再需要了，$emit会将其舍弃，并把剩下的数据转换成数组。传递给一个带有try&catch的invokeWithErrorHandling()方法，并在其中使用apply()或call()来调用事件回调函数。
+
+![调用invokeWithErrorHandling方法](/images/调用invokeWithErrorHandling方法.png)
+
+**invokeWithErrorHandling()方法源代码**
+
+![invokeWithErrorHandling方法](/images/invokeWithErrorHandling方法.png)
+
+> 总结：用$emit方法触发事件允许一个事件有多个回调函数，它们会变成数组被遍历，同时也允许携带参数，它使用了apply()或call()更改作用域来保证参数有效
+
+**(注意：看源代码可以发现如果回调函数中有返回(return)，invokeWithErrorHandling()方法是能拿到并会返回res，但是$emit中没有对这个返回的res进行赋值。)**
+
+## 最后
+
+别看了，这里我实在不知道写什么好了

随时随地/零基础教你用WordPress搭建个人网站.md

@@ -0,0 +1,164 @@
+![](/images/welcome-to-wp.png)
+
+## 写在前面
+
+>网上关于使用WordPress搭建个人网站的教程有很多，我的水平也没有那些真正的dalao高，写这一篇主要是为了帮还不会建站的朋友们入门门槛低一些
+顺带复习一下语文
+你可以问我问题，但没准你知道的比我还多
+
+## 正文部分
+###第一步，注册一个域名
+国内比较出名的有万网，腾讯云。国外比较出名的有GoDaddy，选好合适的然后付钱就可以了( • ̀ω•́ )✧
+
+### 第二步，购买一台云服务器
+##### 这一步要注意，国内主机用于网站搭建需要备案
+国内可以选择阿里云，腾讯云之类的比较出名的服务商
+国外的涉及部分原因不予说明，请自行百度(￣ ￣)／
+
+腾讯云有学生优惠套餐，最低只需要10元一个月，但只有国内主机可选
+![](/images/Tenxunyun.png)
+
+阿里云学生认证之后也有学生优惠套餐，9.5一个月，年费还送.xin域名，只有国内主机可选
+<!--more-->
+
+### 第三步，安装必要环境和WordPress
+###### * 以下步骤全部都在CentOS下完成,并在CentOS6.8下测试通过
+
+
+#### 搭建LAMP环境
+LAMP是Linux，Apache，MySQL，PHP的缩写，是WordPress博客系统的基础运行环境
+
+###### 安装Apache
+```shell
+yum install httpd -y
+```
+![](/images/1.png)
+
+###### 安装完后启动Apache服务
+```shell
+service httpd start
+```
+###### 将Apache设置为开机自启动
+```shell
+chkconfig httpd on
+```
+
+
+#### 安装MySQL
+```shell
+yum install mysql-server -y
+```
+![](/images/2.png)
+
+###### 安装完成后启动MySQL服务
+```shell
+service mysqld restart
+```
+###### 将MySQL设置为开机自启动
+```shell
+chkconfig mysqld on
+```
+###### 设置 MySQL 账户 root 密码
+```shell
+/usr/bin/mysqladmin -u root password '输入密码'
+```
+###### 进入MySQL
+```shell
+mysql -uroot --password='你设置的密码'
+```
+###### 为 WordPress 创建一个名为WordPress的数据库
+```shell
+CREATE DATABASE wordpress;
+```
+###### 成功后退出
+```shell
+exit
+```
+
+#### 安装PHP和PHPMySQL(分两行输入)
+*由于部分服务商的CentOS6可能自带php-mysql，所以可能会提示已经安装.不用理会就好了
+```shell
+yum install php -y
+yum install php-mysql -y
+```
+
+
+###### 在/var/www/html目录下新建一个hellowrold.php文件来检查Apache是否支持php，输入
+```php
+<?php phpinfo(); ?>
+```
+###### 重启Apache服务
+```shell
+service httpd restart
+```
+###### 浏览器输入
+http://外网IP/hellowrold.php
+###### 应该就可以看到刚刚新建的PHP页面了
+![](/images/4.png)
+
+
+#### 安装WordPress博客系统
+
+###### 下载最新版WordPress中文版
+```shell
+wget -c https://cn.wordpress.org/wordpress-4.9.1-zh_CN.tar.gz
+```
+
+###### 解压WordPress
+```shell
+tar -xzvf wordpress-4.9.1-zh_CN.tar.gz
+```
+
+###### 移动WordPress
+```shell
+mv wordpress /var/www/html/
+```
+
+*如果在后面的五分钟配置环节提示需要手动写入wp-config.php文件，则输入以下指令更改权限
+```shell
+chown -hR www-data /var/www/html/wordpress
+```
+如果还是不行，需要手动修改wp-config-sample.php
+
+###### 接着浏览器输入
+http://外网IP/wordpress
+###### 应该就能看到WordPress五分钟配置页面了
+![](/images/5.png)
+
+### 第四步，绑定域名解析
+域名解析这一步比较简单，基本上跟着步骤就可以啦
+腾讯云域名解析示例
+![](/images/6.png)
+
+##### 主机名
+www 是指解析之后域名为www.域名这样的形式,例如www.Foryou092.com
+@ 是指解析之后域名直接显示为 域名这样的形式，例如Foryou.com
+*是将所有的次级域名均指向同一IP地址
+##### 记录类型
+A记录  用来指定域名的IPv4地址，如需要指向一个IP地址，则需要增加A记录
+CNAME记录  如果将域名指向一个域名，实现与被指向域名相同的访问效果，则需要增加CNAME记录
+
+##### 记录值
+填你的服务器的IPv4地址
+
+#### TTL
+因为DNS是有缓存的，所以TTL就是表示DNS记录在DNS服务器上的缓存时间
+一般保持默认就好啦
+
+*尝试Ping你的域名，看看域名指向是否正确，DNS解析需要时间，添加完域名时间后需要等待一段时间
+
+### 接下来就是花费时间把自己的网站建设的美观一点啦ヾ(。￣□￣)ツ
+
+### 一些WordPress主题推荐
+我用的MD主题MDx：[传送门](https://flyhigher.top/develop/788.html)
+###### 最后，感谢Axton
+
+### END
+
+*以上内容大部分来自互联网ㄟ(▔ ,▔)ㄏ
+*不来自的那就是我乱说的ㄟ(▔ ,▔)ㄏ
+
+
+
+青梅枯萎，竹马老去，从此我爱的人都像你
+晚安