手把手教你用Vue2和原生JS复刻蓝桥杯真题：购物车与分页列表实战

Vue2与原生JS实战从蓝桥杯真题到工程化项目开发1. 项目背景与核心价值在当今前端开发领域Vue.js因其简洁的API和响应式数据绑定机制已成为构建用户界面的首选框架之一。而原生JavaScript作为前端开发的基石其重要性同样不可忽视。本文将围绕蓝桥杯Web真题中的两个经典场景——购物车功能与分页列表展示如何将竞赛题目转化为具有工程化价值的实战项目。为什么选择这两个场景购物车功能涵盖了Vue2的核心特性数据绑定、组件通信、状态管理分页列表则考验原生JS的DOM操作、事件处理和异步数据加载能力两者结合可形成完整的前端技能闭环2. 购物车功能深度实现2.1 Vue2项目初始化与工程配置首先创建Vue2项目并配置必要依赖vue create shopping-cart cd shopping-cart npm install vuex axios --save项目目录结构建议/src /components CartItem.vue ProductList.vue /store index.js App.vue main.js2.2 状态管理设计使用Vuex管理购物车状态store配置示例// store/index.js export default new Vuex.Store({ state: { cartItems: [], products: [] }, mutations: { ADD_TO_CART(state, product) { const existingItem state.cartItems.find(item item.id product.id) if (existingItem) { existingItem.quantity } else { state.cartItems.push({ ...product, quantity: 1 }) } }, REMOVE_FROM_CART(state, itemId) { const index state.cartItems.findIndex(item item.id itemId) if (index ! -1) { if (state.cartItems[index].quantity 1) { state.cartItems[index].quantity-- } else { state.cartItems.splice(index, 1) } } } }, actions: { async fetchProducts({ commit }) { const response await axios.get(/api/products) commit(SET_PRODUCTS, response.data) } } })2.3 购物车核心功能实现商品列表组件关键代码template div classproduct-list div v-forproduct in products :keyproduct.id classproduct-card h3{{ product.name }}/h3 p价格: ¥{{ product.price }}/p button clickaddToCart(product)加入购物车/button /div /div /template script export default { computed: { products() { return this.$store.state.products } }, methods: { addToCart(product) { this.$store.commit(ADD_TO_CART, product) } } } /script购物车组件交互逻辑template div classcart div v-foritem in cartItems :keyitem.id classcart-item span{{ item.name }} × {{ item.quantity }}/span button clickdecreaseQuantity(item.id)-/button button clickincreaseQuantity(item.id)/button /div p总价: ¥{{ totalPrice }}/p /div /template script export default { computed: { cartItems() { return this.$store.state.cartItems }, totalPrice() { return this.cartItems.reduce( (total, item) total item.price * item.quantity, 0 ) } }, methods: { decreaseQuantity(id) { this.$store.commit(REMOVE_FROM_CART, id) }, increaseQuantity(id) { this.$store.commit(ADD_TO_CART, this.cartItems.find(item item.id id)) } } } /script3. 原生JS分页列表实现3.1 基础HTML结构与样式div classpagination-container div idcourse-list classcourse-list/div div classpagination-controls button idprev-btn上一页/button span idpage-indicator第1页/span button idnext-btn下一页/button /div /div3.2 数据加载与分页逻辑class Pagination { constructor(containerId, pageSize 5) { this.container document.getElementById(containerId) this.pageSize pageSize this.currentPage 1 this.data [] this.init() } async init() { await this.loadData() this.render() this.setupEventListeners() } async loadData() { try { const response await fetch(/api/courses) this.data await response.json() this.totalPages Math.ceil(this.data.length / this.pageSize) } catch (error) { console.error(数据加载失败:, error) } } render() { const startIndex (this.currentPage - 1) * this.pageSize const endIndex startIndex this.pageSize const pageData this.data.slice(startIndex, endIndex) this.container.innerHTML pageData.map(item div classcourse-item h3${item.title}/h3 p${item.description}/p span价格: ¥${item.price.toFixed(2)}/span /div ).join() document.getElementById(page-indicator).textContent 第${this.currentPage}页/共${this.totalPages}页 document.getElementById(prev-btn).disabled this.currentPage 1 document.getElementById(next-btn).disabled this.currentPage this.totalPages } setupEventListeners() { document.getElementById(prev-btn).addEventListener(click, () { if (this.currentPage 1) { this.currentPage-- this.render() } }) document.getElementById(next-btn).addEventListener(click, () { if (this.currentPage this.totalPages) { this.currentPage this.render() } }) } } // 初始化分页实例 new Pagination(course-list)3.3 性能优化技巧数据缓存首次加载后缓存数据避免重复请求虚拟滚动对于大数据量实现虚拟滚动提升性能节流处理对分页按钮点击事件进行节流控制// 节流函数实现 function throttle(func, limit 300) { let lastFunc let lastRan return function() { const context this const args arguments if (!lastRan) { func.apply(context, args) lastRan Date.now() } else { clearTimeout(lastFunc) lastFunc setTimeout(function() { if ((Date.now() - lastRan) limit) { func.apply(context, args) lastRan Date.now() } }, limit - (Date.now() - lastRan)) } } }4. 工程化进阶实践4.1 API模拟与联调使用JSON Server快速搭建模拟APInpm install -g json-server echo { products: [ {id: 1, name: Vue实战课程, price: 299}, {id: 2, name: JS高级编程, price: 199} ], courses: [ {id: 1, title: 前端基础, description: HTML/CSS/JS入门, price: 99}, {id: 2, title: Vue组件开发, description: 深入理解Vue组件, price: 129} ] } db.json json-server --watch db.json4.2 错误处理与边界情况增强分页组件的健壮性class Pagination { // ...其他代码... render() { if (!this.data || this.data.length 0) { this.container.innerHTML div classempty-message暂无数据/div return } // ...原有渲染逻辑... } async loadData() { try { const response await fetch(/api/courses) if (!response.ok) throw new Error(网络响应不正常) this.data await response.json() this.totalPages Math.max(1, Math.ceil(this.data.length / this.pageSize)) this.currentPage Math.min(this.currentPage, this.totalPages) } catch (error) { console.error(数据加载失败:, error) this.container.innerHTML div classerror-message 数据加载失败: ${error.message} button onclicklocation.reload()重试/button /div } } }4.3 响应式设计适配购物车样式优化方案/* 移动端优先设计 */ .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #eee; } media (min-width: 768px) { .cart-item { padding: 16px; } } /* 分页控件响应式 */ .pagination-controls { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } media (min-width: 576px) { .pagination-controls { gap: 16px; } }5. 项目优化与扩展方向5.1 性能监控指标关键性能指标及优化建议指标优化目标实现方法首次内容渲染(FCP)1s代码分割、懒加载交互时间(TTI)2s减少主线程工作总阻塞时间(TBT)300ms优化长任务页面大小500KB资源压缩5.2 可扩展架构设计推荐的项目结构扩展/src /features /cart Cart.vue cart.store.js /products ProductList.vue products.store.js /shared /components Pagination.vue /utils api.js helpers.js5.3 测试策略为购物车功能添加单元测试// cart.store.spec.js import cartStore from ./cart.store describe(购物车Store, () { beforeEach(() { cartStore.state.cartItems [] }) test(添加商品到购物车, () { const product { id: 1, name: 测试商品, price: 100 } cartStore.mutations.ADD_TO_CART(cartStore.state, product) expect(cartStore.state.cartItems).toHaveLength(1) expect(cartStore.state.cartItems[0].quantity).toBe(1) }) test(重复添加同一商品应增加数量, () { const product { id: 1, name: 测试商品, price: 100 } cartStore.mutations.ADD_TO_CART(cartStore.state, product) cartStore.mutations.ADD_TO_CART(cartStore.state, product) expect(cartStore.state.cartItems).toHaveLength(1) expect(cartStore.state.cartItems[0].quantity).toBe(2) }) })6. 从竞赛到实战的思维转变在将蓝桥杯真题转化为实际项目时需要特别注意以下几点差异代码组织竞赛代码通常集中在一个文件而工程化项目需要模块化拆分错误处理实际项目必须考虑各种边界情况和错误处理性能考量真实用户环境下的性能优化至关重要团队协作代码可读性和可维护性成为重要指标持续集成需要建立自动化构建和测试流程实际开发中建议使用ESLintPrettier保证代码风格一致配置Husky在提交前自动运行测试这些工程化实践能显著提升项目质量。