个人博客网站

项目简介本博客网站是基于 Vue 3 Vite 构建的现代化个人博客系统展示了Web前端开发技术的综合运用。技术栈前端框架Vue 3 (Composition API)构建工具Vite 6.x路由管理Vue Router状态管理Pinia样式CSS3 Scoped Styles实现过程1.项目初始化使用 Vite 创建 Vue 3 项目配置路由和状态管理。2.页面开发登录页面实现用户登录验证// AppLogin.vueconstlogin(){constsavedUserslocalStorage.getItem(users)||[]constusersJSON.parse(savedUsers)constuserusers.find(uu.idid.valueu.passwordpassword.value)if(user) {localStorage.setItem(blog-in,true)localStorage.setItem(ID,user.id)localStorage.setItem(username,user.username)router.push({name:AddArticle})}else{alert(账号或密码错误)}}注册页面实现用户注册功能// AppRegister.vueconstregister(){if(id.valuepassword.valueusername.value) {constsavedUserslocalStorage.getItem(users)||[]constusersJSON.parse(savedUsers)if(users.some(uu.idid.value)) {alert(账号已存在)return}users.push({id:id.value,password:password.value,username:username.value})localStorage.setItem(users,JSON.stringify(users))alert(注册成功)router.push({name:Login})}}文章列表页卡片式布局展示文章// AddArticle.vue - 轮播图核心逻辑const currentCarouselIndex ref(0)const isPaused ref(false)let carouselTimer null// 自动播放受暂停影响const nextCarouselSlide () {if (isPaused.value) returncurrentCarouselIndex.value (currentCarouselIndex.value 1) % articles.value.length}// 手动切换不受暂停影响const manualNextSlide () {currentCarouselIndex.value (currentCarouselIndex.value 1) % articles.value.length}// 鼠标悬停暂停const pauseCarousel () {isPaused.value true}// 鼠标离开恢复const resumeCarousel () {isPaused.value false}// 初始化自动播放onMounted(() {carouselTimer setInterval(nextCarouselSlide, 5000)})文章详情页展示文章内容和评论个人中心用户信息展示图片页面图片展示功能3.功能实现用户认证登录/注册/退出文章管理发布/编辑/删除评论系统发布/查看评论轮播图首页文章轮播展示草稿保存自动保存未发布的文章4.样式设计采用响应式布局设计使用背景图片和半透明卡片效果提升视觉体验。功能特点文章管理支持文章的发布、编辑和删除支持草稿自动保存评论系统用户可以对文章发表评论实现互动交流轮播展示首页轮播图展示热门文章提升内容曝光响应式设计适配不同屏幕尺寸提供良好的浏览体验