// API 基础路径
const API_BASE_URL = '/api';
new Vue({
el: '#app',
data: {
currentView: 'home',
showLogin: false,
showRegister: false,
showCreateClub: false,
showCreateActivity: false,
clubTab: 'all',
activityTab: 'all',
profileTab: 'clubs',
adminTab: 'clubs',
loginForm: {
username: '',
password: ''
},
registerForm: {
name: '',
studentId: '',
email: '',
phone: '',
password: '',
confirm: ''
},
newClub: {
name: '',
description: ''
},
newActivity: {
title: '',
description: '',
location: '',
startTime: '',
endTime: ''
},
currentUser: null,
isSysAdmin: false,
isClubAdmin: false,
stats: null,
clubs: [],
activities: [],
popularClubs: [],
recentActivities: [],
userClubs: [],
userActivities: [],
userApplications: [],
pendingClubs: [],
pendingApplications: [],
loadingClubs: false,
loadingActivities: false,
loadingUserClubs: false,
loadingUserActivities: false,
loadingUserApplications: false,
loadingPendingClubs: false,
loadingPendingApplications: false
},
computed: {
filteredClubs() {
if (this.clubTab === 'my' && this.currentUser) {
return this.clubs.filter(club => club.isMember);
}
return this.clubs;
},
filteredActivities() {
if (this.activityTab === 'joined' && this.currentUser) {
return this.activities.filter(act =>
this.userActivities.some(ua => ua.id === act.id)
);
}
if (this.activityTab === 'my' && this.isClubAdmin) {
return this.activities;
}
return this.activities;
}
},
async created() {
this.loadHomeData();
// 检查本地存储是否有登录信息
const savedUser = localStorage.getItem('currentUser');
if (savedUser) {
this.currentUser = JSON.parse(savedUser);
this.checkAdminStatus();
}
},
methods: {
async loadHomeData() {
try {
// 加载统计数据
const statsRes = await axios.get(`${API_BASE_URL}/stats`);
this.stats = statsRes.data;
// 加载热门社团
const popularClubsRes = await axios.get(`${API_BASE_URL}/clubs/popular`);
this.popularClubs = popularClubsRes.data;
// 加载近期活动
const recentActivitiesRes = await axios.get(`${API_BASE_URL}/activities/recent`);
this.recentActivities = recentActivitiesRes.data;
} catch (error) {
console.error('加载首页数据失败:', error);
}
},
async loadClubs() {
this.loadingClubs = true;
try {
const res = await axios.get(`${API_BASE_URL}/clubs`, {
headers: this.getAuthHeader()
});
this.clubs = res.data;
} catch (error) {
console.error('加载社团数据失败:', error);
} finally {
this.loadingClubs = false;
}
},
async loadActivities() {
this.loadingActivities = true;
try {
const res = await axios.get(`${API_BASE_URL}/activities`, {
headers: this.getAuthHeader()
});
this.activities = res.data;
} catch (error) {
console.error('加载活动数据失败:', error);
} finally {
this.loadingActivities = false;
}
},
async loadUserClubs() {
this.loadingUserClubs = true;
try {
const res = await axios.get(`${API_BASE_URL}/users/${this.currentUser.id}/clubs`, {
headers: this.getAuthHeader()
});
this.userClubs = res.data;
} catch (error) {
console.error('加载用户社团数据失败:', error);
} finally {
this.loadingUserClubs = false;
}
},
async loadUserActivities() {
this.loadingUserActivities = true;
try {
const res = await axios.get(`${API_BASE_URL}/users/${this.currentUser.id}/activities`, {
headers: this.getAuthHeader()
});
this.userActivities = res.data;
} catch (error) {
console.error('加载用户活动数据失败:', error);
} finally {
this.loadingUserActivities = false;
}
},
async loadUserApplications() {
this.loadingUserApplications = true;
try {
const res = await axios.get(`${API_BASE_URL}/users/${this.currentUser.id}/applications`, {
headers: this.getAuthHeader()
});
this.userApplications = res.data;
} catch (error) {
console.error('加载用户申请数据失败:', error);
} finally {
this.loadingUserApplications = false;
}
},
async loadPendingClubs() {
this.loadingPendingClubs = true;
try {
const res = await axios.get(`${API_BASE_URL}/admin/pending-clubs`, {
headers: this.getAuthHeader()
});
this.pendingClubs = res.data;
} catch (error) {
console.error('加载待审核社团数据失败:', error);
} finally {
this.loadingPendingClubs = false;
}
},
async loadPendingApplications() {
this.loadingPendingApplications = true;
try {
const res = await axios.get(`${API_BASE_URL}/admin/pending-applications`, {
headers: this.getAuthHeader()
});
this.pendingApplications = res.data;
} catch (error) {
console.error('加载待审核申请数据失败:', error);
} finally {
this.loadingPendingApplications = false;
}
},
changeView(view) {
this.currentView = view;
if (view === 'clubs') {
this.loadClubs();
} else if (view === 'activities') {
this.loadActivities();
} else if (view === 'admin') {
this.adminTab = 'clubs';
this.loadPendingClubs();
}
},
async login() {
try {
const res = await axios.post(`${API_BASE_URL}/auth/login`, this.loginForm);
if (res.data.success) {
this.currentUser = res.data.user;
this.isSysAdmin = this.currentUser.role === 'sys_admin';
this.isClubAdmin = this.currentUser.role === 'club_admin' || this.currentUser.role === 'sys_admin';
this.showLogin = false;
// 保存用户信息到本地存储
localStorage.setItem('currentUser', JSON.stringify(this.currentUser));
// 加载用户数据
this.loadUserClubs();
this.loadUserActivities();
this.loadUserApplications();
this.$message.success('登录成功！');
} else {
this.$message.error('登录失败: ' + res.data.message);
}
} catch (error) {
console.error('登录失败:', error);
this.$message.error('登录失败，请检查网络连接');
}
},
async register() {
if (this.registerForm.password !== this.registerForm.confirm) {
this.$message.error('两次输入的密码不一致');
return;
}
try {
const res = await axios.post(`${API_BASE_URL}/auth/register`, this.registerForm);
if (res.data.success) {
this.currentUser = res.data.user;
this.isSysAdmin = false;
this.isClubAdmin = false;
this.showRegister = false;
// 保存用户信息到本地存储
localStorage.setItem('currentUser', JSON.stringify(this.currentUser));
this.$message.success('注册成功！');
} else {
this.$message.error('注册失败: ' + res.data.message);
}
} catch (error) {
console.error('注册失败:', error);
this.$message.error('注册失败，请检查网络连接');
}
},
logout() {
this.currentUser = null;
this.isSysAdmin = false;
this.isClubAdmin = false;
this.currentView = 'home';
// 清除本地存储
localStorage.removeItem('currentUser');
this.$message.success('已退出登录');
},
showProfile() {
this.currentView = 'profile';
this.profileTab = 'clubs';
this.loadUserClubs();
},
loadHomeData() {
this.$axios.get('/api/stats')
.then(response => {
// 成功处理
})
.catch(error => {
// 关键：记录完整错误信息
console.error('[详细错误]', {
status: error.response?.status,
data: error.response?.data,
headers: error.response?.headers
});
});
},
checkAdminStatus() {
this.isSysAdmin = this.currentUser.role === 'sys_admin';
this.isClubAdmin = this.currentUser.role === 'club_admin' || this.currentUser.role === 'sys_admin';
},
getAuthHeader() {
if (this.currentUser && this.currentUser.token) {
return { Authorization: `Bearer ${this.currentUser.token}` };
}
return {};
},
async createClub() {
try {
const res = await axios.post(`${API_BASE_URL}/clubs`, this.newClub, {
headers: this.getAuthHeader()
});
if (res.data.success) {
this.showCreateClub = false;
this.newClub = { name: '', description: '' };
this.$message.success('社团创建申请已提交，等待管理员审核');
// 刷新社团列表
this.loadClubs();
} else {
this.$message.error('创建社团失败: ' + res.data.message);
}
} catch (error) {
console.error('创建社团失败:', error);
this.$message.error('创建社团失败，请稍后再试');
}
},
async applyToClub(club) {
try {
const res = await axios.post(`${API_BASE_URL}/clubs/${club.id}/apply`, {}, {
headers: this.getAuthHeader()
});
if (res.data.success) {
club.isMember = true;
this.$message.success(`已申请加入 ${club.name}，等待审核`);
// 刷新用户社团列表
this.loadUserClubs();
} else {
this.$message.error('申请失败: ' + res.data.message);
}
} catch (error) {
console.error('申请加入社团失败:', error);
this.$message.error('申请加入社团失败，请稍后再试');
}
},
async leaveClub(club) {
try {
const res = await axios.delete(`${API_BASE_URL}/clubs/${club.id}/members/${this.currentUser.id}`, {
headers: this.getAuthHeader()
});
if (res.data.success) {
club.isMember = false;
this.$message.success(`已退出 ${club.name}`);
// 刷新用户社团列表
this.loadUserClubs();
} else {
this.$message.error('退出社团失败: ' + res.data.message);
}
} catch (error) {
console.error('退出社团失败:', error);
this.$message.error('退出社团失败，请稍后再试');
}
},
async joinActivity(activity) {
try {
const res = await axios.post(`${API_BASE_URL}/activities/${activity.id}/join`, {}, {
headers: this.getAuthHeader()
});
if (res.data.success) {
activity.participantCount++;
this.$message.success(`已报名参加 ${activity.title}`);
// 刷新用户活动列表
this.loadUserActivities();
} else {
this.$message.error('报名失败: ' + res.data.message);
}
} catch (error) {
console.error('报名活动失败:', error);
this.$message.error('报名活动失败，请稍后再试');
}
},
async signActivity(activity) {
try {
const res = await axios.post(`${API_BASE_URL}/activities/${activity.id}/sign`, {}, {
headers: this.getAuthHeader()
});
if (res.data.success) {
activity.signStatus = 'attended';
this.$message.success(`活动 ${activity.title} 签到成功！`);
// 刷新用户活动列表
this.loadUserActivities();
} else {
this.$message.error('签到失败: ' + res.data.message);
}
} catch (error) {
console.error('签到失败:', error);
this.$message.error('签到失败，请稍后再试');
}
},
viewClub(club) {
this.$message.info(`查看社团详情: ${club.name}`);
},
viewActivity(activity) {
this.$message.info(`查看活动详情: ${activity.title}`);
},
viewApplication(app) {
this.$message.info(`查看申请详情: ${app.name}`);
},
activityStatusText(status) {
const statusMap = {
'active': '进行中',
'pending': '待审核',
'approved': '已批准',
'rejected': '已拒绝',
'ended': '已结束'
};
return statusMap[status] || '未知状态';
},
async approveClub(club) {
try {
const res = await axios.put(`${API_BASE_URL}/admin/clubs/${club.id}/approve`, {}, {
headers: this.getAuthHeader()
});
if (res.data.success) {
this.$message.success(`已批准 ${club.name} 的创建申请`);
// 刷新待审核列表
this.loadPendingClubs();
// 刷新社团列表
this.loadClubs();
} else {
this.$message.error('批准失败: ' + res.data.message);
}
} catch (error) {
console.error('批准社团失败:', error);
this.$message.error('批准社团失败，请稍后再试');
}
},
async rejectClub(club) {
try {
const res = await axios.put(`${API_BASE_URL}/admin/clubs/${club.id}/reject`, {}, {
headers: this.getAuthHeader()
});
if (res.data.success) {
this.$message.success(`已拒绝 ${club.name} 的创建申请`);
// 刷新待审核列表
this.loadPendingClubs();
} else {
this.$message.error('拒绝失败: ' + res.data.message);
}
} catch (error) {
console.error('拒绝社团失败:', error);
this.$message.error('拒绝社团失败，请稍后再试');
}
},
async approveApplication(app) {
try {
const res = await axios.put(`${API_BASE_URL}/admin/applications/${app.id}/approve`, {}, {
headers: this.getAuthHeader()
});
if (res.data.success) {
this.$message.success(`已批准 ${app.userName} 加入 ${app.clubName}`);
// 刷新待审核列表
this.loadPendingApplications();
} else {
this.$message.error('批准失败: ' + res.data.message);
}
} catch (error) {
console.error('批准申请失败:', error);
this.$message.error('批准申请失败，请稍后再试');
}
},
async rejectApplication(app) {
try {
const res = await axios.put(`${API_BASE_URL}/admin/applications/${app.id}/reject`, {}, {
headers: this.getAuthHeader()
});
if (res.data.success) {
this.$message.success(`已拒绝 ${app.userName} 加入 ${app.clubName}`);
// 刷新待审核列表
this.loadPendingApplications();
} else {
this.$message.error('拒绝失败: ' + res.data.message);
}
} catch (error) {
console.error('拒绝申请失败:', error);
this.$message.error('拒绝申请失败，请稍后再试');
}
},
async createActivity() {
try {
const res = await axios.post(`${API_BASE_URL}/activities`, this.newActivity, {
headers: this.getAuthHeader()
});
if (res.data.success) {
this.showCreateActivity = false;
this.newActivity = {
title: '',
description: '',
location: '',
startTime: '',
endTime: ''
};
this.$message.success('活动已发布，等待审核');
// 刷新活动列表
this.loadActivities();
} else {
this.$message.error('发布活动失败: ' + res.data.message);
}
} catch (error) {
console.error('发布活动失败:', error);
this.$message.error('发布活动失败，请稍后再试');
}
},
formatDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
},
editProfile() {
this.$message.info('编辑个人信息功能');
},
loadMyActivities() {
// 简化实现，实际中应该调用API
this.loadingActivities = true;
setTimeout(() => {
this.activities = this.activities.filter(activity =>
activity.clubAdminId === this.currentUser.id
);
this.loadingActivities = false;
}, 500);
}
}
});
本文深入探讨JavaScript的数组、字符串、日期、数字等核心API的使用方法，讲解正则表达式、数学对象及错误处理机制。覆盖从基础知识到高级技巧，包括ES6新特性如块级作用域、箭头函数和模板字符串的应用，适合各阶段开发者学习。
扫一扫
1188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
