yovinchen/FlashSaleSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后端功能增强：全局异常处理、API控制器、JSP视图和单元测试

Browse Source 
- 添加 GlobalExceptionHandler 全局异常处理
- 添加 ApiController REST API 控制器
- 更新 WebConfig 跨域配置和 ProductRepository 查询方法
- 新增 monitor/product-detail/profile JSP 视图页面
- 添加 FlashSaleServiceTest 秒杀服务单元测试
- 更新 application.yml 配置
This commit is contained in:
YoVinchen
2026-03-05 20:30:48 +08:00
parent 923e877759
commit 989c2741a2
63 changed files with 15508 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
flash-sale-frontend/src/pages/user/login.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<div class="login-page min-h-screen flex items-center justify-center bg-gray-50">
<div class="max-w-md w-full">
<div class="bg-white rounded-lg shadow-lg p-8">
<!-- Logo -->
<div class="text-center mb-8">
<el-icon :size="48" class="text-red-500 mb-4">
<Lightning />
</el-icon>
<h1 class="text-2xl font-bold text-gray-900">欢迎回来</h1>
<p class="text-gray-600 mt-2">登录到秒杀系统</p>
</div>
<!-- 登录表单 -->
<el-form
ref="formRef"
:model="loginForm"
:rules="rules"
@submit.prevent
>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
size="large"
placeholder="请输入用户名"
prefix-icon="User"
clearable
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
size="large"
placeholder="请输入密码"
prefix-icon="Lock"
show-password
@keyup.enter="handleLogin"
/>
</el-form-item>
<el-form-item>
<div class="flex justify-between items-center w-full">
<el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
<el-link type="primary" :underline="false">忘记密码？</el-link>
</div>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="large"
class="w-full"
:loading="loading"
@click="handleLogin"
>
登 录
</el-button>
</el-form-item>
<el-divider>或</el-divider>
<!-- 快速登录 -->
<div class="mb-4">
<el-button size="large" class="w-full mb-2" @click="quickLogin('user')">
<el-icon class="mr-2"><User /></el-icon>
普通用户快速登录
</el-button>
<el-button size="large" class="w-full" @click="quickLogin('admin')">
<el-icon class="mr-2"><Setting /></el-icon>
管理员快速登录
</el-button>
</div>
<div class="text-center">
<span class="text-gray-600">还没有账号？</span>
<router-link to="/register" class="text-primary-500 hover:underline">
立即注册
</router-link>
</div>
</el-form>
</div>
<!-- 测试账号提示 -->
<div class="mt-4 p-4 bg-blue-50 rounded-lg">
<h3 class="font-semibold text-blue-900 mb-2">测试账号</h3>
<div class="text-sm text-blue-700">
<p>普通用户: user / 123456</p>
<p>管理员: admin / 123456</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElForm } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
import type { LoginParams } from '@/types/api'
const router = useRouter()
const userStore = useUserStore()
const formRef = ref<FormInstance>()
const loading = ref(false)
const loginForm = reactive<LoginParams>({
username: '',
password: '',
rememberMe: false
})
const rules: FormRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
]
}
// 登录
const handleLogin = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
loading.value = true
try {
const success = await userStore.login(loginForm)
if (success) {
// 登录成功，router跳转已在store中处理
}
} finally {
loading.value = false
}
}
})
}
// 快速登录
const quickLogin = (type: 'user' | 'admin') => {
if (type === 'user') {
loginForm.username = 'user'
loginForm.password = '123456'
} else {
loginForm.username = 'admin'
loginForm.password = '123456'
}
loginForm.rememberMe = true
handleLogin()
}
</script>
<style scoped lang="scss">
.login-page {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>

309
flash-sale-frontend/src/pages/user/profile.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<div class="profile-page">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- 左侧菜单 -->
<div class="lg:col-span-1">
<div class="bg-white rounded-lg shadow-sm p-6">
<!-- 用户头像 -->
<div class="text-center mb-6">
<el-avatar :size="80" :src="userStore.user?.avatar">
{{ userStore.username[0] }}
</el-avatar>
<h3 class="mt-3 font-semibold">{{ userStore.username }}</h3>
<p class="text-sm text-gray-500">{{ userStore.user?.email }}</p>
</div>
<!-- 菜单列表 -->
<el-menu
:default-active="activeMenu"
@select="handleMenuSelect"
>
<el-menu-item index="info">
<el-icon><User /></el-icon>
<span>基本信息</span>
</el-menu-item>
<el-menu-item index="security">
<el-icon><Lock /></el-icon>
<span>账号安全</span>
</el-menu-item>
<el-menu-item index="address">
<el-icon><Location /></el-icon>
<span>收货地址</span>
</el-menu-item>
<el-menu-item index="orders">
<el-icon><List /></el-icon>
<span>我的订单</span>
</el-menu-item>
</el-menu>
</div>
</div>
<!-- 右侧内容 -->
<div class="lg:col-span-3">
<div class="bg-white rounded-lg shadow-sm p-6">
<!-- 基本信息 -->
<div v-if="activeMenu === 'info'">
<h2 class="text-xl font-semibold mb-6">基本信息</h2>
<el-form
ref="infoFormRef"
:model="infoForm"
:rules="infoRules"
label-width="100px"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="infoForm.username" disabled />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="infoForm.email" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="infoForm.phone" />
</el-form-item>
<el-form-item label="头像">
<div class="flex items-center gap-4">
<el-avatar :size="60" :src="infoForm.avatar">
{{ infoForm.username[0] }}
</el-avatar>
<el-button>更换头像</el-button>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSaveInfo">
保存修改
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 账号安全 -->
<div v-else-if="activeMenu === 'security'">
<h2 class="text-xl font-semibold mb-6">账号安全</h2>
<el-form
ref="passwordFormRef"
:model="passwordForm"
:rules="passwordRules"
label-width="100px"
>
<el-form-item label="原密码" prop="oldPassword">
<el-input
v-model="passwordForm.oldPassword"
type="password"
show-password
/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input
v-model="passwordForm.newPassword"
type="password"
show-password
/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input
v-model="passwordForm.confirmPassword"
type="password"
show-password
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleChangePassword">
修改密码
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 收货地址 -->
<div v-else-if="activeMenu === 'address'">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold">收货地址</h2>
<el-button type="primary" @click="handleAddAddress">
<el-icon class="mr-1"><Plus /></el-icon>
添加地址
</el-button>
</div>
<div class="space-y-4">
<div
v-for="addr in addresses"
:key="addr.id"
class="border rounded-lg p-4"
>
<div class="flex justify-between items-start">
<div>
<div class="flex items-center gap-2 mb-2">
<span class="font-semibold">{{ addr.name }}</span>
<span class="text-gray-500">{{ addr.phone }}</span>
<el-tag v-if="addr.isDefault" type="primary" size="small">
默认
</el-tag>
</div>
<p class="text-gray-600">
{{ addr.province }} {{ addr.city }} {{ addr.district }} {{ addr.address }}
</p>
</div>
<div class="space-x-2">
<el-button text type="primary" size="small">编辑</el-button>
<el-button text type="danger" size="small">删除</el-button>
</div>
</div>
</div>
<el-empty v-if="addresses.length === 0" description="暂无收货地址" />
</div>
</div>
<!-- 我的订单 -->
<div v-else-if="activeMenu === 'orders'">
<h2 class="text-xl font-semibold mb-6">我的订单</h2>
<p class="text-gray-500">请访问 <router-link to="/orders" class="text-primary-500">订单页面</router-link> 查看详细订单信息</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElForm } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { userApi } from '@/api/modules/user'
const router = useRouter()
const userStore = useUserStore()
const activeMenu = ref('info')
const infoFormRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()
// 基本信息表单
const infoForm = reactive({
username: userStore.user?.username || '',
email: userStore.user?.email || '',
phone: userStore.user?.phone || '',
avatar: userStore.user?.avatar || ''
})
const infoRules: FormRules = {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
phone: [
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
]
}
// 修改密码表单
const passwordForm = reactive({
oldPassword: '',
newPassword: '',
confirmPassword: ''
})
const validatePassword = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== passwordForm.newPassword) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
}
const passwordRules: FormRules = {
oldPassword: [
{ required: true, message: '请输入原密码', trigger: 'blur' }
],
newPassword: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
],
confirmPassword: [
{ required: true, validator: validatePassword, trigger: 'blur' }
]
}
// 收货地址
const addresses = ref<any[]>([])
// 菜单选择
const handleMenuSelect = (index: string) => {
activeMenu.value = index
if (index === 'orders') {
router.push('/orders')
}
}
// 保存基本信息
const handleSaveInfo = async () => {
if (!infoFormRef.value) return
await infoFormRef.value.validate(async (valid) => {
if (valid) {
try {
const res = await userApi.updateInfo(infoForm)
if (res.success) {
userStore.updateUserInfo(infoForm)
ElMessage.success('保存成功')
}
} catch (error) {
console.error('保存失败:', error)
}
}
})
}
// 修改密码
const handleChangePassword = async () => {
if (!passwordFormRef.value) return
await passwordFormRef.value.validate(async (valid) => {
if (valid) {
try {
const res = await userApi.changePassword({
oldPassword: passwordForm.oldPassword,
newPassword: passwordForm.newPassword
})
if (res.success) {
ElMessage.success('密码修改成功，请重新登录')
userStore.logout()
}
} catch (error) {
console.error('修改密码失败:', error)
}
}
})
}
// 添加地址
const handleAddAddress = () => {
ElMessage.info('功能开发中...')
}
onMounted(() => {
// 加载用户信息
userStore.getUserInfo()
})
</script>
<style scoped lang="scss">
.profile-page {
min-height: calc(100vh - 60px);
background-color: #f5f5f5;
}
</style>

197
flash-sale-frontend/src/pages/user/register.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div class="register-page min-h-screen flex items-center justify-center bg-gray-50">
<div class="max-w-md w-full">
<div class="bg-white rounded-lg shadow-lg p-8">
<!-- Logo -->
<div class="text-center mb-8">
<el-icon :size="48" class="text-red-500 mb-4">
<Lightning />
</el-icon>
<h1 class="text-2xl font-bold text-gray-900">创建账号</h1>
<p class="text-gray-600 mt-2">加入秒杀系统</p>
</div>
<!-- 注册表单 -->
<el-form
ref="formRef"
:model="registerForm"
:rules="rules"
@submit.prevent
>
<el-form-item prop="username">
<el-input
v-model="registerForm.username"
size="large"
placeholder="请输入用户名"
prefix-icon="User"
clearable
/>
</el-form-item>
<el-form-item prop="email">
<el-input
v-model="registerForm.email"
size="large"
placeholder="请输入邮箱"
prefix-icon="Message"
clearable
/>
</el-form-item>
<el-form-item prop="phone">
<el-input
v-model="registerForm.phone"
size="large"
placeholder="请输入手机号（选填）"
prefix-icon="Phone"
clearable
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="registerForm.password"
type="password"
size="large"
placeholder="请输入密码"
prefix-icon="Lock"
show-password
/>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model="registerForm.confirmPassword"
type="password"
size="large"
placeholder="请确认密码"
prefix-icon="Lock"
show-password
@keyup.enter="handleRegister"
/>
</el-form-item>
<el-form-item prop="agreement">
<el-checkbox v-model="registerForm.agreement">
我已阅读并同意
<el-link type="primary" :underline="false">用户协议</el-link>
和
<el-link type="primary" :underline="false">隐私政策</el-link>
</el-checkbox>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="large"
class="w-full"
:loading="loading"
@click="handleRegister"
>
注 册
</el-button>
</el-form-item>
<div class="text-center">
<span class="text-gray-600">已有账号？</span>
<router-link to="/login" class="text-primary-500 hover:underline">
立即登录
</router-link>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElForm } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
const router = useRouter()
const userStore = useUserStore()
const formRef = ref<FormInstance>()
const loading = ref(false)
const registerForm = reactive({
username: '',
email: '',
phone: '',
password: '',
confirmPassword: '',
agreement: false
})
const validatePassword = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== registerForm.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
}
const validateAgreement = (rule: any, value: any, callback: any) => {
if (!value) {
callback(new Error('请同意用户协议'))
} else {
callback()
}
}
const rules: FormRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
phone: [
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
],
confirmPassword: [
{ required: true, validator: validatePassword, trigger: 'blur' }
],
agreement: [
{ required: true, validator: validateAgreement, trigger: 'change' }
]
}
// 注册
const handleRegister = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
loading.value = true
try {
const { confirmPassword, agreement, ...params } = registerForm
const success = await userStore.register(params)
if (success) {
// 注册成功，跳转到登录页已在store中处理
}
} finally {
loading.value = false
}
}
})
}
</script>
<style scoped lang="scss">
.register-page {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>