vue实现图书购买系统
Vue实现图书购买系统
项目结构设计
使用Vue CLI或Vite初始化项目，推荐目录结构：
src/components/存放可复用组件（如图书卡片、购物车）src/views/存放页面级组件（如首页、详情页）src/store/配置Vuex状态管理src/api/封装API请求
核心功能实现
图书列表展示
<template>
<div class="book-list">
<BookCard
v-for="book in books"
:key="book.id"
:book="book"
@add-to-cart="handleAddToCart"
/>
</div>
</template>
<script>
import BookCard from '@/components/BookCard.vue'
export default {
components: { BookCard },
data() {
return {
books: [] // 通过API获取数据
}
},
methods: {
handleAddToCart(book) {
this.$store.dispatch('addToCart', book)
}
}
}
</script>购物车管理（Vuex示例）
// store/index.js
export default new Vuex.Store({
state: {
cartItems: []
},
mutations: {
ADD_TO_CART(state, book) {
const existingItem = state.cartItems.find(item => item.id === book.id)
existingItem
? existingItem.quantity++
: state.cartItems.push({ ...book, quantity: 1 })
}
},
actions: {
addToCart({ commit }, book) {
commit('ADD_TO_CART', book)
}
}
})订单结算功能
<template>
<div class="checkout">
<h3>订单总计: {{ totalPrice }}</h3>
<button @click="handleCheckout">结算</button>
</div>
</template>
<script>
export default {
computed: {
totalPrice() {
return this.$store.state.cartItems.reduce(
(sum, item) => sum + item.price * item.quantity, 0
)
}
},
methods: {
async handleCheckout() {
const order = {
items: this.$store.state.cartItems,
total: this.totalPrice
}
await axios.post('/api/orders', order)
this.$store.commit('CLEAR_CART')
}
}
}
</script>关键技术点
路由配置
// router/index.js
const routes = [
{
path: '/',
component: () => import('@/views/Home.vue')
},
{
path: '/book/:id',
component: () => import('@/views/BookDetail.vue')
},
{
path: '/cart',
component: () => import('@/views/Cart.vue')
}
]API请求封装
// api/books.js
import axios from 'axios'
export default {
getBooks() {
return axios.get('/api/books')
},
getBookDetail(id) {
return axios.get(`/api/books/${id}`)
}
}样式优化建议
使用CSS变量维护主题色：
:root {
--primary-color: #42b983;
--secondary-color: #35495e;
}
.book-card {
border: 1px solid var(--secondary-color);
transition: transform 0.3s;
}
.book-card:hover {
transform: translateY(-5px);
}部署注意事项
-
生产环境配置环境变量
VUE_APP_API_BASE_URL=https://api.example.com -
构建命令
npm run build -
推荐使用Docker容器化部署或静态文件托管服务（如Netlify）
