介绍

Vue Router是 Vue.js官方提供的路由管理工具，用于实现前端单页应用（Single Page Application，SPA）中的页面跳转和URL 管理。

Vue Router的使用方式

Vue Router的使用方式可以分为两种：

1. 声明式路由：通过在Vue组件中声明路由对象，在模板中使用 <router-link> 组件生成跳转链接，同时使用 <router-view> 组件渲染当前路由匹配的组件。例如：

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

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// App.vue
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

2. 编程式路由：通过调用 $router.push() 方法实现页面跳转，同时使用 $route 对象获取当前路由信息。例如：

1
2
3
4
5
6
7
8
9
10
11

// SomeComponent.vue

<script>
export default {
  methods: {
    goToAboutPage() {
      this.$router.push('/about')
    }
  }
}
</script>

需要注意的是，在使用 Vue Router 时需要在 main.js 中全局注册插件，并在根组件中将 router 对象传递给 Vue 实例。同时需要配置路由规则，可以使用 path-to-regexp 库编写路由匹配规则，还可以通过 mode 属性设置路由模式（hash 模式或 history 模式）。

Vue Router的历史模式

历史模式（history mode）是一种 HTML5 原生 API，它通过使用浏览器 History API 来实现前端路由。在历史模式中，路由的 URL 不再有 # 符号，而是直接使用普通的 URL 地址。这种路由方式看起来更加美观，也更接近传统的多页应用程序的 URL 结构。

历史模式的优点包括：

1. 更好的用户体验：URL 中没有 # 符号，看起来更加美观、专业。
2. 更利于 SEO：搜索引擎能够抓取到完整的 URL，从而更好地进行网站收录和优化。
3. 支持浏览器后退操作：浏览器的后退按钮可以正常使用。
4. 更适合目标浏览器：在某些低版本浏览器中，hash 模式可能会出现一些兼容性问题。

不过，历史模式也有一定的缺点。由于在前端路由过程中，我们使用了浏览器的 History API 来修改 URL，因此可能会发生一些问题，例如：

1. 当用户直接访问某个子路由时，刷新页面会出现 404 错误，需要服务器端进行特殊配置。
2. 当用户在浏览器的地址栏中手动输入 URL 时，也会出现 404 错误。

因此，在使用历史模式时，我们需要在服务器端进行特殊配置来避免这些问题。具体来说，我们需要将所有请求都指向同一个 HTML 文件，然后通过前端路由来渲染不同的视图。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

css样式常用属性都有哪些

CSS 样式属性有很多，以下列出其中一些常用的：

1. color：设置文本颜色；
2. font-size：设置字体大小；
3. font-family：设置字体类型；
4. background-color：设置背景颜色；
5. margin：设置元素外边距；
6. padding：设置元素内边距；
7. width：设置元素宽度；
8. height：设置元素高度；
9. border：设置元素边框；
10. text-align：设置文本对齐方式；
11. display：设置元素的显示方式；
12. position：设置元素的定位方式。

CSS中文本对齐方式都有哪些

在 CSS中，文本对齐方式包括左对齐（text-align: left）、右对齐（text-align: right）、居中对齐（text-align: center）和两端对齐（text-align: justify）。

具体应用场景如下：

1. 左对齐：适合于大部分的文字排版布局，特别是英文和数字等从左到右阅读的语言。

2. 右对齐：一般用于某些需要强调文本末尾的情况，例如网页上的价格、日期、作者署名等信息。

3. 居中对齐：适用于需要将文本内容水平居中显示的场景，如标题、图片描述等。

4. 两端对齐：适用于长篇文章或段落，可以更好地利用页面空间并使每行长度相同，但需要注意单词间距可能不均匀。

总之，选择何种文本对齐方式需根据实际的设计需求和内容特点来综合考虑。

CSS中元素的显示方式都有哪些

CSS中元素的显示方式（display）有以下常见值及其应用场景：

1. block

• 特点：元素会被渲染为块级元素，即会占据一行并且默认宽度为父元素的100%
• 应用场景：适用于需要在垂直方向上排列的元素，如段落、标题等

2. inline

• 特点：元素会被渲染为内联元素，即不会独占一行，仅占据所需的宽度
• 应用场景：适用于需要水平排列的元素，如文本、超链接等

3. inline-block

• 特点：元素会被渲染为内联块级元素，既可以设置宽高属性，又可以同时水平和垂直排列
• 应用场景：适用于需要水平和垂直排列并具有固定大小的元素，如图像、按钮等

4. none

• 特点：元素不会被渲染，即元素被隐藏
• 应用场景：适用于需要在某些情况下隐藏指定元素，如响应式设计中的菜单栏

5. flex

• 特点：元素会被渲染为弹性盒模型，子元素可以通过 flex 属性来调整自身的宽度和高度
• 应用场景：适用于需要灵活布局的元素，如导航菜单、栅格系统等

6. grid

• 特点：元素会被渲染为网格盒模型，可将布局划分为行和列，并通过grid-template-columns 和 grid-template-rows属性来定义网格的大小和数量
• 应用场景：适用于复杂的布局，如表格、画廊等

7. table

• 特点：元素会被渲染为表格
• 应用场景：适用于呈现类似于表格的数据结构

除此之外，还有一些不常用的值，如list-item（将元素渲染为列表项）、table-cell（将元素渲染为表格单元格）等，具体应用场景可以根据实际需求灵活选择。

关于flex显示方式的详细使用

Flexbox是一种用于布局的CSS模块，它可以让用户更轻松地创建响应式布局并自动调整元素的大小和位置。使用Flexbox，您可以通过指定容器的属性来控制其子元素的布局，而不是像传统布局方法那样直接操作子元素本身。

以下是使用Flexbox实现常见布局的示例：

1. 垂直居中

HTML代码：

1
2
3
4
5

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.item {
  background-color: #dcdcdc;
  padding: 20px;
  margin: 10px;
}

解释：在这个示例中，我们将容器的display属性设置为flex，这意味着子元素将使用Flexbox进行布局。我们还使用align-items和justify-content属性将子元素垂直和水平居中。

2. 左右布局

HTML代码：

1
2
3
4

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
</div>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #f1f1f1;
}

.main {
  flex: 1;
  background-color: #dcdcdc;
  padding: 20px;
}

解释：在这个示例中，我们将容器的display属性设置为flex，并使用它来实现左右布局。我们将侧边栏的宽度设置为200像素并给它一个背景颜色，然后将主要内容的flex属性设置为1，这意味着它将占据剩余的空间。

3. 等分布局

HTML代码：

1
2
3
4
5

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码：

1
2
3
4
5
6
7
8
9
10

.container {
  display: flex;
}

.item {
  flex: 1;
  background-color: #dcdcdc;
  padding: 20px;
  margin: 10px;
}

解释：在这个示例中，我们同样将容器的display属性设置为flex，并使用它来实现等分布局。我们将子元素的flex属性设置为1，这意味着它们将均匀地占据父容器的可用空间。

以上是Flexbox的一些基本示例。要深入学习Flexbox，请参考相关文档和教程。

align-items和justify-content 的详细介绍

align-items 和 justify-content 都是用于布局的 CSS 属性，它们可以控制容器中子元素在交叉轴和主轴上的对齐方式。

align-items 控制子元素在交叉轴上的对齐方式。它可以取以下值：

• stretch（默认值）：子元素将被拉伸以填充整个交叉轴。
• center：子元素在交叉轴上居中对齐。
• flex-start：子元素在交叉轴起点对齐。
• flex-end：子元素在交叉轴终点对齐。
• baseline：子元素在基线上对齐。

例如，如果希望一个容器中的子元素在垂直方向上居中对齐，则可以使用以下 CSS 代码：

1
2
3
4

.container {
  display: flex;
  align-items: center;
}

justify-content 控制子元素在主轴上的对齐方式。它可以取以下值：

• flex-start：子元素在主轴起点对齐。
• flex-end：子元素在主轴终点对齐。
• center：子元素在主轴上居中对齐。
• space-between：子元素平均分布在主轴上，首尾不留空隙。
• space-around：子元素平均分布在主轴上，每个子元素两侧留有相等的空隙。
• space-evenly：子元素平均分布在主轴上，每个子元素之间的空隙相等。

例如，如果希望一个容器中的子元素在水平方向上平均分布，并且首尾不留空隙，则可以使用以下 CSS 代码：

1
2
3
4

.container {
  display: flex;
  justify-content: space-between;
}

这些属性通常用于响应式设计或者需要灵活对齐方式的 UI 布局中。

主轴和交叉轴分别又是什么意思

在 HTML 中，交叉轴和主轴是用于布局的概念，在 CSS 式样中会频繁使用。

主轴指的是flex 容器的主要方向，即 flex-direction 属性所定义的方向。例如，如果flex-direction: row，则主轴是水平方向，如果flex-direction: column，则主轴是垂直方向。

交叉轴则相对于主轴垂直方向的轴线，与主轴方向垂直，宽度或高度由容器尺寸和其他属性决定。在 flex布局中，默认情况下，交叉轴始终垂直于主轴。

以下是一个示例：

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 class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: row;
  align-items: center; /* 将所有子项沿着交叉轴居中 */
  justify-content: space-between; /* 在主轴上将所有子项平均分布 */
}
.item {
  height: 100px;
  width: 100px;
}
.item-1 {
  background-color: red;
}
.item-2 {
  background-color: blue;
}
.item-3 {
  background-color: green;
}
.item-4 {
  background-color: yellow;
}
</style>

在上面的示例中，我们创建了一个包含四个子项的 flex容器。由于设置了flex-direction: row，因此主轴是水平方向。同时，我们将 align-items 设置为 center，这使得所有子项都垂直居中对齐。而 justify-content 设置为space-between，则将所有子项在主轴上平均分布，呈现出类似于按钮组的效果。

CSS中元素的定位方式都有哪些

CSS中元素的定位方式主要包括以下几种：

1. 相对定位：使用 position: relative 属性来相对于其原本所在位置进行微调，可以通过 top、bottom、left、right 属性进行定位。主要应用场景是在元素原本的位置上做一些微小的调整，如添加一个图标或者文本。

2. 绝对定位：使用 position: absolute 属性来相对于最近的带有 position: relative 或者 position: absolute 属性的祖先元素进行定位，也可以通过 top、bottom、left、right 属性精确定位。主要应用场景是需要脱离文档流（不占据原本位置）进行定位的元素，如弹出层、菜单等。

3. 固定定位：使用 position: fixed 属性将元素固定在视口的某个位置，也可以通过 top、bottom、left、right 属性进行定位。主要应用场景是需要浮动在页面之上的元素，如导航栏、回到顶部按钮等。

4. 粘性定位：使用 position: sticky 属性将元素粘在容器的指定位置，也可以通过 top、bottom、left、right 属性进行定位。主要应用场景是需要滚动时保持元素在容器内的位置，如表头、侧边栏等。

以上是常见的元素定位方式及其应用场景，具体的使用方法需要结合实际情况进行选择。

关于box-sizing属性

box-sizing是CSS的一个属性，用于定义盒子模型的尺寸计算方式。它有两个可选值：content-box和border-box。

• content-box：默认值。表示盒子的宽度和高度仅包含内容(content)，不包括边框(border)、内边距(padding)和外边距(margin)。当对一个具有指定宽度和内边距的元素应用边框时，其实际宽度会增加边框的大小，从而导致元素实际宽度比指定宽度更大。
• border-box：表示盒子的宽度和高度包括内容(content)、边框(border)和内边距(padding)，但不包括外边距(margin)。这意味着无论是否设置边框或内边距，元素的实际宽度都等于指定的宽度。

使用box-sizing可以更方便地控制元素的尺寸计算方式，使布局更加灵活。

关于cursor属性

CSS中的cursor属性用于指定当用户将鼠标悬停在一个元素上时鼠标指针的样式。该属性接受多个值，每个值会对应一个不同的鼠标指针样式。

常用的cursor取值包括：

• auto: 默认值，浏览器自动决定鼠标指针的样式。
• pointer: 表示链接或可点击元素，通常为手形指针。
• default: 表示默认状态，通常为箭头指针。
• text: 表示文本输入区域，通常为I型光标。
• move: 表示可移动元素，通常为十字箭头。
• not-allowed: 表示该元素不能被点击或选择，通常为圆圈加斜杠。

除了上述常见的取值外，cursor属性还可以使用自定义样式。可以通过设置url()函数来指定一个图片作为鼠标指针，也可以使用Webkit内核的 -webkit-grab 和 -webkit-grabbing 等伪类来实现更加复杂的效果。

总之，cursor属性是一种控制鼠标指针样式的常用CSS属性，可以通过设置不同的取值来改变鼠标在页面中的交互方式和视觉效果。

关于flex-wrap属性

CSS中的flex-wrap属性用于控制Flex容器中Flex项目的换行方式。它有3个可能的值：

1. nowrap：默认值。Flex项目不换行，尽可能地放在一行上。
2. wrap：Flex项目在必要时换行，并将它们分配到多行中。
3. wrap-reverse：与wrap类似，但是沿着交叉轴方向反转每一行。

此外，flex-wrap还可以结合flex-direction属性来定义Flex容器中Flex项目的布局方向和换行方式。例如，flex-direction: row; flex-wrap: wrap;可以使Flex项目在水平方向上布局，并在必要时换行到下一行。

关于overflow-y属性

CSS中的overflow-y属性用于控制元素在垂直方向上溢出内容时的表现方式。它有以下几个可能的取值：

1. visible：默认值，不会裁剪任何内容，允许元素内容超出其容器，此时滚动条不会出现。
2. hidden： 裁剪元素的超出部分，看不到溢出的内容，并禁止滚动。
3. scroll： 允许元素内容溢出容器，并显示滚动条以让用户可以查看隐藏部分。
4. auto：与scroll相似，但只为必须的滚动条添加滚动。

例如，如果你想要一个容器始终只显示一定数量的内容，并使用滚动条向下滚动以查看余下的内容，则可以在CSS样式表中将overflow-y设置为scroll。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Html中常见的标签

HTML（超文本标记语言）是一种用于创建Web页面的标记语言。以下是一些常见的HTML标签及其使用方法：

1. <html>：定义一个HTML文档。
2. <head>：定义文档头部，包括标题等元数据。
3. <title>：定义文档的标题，会显示在浏览器的标签页上。
4. <body>：定义文档的主体部分。
5. <h1>-<h6>：定义六级标题，从大到小依次排列。
6. <p>：定义段落。
7. <a>：定义一个超链接，其中href属性指定链接地址。
8. <img>：定义一个图像，其中src属性指定图像的URL地址。
9. <ul>：定义一个无序列表。
10. <ol>：定义一个有序列表。
11. <li>：定义列表中的一个项目。
12. <table>：定义表格。
13. <tr>：定义表格中的一行。
14. <td>：定义表格中的一个单元格。
15. <form>：定义表单，用于收集用户输入的数据。
16. <input>：定义表单中的输入字段，type属性可以指定为text、password、checkbox等不同类型。
17. <button>：定义按钮。
18. <select>：定义下拉列表。
19. <option>：定义下拉列表中的一个选项。
20. <textarea>：定义多行文本输入框。

还有很多其他的HTML标签，这里只列举了一些常见的。HTML标签可以通过属性来设置不同的样式和功能，如class、id、style等属性。使用这些标签和属性，可以创建出各种不同的Web页面。

使用form表单标签有什么优势

使用 form表单标签的优势如下：

1. 支持各种 HTTP 请求方法：form标签支持 GET、POST、PUT、DELETE 等 HTTP 请求方法，可以根据需求选择适合的请求方式提交数据。

2. 支持文件上传：form 标签可以通过设置 enctype 属性为"multipart/form-data 实现文件上传功能。

3. 提供多种表单控件：form 标签提供多种类型的表单控件，包括文本框、密码框、单选框、复选框、下拉框等，可以满足各种表单需求。

4. 支持表单验证：form 标签内的表单控件可以通过设置required、maxlength、minlength、pattern 等属性进行验证，保证用户输入的数据符合要求。

5. 方便进行前端数据处理：通过使用 form 表单标签，可以方便地将用户提交的表单数据传递给后端服务器，实现前后端数据交互。

总之，使用form 表单标签可以简化前端开发过程，提高用户体验和数据安全性。

HTML中Label标签的应用场景

Label标签通常用于为HTML表单元素添加可点击的文本标签。下面列出了几个具体的应用场景：

1. 关联表单控件：使用for属性将label与对应的表单控件绑定在一起，可以通过点击label来选中或激活相应的控件，提高用户体验。

2. 提高可访问性：对于视力差或使用辅助技术（如屏幕阅读器）的用户，使用label可以更方便地读取表单控件相关信息。

3. 增强可用性：在移动设备上，点击label标签比点击小的输入框更容易，并且可以避免误操作。另外，label标签可以通过CSS样式进行美化，提升页面整体的视觉效果。

例如，以下代码演示了如何使用label标签关联一个文本输入框：

1
2

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

这里的for属性指定了它对应的输入框的id，当用户点击标签时，浏览器会自动将焦点聚焦到对应的输入框中。

p标签也是块级元素 它可以替代div使用吗

是的，p标签是块级元素，但它与div元素有一些不同之处。在语义上，p标签用于表示一个段落，而div标签只是一个容器，用于组织其他元素。

从布局的角度来看，p标签具有一些默认的样式和间距，这意味着使用p标签时，文本会有一些预设的格式。而div标签没有默认的样式或间距，需要手动设置CSS规则才能实现所需的布局。

因此，在某些情况下，可以使用p标签代替div标签。例如，当您希望创建一些纯文本内容时，p标签可能更适合，因为它提供了一些默认的样式和格式。但是，如果您需要创建自定义布局并且需要更多的控制，则应使用div标签。

总之，p标签可以替代div使用，但需要根据具体情况进行评估和选择。

HTML中容器标签都有哪些

HTML中常用的容器标签包括：

1. <div>：通用块级容器，用于组织页面结构、布局和样式控制。

2. <span>：通用行内容器，用于包裹少量文本或其他行内元素，并通过CSS进行样式控制。

3. <section>：语义化的块级容器，用于划分文档内容的主题部分，例如章节、页眉、页脚等。

4. <article>：语义化的块级容器，用于表示独立的内容单元，如博客文章、新闻报道等。

5. <header>：语义化的块级容器，用于定义网页或区域的页眉，通常包含标题、logo、导航菜单等元素。

6. <footer>：语义化的块级容器，用于定义网页或区域的页脚，通常包含版权信息、联系方式、社交媒体链接等元素。

7. <nav>：语义化的块级容器，用于定义导航菜单。

8. <aside>：语义化的块级容器，用于定义与主要内容相关但不属于主要流程的辅助内容，如侧栏、广告等。

9. <main>：语义化的块级容器，用于标识文档或应用程序的主要内容区域。

这些容器标签有助于提高HTML文档的可读性、可维护性和可访问性，并且能够帮助搜索引擎正确解析和索引网页内容。在实际应用中，应根据具体情况选择合适的容器标签进行包裹，以达到最佳的结构组织和样式控制效果。

HTML中文本标签都有哪些

HTML 中常用的文本标签有以下几种：

1. <h1> 到 <h6>：用于定义标题，H1 是最高级别的标题，H6 是最低级别的标题，通常用于网页中的文章标题或分组标题。

   1	<h1>这是一个 H1 标题</h1>

2. <p>：用于定义段落，通常用于网页中的正文内容。

   1	<p>这是一个段落。</p>

3. <a>：用于定义链接，可以指向其他网站、页面或同一页面内的特定内容。

   1	<a href="https://www.example.com">点击此处访问 Example 网站</a>

4. <ul> 和 <li>：用于定义无序列表，<ul> 表示整个列表，<li> 表示列表中的每一项。

   1 2 3 4 5

   <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>

5. <ol> 和 <li>：用于定义有序列表，与无序列表类似，只是每一项前面会显示一个数字。

   1 2 3 4 5

   <ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>

6. <br>：用于插入换行符。

   1	<p>这是第一行。<br>这是第二行。</p>

7. <strong> 和 <em>：分别用于定义加粗和斜体样式的文本。

   1	<p>这是一段 <strong>加粗</strong> 的文本，这是一段 <em>斜体</em> 的文本。</p>

8. <blockquote>：用于定义长的引用块。

   1 2 3

   <blockquote> <p>这是一个引用。</p> </blockquote>

9. <pre>：用于保留文本中的空格和换行符，通常用于显示代码片段。

   1 2 3

   <pre> console.log("Hello, world!"); </pre>

以上是 HTML 中较为常用的文本标签以及它们的使用场景和示例。

css样式常用属性都有哪些

CSS 样式属性有很多，以下列出其中一些常用的：

1. color：设置文本颜色；
2. font-size：设置字体大小；
3. font-family：设置字体类型；
4. background-color：设置背景颜色；
5. margin：设置元素外边距；
6. padding：设置元素内边距；
7. width：设置元素宽度；
8. height：设置元素高度；
9. border：设置元素边框；
10. text-align：设置文本对齐方式；
11. display：设置元素的显示方式；
12. position：设置元素的定位方式。

1. color：用于设置文本的颜色，可以让用户更容易地阅读内容。
2. font-size：用于设置字体大小，可以让文字更加突出或更容易阅读。
3. font-family：用于设置字体类型，可以让用户更好的理解并品味页面内容。
4. background-color：用于设置背景颜色，可以增强页面的视觉效果以及提高用户体验。
5. margin：用于调整元素之间的距离和位置，达到更好的页面布局效果。
6. padding：用于调整元素内部元素之间的距离和位置，使页面更美观和易于阅读。
7. width：用于设置元素的宽度，可以让页面更加美观和易于阅读。
8. height：用于设置元素的高度，可以让页面更加美观和易于阅读。
9. border：用于设置元素的边框，可以增强页面的视觉效果以及提高用户体验。
10. text-align：用于设置文本对齐方式，使页面布局更清晰美观并提高易读性。
11. display：用于设置元素的显示方式，可以根据不同的应用场景来选择不同的显示方式。
12. position：用于设置元素的定位方式，可以允许将元素放置在网页上的任何位置。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

事件传递

1. 子组件向父组件传递事件

   首先在父组件中定义一个用于接收事件的方法handleContentPage:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   <!-- 这是父组件 --> <template> <div id="parent"> <!-- 接收子组件的消息 --> <Navbar @update-content-page="handleContentPage"/> </div> </template> <script> import Navbar from "@admin/views/Navbar.vue"; export default { components: { Navbar, }, methods:{ handleContentPage(page){ console.log("收到子组件传递过来的消息") } } }; </script>

   然后在子组件中借助$emit来调用父组件的函数:

   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

   <!-- 这是子组件 --> <template> <div class="navbar"> <!-- 导航栏 --> <nav> <ul> <li @click="navigateTo('Dashboard')">仪表板</li> <li @click="navigateTo('Users')">用户</li> <li @click="navigateTo('Settings')">设置</li> </ul> </nav> </div> </template> <script> export default { methods: { navigateTo(page) { console.log("点击了菜单栏"); //向父组件发送数据 this.$emit('update-content-page', page); } }, }; </script>

   注意: $emit闯入的第一个参数 update-content-page 需要和父组件中使用@进行一一对应

2. 父组件向子组件传递事件

   首先在子组件中定义一个供父组件调用的方法:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <!-- 这是子组件 --> <template> <div class="content"> </div> </template> <script> export default { methods: { //定义一个方法供父组件调用 updatePage(page) { console.log("收到来自父组件的数据"+page); } }, } } </script>

   然后在父组件中通过对象引用的方式调取子组件的方法:

   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

   <!-- 这是父组件 --> <template> <div id="parent"> <button @click="handleContentPage">一键转换</button> <!-- 使用 ref 建立子组件的实例引用 方便调子组件方法 --> <Content ref="contentRef"/> </div> </template> <script> import Content from "@admin/views/Content.vue"; export default { components: { Content, }, methods:{ handleContentPage(page){ //调取子组件的函数 this.$refs.contentRef.updatePage(page) } } }; </script>

3. 两个不相关的组件进行事件传递

   在Vue 3中，可以使用事件总线Event Bus来进行两个不相关的组件之间优雅地通信。

   首先在一个单独的JavaScript模块中创建事件总线：

   1 2	import { createApp } from 'vue' export const eventBus = createApp({})

   然后在需要发布事件的组件中导入事件总线并发送事件：

   1 2 3 4 5 6 7 8 9

   import { eventBus } from './event-bus' export default { methods: { sendMessage() { eventBus.emit('message-sent', this.message) } } }

   最后，在接收事件的组件中也导入事件总线并监听事件：

   1 2 3 4 5 6 7 8 9

   import { eventBus } from './event-bus' export default { created() { eventBus.on('message-sent', message => { console.log(`Received message: ${message}`) }) } }

数据传递

Vue中如果需要进行父子间数据的传递, 可以使用provide/inject来实现

在祖先组件中使用provide来提供数据：

1
2
3
4
5
6
7
8

import { provide } from 'vue'

export default {
  setup() {
    const name = 'John Doe';
    provide('name', name);
  }
}

在后代组件中使用inject来获取数据：

1
2
3
4
5
6
7
8

import { inject } from 'vue'

export default {
  setup() {
    const name = inject('name');
    console.log(name); // Output: John Doe
  }
}

这样，后代组件就可以通过inject方法访问提供的数据了。

全局数据共享

如果我们需要在所有组件中共享数据, 比如用户的信息 缓存数据等等,

在Vue3中，介绍两种方案

第一种 使用一个全局的provide/inject

具体步骤如下：

1. 在根组件中提供要共享的数据

1
2
3
4
5
6
7
8
9
10
11
12

import { createApp, reactive } from 'vue';

const app = createApp({
  setup() {
    const sharedState = reactive({ count: 0 });
    return {
      sharedState,
    };
  },
});

app.mount('#app');

2. 在需要使用该数据的子组件中注入它

1
2
3
4
5
6
7
8
9
10

import { inject } from 'vue';

export default {
  setup() {
    const sharedState = inject('sharedState');
    return {
      sharedState,
    };
  },
};

3. 在子组件中就可以直接使用这个共享的状态了，比如在模板中显示它的值或者修改它的值

1
2
3
4
5
6

<template>
  <div>
    {{ sharedState.count }}
    <button @click="sharedState.count++">增加</button>
  </div>
</template>

这样就可以实现一个简单的全局数据共享了。需要注意的是，provide/inject API并不是响应式的，如果需要响应式地共享数据，可以使用reactive或者ref等Vue3提供的响应式API来实现。

使用Vuex

在Vue 3 中，可以使用 Vuex 4来实现全局数据共享。

首先需要安装Vuex：

1

npm install vuex@next

然后在 main.js 中创建一个 store 实例：

1
2
3
4
5
6
7

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

接着在 src 目录下创建一个 store.js 文件，用于定义 store：

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

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

这里的state 定义了初始状态，mutations 定义了修改状态的方法，actions 定义了异步操作，getters定义了从状态中派生出来的值。

在组件中使用store 的数据和方法：

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

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)

    const increment = () => {
      store.dispatch('increment')
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}
</script>

在组件中使用 useStore 获取store 实例，在 setup函数中使用computed函数将 store 中的数据和方法转化为响应式的值，然后在模板中使用即可。

以上是一个简单的示例，具体使用还可以根据实际需求进行修改和扩展。

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

关于实体类的属性对用户的可见性问题, 我们第一时间可能会想到定义一个性的类, 里面只定义需要给用户看见的属性, 然后进行属性值拷贝

显然 这种做法极其不优雅, 实体类一旦增多, 后期维护会非常的累

那有没有轻松一点的方法呢, 能不能某个表的实体类就只创建一个, 然后复用呢

答案是 有的

我们可以使用注解来实现, 根据不同的需求, 选择不同的注解, 具体如下:

需求一

用户在请求接口的时候, 实体类中的某些字段不给用户返回(序列化), 同时也不允许用户传值(反序列化), 比如大部分的实体类中我们都会有createTime和updateTime字段, 像这种是不需要给用户返回的, 同时也不允许用户传值

那么此时我们就可以用到jackson包中的@JsonIgnore注解来实现这一功能, 具体示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Entity
@Table(name = "deleted_user")
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,
    
    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    @JsonIgnore
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

使用该注解后, 哪怕用户刻意传了也不影响数据, 无论用户传与不传都写入的都是默认值

如果我们需要对多个字段进行可见性隐藏, 除了挨个属性添加@JsonIgnore, 我们还可以在类中使用@JsonIgnoreProperties注解来忽略某个属性, 其效果和@JsonIgnore一样, 具体示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["createTime"])
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,

    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

需求二

用户在请求接口的时候, 实体类中的某些字段需要给用户返回, 但是不允许用户传值, 比如id字段, 那此时我们可以在类中使用@JsonIgnoreProperties注解, 并设置allowGetters = true即可, 具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["id"],allowGetters = true)
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,

    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

需求三

用户在请求接口的时候, 实体类中的某些字段不给用户返回, 但是允许用户传值, 那此时我们可以在类中使用@JsonIgnoreProperties注解, 并设置allowSetters = true即可, 具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["content"],allowSetters = true)
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,
	  val content: String = "",
    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

需求四

用户在请求接口的时候, 实体类中的某些字段不给用户返回, 但是允许用户传值, 同时另外某些字段需要给用户返回, 但是不允许用户传值, 这种又该怎么办呢, 此时我们需要用到另外一个注解@JsonProperty, 在这个注解中配置access值, 具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@Entity
@Table(name = "deleted_user")
@JsonIgnoreProperties(value = ["id"],allowGetters = true)
data class DeleteUser(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Long? = null,
  	@JsonProperty(access = JsonProperty.Access.WRITE_ONLY)
	  val content: String = "",
    @JsonFormat(
        pattern = "yyyy-MM-dd HH:mm:ss a",
        locale = "zh",
        timezone = "GMT+8"
    )
    val createTime: LocalDateTime = LocalDateTime.now(ZoneId.of("GMT+8")),
)

这样一来, 我们在实现id字段只读的同时, 又实现了content字段的可写入但不可见

access属性常用选项:

• JsonProperty.Access.WRITE_ONLY: 只允许用户传值, 但不给用户返回

• JsonProperty.Access.READ_ONLY: 只给用户返回该字段, 但不允许用户传值

需要注意的是: @JsonProperty(access = JsonProperty.Access.READ_ONLY注解放置在父类的属性中无效. 具体原因我也不是太清楚

需求五

假如需要给客户端出两个用户接口, 一个只返回用户名, 另一个返回用户名和用户id, 那这种情况下上面的方案就不适用了, 此时我们需要用到注解@JsonView, 分别作用在属性和Controller中的具体接口方法上, 代码如下:

实体类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@Entity
@Table(name = "user")
@JsonView(Views::class) //这个地方很关键 首先给所有属性一个默认视图 
data class User(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
  	@JsonView(Views.Detail::class)//表示id归属于Detail视图
	  var id: Long? = null,
  
  	@JsonView(Views.Basic::class)//表示username归属于Basic视图
    val userName: String = "",
)
//用接口来进行视图分类
interface Views {
    interface Basic
    interface Detail : Basic
}

Controller类:

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

@CrossOrigin
@RestController
@RequestMapping("/user")
class UserController {
  
     
    @GetMapping(value = ["/userInfoWithId"])
    @JsonView(Views.Detail::class)//返回归属于Detail视图的字段
    fun getUserInfoWithId(
        request: HttpServletRequest
    ): BaseEntity<EmptyModel> {
            val info = tokenUtil.parseToken(request)
            val user = service.getUserInfo(info.id, info.userAccount)
            return BaseEntity(data = user)
    
    }
  
  
   @GetMapping(value = ["/userInfo"])
    @JsonView(Views.Basic::class)//返回归属于Basic视图的字段
    fun getUserInfo(
        request: HttpServletRequest
    ): BaseEntity<EmptyModel> {
            val info = tokenUtil.parseToken(request)
            val user = service.getUserInfo(info.id, info.userAccount)
            return BaseEntity(data = user)
    
    }
}

此时如果你运行程序请求接口发现返回一个空对象{}, 这是由于没有配置objectMapper, 我们需要在WebConfig中进行配置, 具体代码如下:

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

@Configuration
open class WebConfig : WebMvcConfigurer {



    @Autowired
    private val jsonConverter: MappingJackson2HttpMessageConverter? = null

    override fun configureMessageConverters(converters: MutableList<HttpMessageConverter<*>>) {
        converters.removeIf { mc -> mc is MappingJackson2HttpMessageConverter }
        converters.add(jsonConverter!!)
    }

    @Bean
    open fun objectMapper() : ObjectMapper = ObjectMapper().apply {
        setSerializationInclusion(JsonInclude.Include.NON_NULL)
        registerModule(KotlinModule())
        configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false)
        configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false)
        configure(SerializationFeature.WRITE_DATES_WITH_ZONE_ID, true)

    }

    @Bean
    open fun jsonConverter(objectMapper: ObjectMapper): MappingJackson2HttpMessageConverter =
        MappingJackson2HttpMessageConverter(objectMapper)




}

上面WebConfig类是我自己创建的, 你如果没有该类则手动创建一个,继承WebMvcConfigurer, 别忘了添加@Configuration注解

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

目前使用ChatGPT进行问题搜索的频率越来越高, 配合百度搜索, 感觉爽到飞起

这里给大家推荐几个目前可以免费使用的ChatGPT网站, 它们大部分都是基于ChatGPT3.5的引擎

免费ChatGPT网站

1. Letsearches

   官网: 点击进入

2. Extk

   官网: 点击进入

3. Aidutu

   官网: 点击进入

4. Wuguokai

   官网: 点击进入

5. Aichatos

   官网: 点击进入

6. Xeasy

   官网: 点击进入

7. Binjie

   官网: 点击进入

注意: 免费通道存在一定的不稳定性, 如果某个网站无法正常访问, 说明该网站已不可用, 不必太过纠结, 换一个即可

收费的ChatGPT网站

收费的相对来说要稳定许多, 访问速度也相对较快一些

1. TalkAI

   官网: 点击进入

   每日有两次免费的问答机会, 超出需要包月购买

2. Vqlai

   官网: [点击进入](https://static.vqlai.com/apps/vchat/)

   需要关注微信公众号才能使用, 首次关注赠送30额度

ChatGPT插件

vscode平台插件

1. ChatGPT中文版

   

   

IntelliJ IDEA平台插件

1. NextChatGPT

   收费插件, 这个需要关注公众号才能使用, 首次赠送30额度

   

AI导航

官网: 点击进入

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

问题与解决方案

最近发现有瓣音频博客出现多个视频合奏唱戏的问题, 非常影响阅读体验, 于是准备将视频自动播放给禁止了

尝试了几种方案, 不论是加入"allow="autoplay=false""属性还是autoplay=false乃至sandbox都不生效

最后通过在 src 属性的最后面加上&autoplay=no, 问题解决

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

最近项目需要使用到vscode, 对于习惯了Android Studio的我来说, 突然切换开发工具一时间有点难以适应, 主要还是IntelliJIDEA的编辑器太香了

之前本来想将Android Studio武装成兼容各种语言的开发神器, 无奈很多插件不兼容, 只能暂时作罢

所以 只能先凑合着用vscode先, 所谓工欲善其事必先利其器, 为了快速进入开发状态, 首先需要将vscode编辑器的风格设置成尽量接近Android Studio

vscode配置剖析

vscode配置主要分为四大块, 每一块的配置都对应一个json文件:

• 基础设置: 使用setting.json, 主要包含一些编辑器的偏好设置
• 键盘快捷键设置: 使用keybindings.json
• 扩展设置: 使用extension.json
• UI状态设置: 使用globalState.json, 主要包含一些全局UI状态的设置

对vscode进行改造

第一步 对快捷键进行改造

1. 安装插件IntelliJ IDEA Keybindings

   

   我们会发现 这个插件附带了一个通过xml文件快速导入的功能, 接下来我们需要用它

2. 将Android Studio的配置进行导出

   熟悉IDEA系编辑器的小伙伴应该都知道如何导出配置文件, 这里不过多解释, 直接上图:

   

   导出的配置文件是一个zip压缩包, 我们将其解压, 下一步我们会用到里面keymap目录下的xml文件

   

3. 将Android Studio导出的快键键配置文件进行格式转换

   我们按住ctrl+shift+p打开动作指令面板, 然后输入Import IntelliJ Keybindings执行该动作:

   

   

   

   这里可以选择对导入的xml文件中的快捷键进行平台转换,

   由于我的AndroidStudio的配置文件是windows平台导出的, 而我目前使用的是Mac平台,我想继续保持windows的快捷键习惯, 也就是依然使用ctrl而不是cmd

   所以这里我选择了Windows to Windows

   导入xml文件后, 会自动生成已经转换成json格式的快捷键配置:

   

4. 将转换好的配置导入到vscode中

   我们只需要将里面的内容拷贝至vscode的keybindings.json文件中然后保存即可:

   

此时, 我们的快捷键就基本改造完毕了, 现在只需双击shift就能打开动作指令面板, 和Android Studio一致, 满意😊

第二步 对vscode外观进行改造

这一步, 具体改造因人而异, 毕竟每个人的需求和审美不同, 大家只需要了解如何修改即可

这里主要是对setting.json文件进行修改,简单说一下我的配置:

1. 编辑器字体大小调整

   首先vscode默认的外观给我的第一印象就是字太小了, 看着特别费眼

   那么我们进入设置面板, 输入字体, 然后找到setting中编辑字样点击它可以打开setting.json文件:

   

   在里面我输入editor.fontSize": 14.5, 将代码字体大小调整成14.5:

   

   同理, 如果需要修改字体风格则输入editor.fontFamily

   

   以此类推, 所有配置属性都有代码提示, 操作起来也很方便

2. 工作台字体大小调整

   我们会发现, 通过setting.json我们可以调整编辑器的字体大小, 但是工作台的字体没有提供相关属性配置, 只能通过快捷键cmd+=来进行缩放调整, 如果快捷键无法使用那就使用动作指令面板通过关键字 放大 或者Zoom进行搜索调用

   记住一点 有问题先尝试在动作指令面板中搜一下

3. 工作目录图标修改

   接下来我们需要调整一下工作目录的图标, 先来看一下vscode默认的目录树长啥样:

   

   是不是立马让人感到崩溃, 哪个文件在哪个包下面, 估计得费劲辨别半天

   这个要改的话, 需要在安装图标插件, 我们直接在插件市场搜索关键字icon就行, 可以找到很多:

   

   每个都尝试一下, 选一种自己喜欢的就行

4. 颜色主题选择

   最后我们对编辑器整体的配色进行调整, 可以直接选择现成的主题, 直接在插件市场搜索即可:

   

由于个人习惯, 最后我直接选择了JetBrains风格的主题和图标样式:

调整后我的编辑器样子如下:

配置的同步功能

官方自带云端同步

目前vscode编辑器自带了配置同步功能, 实现多端配置同步, 非常方便, 只需要在编辑器左下角进行登录, 然后打开同步功能即可:

这里支持Github或者微软账号登录

云端同步历史恢复

当我们不小心将编辑器还原出厂设置了, 由于我们开启了自动同步功能, 此时所有配置已经同步到了云端, 旧的配置直接被覆盖了, 那么我们想恢复之前的配置该怎么办呢?

不用担心

首先我们打开命令窗口显示已同步的数据记录:

然后选择对应时间下的历史配置文件, 将里面的内容拷贝至我们的当下的配置文件中即可:

手动拷贝有些繁琐, 不过我相信未来官方能实现一键恢复功能

除此之外 我们还可以通过资源管理器的时间线进行文件内容的快速恢复, 不过这种方案仅支持短期时间的恢复, 如果要恢复几个月甚至一年前的配置, 那么只能使用云端同步方案了:

配置文件导出本地

如果你对于这种云端配置同步不是太放心, 还可以将配置文件导出到本地进行存储:

官方默认支持导出到Git和本地

配置文件同步到自己的云端

如果你有更多的同步需求, 比如同步到云盘, 那么我推荐你安装Sync Settings这个插件, 它支持本地、本地Git仓库、远程Git仓库、服务器rsync甚至Webdav:

具体使用方法:

1. 对仓库进行配置

   动作面板输入:

   1	Sync Settings: Open the repository settings

2. 将配置文件上传同步至仓库:

   动作面板输入:

   1	Sync Settings: Download (repository -> user)

3. 从仓库中同步配置文件到vscode:

   动作面板输入:

   1	Sync Settings: Download (repository -> user)

如果你觉得手动同步太累人, 还可以配合cron-tasks插件开启定时任务, 实现配置文件的自动同步功能

问题汇总

关于回车快捷键无法设置的问题

由于两个编辑器的差异性存在, 导致部分快捷键和预想中的不太一致, 此时我们需要手动修改, 这里我需要将acceptAlternativeSelectedSuggestion的快捷键设置为回车, 另外将acceptSelectedSuggestion的快捷键改为tab, 在设置的过程中, 我发现回车无法设置, 这应该是个编辑器bug, 好在可以直接修改json文件:

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

Web开发时偶尔会碰到这种错误, 主要是上一次服务未关闭导致的

解决方案

Windows平台

1. 打开cmd命令窗口,查看被占用端口号所对应的进程

   1	netstat -aon|findstr "端口号"

2. 终止对应进程

   1	taskkill /pid 这里填查询到的pid /f

Mac平台

1. 查看被占用端口号所对应的进程

   1	lsof -i:端口号

   

2. 终止对应进程

   1

   kill PID

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

前言

在ChatGPT诞生之前, 如果我们想获取信息一般是通过搜索引擎, 在鱼龙混杂的网页中筛选相对有用的信息, 光是信息筛选甄别就极其消耗时间和脑力

ChatGPT出来后, 大大地简化了这一操作, 它可以帮我们进行大部分的垃圾信息过滤, 从而使得知识的获取变得简单直接

以前的操作流程:

关键词搜索👉鱼龙混杂的信息👉筛选得到各种碎片化的可用信息👉对得到的碎片信息进行可用性验证👉总结归纳

借助ChatGPT的操作流程:

关键词询问👉得到相对合理可靠的信息👉可用性验证->总结归纳

尝试

1. 周杰伦的主持水平如何😀

   

2. 乱码三千这个博客你觉得怎么样👀

   

3. 你觉得歌手十二越写的歌如何🌹

   

4. 给码box这个平台写一句吸引人的宣传语🤩

   

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站