VUE+Node.js+mysq实现响应式个人博客|项目初始化+路由配置+基础组件搭建

Day 1 开发文档：项目初始化与基础架构搭建

一、项目初始化

1. 创建项目

首先，我们使用 Vite 创建一个基于 Vue 3 的项目：

# 创建项目
npm create vite@latest my-blog -- --template vue
# 这条命令会创建一个名为 my-blog 的新项目，使用 Vue 3 模板# 进入项目目录
cd my-blog# 安装项目依赖
npm install

2. 安装必要依赖

接下来，我们需要安装项目所需的核心依赖：

# 安装核心依赖
npm install vue-router@4 vuex@4 axios marked dompurify
# vue-router@4: Vue 3 的路由管理器，用于处理页面导航
# vuex@4: Vue 3 的状态管理库，用于管理全局状态
# axios: HTTP 请求库，用于与后端 API 通信
# marked: Markdown 解析器，用于解析文章内容
# dompurify: HTML 净化库，用于防止 XSS 攻击# 安装开发依赖
npm install -D sass @types/node
# sass: CSS 预处理器，提供更强大的样式编写功能
# @types/node: Node.js 的 TypeScript 类型定义

3. 项目结构规划

创建以下目录结构，每个目录都有其特定用途：

blog-website/
├── src/
│   ├── components/     # 公共组件目录
│   │   ├── TheHeader.vue    # 网站头部导航
│   │   ├── ScrollProgress.vue    # 滚动进度条
│   │   ├── BlogCard.vue    # 博客卡片
│   │   └── TheFooter.vue    # 网站底部
│   ├── views/         # 页面组件目录
│   │   ├── HomeView.vue    # 首页
│   │   └── BlogView.vue    # 博客列表页
│   ├── router/        # 路由配置目录
│   │   └── index.js    # 路由配置文件
│   ├── store/         # 状态管理目录
│   │   └── index.js    # Vuex 配置文件
│   ├── api/          # API 接口目录
│   │   └── blog.js    # 博客相关接口
│   └── assets/       # 静态资源目录
│       └── styles/    # 样式文件目录
│           ├── main.css    # 主样式文件
│           └── responsive.css    # 响应式样式
├── index.html    # 入口 HTML 文件
└── package.json    # 项目配置文件

二、基础组件开发

1. 响应式导航栏组件

[文件位置: src/components/TheHeader.vue]

TheHeader.vue 组件说明：
1. 功能：实现响应式导航栏
2. 主要特点：- 自适应布局：在不同屏幕尺寸下自动调整显��方式- 移动端菜单：在小屏幕设备上显示汉堡菜单按钮- 动态交互：菜单展开/收起动画，滚动时自动隐藏/显示
3. 核心实现：- 使用 Vue 3 组合式 API- 响应式状态管理- CSS 过渡动画

<template><header class="header" :class="{ 'header-hidden': isHeaderHidden }"><div class="container"><nav class="nav"><!-- Logo 区域 --><router-link to="/" class="logo"><h1>✨ My Blog ✨</h1></router-link><!-- 移动端菜单按钮 --><div class="menu-toggle" @click="toggleMenu"><i class="fas fa-bars"></i></div><!-- 导航链接 --><ul class="nav-links" :class="{ active: isMenuOpen }"><li v-for="item in menuItems" :key="item.path"><router-link :to="item.path" @click="closeMenu"active-class="active"><i :class="item.icon"></i>{{ item.name }}</router-link></li></ul></nav></div></header>
</template><script setup>
import { ref } from 'vue'// 控制菜单显示状态
const isMenuOpen = ref(false)
// 控制导航栏显示/隐藏
const isHeaderHidden = ref(false)// 导航菜单项配置
const menuItems = [{ path: '/', name: '首页', icon: 'fas fa-home' },{ path: '/blog', name: '博客', icon: 'fas fa-cloud' }
]// 切换菜单显示状态
const toggleMenu = () => {isMenuOpen.value = !isMenuOpen.value
}// 关闭菜单
const closeMenu = () => {isMenuOpen.value = false
}
</script>

2. 滚动进度条组件

[文件位置: src/components/ScrollProgress.vue]

ScrollProgress.vue 组件说明：
1. 功能：显示页面阅读进度
2. 主要特点：- 实时进度更新：随页面滚动实时计算和显示进度- 平滑动画：使用 CSS 过渡实现流畅的进度更新- 性能优化：使用节流函数优化滚动事件处理
3. 核心实现：- 滚动事件监听- 进度计算逻辑- 组件生命周期管理

<template><div class="scroll-progress" :style="{ width: progress + '%' }"></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'// 存储滚动进度
const progress = ref(0)// 更新滚动进度
const updateProgress = () => {// 计算页面总高度（减去视口高度）const windowHeight = document.documentElement.scrollHeight - window.innerHeight// 计算滚动百分比const scrolled = (window.scrollY / windowHeight) * 100progress.value = scrolled
}// 组件挂载时添加滚动监听
onMounted(() => {window.addEventListener('scroll', updateProgress)
})// 组件卸载时移除监听，防止内存泄漏
onUnmounted(() => {window.removeEventListener('scroll', updateProgress)
})
</script>

3. 博客卡片组件

[文件位置: src/components/BlogCard.vue]

BlogCard.vue 组件说明：
1. 功能：展示博客文章预览卡片
2. 主要特点：- 响应式布局：适应不同屏幕尺寸- 图片处理：懒加载和错误处理- 内容格式化：日期和摘要的智能处理
3. 核心实现：- 图片懒加载- Markdown 解析- XSS 防护- 路由导航

<template><div class="blog-card" @click="handleClick"><!-- 文章封面图片 --><div class="card-image"><img :src="post.image || '/images/placeholder.jpg'" :alt="post.title"@error="handleImageError"></div><!-- 文章内容预览 --><div class="card-content"><h3 class="card-title">{{ post.title }}</h3><p class="card-excerpt">{{ formatExcerpt(post.excerpt) }}</p><!-- 文章元信息 --><div class="card-meta"><span class="date"><i class="far fa-calendar-alt"></i>{{ formatDate(post.date) }}</span><span class="category"><i class="fas fa-folder"></i>{{ post.category }}</span></div></div></div>
</template><script setup>
import { ref } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import { useRouter } from 'vue-router'// 定义组件属性
const props = defineProps({post: {type: Object,required: true}
})const router = useRouter()// 处理卡片点击，跳转到文章详情
const handleClick = () => {const id = props.post?.idif (!id) returnrouter.push(`/blog/${id}`)
}// 格式化文章摘要，去除 HTML 标签限制长度
const formatExcerpt = (excerpt) => {if (!excerpt) return ''const html = DOMPurify.sanitize(marked(excerpt))const div = document.createElement('div')div.innerHTML = htmllet text = div.textContent || div.innerText || ''return text.length > 200 ? text.slice(0, 200) + '...' : text
}// 格式化日期显示
const formatDate = (date) => {return new Date(date).toLocaleDateString('zh-CN')
}// 处理图片加载失败
const handleImageError = (e) => {e.target.src = '/images/placeholder.jpg'
}
</script>

三、路由配置

1. 基础路由设置

[文件位置: src/router/index.js]

配置页面路由和导航规则：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import BlogView from '@/views/BlogView.vue'const routes = [{path: '/',name: 'home',component: HomeView,meta: {title: '首页'}},{path: '/blog',name: 'blog',component: BlogView,meta: {title: '博客'}}
]const router = createRouter({history: createWebHistory(),routes,scrollBehavior(to, from, savedPosition) {// 页面切换时滚动到顶部return { top: 0 }}
})export default router

路由配置说明：
1. 功能：实现页面导航和路由控制
2. 主要特点：- 历史模式：使用 HTML5 History API- 路由懒加载：优化首屏加载时间- 滚动行为：自动滚动到页面顶部
3. 核心实现：- 路由注册- 导航守卫- 滚动控制

3. 懒加载优化

[文件位置: src/router/index.js, src/components/BlogCard.vue, src/App.vue]

为了提升性能，我们在以下几个方面实现了懒加载：

  1. 路由懒加载
// [文件位置: src/router/index.js]
const routes = [{path: '/',name: 'home',component: () => import('@/views/HomeView.vue') // 懒加载首页},{path: '/blog',name: 'blog',component: () => import('@/views/BlogView.vue') // 懒加载博客页}
]
  1. 图片懒加载
// [文件位置: src/components/BlogCard.vue]
<template><div class="blog-card"><div class="card-image"><img :src="post.image || '/images/placeholder.jpg'" :alt="post.title"loading="lazy" // 使用浏览器原生懒加载@error="handleImageError"></div></div>
</template>
  1. 组件懒加载
// [文件位置: src/App.vue]
<script setup>
import { defineAsyncComponent } from 'vue'// 懒加载非关键组件
const TheFooter = defineAsyncComponent(() => import('./components/TheFooter.vue')
)// 带加载状态的懒加载组件
const BlogEditor = defineAsyncComponent({loader: () => import('./components/BlogEditor.vue'),loadingComponent: LoadingSpinner,delay: 200,timeout: 3000
})
</script>
  1. 懒加载效果
  • 首屏加载时间优化：只加载必要的组件
  • 图片加载优化：减少首屏请求数量
  • 路由切换优化：按需加载页面组件
  • 内存使用优化：减少初始化时的内存占用

四、状态管理

1. Vuex Store 配置

[文件位置: src/store/index.js]

配置全局状态管理：

import { createStore } from 'vuex'
import { blogApi } from '@/api/blog'export default createStore({// 状态定义state: {posts: [],      // 文章列表loading: false, // 加载状态error: null     // 错误信息},// 修改状态的方法mutations: {SET_POSTS(state, posts) {state.posts = posts},SET_LOADING(state, loading) {state.loading = loading},SET_ERROR(state, error) {state.error = error}},// 异步操作actions: {// 获取文章列表async fetchPosts({ commit }) {try {commit('SET_LOADING', true)const { data } = await blogApi.getPosts()commit('SET_POSTS', data)return data} catch (err) {commit('SET_ERROR', err.message)throw err} finally {commit('SET_LOADING', false)}}}
})

Vuex Store 配置说明：
1. 功能：全局状态管理
2. 主要特点：- 集中管理数据- 异步操作处理- 状态追踪
3. 核心实现：- 状态定义- 同步修改- 异步操作

五、样式系统

1. 全局主题变量

[文件位置: src/assets/styles/main.css]

定义全局样式变量，确保设计的一致性：

:root {/* 颜色系统 - 定义网站配色方案 */--color-primary: #3498db;    /* 主要颜色 */--color-secondary: #2ecc71;  /* 次要颜色 */--color-text: #2c3e50;      /* 文本颜色 */--color-background: #ffffff; /* 背景颜色 */--color-border: #e0e0e0;    /* 边框颜色 *//* 字体系统 - 定义文字样式 */--font-family: 'Inter', system-ui, sans-serif;--font-size-base: 16px;   /* 基础字号 */--font-size-lg: 18px;     /* 大号字体 */--font-size-xl: 24px;     /* 特大号字体 *//* 间距系统 - 统一间距标准 */--spacing-xs: 4px;    /* 超小间距 */--spacing-sm: 8px;    /* 小间距 */--spacing-md: 16px;   /* 中等间距 */--spacing-lg: 24px;   /* 大间距 */--spacing-xl: 32px;   /* 特大间距 *//* 圆角 - 统一圆角大小 */--border-radius: 8px;--border-radius-lg: 12px;/* 阴影 - 统一阴影效果 */--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);--shadow-md: 0 4px 6px rgba(0,0,0,0.1);--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

2. 响应式布局

[文件位置: src/assets/styles/responsive.css]

实现移动端优先的响应式设计：

/* 移动端优先的响应式设计 */
.container {width: 100%;padding: 0 var(--spacing-md);margin: 0 auto;
}/* 平板设备断点 (>= 768px) */
@media (min-width: 768px) {.container {max-width: 720px;  /* 限制容器最大宽度 */}.header__nav {display: flex;  /* 显示导航菜单 */}.header__toggle {display: none;  /* 隐藏菜单按钮 */}
}/* 桌面设备断点 (>= 1024px) */
@media (min-width: 1024px) {.container {max-width: 960px;}.posts-grid {grid-template-columns: repeat(3, 1fr);  /* 三列布局 */}
}/* 大屏设备断点 (>= 1280px) */
@media (min-width: 1280px) {.container {max-width: 1200px;}
}

样式系统说明：
1. 功能：统一的设计系统
2. 主要特点：- 主题变量：统一的颜色和尺寸- 响应式设计：适配不同设备- 组件样式：模块化的样式管理
3. 核心实现：- CSS 变量系统- 媒体查询- 布局系统

六、第一天完成的功能

  1. 项目初始化

    • 使用 Vite 创建 Vue 3 项目
    • 安装必要的依赖包
    • 规划项目目录结构

  2. 基础组件开发

    • 响应式导航栏（TheHeader）
      • 网站标题和 Logo
      • 响应式菜单
      • 移动端适配
    • 滚动进度条（ScrollProgress）
      • 实时显示阅读进度
      • 平滑动画效果
    • 博客卡片（BlogCard）
      • 文章预览展示
      • 图片加载优化
      • 响应式布局

  3. 路由配置

    • 设置基础路由（首页、博客列表）
    • 配置路由历史模式
    • 添加滚动行为控制

  4. 状态管理

    • 配置 Vuex store
    • 实现文章数据管理
    • 添加加载状态控制

  5. 样式系统

    • 定义全局主题变量
    • 实现响应式布局
    • 设置统一的设计标准

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/64548.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

短视频矩阵：构建多平台曝光的高效运营网络

短视频矩阵：构建多平台曝光的高效运营网络

在当今这个瞬息万变的数字化时代&#xff0c;短视频以其独特的魅力迅速占领了人们的视野&#xff0c;成为信息传播与娱乐消遣的重要一环。随着短视频平台的不断增多和用户群体的日益庞大&#xff0c;如何精准高效地利用短视频进行品牌推广和产品营销&#xff0c;成为了众多企业…
阅读更多...
ubuntu+ros新手笔记（三）：21讲没讲到的MoveIt2

ubuntu+ros新手笔记（三）：21讲没讲到的MoveIt2

系统ubuntu22.04 ros2 humble 1 安装MoveIt2 安装参照在ROS2中&#xff0c;通过MoveIt2控制Gazebo中的自定义机械手 安装 MoveIt2可以选择自己编译源码安装&#xff0c;或者直接从二进制安装。 个人建议直接二进制安装&#xff0c;可以省很多事。 sudo apt install ros-humbl…
阅读更多...
Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

入门示例 guava 最佳实践 学习指南 以下是使用Google Guava库中的工具方法来创建和操作List、Set、Map集合的一些示例&#xff1a; List相关操作 创建List 使用Lists.newArrayList()创建一个新的可变ArrayList实例。List<Integer> list Lists.newArrayList(1, 2, 3);/…
阅读更多...
蓝桥杯摆烂第三天

蓝桥杯摆烂第三天

小蓝给学生们组织了一场考试&#xff0c;卷面总分为 100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。 请计算这次考试的最高分、最低分和平均分。 输入描述 输入的第一行包含一个整数 n (1≤n≤104)&#xff0c;表示考试人数。 接下来 n 行&#xff0c;每行包…
阅读更多...
DotNetBrowser 3.0.0 正式发布！

DotNetBrowser 3.0.0 正式发布！

&#x1f6e0;️ 重要消息&#xff1a;DotNetBrowser 3.0.0 正式发布&#xff01; 我们很高兴向您介绍全新的 DotNetBrowser 3.0.0 版本。此次更新带来了多项重要功能与优化&#xff0c;进一步提升了 Web 开发的效率和体验。 &#x1f4e2; DotNetBrowser 3.0.0 包含哪些新功…
阅读更多...
C++ —— 使用指针

C++ —— 使用指针

C —— 使用指针 解引用指针用于函数的参数 解引用 声明指针变量后&#xff0c;在没有赋值之前&#xff0c;这时候不能使用指针。因为&#xff0c;此时我们不知道指针里面装的是什么。 在声明变量后&#xff0c;应该养成对变量赋初始值的好习惯。 指针存放的是变量的地址&…
阅读更多...
在 Visual Studio Code 中编译、调试和执行 Makefile 工程 llama2.c

在 Visual Studio Code 中编译、调试和执行 Makefile 工程 llama2.c

在 Visual Studio Code 中编译、调试和执行 Makefile 工程 llama2.c 1. Installing the extension (在 Visual Studio Code 中安装插件)1.1. Extensions for Visual Studio Code1.2. C/C1.2.1. Pre-requisites 1.3. Makefile Tools 2. Configuring your project (配置项目)2.1.…
阅读更多...
CSS Backgrounds(背景)

CSS Backgrounds(背景)

CSS Backgrounds(背景) Introduction(介绍) CSS backgrounds play a crucial role in web design, allowing developers to apply colors, images, and other decorative elements to the background of HTML elements. This enhances the visual appeal of web pages and he…
阅读更多...
Oracle 查询表占用空间（表大小）的方法

Oracle 查询表占用空间（表大小）的方法

目录 概述方法一&#xff1a;使用 dbms_space 包方法二&#xff1a;查询 dba_extents 视图方法三&#xff1a;查询 dba_segments 视图总结 1. 概述 在Oracle数据库管理中&#xff0c;了解特定表或索引所占用的空间对于性能调优、存储规划以及资源分配至关重要。本文档介绍了三…
阅读更多...
EfficientNet：对模型深度、宽度和分辨率的混合缩放策略

EfficientNet：对模型深度、宽度和分辨率的混合缩放策略

论文&#xff1a;https://arxiv.org/abs/1905.11946 项目&#xff1a;https://github.com/tensorflow/tpu/tree/master/models/official/efficientnet Pytorch实现&#xff1a;EfficientNet模型Pytorch版本具体实现-CSDN博客 一、概况 1、概述&#xff1a; 这张图可以清晰明…
阅读更多...
搭建分布式Hive集群

搭建分布式Hive集群

title: 搭建分布式Hive集群 date: 2024-11-29 23:39:00 categories: - 服务器 tags: - Hive - 大数据搭建分布式Hive集群 本次实验环境&#xff1a;Centos 7-2009、Hadoop-3.1.4、JDK 8、Zookeeper-3.6.3、Mysql-5.7.38、Hive-3.1.2 功能规划 方案一&#xff08;本地运行模…
阅读更多...
实现路由懒加载的方式有哪些？

实现路由懒加载的方式有哪些？

1函数式懒加载 使用vue的异步组件和webpack的代码分割功能&#xff0c;通过&#xff08;&#xff09;>import()这种函数形式来定义路由组件&#xff0c;示例如下&#xff1a; const Home () > import(/views/Home.vue); const router new VueRouter({routes: [{ path…
阅读更多...
【QT实战の心情笔记】

【QT实战の心情笔记】

文章目录 界面布局主要界面分为三部分&#xff1a;1. 笔记列表区域2. 笔记内容编辑区域3. 操作按钮区域 Qt Designer 界面设计步骤完整界面布局图各控件设置和属性Qt Designer 文件 (.ui) 数据库表结构SQL 表结构&#xff1a; 逻辑代码1. 项目结构2. Note 类 (Note.h 和 Note.c…
阅读更多...
大模型学习笔记------SAM模型详解与思考

大模型学习笔记------SAM模型详解与思考

大模型学习笔记------SAM模型详解与思考 1、SAM框架概述2、Segment Anything Task3、Segment Anything Model SAM模型是Meta 提出的分割一切模型&#xff08;Segment Anything Model&#xff0c;SAM&#xff09;突破了分割界限&#xff0c;极大地促进了计算机视觉基础模型的发展…
阅读更多...
【嵌入式软件】跑开发板的前置服务配置

【嵌入式软件】跑开发板的前置服务配置

在嵌入式开发中，通常需要在 开发板和主机之间共享、传输和挂载文件。 这篇文章是关于如何在 Ubuntu 中配置 Samba、TFTP 和 NFS 协议的详细步骤。这些协议分别用于远程文件共享、文件传输和内核挂载文件系统。 如何安装协议: 参考:ubuntu18配置：详细的内容我手写了一份文档。…
阅读更多...
2024最新qrcode.min.js生成二维码Demo

2024最新qrcode.min.js生成二维码Demo

找了一堆代码一堆GPT&#xff0c;终于给写对了&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…
阅读更多...
【Spring】Spring的模块架构与生态圈—核心容器(Beans、Core、Context、Expression)

【Spring】Spring的模块架构与生态圈—核心容器(Beans、Core、Context、Expression)

Spring框架因其强大的功能和灵活性而成为企业级应用开发的首选&#xff0c;它的模块化设计使得开发者可以根据需求选择合适的模块&#xff0c;降低了系统的复杂性。核心容器模块是Spring框架的基础&#xff0c;它为整个框架提供了核心功能&#xff0c;包括Bean的管理、上下文的…
阅读更多...
CRC校验例题详解

CRC校验例题详解

CRC校验例题详解 示例题目 给定数据帧1101001和生成多项式G(x)x4x3x21&#xff0c;求该数据帧的CRC校验码&#xff0c;并验证传输过程中是否会出现错误。 解题步骤 第一步转换生成多项式&#xff1a; 接下来是对这一步骤的详细解答&#xff1a; 生成多项式的二进制表示 当我们…
阅读更多...
02、服务器的分类和开发项目流程

02、服务器的分类和开发项目流程

硬件介绍 1、服务器分类2.开发流程 1、服务器分类 1.1 服务器分类 1u服务器&#xff08;u表示服务器的厚度&#xff09; 1U4.45cm&#xff1b; 4u服务器&#xff08;u表示服务器的厚度&#xff09; &#xff0c; 服务器有两个电源模块&#xff0c;接在不同的电源&#xff0c;…
阅读更多...
GIT命令使用手册（详细实用版）

GIT命令使用手册（详细实用版）

一、git常用操作参考 第一次提交完整步骤&#xff1a; 1.git init; 2.git add . 3.git commit -m "初始化" 4.git remote add origin https://github.com/githubusername/demo.git 5.git pull origin master 6.git push -u origin master&#xff08;使用-u选项可以将…
阅读更多...
最新文章

Copyright @ 2022~2023