Vue.js 期末课程设计报告-平芜编程栈

Vue.js 期末课程设计报告

一、目录

课程设计概述（研究背景、目的、意义）
技术栈选型与核心技术解析
项目需求分析（功能需求、非功能需求）
项目总体设计（架构设计、页面结构、路由设计）
核心功能实现（关键代码、实现思路、效果说明）
项目测试与优化
开发过程中的问题与解决方案
总结与未来展望
参考文献
附录（项目结构、核心配置、运行说明）

二、课程设计概述

3.1 研究背景

随着Web技术的飞速发展，前端开发已从传统静态页面制作迈向模块化、工程化的单页应用（SPA）开发阶段。Vue.js作为一款轻量级、渐进式JavaScript框架，凭借其组件化思想、响应式数据绑定、易学易用等优势，在企业级前端开发中得到广泛应用。Vue 3作为框架的最新稳定版本，引入了Composition API、Teleport等新特性，配合Vite构建工具的高效打包能力，大幅提升了项目的可维护性与开发效率，成为前端学习者必须掌握的核心技术体系。本次课程设计基于Vue 3生态，开发校园图书管理系统前端模块，契合现代前端开发趋势。

3.2 研究目的

熟练掌握Vue 3核心语法，包括Composition API、响应式数据（ref/reactive）、生命周期钩子等核心知识点；
掌握前端工程化工具Vite的使用，理解项目构建、打包、环境配置的完整流程；
学会整合Element Plus UI组件库快速搭建美观、交互友好的前端界面，减少重复样式开发；
掌握Vue Router 4路由管理与Pinia状态管理的核心用法，实现页面跳转与全局状态共享；
完成具备完整核心功能的单页应用开发，实现理论知识与工程实践的深度结合，提升问题排查与项目优化能力。

3.3 研究意义

理论意义：深化对Vue框架渐进式、组件化思想的理解，构建现代前端开发的技术体系认知，明确工程化开发的核心逻辑与价值。

实践意义：通过完整项目的全流程开发，积累前端工程化项目的实战经验，掌握接口封装、权限控制、性能优化等企业级开发必备技能，为后续从事Web开发相关工作或学习Nuxt.js等进阶框架奠定坚实基础。

三、技术栈选型与核心技术解析

4.1 完整技术栈清单

技术类别	技术选型	选型理由
核心框架	Vue 3（Composition API）	相比Vue 2性能更优、类型支持更强，Composition API可集中管理同一功能逻辑，解决大型组件逻辑分散问题，符合现代前端开发趋势
构建工具	Vite	相较于Webpack启动速度快10-100倍，热更新效率更高，对Vue 3原生支持，配置简单，降低工程化入门门槛
UI组件库	Element Plus	基于Vue 3开发的高质量开源UI库，组件丰富、文档完善、样式美观，支持按需引入，可快速搭建企业级前端界面
路由管理	Vue Router 4	Vue官方配套路由工具，与Vue 3完美兼容，支持路由守卫、嵌套路由、动态路由，是实现SPA页面跳转的核心工具
状态管理	Pinia	替代Vuex的新一代状态管理工具，语法简洁、支持TypeScript、无需嵌套模块，可直接在actions中修改状态，适配Vue 3生态
网络请求	Axios	功能强大的HTTP客户端，支持请求/响应拦截、错误处理、请求取消，便于统一管理项目接口，提升代码复用性
样式预处理	SCSS	扩展CSS语法，支持变量、嵌套、混合等特性，可减少重复样式代码，提升样式代码的可维护性

4.2 核心技术重点解析

4.2.1 Vue 3 Composition API

Composition API是Vue 3的核心特性之一，以函数式方式组织代码，将同一功能的相关逻辑集中封装，解决了Vue 2 Options API在大型组件中逻辑分散、复用困难的问题。核心API用法如下：

ref：用于基本类型（字符串、数字等）的响应式绑定，通过.value访问和修改值；
reactive：用于对象/数组类型的响应式绑定，直接访问属性即可修改值；
onMounted：生命周期钩子，组件挂载完成后执行，常用于初始化数据请求；
computed：计算属性，依赖数据变化自动更新，用于处理复杂数据逻辑；
watch：监听数据变化，执行自定义逻辑，支持深度监听与立即执行。

4.2.2 Vue Router 4 核心功能

Vue Router 4是Vue 3的官方路由解决方案，核心作用是实现SPA的页面跳转与路由管理。关键功能包括：

路由规则定义：通过routes数组配置路径与组件的映射关系；
嵌套路由：实现页面布局复用（如侧边栏+主内容区），通过children属性配置子路由；
路由守卫：全局前置守卫beforeEach可实现登录权限控制，拦截未登录用户访问受保护页面；
动态路由传参：通过路径参数（如/book/detail/:id）传递数据，实现图书详情等页面的动态渲染。

4.2.3 Pinia 状态管理

Pinia简化了Vue项目的状态管理流程，无需注册插件，创建Store后即可全局使用。核心组成包括：

defineStore：定义Store实例，接收名称与配置对象；
state：存储全局状态数据，如用户token、用户信息等；
actions：修改state数据的方法，支持异步操作（如登录请求），无需像Vuex那样通过mutations提交；
getters：派生状态，类似计算属性，用于处理基于state的衍生数据（如判断用户是否登录）。

四、项目需求分析

5.1 功能需求

5.1.1 基础功能

登录/注册功能：用户输入账号密码登录，新用户完成注册，登录成功后保存状态并跳转首页；
首页展示：展示图书分类、热门图书推荐、系统公告等核心信息；
图书查询功能：支持按图书名称、作者、ISBN号模糊查询，支持按分类筛选；
图书详情功能：点击图书卡片查看详细信息（书名、作者、出版社、库存等）；
个人中心功能：查看个人信息、借阅记录、预约记录，支持修改个人密码；
退出登录功能：清除用户登录状态，跳转回登录页面。

5.1.2 进阶功能（加分项）

图书收藏功能：用户可收藏感兴趣的图书，在个人中心查看收藏列表；
分页展示功能：图书列表、借阅记录支持分页查询，可自定义每页展示条数；
搜索联想功能：输入搜索关键词时，实时展示相关联想词条，提升用户体验；
权限控制功能：区分普通用户与管理员账号，管理员拥有图书添加、修改、删除权限。

5.2 非功能需求

性能需求：页面加载时间≤3秒，数据请求响应时间≤2秒，支持热更新，无明显卡顿；
易用性需求：界面布局清晰、操作直观，组件有明确交互反馈（如点击状态、校验提示）；
兼容性需求：支持Chrome、Edge、Firefox等主流浏览器，适配1920*1080及以上分辨率；
可维护性需求：代码结构清晰，命名规范，添加必要注释，组件化拆分合理，便于后续扩展。

五、项目总体设计

6.1 项目架构设计

采用“分层+组件化”的工程化设计思想，基于Vite+Vue 3的项目目录结构如下：

vue-book-system/ ├── public/ # 静态资源目录（不参与打包，如favicon.ico） ├── src/ # 项目核心源码目录 │ ├── api/ # 接口请求封装目录 │ │ ├── book.js # 图书相关接口 │ │ ├── user.js # 用户相关接口 │ │ └── request.js # Axios全局配置（拦截器、基准地址） │ ├── assets/ # 静态资源目录（参与打包，如图片、样式） │ │ ├── images/ # 图片资源 │ │ └── styles/ # 全局样式（reset.scss、global.scss） │ ├── components/ # 全局公共组件（可复用，如Navbar.vue、Pagination.vue） │ ├── layouts/ # 页面布局组件（如MainLayout.vue、LoginLayout.vue） │ ├── pinia/ # Pinia状态管理目录 │ │ └── userStore.js # 用户相关全局状态 │ ├── router/ # 路由配置目录 │ │ └── index.js # 路由规则、守卫配置 │ ├── views/ # 页面视图组件（对应路由页面） │ │ ├── Login/ # 登录页面 │ │ ├── Home/ # 首页 │ │ ├── Book/ # 图书列表/详情页面 │ │ └── Personal/ # 个人中心页面 │ ├── App.vue # 根组件 │ ├── main.js # 项目入口文件（创建Vue实例、挂载插件） │ └── utils/ # 工具函数目录（如格式转换、校验函数） ├── package.json # 项目依赖配置文件 ├── vite.config.js # Vite配置文件（端口、代理、别名） └── README.md # 项目说明文档

6.2 页面结构设计

登录/注册页面：简洁居中布局，包含账号密码输入框、登录/注册按钮，表单校验提示；
主布局页面：采用“侧边栏导航+顶部导航栏+主内容区”布局，侧边栏展示功能菜单，顶部展示用户信息与退出按钮；
图书列表页面：顶部搜索框+分类筛选栏，中间图书卡片列表，底部分页组件；
图书详情页面：左侧图书封面，右侧图书详细信息，底部借阅/收藏按钮（登录用户可见）；
个人中心页面：左侧个人信息面板，右侧标签页切换（借阅记录、收藏列表、修改密码）。

6.3 路由设计

核心路由规则配置（src/router/index.js）：

import { createRouter, createWebHistory } from 'vue-router' import MainLayout from '@/layouts/MainLayout.vue' import { useUserStore } from '@/pinia/userStore' // 路由规则 const routes = [ // 登录/注册路由（无需登录） { path: '/login', name: 'Login', component: () => import('@/views/Login/Login.vue'), meta: { requiresAuth: false } }, { path: '/register', name: 'Register', component: () => import('@/views/Login/Register.vue'), meta: { requiresAuth: false } }, // 主布局路由（嵌套路由，需登录） { path: '/', component: MainLayout, meta: { requiresAuth: true }, children: [ { path: '', name: 'Home', component: () => import('@/views/Home/Home.vue') }, { path: 'book/list', name: 'BookList', component: () => import('@/views/Book/BookList.vue') }, { path: 'book/detail/:id', name: 'BookDetail', component: () => import('@/views/Book/BookDetail.vue') }, { path: 'personal', name: 'Personal', component: () => import('@/views/Personal/Personal.vue') } ] }, // 404路由重定向 { path: '/:pathMatch(.*)*', redirect: '/' } ] // 创建路由实例 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes }) // 全局前置守卫（登录权限控制） router.beforeEach((to, from, next) => { const userStore = useUserStore() if (to.meta.requiresAuth && !userStore.token) { next('/login') // 未登录则跳转登录页 } else { next() } }) export default router

六、核心功能实现

7.1 登录功能实现

7.1.1 实现思路

使用Element Plus的ElForm、ElInput等组件搭建登录表单；
配置表单校验规则（账号非空、密码长度≥6位）；
用ref实现表单数据的响应式绑定；
点击登录按钮时先触发表单校验，校验通过后调用登录接口；
接口请求成功后，将token和用户信息存入Pinia和localStorage（实现状态持久化）；
跳转至首页，完成登录流程。

7.1.2 关键代码

<!-- src/views/Login/Login.vue --> <template> <div class="login-container"> <el-card class="login-card"> <h2 class="login-title">校园图书管理系统 - 登录</h2> <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form" > <el-form-item label="账号" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入您的账号" prefix-icon="User" /> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入您的密码" prefix-icon="Lock" show-password /> </el-form-item> <el-form-item class="login-btn-item"> <el-button type="primary" @click="handleLogin" class="login-btn">登录</el-button> <el-button @click="toRegister" type="text">去注册</el-button> </el-form-item> </el-form> </el-card> </div> </template> <script setup> import { ref } from 'vue' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' import { userLogin } from '@/api/user' import { useUserStore } from '@/pinia/userStore' // 响应式数据定义 const loginFormRef = ref(null) const loginForm = ref({ username: '', password: '' }) // 表单校验规则 const loginRules = ref({ username: [{ required: true, message: '请输入账号', trigger: 'blur' }], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '密码长度不能少于6位', trigger: 'blur' } ] }) // 路由与Pinia实例 const router = useRouter() const userStore = useUserStore() // 登录处理函数 const handleLogin = async () => { const valid = await loginFormRef.value.validate() if (!valid) return try { const res = await userLogin(loginForm.value) if (res.code === 200) { // 存储状态 userStore.setToken(res.data.token) userStore.setUserInfo(res.data.user) localStorage.setItem('token', res.data.token) localStorage.setItem('userInfo', JSON.stringify(res.data.user)) ElMessage.success('登录成功！') router.push('/') } else { ElMessage.error(res.message || '登录失败，请重试') } } catch (error) { ElMessage.error('网络异常，登录失败！') console.error('登录失败：', error) } } // 跳转到注册页 const toRegister = () => router.push('/register') </script> <style scoped lang="scss"> .login-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f5f7fa; .login-card { width: 400px; padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .login-title { text-align: center; margin-bottom: 20px; color: #1989fa; } } </style>

7.1.3 功能效果说明

表单未输入内容点击登录时，将显示对应的校验提示；输入错误账号密码时，提示“登录失败，请重试”；输入正确信息后，显示“登录成功”提示并跳转至首页，顶部导航栏展示当前登录用户名称，页面刷新后登录状态依然保留。

7.2 图书列表与分页功能实现（进阶加分项）

7.2.1 实现思路

搭建“搜索筛选栏+图书卡片列表+分页组件”的页面布局；
用ref绑定搜索关键词、当前页码、每页条数等响应式数据；
封装获取图书列表的接口函数，支持传递搜索关键词、页码、每页条数参数；
组件挂载完成后调用接口获取初始数据；
搜索时重置页码为1，重新请求数据；
分页组件切换页码或每页条数时，更新数据并重新请求。

7.2.2 关键代码（核心部分）

<!-- src/views/Book/BookList.vue --> <template> &lt;div class="book-list-container"&gt; <!-- 搜索筛选栏 --> <div class="search-filter-bar"> <el-input v-model="searchKeyword" placeholder="请输入图书名称/作者/ISBN" prefix-icon="Search" @keyup.enter="getBookList" class="search-input" /> <el-button type="primary" @click="getBookList">查询</el-button> <el-button @click="resetSearch"&gt;重置&lt;/el-button&gt; &lt;/div&gt; <!-- 图书列表 --> <div class="book-card-list" v-loading="loading"> <el-card v-for="book in bookList" :key="book.id" class="book-card" @click="toBookDetail(book.id)" > <img :src="book.cover" alt="图书封面" class="book-cover" /> <div class="book-info"> <h3 class="book-title">{{ book.bookName }}</h3> <p class="book-author">作者：{{ book.author }}</p> <p class="book-stock" :class="book.stock > 0 ? 'stock-normal' : 'stock-empty'"> 库存：{{ book.stock > 0 ? '有货' : '无货' }} </p> </div> </el-card> &lt;/div&gt; <!-- 分页组件 --> <div class="pagination-container"> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </template> <script setup> import { ref, onMounted } from 'vue' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' import { getBookListApi } from '@/api/book' // 响应式数据 const searchKeyword = ref('') const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) const bookList = ref([]) const loading = ref(false) const router = useRouter() // 获取图书列表 const getBookList = async () => { loading.value = true try { const res = await getBookListApi({ keyword: searchKeyword.value, pageNum: currentPage.value, pageSize: pageSize.value }) if (res.code === 200) { bookList.value = res.data.records total.value = res.data.total } else { ElMessage.error(res.message || '获取图书列表失败！') } } catch (error) { ElMessage.error('网络异常，获取失败！') } finally { loading.value = false } } // 分页条数改变 const handleSizeChange = () => { currentPage.value = 1 getBookList() } // 页码改变 const handleCurrentChange = () => getBookList() // 重置搜索 const resetSearch = () => { searchKeyword.value = '' currentPage.value = 1 getBookList() } // 跳转详情页 const toBookDetail = (bookId) => router.push(`/book/detail/${bookId}`) // 组件挂载时获取数据 onMounted(() => getBookList()) </script>

七、项目测试与优化

8.1 项目测试

8.1.1 测试类型与结果

功能测试：覆盖登录、图书查询、分页等核心功能，测试用例及结果如下表：测试功能测试用例测试结果登录功能输入正确账号密码登录成功，跳转首页登录功能输入错误账号密码提示失败，不跳转图书查询输入存在的图书名称展示对应图书列表分页功能点击第2页/切换每页20条正确展示对应数据
兼容性测试：在Chrome 120.0、Edge 120.0、Firefox 119.0等主流浏览器中测试，页面布局正常，功能无异常；
性能测试：使用Chrome Lighthouse检测，页面加载时间2.5秒，满足非功能需求，无明显性能瓶颈。

8.1.2 测试总结

项目核心功能均正常实现，表单校验、接口请求、路由跳转逻辑无误，兼容性良好，性能达标，未发现严重Bug，仅部分细节体验可优化。

8.2 项目优化（加分项）

性能优化：
1. 路由懒加载：采用() => import('@/views/XXX.vue')形式，减少初始打包体积，提升加载速度；
2. 图片优化：压缩图书封面图片，使用webp格式，减少加载耗时；
3. 接口优化：添加loading状态避免重复点击，通过Axios取消重复请求，减少网络拥堵。
用户体验优化：
1. 表单实时校验：输入过程中实时判断数据合法性，优化提示文案；
2. 交互反馈：可点击元素添加hover状态，操作成功/失败均有明确提示；
3. 响应式布局：使用flex/grid布局，适配不同分辨率屏幕。
代码优化：
1. 提取公共逻辑：将表单校验、格式转换等重复逻辑封装为工具函数；
2. 规范命名：遵循Vue项目命名规范，添加必要注释；
3. 全局错误捕获：避免单个组件报错导致项目崩溃。

八、开发过程中的问题与解决方案

问题1：Vue 3响应式数据修改后页面不更新现象：用reactive定义的数组，修改指定索引元素后页面未实时更新。原因：Vue 3响应式基于Proxy实现，直接通过索引修改数组元素无法被Proxy捕获。解决方案：使用splice方法修改数组，如bookList.value.splice(index, 1, newBook)，或通过扩展运算符创建新数组。
问题2：路由守卫中Pinia状态为初始值现象：router.beforeEach中获取userStore.token为空，无法判断登录状态。原因：路由守卫执行时机早于Pinia实例初始化。解决方案：直接从localStorage获取token判断，const token = localStorage.getItem('token')。
问题3：Axios请求跨域现象：浏览器提示Access-Control-Allow-Origin错误。原因：前后端端口不一致，同源策略限制。解决方案：在vite.config.js中配置代理，转发前端请求至后端接口。
问题4：页面刷新后Pinia状态丢失现象：登录后刷新页面，userStore状态恢复初始值。原因：Pinia状态存储在内存中，刷新后内存清空。解决方案：状态持久化，将token和用户信息同步存入localStorage，Pinia初始化时从localStorage读取数据。

九、总结与未来展望

10.1 项目总结

本次课程设计基于Vue 3+Vite+Element Plus技术栈，完成了校园图书管理系统前端开发，实现了登录、图书查询、分页等核心功能及收藏、权限控制等进阶功能。通过项目开发，熟练掌握了Vue 3核心语法、路由管理、状态管理等关键知识点，理解了前端工程化开发的完整流程，提升了问题排查与项目优化能力。

项目不足：部分页面样式细节有待优化；未实现移动端适配；缺少数据可视化功能（如图书借阅统计）。

10.2 未来展望

功能扩展：添加图书借阅统计、管理员图书管理、用户管理等功能；
体验优化：添加路由切换动画、组件过渡效果，提升交互质感；
移动端适配：使用媒体查询或Vant组件库，支持手机、平板访问；
技术升级：学习Nuxt.js实现服务端渲染，提升SEO与首屏加载速度；
全栈开发：学习Node.js、Spring Boot等后端技术，完成全栈版本的图书管理系统。

十、参考文献

尤雨溪. Vue.js 官方文档（Vue 3）[EB/OL]. https://cn.vuejs.org/guide/introduction.html, 2025.
Vite 官方文档[EB/OL]. https://vitejs.dev/guide/, 2025.
Element Plus 官方文档[EB/OL]. https://element-plus.org/zh-CN/, 2025.
Axios 官方文档[EB/OL]. https://axios-http.com/zh/docs/intro, 2025.
李利德. Vue.js 从入门到精通[M]. 北京：机械工业出版社，2024.
掘金社区. Vue 3 实战项目最佳实践[EB/OL]. https://juejin.cn/, 2025.

十一、附录

11.1 核心配置文件（vite.config.js）

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src') // 路径别名 } }, server: { port: 3000, // 前端运行端口 open: true, // 自动打开浏览器 proxy: { // 跨域代理配置 '/api': { target: 'http://localhost:8080', // 后端接口地址 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { outDir: 'dist', // 打包输出目录 assetsDir: 'assets', // 静态资源目录 minify: 'terser' // 代码压缩 } })

11.2 项目运行说明

环境准备：安装Node.js（v16.0+）；
克隆项目：git clone [项目地址]；
安装依赖：进入项目目录，执行npm install；
配置环境变量：创建.env.development文件，配置VITE_API_BASE_URL=/api；
运行项目：npm run dev，访问http://localhost:3000；
打包项目：npm run build，生成dist目录可部署至服务器。

本次Vue.js期末课程设计以校园图书管理系统前端开发为载体，系统运用了Vue 3、Vite、Pinia等前沿技术栈，严格遵循前端工程化开发规范，完成了从需求分析、总体设计到核心功能实现、测试优化的全流程开发工作。项目不仅实现了登录、图书查询、个人中心等基础功能，还拓展了分页展示、搜索筛选等进阶功能，充分践行了组件化、模块化的开发思想。通过本次设计，不仅深化了对Vue生态体系的理解与应用能力，更积累了前端项目开发中的问题排查、性能优化等实战经验，为后续专业学习与职业发展奠定了坚实基础。本课程设计报告完整呈现了项目开发的全流程，可作为Vue.js相关课程实践的参考范例。