当前位置：首页 > news >正文

【从零开始：如何用Vue3打造响应式个人博客网站】

news 来源：原创 2025/8/7 21:06:50

前言

在前端开发领域，Vue.js 是一个非常流行且强大的框架。本文将详细介绍如何使用 Vue3 构建一个完整的响应式个人博客网站。无论你是初学者还是有一定经验的开发者，本文都将为你提供详细的步骤和代码示例。

1. 环境搭建

首先，确保你已经安装了 Node.js 和 npm。然后，全局安装 Vue CLI：

npm install -g @vue/cli

2. 项目初始化

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-blog

选择默认配置或手动选择特性（推荐选择 Babel、Router 和 Vuex）。

进入项目目录并启动开发服务器：

cd my-blog
npm run serve

3. 项目结构设计

创建如下项目结构：

my-blog
├── public
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   │   ├── Header.vue
│   │   ├── Footer.vue
│   │   ├── ArticleCard.vue
│   ├── views
│   │   ├── Home.vue
│   │   ├── Articles.vue
│   │   ├── ArticleDetail.vue
│   │   ├── About.vue
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   ├── App.vue
│   ├── main.js

4. 创建首页

在 src/views 目录下创建 Home.vue 文件：

<template><div class="home"><h1>欢迎来到我的博客</h1><p>这是一个使用 Vue3 构建的个人博客网站。</p></div>
</template><script>
export default {name: 'Home'
}
</script><style scoped>
.home {text-align: center;margin-top: 20px;
}
</style>

5. 创建文章列表页

在 src/views 目录下创建 Articles.vue 文件：

<template><div class="articles"><h1>文章列表</h1><ArticleCard v-for="article in articles" :key="article.id" :article="article" /></div>
</template><script>
import ArticleCard from '@/components/ArticleCard.vue'export default {name: 'Articles',components: {ArticleCard},data() {return {articles: [{ id: 1, title: '第一篇文章', content: '这是第一篇文章的内容' },{ id: 2, title: '第二篇文章', content: '这是第二篇文章的内容' }]}}
}
</script><style scoped>
.articles {text-align: left;margin: 20px;
}
</style>

6. 创建文章详情页

在 src/views 目录下创建 ArticleDetail.vue 文件：

<template><div class="article-detail"><h1>{{ article.title }}</h1><p>{{ article.content }}</p></div>
</template><script>
export default {name: 'ArticleDetail',props: {article: Object}
}
</script><style scoped>
.article-detail {text-align: left;margin: 20px;
}
</style>

7. 创建关于页面

在 src/views 目录下创建 About.vue 文件：

<template><div class="about"><h1>关于我</h1><p>我是某某某，一名热爱编程的前端开发者。</p></div>
</template><script>
export default {name: 'About'
}
</script><style scoped>
.about {text-align: center;margin-top: 20px;
}
</style>

8. 添加路由

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Articles from '../views/Articles.vue'
import ArticleDetail from '../views/ArticleDetail.vue'
import About from '../views/About.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/articles',name: 'Articles',component: Articles},{path: '/article/:id',name: 'ArticleDetail',component: ArticleDetail,props: true},{path: '/about',name: 'About',component: About}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

9. 数据管理与状态管理

在 src/store/index.js 中设置 Vuex 存储：

import { createStore } from 'vuex'export default createStore({state: {articles: [{ id: 1, title: '第一篇文章', content: '这是第一篇文章的内容' },{ id: 2, title: '第二篇文章', content: '这是第二篇文章的内容' }]},mutations: {},actions: {},modules: {}
})

在 src/main.js 中引入 Vuex：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'createApp(App).use(store).use(router).mount('#app')

更新 Articles.vue 使用 Vuex 数据：

<template><div class="articles"><h1>文章列表</h1><ArticleCard v-for="article in articles" :key="article.id" :article="article" /></div>
</template><script>
import { mapState } from 'vuex'
import ArticleCard from '@/components/ArticleCard.vue'export default {name: 'Articles',components: {ArticleCard},computed: {...mapState(['articles'])}
}
</script><style scoped>
.articles {text-align: left;margin: 20px;
}
</style>

10. 优化与部署

优化

懒加载：使用动态导入来实现组件的懒加载。
缓存：使用 keep-alive 组件来缓存页面，减少重复渲染。
代码分割：使用 webpack 的代码分割功能来减小初始加载时间。

部署

将项目部署到 GitHub Pages 或其他静态站点托管服务上。以下是使用 GitHub Pages 的步骤：

安装 gh-pages 插件：

npm install gh-pages --save-dev

在 package.json 中添加 deploy 脚本：

{"scripts": {"build": "vue-cli-service build","deploy": "gh-pages -d dist"}
}

配置 vue.config.js：

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/your-repo-name/' : '/'
}

构建并部署：

npm run build
npm run deploy

总结

通过本文，我们从零开始构建了一个完整的响应式个人博客网站。希望这篇文章对你有所帮助！如果你有任何问题或建议，请在评论区留言。

作者：[Zllgogo]

日期：[2025.3.19]

【从零开始：如何用Vue3打造响应式个人博客网站】

前言在前端开发领域，Vue.js 是一个非常流行且强大的框架。本文将详细介绍如何使用 Vue3 构建一个完整的响应式个人博客网站。无论你是初学者还是有一定经验的开发者，本文都将为你提供详细的步骤和代码示例。 1. 环境搭建首先，确保你已经安…...

编程日记 2025/8/7 21:06:50

【vulhub/wordpress靶场】------获取webshell

1.进入靶场环境： 输入：cd / vulhub / wordpress / pwnscriptum 修改版本号： vim docker-compose.yml version: 3 保存退出开启靶场环境： docker - compose up - d 开启成功，docker ps查看端口靶场环境80…...

编程日记 2025/8/3 9:22:11

ngx_http_conf_ctx_t

定义在 src/http/ngx_http_config.h typedef struct {void **main_conf;void **srv_conf;void **loc_conf; } ngx_http_conf_ctx_t; ngx_http_conf_ctx_t 是 Nginx 中用于管理 HTTP 配置上下文的核心结构体，其设计体现了 Nginx 多级配置&…...

编程日记 2025/8/7 21:03:23

大模型+知识图谱：赋能知识智能新升级

在大模型（Large Language Model, LLM）飞速发展的今天，如何把传统行业中沉淀多年的大量结构化与非结构化数据真正“用起来”，正成为推动智能化转型的关键一步。找得到，看得懂，为何很难？ 以制造…...

编程日记 2025/8/7 21:00:35

python学智能算法（八）|决策树

【1】引言前序学习进程中，已经对KNN邻近算法有了探索，相关文章链接为： python学智能算法（七）|KNN邻近算法-CSDN博客但KNN邻近算法有一个特点是：它在分类的时候，不能知晓每个类别内事物的具…...

编程日记 2025/8/7 21:03:22

压力测试实战指南：JMeter 5.x深度解析与QPS/TPS性能优化

一、压力测试基础概念 1.1 什么是压力测试？ 定义：模拟极端负载场景验证系统性能极限目的：发现性能瓶颈、评估系统可靠性、验证容错能力常见类型：负载测试、压力测试、稳定性测试、峰值测试 1.2 核心性能指标解析 1.2.1 QP…...

编程日记 2025/8/7 21:00:01

鸿蒙NEXT项目实战-百得知识库04

代码仓地址，大家记得点个star IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。本案例涉及到多个鸿蒙相关技术知识点： 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三…...

编程日记 2025/8/5 16:48:58

Spring Boot Actuator 自定义健康检查（附Demo）

目录前言1. Demo2. 拓展前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF Spring Boot 的 actuator 提供了应用监控的功能，其中健康检查（Health Check）是一个重要的部分&…...

编程日记 2025/8/7 21:00:27

Flutter小白零基础入门到高级项目实战全集

Flutter零基础入门到高级项目实战全集内容如下： Dart入门基础教程16讲、Null safety 、late 关键字、空类型声明符？、非空断言！、required 、Flutter入门基础、Flutter瀑布流布局、Flutter动画、Flutter异步流、GlobalKey 、Flutter国际化、…...

编程日记 2025/8/7 21:02:54

TCP 协议

文章目录 TCP 协议简介数据包格式TCP的特性连接机制确认与重传缓冲机制全双工通信流量控制差错控制拥塞控制端口号三次握手数据传输四次挥手抓包参考本文为笔者学习以太网对网上资料归纳整理所做的笔记，文末均附有参考链接，如侵权，请联系删…...

编程日记 2025/8/7 21:03:22

NO.51十六届蓝桥杯备战|堆算法题|第k小|除2|最小函数值|序列合并|舞蹈课(C++)

P3378 【模板】堆 - 洛谷 #include <bits/stdc.h> using namespace std;const int N 1e6 10; int n; int heap[N];void up(int child) {int parent child / 2;while (parent > 1 && heap[child] < heap[parent]){swap(heap[child], heap[parent]);chil…...

编程日记 2025/8/3 11:25:04

【QA】观察者模式在QT有哪些应用？

1. 信号与槽机制 Qt的**信号与槽（Signals & Slots）**是观察者模式的典型实现，通过元对象系统（Meta-Object System）实现松耦合通信。核心特点： 类型安全：编译时检查参数匹配跨线程支持&…...

编程日记 2025/8/7 21:02:54

coze ai assistant Task5

没想到coze的组队学习这么快就过去了，我也从一个不懂coze的小白变成了一个能简单尝试小程序的懵懂小白。虽然几次学习并不能掌握很多的技能，但也让我知道coze的无限可能，组队结束后我会继续努力学习，做更多使自己偷懒的小工具~ 需…...

编程日记 2025/6/28 7:05:04

MATLAB神经网络优化1000个案例算法汇总

【2025最新版】MATLAB神经网络优化1000个案例算法汇总(长期更新版) 本文聚焦神经网络、优化算法，神经网络改进，优化算法改进，优化算法优化神经网络权重、超参数等，现在只需订阅即可拥有，简直是人工智能初学者的天堂。…...

编程日记 2025/8/7 5:29:47

Android Coil3 Fetcher preload批量Bitmap拼接扁平宽图，Kotlin

Android Coil3 Fetcher preload批量Bitmap拼接扁平宽图，Kotlin 在这一篇文章基础上改进： Android Coil3阶梯preload批量Bitmap拼接扁平宽图，Kotlin-CSDN博客文章浏览阅读854次，点赞18次，收藏5次。遗留问题&#xff0c…...

编程日记 2025/8/5 7:37:25

Ubuntu 24 常用命令方法

文章目录环境说明1、账号管理1.1、启用 root 2、包管理工具 apt & dpkg2.1、apt 简介 & 阿里源配置2.2、dpkg 简介2.3、apt 和 dpkg 两者之间的关系2.4、常用命令 3、启用 ssh 服务4、防火墙5、开启远程登录6、关闭交换分区7、build-essential（编译和开发软…...

编程日记 2025/8/7 8:21:35

uniapp自身bug | uniapp+vue3打包后 index.html无法直接运行

前提： 已经修改了基础路径打开打包文件，双击运行index.html报错，无法访问页面 uniappvue2项目是可以正常运行的 vue3修改publicPath: ./后，也是可以正常访问打包文件中的index.html 点进控制台提供的链接：https:/…...

编程日记 2025/8/6 0:30:06

go～协程阻塞分析

错误示例 type chanData struct {result stringerror error }func Biz1() {t := time.NewTimer(time.Second * 10)ctx := context.Background()ch := make(chan chanData)go doChan(ctx, ch)fmt.Println("Biz1 begin")for {select {case <-t.C:fmt.Println(&quo…...

编程日记 2025/8/3 18:48:26

【机器学习】什么是逻辑回归

什么是逻辑回归一、摘要二、逻辑回归算法简介三、sigmoid函数实现四、思考题一、摘要本文主要讲述了逻辑回归算法的基本原理和应用。首先介绍了逻辑回归在机器学习领域的重要地位，然后解释了其名称的由来和如何利用样本特征和概率之间的关系进行分类。通过与线性…...

编程日记 2025/8/7 16:43:59

postman小白教程（从入门到实战，详细教学）

目录 1. postman介绍 2. 下载地址 3. 安装流程 4. 注册postman账号 ① 打开postman，点击【创建账号】或【登录】，会跳转到浏览器 ② 若已有账号可以直接登录；若无账号，则创建新账号 ③ 若登录成功会弹出提示框，…...

编程日记 2025/8/4 7:23:58

4.1-4 SadTalker数字人语音和嘴唇对应的方案

前言： SadTalker是一个强大的数字人相关的RA/SD插件。它本身是一个非常独立的产品。你只需要提供一段视频，一段文字，简单的配置，在RA/SD中简单的生成即可。视频中人物的嘴唇很好的应对了你要发声的文字内容。效果很赞。仔细学习…...

编程日记 2025/8/6 0:41:55

Linux CentOS7 安装 ffmpeg教程

官网：FFmpeg 操作先用uname -a 查看内核版本，如果是 3.2.0或者以上就可以按照此办法来安装 cd /tmp wget https://johnvansickle.com/ffmpeg/releases/ffmpeg-release-amd64-static.tar.xz# 2. 解压 tar xvf ffmpeg-release-amd64-static.tar.xz# 3. 将…...

编程日记 2025/8/4 18:16:47

docker desktop 集成WSL Ubuntu22.04

Windows docker desktop 设置WSL ubuntu 22.04启用与其他发行版的集成 Windows docker desktop 安装参考 wsl ubuntu 22.04 查看我宿主机的docker desktop 容器全部的信息 wsl -d Ubuntu-22.04 -u root...

编程日记 2025/8/6 9:02:09

【AI】AI编程助手：Cursor、Codeium、GitHub Copilot、Roo Cline、Tabnine

文章目录一、基本特性对比二、收费标准三、私有部署能力1、Tabnine2、Roo Code 三、代码补全与自然语言生成代码四、安装独立的IDE安装插件安装五、基本使用（一）Cursor（二）GitHub Copilot1、获取代码建议2.聊天1）上下…...

编程日记 2025/8/4 9:18:31

Android audio(8)-native音频服务的启动与协作（audiopolicyservice和audioflinger）

音频策略的构建 1、概述 2、AudiopolicyService 2.1 任务 2.2 启动流程 2.2.1 加载audio_policy.conf（xml）配置文件 2.2.2 初始化各种音频流对应的音量调节点 2.2.3 加载audio policy硬件抽象库 2.2.4设置输出设备 ps:audiopatch流程简介 2.2.5打开输出设…...

编程日记 2025/8/6 8:11:08

光纤通道 VS iSCSI：存储架构选型的关键抉择

光纤通道 VS iSCSI：存储架构选型的关键抉择在企业运维中，存储网络的选择可以说是至关重要的一环。尤其是光纤通道（Fibre Channel，简称FC）和iSCSI存储，这两种主流解决方案各有千秋，常常让运维工程师在选型时感到纠结。为了帮大家理清头绪，我们今天就从架构、性能、成本…...

编程日记 2025/8/6 15:09:27

HarmonyOS Next中的弹出框使用

HarmonyOS Next弹出框概述及分类弹出框是一种模态窗口，通常用于在保持当前上下文环境的同时，临时展示用户需关注的信息或待处理的操作。用户需在模态弹出框内完成相关交互任务之后，才能退出模态模式。弹出框可以不与任何组件绑定&#xff0…...

编程日记 2025/8/4 23:57:21

Binder机制源码分析

Binder机制源码分析一、前言 Binder是Android系统中最重要的进程间通信机制，它不仅是应用程序和系统服务通信的基础，也是Android系统安全机制的重要组成部分。本文将深入分析Binder机制的实现原理，帮助读者理解Android系统的核心通信机制。…...

编程日记 2025/8/1 23:34:16

第5课树莓派的Python IDE—Thonny

1. Thonny的特点 Thonny是一款面向初学者的Python IDE。它由爱沙尼亚的 Tartu 大学开发，其调试器是专为学习和教学编程而设计的。Thonny具有如下特点易于上手。Thonny 内置了 Python 3.7，因此只需要一个简单的安装程序，你就可以开始学习编程了（如有必要，您还可以使用单独…...

编程日记 2025/8/3 23:54:56

位运算题目：或运算的最小翻转次数

文章目录题目标题和出处难度题目描述要求示例数据范围解法思路和算法代码复杂度分析题目标题和出处标题：或运算的最小翻转次数出处：1318. 或运算的最小翻转次数难度 4 级题目描述要求给定三个正整数 a \texttt{a} a、 b \texttt{b} b…...

编程日记 2025/8/4 4:33:15

Java 实现排序算法 TopK 问题

1. 低级排序 （1）冒泡排序（Bubble Sort） 思路： 每次从左到右冒泡，把最大的数推到最后。 public class BubbleSort {public static void bubbleSort(int[] arr) {int n arr.length;for (int i 0; i <…...

编程日记 2025/8/7 11:40:17

【JavaEE】网络编程socket

1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...

编程日记 2025/8/6 8:09:59

第J3周：DenseNet121算法实现01（Pytorch版）

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊目标具体实现 （一）环境语言环境：Python 3.10 编译器: PyCharm 框架: Pytorch （二）具体步骤…...

编程日记 2025/8/6 5:04:13

在Ubuntu20.04上交叉编译能在Windows上运行的Qt5应用

参考链接： https://blog.csdn.net/Interview_TC/article/details/146050419 https://bugreports.qt.io/browse/QTBUG-82592 重要设置 sudo update-alternatives --config x86_64-w64-mingw32-g 选择后缀带posix的，（/usr/bin/x86_64-w64-min…...

编程日记 2025/8/7 1:46:41

C语言中，memmove和memcpy的区别？

文章目录 1. 内存重叠处理memcpy：memmove： 2. 性能差异总结在C语言中，memmove和memcpy均用于内存块的复制，但关键区别在于对内存重叠的处理： 1. 内存重叠处理 memcpy： 假设源（src&#xff0…...

编程日记 2025/8/4 17:26:54

小程序API —— 54 路由与通信 - 编程式导航

在小程序中实现页面的跳转，有两种方式： 声明式导航：navigator 组件编程式导航：使用小程序提供的 API 编程式导航 API 提供了五个常用的 API 方法： wx.navigateTo()：保留当前页面，跳转到应用内…...

编程日记 2025/8/5 23:23:10

2025 使用docker部署centos7容器并且需要centos7容器能通过ssh登录SSH 登录的CentOS7容器

以下是使用 Docker 部署可 SSH 登录的 CentOS7 容器的步骤： 1.创建 Dockerfile（保存为 Dockerfile.centos7）： vim Dockerfile.centos7 #复制如下内容 FROM centos:7# 备份原有的 yum 源配置文件 RUN mv /etc/yum.repos.d/CentO…...

编程日记 2025/7/31 4:48:26

docker安装向量数据库Milvus及可视化工具 Attu

前置条件 1.安装了docker 2.服务器网络正常，可以连接到容器下载地址 3.服务器磁盘空间正常，docker磁盘占用过大，请参考docker容量占用过大解决办法一、下载yml文件可在文章资源下载或者自行下载：下载yml 下载这个单机版本的…...

编程日记 2025/8/6 22:19:29

从模拟到现实：Sensodrive高精度力反馈技术赋能物流运输的高效与安全

在现代物流行业中，司机短缺、二氧化碳排放增加和利润空间紧张等问题日益凸显。为应对这些挑战，Sensodrive的SensoWheel和SensoPedals产品在自驾卡车中的应用，提供了更为高效的运输解决方案，有效缓解了这些问题。 Fernride公司利用…...

编程日记 2025/8/7 20:01:39

无需qt-creator,使用Trae从0到1生成qt的开发、构建、调试环境

一、安装 Qt 开发环境确保已经安装了 Qt，没有安装的可以自己在网上搜索怎么安装，安装时可选择不安装qt creator，但是qt开发库和编译器要安装，这里我选择的编译器是MinGW， 安装好以后，记录下qt开发库和Min…...

编程日记 2025/8/7 13:59:12

整理和总结微信小程序的高频知识点

前言近期萌生了一些想法，感觉可以做一个小程序作为产出。但小程序做得比较少，因此边做边复习。整理和总结了一些高频知识点和大家一起分享。一、模板和组件 1.1模板（Template） 优势简单灵活：模板定义和使用都较…...

编程日记 2025/8/5 20:39:53

VMware主机换到高配电脑，高版本系统的问题

原来主机是i3 ,windows7系统，vmware 14.0,虚机系统是ubuntu 14.04。目标新机是i7 14700KF,windows11系统。原以为安装虚拟机，将磁盘文件，虚拟机配置文件拷贝过去可以直接用。新目标主机先安装了vmware 15，运行原理虚机&#xff0…...

编程日记 2025/8/5 9:19:28

“锈化”Python：用Rust重塑Python生态的六大工具深度解析

前言：为何“锈化”Python？ Python以其简洁的语法和强大的生态系统成为数据科学、Web开发和自动化领域的首选语言。然而，随着项目规模和性能需求的增长，Python的一些传统工具在速度、内存效率和安全性上面临瓶颈。近年来&#xff…...

编程日记 2025/8/4 11:24:31

6.3考研408数据结构中BFS与DFS的易错点及难点解析

一、广度优先算法（BFS）易错点队列操作失误未正确处理节点入队顺序（如未按层序逐层扩展），导致结果混乱。在出队后未立即标记节点为已访问，可能引发重复访问（尤其在存在环的图中）。示…...

编程日记 2025/8/1 5:25:33

在Ubuntu上安装MEAN Stack的4个步骤

在Ubuntu上安装MEAN Stack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEAN Stack？ 平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。…...

编程日记 2025/8/7 5:19:12

如何通过Odoo 18创建与配置服务器操作

如何通过Odoo 18创建与配置服务器操作服务器操作是Odoo实现业务流程自动化的核心工具，允许你在服务器端执行自动化任务，通常由按钮点击或自动化工作流等事件触发。这些操作使用 Python 编写，能够执行复杂的业务逻辑，从而增强 Od…...

编程日记 2025/8/3 19:18:17

【QGIS_Python】在QGIS的Python控制台生成SHP格式点数据并显示标注

参考文章： 「GIS教程」使用DeepSeek辅助QGIS快速制图 | 麻辣GIS 示例代码说明：使用参考文章中的省会城市坐标点，左侧增加一列城市序号code, 图层标注显示 code 城市名称，同时在指定路径下生成对应SHP格式点数据。 import os fr…...

编程日记 2025/8/2 13:25:25

torcharrow gflags版本问题

问题描述其实仍然是很简单的编译问题，但是又弄了一整个下午加几乎整个晚上，进度缓慢，又吸取了教训，因而还是来记录一下。在试图使用torcharrow进行推荐系统模拟的时候，撰写的python程序报错：ERROR: flag…...

编程日记 2025/8/5 5:14:22

Spring IoC DI入门

一、Spring，Spring Boot和Spring MVC的联系及区别 Spring是另外两个框架的基础，是Java生态系统的核心框架，而SpringMVC是Spring 的子模块，专注于 Web 层开发，基于 MVC 设计模式（模型-视图-控制器&#xff…...

编程日记 2025/8/5 5:44:08

Vala编程语言教程-语言元素

语言元素方法在Vala中，函数无论是否定义在类内部均称为方法。下文将统一使用“方法”这一术语。 int method_name(int arg1, Object arg2) {return 1; } 此代码定义了一个名为 method_name 的方法，接受两个参数（一个整数值，一…...

编程日记 2025/8/2 13:30:54

前言