wangziqi/shopping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
王子琦
2026-01-13 16:58:45 +08:00
parent 511c3bfdbe
commit 0387b43083
81 changed files with 3451 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>童飞玩具购物网站</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

22
frontend/package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "toyshop-frontend",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"ant-design-vue": "^4.1.2",
"axios": "^1.6.7",
"dayjs": "^1.11.10",
"vue": "^3.4.21",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.2.0"
}
}

3
frontend/src/App.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<router-view />
</template>

24
frontend/src/api/index.js Normal file
View File

@@ -0,0 +1,24 @@
import axios from 'axios'
const api = axios.create({
baseURL: 'http://localhost:8080',
timeout: 10000
})
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
api.interceptors.response.use(
(res) => res.data,
(err) => {
const message = err?.response?.data?.message || '请求失败'
return Promise.reject(new Error(message))
}
)
export default api

52
frontend/src/layouts/AdminLayout.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<a-layout style="min-height: 100vh">
<a-layout-sider collapsible>
<div class="logo">后台管理</div>
<a-menu theme="dark" mode="inline" :selectedKeys="[active]">
<a-menu-item key="users" @click="go('/admin/users')">用户管理</a-menu-item>
<a-menu-item key="categories" @click="go('/admin/categories')">分类管理</a-menu-item>
<a-menu-item key="products" @click="go('/admin/products')">商品管理</a-menu-item>
<a-menu-item key="orders" @click="go('/admin/orders')">订单管理</a-menu-item>
<a-menu-item key="carousels" @click="go('/admin/carousels')">轮播图管理</a-menu-item>
<a-menu-item key="notices" @click="go('/admin/notices')">公告管理</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header class="header">
<a-button type="link" @click="logout">退出</a-button>
</a-layout-header>
<a-layout-content style="margin: 16px">
<router-view />
</a-layout-content>
</a-layout>
</a-layout>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const active = computed(() => route.path.split('/')[2] || 'users')
const go = (path) => router.push(path)
const logout = () => {
localStorage.removeItem('token')
localStorage.removeItem('role')
router.push('/admin/login')
}
</script>
<style scoped>
.logo {
color: #fff;
padding: 16px;
text-align: center;
font-weight: 600;
}
.header {
background: #fff;
text-align: right;
padding: 0 16px;
}
</style>

69
frontend/src/layouts/MainLayout.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<a-layout>
<a-layout-header class="header">
<div class="logo">童飞玩具购物网站</div>
<a-menu theme="dark" mode="horizontal" :selectedKeys="[active]">
<a-menu-item key="home" @click="go('/')">首页</a-menu-item>
<a-menu-item key="products" @click="go('/products')">商品</a-menu-item>
<a-menu-item key="cart" @click="go('/cart')">购物车</a-menu-item>
<a-menu-item key="orders" @click="go('/orders')">我的订单</a-menu-item>
<a-menu-item key="profile" @click="go('/profile')">个人中心</a-menu-item>
</a-menu>
<div class="actions">
<a-button type="link" v-if="!token" @click="go('/login')">登录</a-button>
<a-button type="link" v-if="!token" @click="go('/register')">注册</a-button>
<a-button type="link" v-if="token" @click="logout">退出</a-button>
</div>
</a-layout-header>
<a-layout-content class="content">
<router-view />
</a-layout-content>
<a-layout-footer class="footer">© 2026 童飞玩具购物网站</a-layout-footer>
</a-layout>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const token = localStorage.getItem('token')
const active = computed(() => {
if (route.path.startsWith('/products')) return 'products'
if (route.path.startsWith('/cart')) return 'cart'
if (route.path.startsWith('/orders')) return 'orders'
if (route.path.startsWith('/profile')) return 'profile'
return 'home'
})
const go = (path) => router.push(path)
const logout = () => {
localStorage.removeItem('token')
localStorage.removeItem('role')
router.push('/')
}
</script>
<style scoped>
.header {
display: flex;
align-items: center;
gap: 24px;
}
.logo {
color: #fff;
font-weight: 600;
}
.actions {
margin-left: auto;
}
.content {
min-height: 80vh;
padding: 24px;
background: #f5f5f5;
}
.footer {
text-align: center;
}
</style>

10
frontend/src/main.js Normal file
View File

@@ -0,0 +1,10 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
const app = createApp(App)
app.use(router)
app.use(Antd)
app.mount('#app')

51
frontend/src/pages/admin/AdminCarousels.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<a-card title="轮播图管理">
<a-form layout="inline">
<a-form-item label="图片URL"><a-input v-model:value="form.imageUrl" /></a-form-item>
<a-form-item label="链接"><a-input v-model:value="form.linkUrl" /></a-form-item>
<a-form-item label="排序"><a-input-number v-model:value="form.sortOrder" /></a-form-item>
<a-button type="primary" @click="create">新增</a-button>
</a-form>
<a-table :dataSource="list" :columns="columns" rowKey="id" style="margin-top: 16px">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-button type="link" danger @click="remove(record)">删除</a-button>
</template>
</template>
</a-table>
</a-card>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import api from '../../api'
const list = ref([])
const form = reactive({ imageUrl: '', linkUrl: '', sortOrder: 0 })
const columns = [
{ title: '图片', dataIndex: 'imageUrl' },
{ title: '链接', dataIndex: 'linkUrl' },
{ title: '排序', dataIndex: 'sortOrder' },
{ title: '操作', key: 'action' }
]
const load = async () => {
const res = await api.get('/api/admin/carousels')
if (res.success) list.value = res.data
}
const create = async () => {
await api.post('/api/admin/carousels', form)
form.imageUrl = ''
form.linkUrl = ''
form.sortOrder = 0
load()
}
const remove = async (record) => {
await api.delete(`/api/admin/carousels/${record.id}`)
load()
}
onMounted(load)
</script>

48
frontend/src/pages/admin/AdminCategories.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<a-card title="分类管理">
<a-form layout="inline">
<a-form-item label="名称"><a-input v-model:value="form.name" /></a-form-item>
<a-form-item label="描述"><a-input v-model:value="form.description" /></a-form-item>
<a-button type="primary" @click="create">新增</a-button>
</a-form>
<a-table :dataSource="list" :columns="columns" rowKey="id" style="margin-top: 16px">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-button type="link" danger @click="remove(record)">删除</a-button>
</template>
</template>
</a-table>
</a-card>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import api from '../../api'
const list = ref([])
const form = reactive({ name: '', description: '' })
const columns = [
{ title: '名称', dataIndex: 'name' },
{ title: '描述', dataIndex: 'description' },
{ title: '操作', key: 'action' }
]
const load = async () => {
const res = await api.get('/api/admin/categories')
if (res.success) list.value = res.data
}
const create = async () => {
await api.post('/api/admin/categories', form)
form.name = ''
form.description = ''
load()
}
const remove = async (record) => {
await api.delete(`/api/admin/categories/${record.id}`)
load()
}
onMounted(load)
</script>

29
frontend/src/pages/admin/AdminLogin.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<a-card title="管理员登录" style="max-width: 360px; margin: 80px auto;">
<a-form layout="vertical">
<a-form-item label="用户名"><a-input v-model:value="form.username" /></a-form-item>
<a-form-item label="密码"><a-input-password v-model:value="form.password" /></a-form-item>
<a-button type="primary" block @click="submit">登录</a-button>
</a-form>
</a-card>
</template>
<script setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import api from '../../api'
const router = useRouter()
const form = reactive({ username: 'admin', password: 'admin123' })
const submit = async () => {
const res = await api.post('/api/auth/admin/login', form)
if (res.success) {
localStorage.setItem('token', res.data.token)
localStorage.setItem('role', res.data.role)
message.success('登录成功')
router.push('/admin/users')
}
}
</script>

48
frontend/src/pages/admin/AdminNotices.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<a-card title="公告管理">
<a-form layout="inline">
<a-form-item label="标题"><a-input v-model:value="form.title" /></a-form-item>
<a-form-item label="内容"><a-input v-model:value="form.content" /></a-form-item>
<a-button type="primary" @click="create">新增</a-button>
</a-form>
<a-table :dataSource="list" :columns="columns" rowKey="id" style="margin-top: 16px">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-button type="link" danger @click="remove(record)">删除</a-button>
</template>
</template>
</a-table>
</a-card>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import api from '../../api'
const list = ref([])
const form = reactive({ title: '', content: '' })
const columns = [
{ title: '标题', dataIndex: 'title' },
{ title: '内容', dataIndex: 'content' },
{ title: '操作', key: 'action' }
]
const load = async () => {
const res = await api.get('/api/admin/notices')
if (res.success) list.value = res.data
}
const create = async () => {
await api.post('/api/admin/notices', form)
form.title = ''
form.content = ''
load()
}
const remove = async (record) => {
await api.delete(`/api/admin/notices/${record.id}`)
load()
}
onMounted(load)
</script>

47
frontend/src/pages/admin/AdminOrders.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<a-card title="订单管理">
<a-table :dataSource="orders" :columns="columns" rowKey="id">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<a-select v-model:value="record.status" style="width: 120px" @change="val => updateStatus(record, val)">
<a-select-option value="PENDING_PAYMENT">待付款</a-select-option>
<a-select-option value="PENDING_SHIPMENT">待发货</a-select-option>
<a-select-option value="SHIPPED">已发货</a-select-option>
<a-select-option value="COMPLETED">已完成</a-select-option>
</a-select>
</template>
<template v-else-if="column.key === 'logistics'">
<a-input v-model:value="record.logisticsNo" @blur="saveLogistics(record)" />
</template>
</template>
</a-table>
</a-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import api from '../../api'
const orders = ref([])
const columns = [
{ title: '订单号', dataIndex: 'orderNo' },
{ title: '金额', dataIndex: 'totalAmount' },
{ title: '状态', key: 'status' },
{ title: '物流单号', key: 'logistics' }
]
const load = async () => {
const res = await api.get('/api/admin/orders')
if (res.success) orders.value = res.data
}
const updateStatus = async (record, val) => {
await api.put('/api/admin/orders/status', { orderId: record.id, status: val, logisticsNo: record.logisticsNo })
}
const saveLogistics = async (record) => {
await api.put('/api/admin/orders/status', { orderId: record.id, status: record.status, logisticsNo: record.logisticsNo })
}
onMounted(load)
</script>

80
frontend/src/pages/admin/AdminProducts.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<a-card title="商品管理">
<a-form layout="inline">
<a-form-item label="名称"><a-input v-model:value="form.name" /></a-form-item>
<a-form-item label="价格"><a-input-number v-model:value="form.price" /></a-form-item>
<a-form-item label="库存"><a-input-number v-model:value="form.stock" /></a-form-item>
<a-form-item label="分类">
<a-select v-model:value="form.categoryId" style="width: 120px" allowClear>
<a-select-option v-for="c in categories" :key="c.id" :value="c.id">{{ c.name }}</a-select-option>
</a-select>
</a-form-item>
<a-button type="primary" @click="create">新增</a-button>
</a-form>
<a-table :dataSource="list" :columns="columns" rowKey="id" style="margin-top: 16px">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-button type="link" @click="addImage(record)">图片</a-button>
<a-button type="link" danger @click="remove(record)">删除</a-button>
</template>
</template>
</a-table>
<a-modal v-model:open="imgVisible" title="新增图片" @ok="saveImage">
<a-input v-model:value="imgForm.url" placeholder="图片URL" />
<a-input-number v-model:value="imgForm.sortOrder" style="margin-top: 8px" />
</a-modal>
</a-card>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import api from '../../api'
const list = ref([])
const categories = ref([])
const form = reactive({ name: '', price: 0, stock: 0, categoryId: null })
const columns = [
{ title: '名称', dataIndex: 'name' },
{ title: '价格', dataIndex: 'price' },
{ title: '库存', dataIndex: 'stock' },
{ title: '操作', key: 'action' }
]
const imgVisible = ref(false)
const imgForm = reactive({ productId: null, url: '', sortOrder: 0 })
const load = async () => {
const res = await api.get('/api/admin/products')
if (res.success) list.value = res.data
const res2 = await api.get('/api/admin/categories')
if (res2.success) categories.value = res2.data
}
const create = async () => {
await api.post('/api/admin/products', form)
form.name = ''
form.price = 0
form.stock = 0
form.categoryId = null
load()
}
const remove = async (record) => {
await api.delete(`/api/admin/products/${record.id}`)
load()
}
const addImage = (record) => {
imgForm.productId = record.id
imgForm.url = ''
imgForm.sortOrder = 0
imgVisible.value = true
}
const saveImage = async () => {
await api.post(`/api/admin/products/${imgForm.productId}/images`, imgForm)
imgVisible.value = false
}
onMounted(load)
</script>

35
frontend/src/pages/admin/AdminUsers.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<a-card title="用户管理">
<a-table :dataSource="users" :columns="columns" rowKey="id">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<a-switch :checked="record.enabled" @change="val => updateStatus(record, val)" />
</template>
</template>
</a-table>
</a-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import api from '../../api'
const users = ref([])
const columns = [
{ title: '用户名', dataIndex: 'username' },
{ title: '角色', dataIndex: 'role' },
{ title: '状态', key: 'status' }
]
const load = async () => {
const res = await api.get('/api/admin/users')
if (res.success) users.value = res.data
}
const updateStatus = async (record, val) => {
await api.put(`/api/admin/users/${record.id}`, { enabled: val })
load()
}
onMounted(load)
</script>

54
frontend/src/pages/user/Cart.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<a-card title="购物车">
<a-table :dataSource="items" :columns="columns" rowKey="id">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'product'">
{{ record.product.name }}
</template>
<template v-else-if="column.key === 'quantity'">
<a-input-number :min="1" v-model:value="record.quantity" @change="val => updateQuantity(record, val)" />
</template>
<template v-else-if="column.key === 'price'">
￥{{ record.product.price }}
</template>
<template v-else-if="column.key === 'action'">
<a-button type="link" danger @click="remove(record)">删除</a-button>
</template>
</template>
</a-table>
<a-button type="primary" style="margin-top: 16px" @click="goCheckout">去结算</a-button>
</a-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import api from '../../api'
const router = useRouter()
const items = ref([])
const columns = [
{ title: '商品', key: 'product' },
{ title: '数量', key: 'quantity' },
{ title: '单价', key: 'price' },
{ title: '操作', key: 'action' }
]
const load = async () => {
const res = await api.get('/api/user/cart')
if (res.success) items.value = res.data
}
const updateQuantity = async (record, val) => {
await api.put(`/api/user/cart/${record.id}`, { productId: record.product.id, quantity: val })
}
const remove = async (record) => {
await api.delete(`/api/user/cart/${record.id}`)
load()
}
const goCheckout = () => router.push('/checkout')
onMounted(load)
</script>

38
frontend/src/pages/user/Checkout.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<a-card title="订单确认">
<a-list :data-source="addresses">
<template #renderItem="{ item }">
<a-list-item>
<a-radio v-model:checked="selected" :value="item.id">
{{ item.receiverName }} {{ item.receiverPhone }} {{ item.detail }}
</a-radio>
</a-list-item>
</template>
</a-list>
<a-button type="primary" @click="createOrder" :disabled="!selected">提交订单</a-button>
</a-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import api from '../../api'
const addresses = ref([])
const selected = ref(null)
const router = useRouter()
const load = async () => {
const res = await api.get('/api/user/addresses')
if (res.success) addresses.value = res.data
}
const createOrder = async () => {
await api.post('/api/user/orders', { addressId: selected.value })
message.success('下单成功')
router.push('/orders')
}
onMounted(load)
</script>

80
frontend/src/pages/user/Home.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<a-spin :spinning="loading">
<a-card title="轮播与公告">
<a-carousel autoplay>
<div v-for="item in home.carousels" :key="item.id" class="banner">
<img :src="item.imageUrl" alt="banner" />
</div>
</a-carousel>
<a-list :data-source="home.notices" style="margin-top: 16px">
<template #renderItem="{ item }">
<a-list-item>{{ item.title }}</a-list-item>
</template>
</a-list>
</a-card>
<a-card title="热门商品" style="margin-top: 16px">
<a-row :gutter="16">
<a-col :span="6" v-for="item in home.hot" :key="item.id">
<a-card hoverable @click="goDetail(item.id)">
<div class="title">{{ item.name }}</div>
<div class="price">￥{{ item.price }}</div>
</a-card>
</a-col>
</a-row>
</a-card>
<a-card title="新品上架" style="margin-top: 16px">
<a-row :gutter="16">
<a-col :span="6" v-for="item in home.newest" :key="item.id">
<a-card hoverable @click="goDetail(item.id)">
<div class="title">{{ item.name }}</div>
<div class="price">￥{{ item.price }}</div>
</a-card>
</a-col>
</a-row>
</a-card>
</a-spin>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import api from '../../api'
const loading = ref(false)
const home = reactive({ carousels: [], notices: [], hot: [], newest: [] })
const router = useRouter()
const load = async () => {
loading.value = true
try {
const res = await api.get('/api/public/home')
if (res.success) Object.assign(home, res.data)
} finally {
loading.value = false
}
}
const goDetail = (id) => router.push(`/products/${id}`)
onMounted(load)
</script>
<style scoped>
.banner {
height: 240px;
overflow: hidden;
}
.banner img {
width: 100%;
height: 240px;
object-fit: cover;
}
.title {
font-weight: 600;
}
.price {
color: #f5222d;
}
</style>

29
frontend/src/pages/user/Login.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<a-card title="用户登录" style="max-width: 360px; margin: 0 auto;">
<a-form layout="vertical">
<a-form-item label="用户名"><a-input v-model:value="form.username" /></a-form-item>
<a-form-item label="密码"><a-input-password v-model:value="form.password" /></a-form-item>
<a-button type="primary" block @click="submit">登录</a-button>
</a-form>
</a-card>
</template>
<script setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import api from '../../api'
const router = useRouter()
const form = reactive({ username: '', password: '' })
const submit = async () => {
const res = await api.post('/api/auth/login', form)
if (res.success) {
localStorage.setItem('token', res.data.token)
localStorage.setItem('role', res.data.role)
message.success('登录成功')
router.push('/')
}
}
</script>

46
frontend/src/pages/user/Orders.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<a-card title="我的订单">
<a-table :dataSource="orders" :columns="columns" rowKey="id">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
{{ statusMap[record.status] || record.status }}
</template>
<template v-else-if="column.key === 'action'">
<a-button type="link" v-if="record.status === 'PENDING_PAYMENT'" @click="pay(record)">去支付</a-button>
</template>
</template>
</a-table>
</a-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import api from '../../api'
const orders = ref([])
const columns = [
{ title: '订单号', dataIndex: 'orderNo' },
{ title: '金额', dataIndex: 'totalAmount' },
{ title: '状态', key: 'status' },
{ title: '操作', key: 'action' }
]
const statusMap = {
PENDING_PAYMENT: '待付款',
PENDING_SHIPMENT: '待发货',
SHIPPED: '已发货',
COMPLETED: '已完成'
}
const load = async () => {
const res = await api.get('/api/user/orders')
if (res.success) orders.value = res.data
}
const pay = async (record) => {
await api.post(`/api/user/orders/${record.id}/pay`)
load()
}
onMounted(load)
</script>

71
frontend/src/pages/user/ProductDetail.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<a-spin :spinning="loading">
<a-card>
<a-row :gutter="16">
<a-col :span="10">
<a-carousel>
<div v-for="img in images" :key="img.id" class="banner">
<img :src="img.url" alt="img" />
</div>
</a-carousel>
</a-col>
<a-col :span="14">
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
<div class="price">￥{{ product.price }}</div>
<div>库存：{{ product.stock }}</div>
<div>适龄：{{ product.ageRange }}</div>
<div>安全认证：{{ product.safetyInfo }}</div>
<a-space style="margin-top: 16px">
<a-input-number v-model:value="quantity" :min="1" />
<a-button type="primary" @click="addToCart">加入购物车</a-button>
</a-space>
</a-col>
</a-row>
</a-card>
</a-spin>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import api from '../../api'
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const product = ref({})
const images = ref([])
const quantity = ref(1)
const load = async () => {
loading.value = true
try {
const res = await api.get(`/api/public/products/${route.params.id}`)
if (res.success) {
product.value = res.data.product
images.value = res.data.images
}
} finally {
loading.value = false
}
}
const addToCart = async () => {
if (!localStorage.getItem('token')) {
router.push('/login')
return
}
await api.post('/api/user/cart', { productId: product.value.id, quantity: quantity.value })
message.success('已加入购物车')
}
onMounted(load)
</script>
<style scoped>
.banner { height: 260px; }
.banner img { width: 100%; height: 260px; object-fit: cover; }
.price { color: #f5222d; font-size: 20px; margin: 8px 0; }
</style>

63
frontend/src/pages/user/ProductList.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<a-card>
<a-space>
<a-input v-model:value="keyword" placeholder="搜索商品" style="width: 200px" />
<a-select v-model:value="categoryId" placeholder="分类" style="width: 160px" allowClear>
<a-select-option v-for="c in categories" :key="c.id" :value="c.id">{{ c.name }}</a-select-option>
</a-select>
<a-select v-model:value="sort" placeholder="排序" style="width: 160px" allowClear>
<a-select-option value="price">价格</a-select-option>
<a-select-option value="sales">销量</a-select-option>
</a-select>
<a-button type="primary" @click="load">搜索</a-button>
</a-space>
</a-card>
<a-row :gutter="16" style="margin-top: 16px">
<a-col :span="6" v-for="item in list" :key="item.id">
<a-card hoverable @click="goDetail(item.id)">
<div class="title">{{ item.name }}</div>
<div class="price">￥{{ item.price }}</div>
<div class="meta">销量 {{ item.sales }}</div>
</a-card>
</a-col>
</a-row>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import api from '../../api'
const router = useRouter()
const list = ref([])
const categories = ref([])
const keyword = ref('')
const categoryId = ref(null)
const sort = ref(null)
const load = async () => {
const res = await api.get('/api/public/products', {
params: { keyword: keyword.value, categoryId: categoryId.value, sort: sort.value }
})
if (res.success) list.value = res.data
}
const loadCategories = async () => {
const res = await api.get('/api/public/home')
if (res.success) categories.value = res.data.categories
}
const goDetail = (id) => router.push(`/products/${id}`)
onMounted(() => {
load()
loadCategories()
})
</script>
<style scoped>
.title { font-weight: 600; }
.price { color: #f5222d; }
.meta { color: #999; }
</style>

68
frontend/src/pages/user/Profile.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<a-card title="个人中心">
<a-form layout="vertical">
<a-form-item label="手机号"><a-input v-model:value="profile.phone" /></a-form-item>
<a-form-item label="邮箱"><a-input v-model:value="profile.email" /></a-form-item>
<a-form-item label="头像URL"><a-input v-model:value="profile.avatar" /></a-form-item>
<a-button type="primary" @click="save">保存</a-button>
</a-form>
</a-card>
<a-card title="收货地址" style="margin-top: 16px">
<a-form layout="inline">
<a-form-item label="姓名"><a-input v-model:value="addr.receiverName" /></a-form-item>
<a-form-item label="电话"><a-input v-model:value="addr.receiverPhone" /></a-form-item>
<a-form-item label="地址"><a-input v-model:value="addr.detail" /></a-form-item>
<a-button type="primary" @click="addAddress">新增</a-button>
</a-form>
<a-list :data-source="addresses" style="margin-top: 16px">
<template #renderItem="{ item }">
<a-list-item>
{{ item.receiverName }} {{ item.receiverPhone }} {{ item.detail }}
<a-button type="link" danger @click="remove(item)">删除</a-button>
</a-list-item>
</template>
</a-list>
</a-card>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import api from '../../api'
const profile = reactive({ phone: '', email: '', avatar: '' })
const addresses = ref([])
const addr = reactive({ receiverName: '', receiverPhone: '', detail: '' })
const load = async () => {
const res = await api.get('/api/user/profile')
if (res.success) {
profile.phone = res.data.phone || ''
profile.email = res.data.email || ''
profile.avatar = res.data.avatar || ''
}
const res2 = await api.get('/api/user/addresses')
if (res2.success) addresses.value = res2.data
}
const save = async () => {
await api.put('/api/user/profile', profile)
message.success('保存成功')
}
const addAddress = async () => {
await api.post('/api/user/addresses', addr)
addr.receiverName = ''
addr.receiverPhone = ''
addr.detail = ''
load()
}
const remove = async (item) => {
await api.delete(`/api/user/addresses/${item.id}`)
load()
}
onMounted(load)
</script>

31
frontend/src/pages/user/Register.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<a-card title="用户注册" style="max-width: 360px; margin: 0 auto;">
<a-form layout="vertical">
<a-form-item label="用户名"><a-input v-model:value="form.username" /></a-form-item>
<a-form-item label="密码"><a-input-password v-model:value="form.password" /></a-form-item>
<a-form-item label="手机号"><a-input v-model:value="form.phone" /></a-form-item>
<a-form-item label="邮箱"><a-input v-model:value="form.email" /></a-form-item>
<a-button type="primary" block @click="submit">注册</a-button>
</a-form>
</a-card>
</template>
<script setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import api from '../../api'
const router = useRouter()
const form = reactive({ username: '', password: '', phone: '', email: '' })
const submit = async () => {
const res = await api.post('/api/auth/register', form)
if (res.success) {
localStorage.setItem('token', res.data.token)
localStorage.setItem('role', res.data.role)
message.success('注册成功')
router.push('/')
}
}
</script>

74
frontend/src/router/index.js Normal file
View File

@@ -0,0 +1,74 @@
import { createRouter, createWebHistory } from 'vue-router'
import MainLayout from '../layouts/MainLayout.vue'
import AdminLayout from '../layouts/AdminLayout.vue'
import Home from '../pages/user/Home.vue'
import ProductList from '../pages/user/ProductList.vue'
import ProductDetail from '../pages/user/ProductDetail.vue'
import Cart from '../pages/user/Cart.vue'
import Checkout from '../pages/user/Checkout.vue'
import Orders from '../pages/user/Orders.vue'
import Profile from '../pages/user/Profile.vue'
import Login from '../pages/user/Login.vue'
import Register from '../pages/user/Register.vue'
import AdminLogin from '../pages/admin/AdminLogin.vue'
import AdminUsers from '../pages/admin/AdminUsers.vue'
import AdminCategories from '../pages/admin/AdminCategories.vue'
import AdminProducts from '../pages/admin/AdminProducts.vue'
import AdminOrders from '../pages/admin/AdminOrders.vue'
import AdminCarousels from '../pages/admin/AdminCarousels.vue'
import AdminNotices from '../pages/admin/AdminNotices.vue'
const routes = [
{
path: '/',
component: MainLayout,
children: [
{ path: '', component: Home },
{ path: 'products', component: ProductList },
{ path: 'products/:id', component: ProductDetail },
{ path: 'cart', component: Cart },
{ path: 'checkout', component: Checkout },
{ path: 'orders', component: Orders },
{ path: 'profile', component: Profile },
{ path: 'login', component: Login },
{ path: 'register', component: Register }
]
},
{
path: '/admin/login',
component: AdminLogin
},
{
path: '/admin',
component: AdminLayout,
children: [
{ path: 'users', component: AdminUsers },
{ path: 'categories', component: AdminCategories },
{ path: 'products', component: AdminProducts },
{ path: 'orders', component: AdminOrders },
{ path: 'carousels', component: AdminCarousels },
{ path: 'notices', component: AdminNotices }
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
const role = localStorage.getItem('role')
if (to.path.startsWith('/admin') && to.path !== '/admin/login') {
if (!token || role !== 'ADMIN') return next('/admin/login')
}
if (['/cart', '/checkout', '/orders', '/profile'].includes(to.path)) {
if (!token) return next('/login')
}
next()
})
export default router

9
frontend/vite.config.js Normal file
View File

@@ -0,0 +1,9 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 5173
}
})