pmc9py4oq
/
software_teamwork
1
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重构已有前端代码

Browse Source
newzwz
lee-zt 2 months ago
parent 9f79bd04e1
commit 1ae1607686
13 changed files with 441 additions and 556 deletions
Show Stats Download Patch File Download Diff File

12
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue
Unescape View File

@ -7,17 +7,9 @@
</template>
<!-- 控制模板数据与行为 -->
<script>
//import MainPage from './components/MainPage.vue';
<script setup lang="js" name="App">
import Header from './components/Header.vue';
import {RouterView} from 'vue-router';
export default {
name: 'App',
components: {
Header,
RouterView
}
}
import { RouterView } from 'vue-router';
</script>
<!-- 样式部分,定义CSS样式 -->

2
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue
Unescape View File

@ -71,7 +71,7 @@
</div>
</template>
<script setup name="UserLogin">
<script lang="js" setup name="UserLogin">
import { ref, computed } from 'vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

33
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/LoginRegisterModal.vue
Unescape View File

@ -15,34 +15,25 @@
</div>
</template>
<script>
<script setup lang="js" name="LoginRegisterModal">
import { ref } from 'vue';
// 导入登录和注册组件
import UserLogin from './Login.vue';
import UserRegister from './Register.vue';
export default {
name: 'LoginRegisterModal',
components: {
UserLogin, // 注册登录组件
UserRegister // 注册注册组件
},
setup(props, { emit }) {
// 控制显示登录还是注册表单的状态
const isLogin = ref(true);
const emit = defineEmits(['close']);
// 切换登录/注册表单的方法
const toggleForm = () => {
isLogin.value = !isLogin.value;
};
const isLogin = ref(true);
return {
isLogin,
toggleForm,
close: () => {emit('close')} // 关闭模态框的方法
};
}
}
// 切换登录/注册表单的方法
const toggleForm = () => {
isLogin.value = !isLogin.value;
};
// 关闭模态框的方法
const close = () => {
emit('close');
};
</script>
<style scoped>

87
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
Unescape View File

@ -27,60 +27,45 @@
</div>
</template>
<script>
<script setup lang="js" name="NoticeBoard">
import { ref, onMounted, onUnmounted } from 'vue';
export default {
name: 'NoticeBoard',
setup() {
const images = ref([
{ src: require('@/assets/whu1.jpg'), alt: '公告图片1' },
{ src: require('@/assets/whu2.jpg'), alt: '公告图片2' },
{ src: require('@/assets/whu3.jpg'), alt: '公告图片3' },
{ src: require('@/assets/whu4.jpg'), alt: '公告图片4' },
{ src: require('@/assets/whu5.jpg'), alt: '公告图片5' },
]);
const currentIndex = ref(0);
// 切换到下一张图片
const nextImage = () => {
currentIndex.value = (currentIndex.value + 1) % images.value.length;
};
// 切换到上一张图片
const prevImage = () => {
currentIndex.value =
(currentIndex.value - 1 + images.value.length) % images.value.length;
};
// 跳转到指定图片
const goToImage = (index) => {
currentIndex.value = index;
};
// 定时器
let interval = null;
onMounted(() => {
// 初始化定时器
interval = setInterval(nextImage, 5000);
});
onUnmounted(() => {
// 清除定时器
clearInterval(interval);
});
return {
images,
currentIndex,
nextImage,
prevImage,
goToImage,
};
},
const images = ref([
{ src: require('@/assets/whu1.jpg'), alt: '公告图片1' },
{ src: require('@/assets/whu2.jpg'), alt: '公告图片2' },
{ src: require('@/assets/whu3.jpg'), alt: '公告图片3' },
{ src: require('@/assets/whu4.jpg'), alt: '公告图片4' },
{ src: require('@/assets/whu5.jpg'), alt: '公告图片5' },
]);
const currentIndex = ref(0);
// 切换到下一张图片
const nextImage = () => {
currentIndex.value = (currentIndex.value + 1) % images.value.length;
};
// 切换到上一张图片
const prevImage = () => {
currentIndex.value =
(currentIndex.value - 1 + images.value.length) % images.value.length;
};
// 跳转到指定图片
const goToImage = (index) => {
currentIndex.value = index;
};
// 定时器
let interval = null;
onMounted(() => {
interval = setInterval(nextImage, 5000);
});
onUnmounted(() => {
clearInterval(interval);
});
</script>
<style scoped>

132
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
Unescape View File

@ -36,79 +36,69 @@
</div>
</template>
<script>
<script setup lang="js" name="PostPage">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
export default {
name: 'PostPage',
setup() {
const categories = ref(['全部', '学习', '娱乐', '二手交易']);
const selectedCategory = ref('全部');
const posts = ref([
{
id: 1,
category: '学习',
title: '如何高效学习？',
summary: '分享一些学习技巧...',
avatar: require('@/assets/default-avatar/boy_1.png'),
likes: 1200,
comments: 10,
favorites: 100,
},
{
id: 2,
category: '娱乐',
title: '最近的热门电影推荐',
summary: '看看这些电影吧...',
avatar: require('@/assets/default-avatar/girl_1.png'),
likes: 800,
comments: 5,
favorites: 50,
},
{
id: 3,
category: '二手交易',
title: '出售二手书籍',
summary: '价格优惠，欢迎咨询...',
avatar: require('@/assets/default-avatar/boy_2.png'),
likes: 300,
comments: 2,
favorites: 20,
},
{
id: 4,
category: '学习',
title: '考研经验分享',
summary: '考研路上的一些心得...',
avatar: require('@/assets/default-avatar/girl_3.png'),
likes: 1500,
comments: 20,
favorites: 200,
},
]);
const filteredPosts = ref(posts.value);
const router = useRouter();
const selectCategory = (category) => {
selectedCategory.value = category;
filteredPosts.value =
category === '全部'
? posts.value
: posts.value.filter((post) => post.category === category);
};
const goToPostDetail = (postId) => {
router.push({ name: 'PostDetail', params: { id: postId } });
};
return {
categories,
selectedCategory,
filteredPosts,
selectCategory,
goToPostDetail,
};
},
const categories = ref(['全部', '学习', '娱乐', '二手交易']);
const selectedCategory = ref('全部');
const posts = ref([
{
id: 1,
category: '学习',
title: '如何高效学习？',
summary: '分享一些学习技巧...',
avatar: require('@/assets/default-avatar/boy_1.png'),
likes: 1200,
comments: 10,
favorites: 100,
},
{
id: 2,
category: '娱乐',
title: '最近的热门电影推荐',
summary: '看看这些电影吧...',
avatar: require('@/assets/default-avatar/girl_1.png'),
likes: 800,
comments: 5,
favorites: 50,
},
{
id: 3,
category: '二手交易',
title: '出售二手书籍',
summary: '价格优惠，欢迎咨询...',
avatar: require('@/assets/default-avatar/boy_2.png'),
likes: 300,
comments: 2,
favorites: 20,
},
{
id: 4,
category: '学习',
title: '考研经验分享',
summary: '考研路上的一些心得...',
avatar: require('@/assets/default-avatar/girl_3.png'),
likes: 1500,
comments: 20,
favorites: 200,
},
]);
const filteredPosts = ref(posts.value);
const router = useRouter();
const selectCategory = (category) => {
selectedCategory.value = category;
filteredPosts.value =
category === '全部'
? posts.value
: posts.value.filter((post) => post.category === category);
};
const goToPostDetail = (postId) => {
router.push({ name: 'PostDetail', params: { id: postId } });
};
</script>

341
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Register.vue
Unescape View File

@ -90,207 +90,184 @@
</div>
</template>
<script>
<script setup lang="js" name="UserRegister">
import { ref, computed, onMounted } from 'vue';
import request from '@/utils/request';
import {ElMessage} from 'element-plus'
export default {
name: 'UserRegister',
setup(props, { emit }) {
const currentType = ref('username');
const cooldown = ref(0); //验证码倒计时
// 注册方式选项配置
const registerTypes = [
{ label: '用户名注册', value: 'username' },
{ label: '邮箱注册', value: 'email' },
{ label: '手机注册', value: 'phone' }
];
// 注册表单数据对象
const registerForm = ref({
username: '',
email: '',
phone: '',
password: '',
confirmPassword: '',
verifyCode: '', //验证码(邮箱/手机)
captcha: '' //图形验证码
});
//前端验证格式
const isValidInput = computed(() => {
const value = registerForm.value[currentType.value]
if (!value) return false
import { ElMessage } from 'element-plus';
const emit = defineEmits(['toggleForm']);
const currentType = ref('username');
const cooldown = ref(0); // 验证码倒计时
// 注册方式选项配置
const registerTypes = [
{ label: '用户名注册', value: 'username' },
{ label: '邮箱注册', value: 'email' },
{ label: '手机注册', value: 'phone' }
];
// 注册表单数据对象
const registerForm = ref({
username: '',
email: '',
phone: '',
password: '',
confirmPassword: '',
verifyCode: '', // 验证码(邮箱/手机)
captcha: '' // 图形验证码
});
// 前端验证格式
const isValidInput = computed(() => {
const value = registerForm.value[currentType.value];
if (!value) return false;
switch (currentType.value) {
case 'email':
return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value);
case 'phone':
return /^1[3-9]\d{9}$/.test(value);
default:
return false;
}
});
switch(currentType.value) {
case 'email':
return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
case 'phone':
return /^1[3-9]\d{9}$/.test(value)
default:
return false
}
})
//图形验证码URL
const captchaUrl = ref('/user/captcha');
//输入框类型
const inputType = computed(() => {
switch(currentType.value) {
case 'email': return 'email';
case 'phone': return 'tel';
default: return 'text';
}
});
// 图形验证码URL
const captchaUrl = ref('/user/captcha');
//输入框文本
const placeholder = computed(() => {
switch(currentType.value) {
case 'email': return '请输入邮箱';
case 'phone': return '请输入手机号';
default: return '请输入用户名';
}
// 输入框类型
const inputType = computed(() => {
switch (currentType.value) {
case 'email': return 'email';
case 'phone': return 'tel';
default: return 'text';
}
});
// 输入框文本
const placeholder = computed(() => {
switch (currentType.value) {
case 'email': return '请输入邮箱';
case 'phone': return '请输入手机号';
default: return '请输入用户名';
}
});
// 邮箱/手机注册时显示验证码输入框
const showVerifyCode = computed(() => {
return ['email', 'phone'].includes(currentType.value);
});
// 发送验证码方法（邮箱/手机注册时使用）
async function sendCode() {
if (cooldown.value > 0 || !isValidInput.value) return;
try {
// TODO：发送验证码请求
const response = await request.post(`/user/send-code`, {
type: currentType.value,
target: registerForm.value[currentType.value]
});
//邮箱/手机注册时显示验证码输入框
const showVerifyCode = computed(() => {
return ['email', 'phone'].includes(currentType.value);
});
if (response.success) {
ElMessage({
message: '验证码已发送',
type: 'info'
});
// 发送验证码方法（邮箱/手机注册时使用）
async function sendCode() {
if (cooldown.value > 0 || !isValidInput.value) return;
try {
//TODO：发送验证码请求
const response = await request.post(`/user/send-code`, {
type: currentType.value,
target: registerForm.value[currentType.value]
});
if (response.success) {
ElMessage({
message: '验证码已发送',
type: 'info'
});
// 开始60秒倒计时
cooldown.value = 60;
const timer = setInterval(() => {
cooldown.value--;
if (cooldown.value <= 0) {
clearInterval(timer);
}
}, 1000);
// 开始60秒倒计时
cooldown.value = 60;
const timer = setInterval(() => {
cooldown.value--;
if (cooldown.value <= 0) {
clearInterval(timer);
}
} catch (error) {
console.error('发送验证码失败:', error);
alert('发送验证码失败，请稍后重试');
}
}, 1000);
}
} catch (error) {
console.error('发送验证码失败:', error);
alert('发送验证码失败，请稍后重试');
}
}
// 刷新图形验证码
function refreshCaptcha() {
// 添加时间戳防止缓存
captchaUrl.value = `/user/captcha?t=${new Date().getTime()}`;
}
// 注册
async function register() {
try {
// 校验图形验证码
const captchaResponse = await request.post('/user/verify-captcha', {
captcha: registerForm.value.captcha
});
// 刷新图形验证码
function refreshCaptcha() {
// 添加时间戳防止缓存
captchaUrl.value = `/user/captcha?t=${new Date().getTime()}`;
if (captchaResponse.code !== 200) {
ElMessage({
message: captchaResponse.msg,
type: 'error',
duration: 500
});
refreshCaptcha();
return;
}
//TODO:暂时跳过手机/邮箱验证码验证的注册
//注册
async function register() {
try {
// 校验图形验证码
const captchaResponse = await request.post('/user/verify-captcha', {
captcha: registerForm.value.captcha
// 密码确认校验
if (registerForm.value.password !== registerForm.value.confirmPassword) {
ElMessage({
message: '两次输入的密码不一致',
type: 'error',
duration: 500
});
return;
}
// 构建注册数据
const registerData = {
username: registerForm.value.username,
password: registerForm.value.password
};
if (captchaResponse.code !== 200) {
ElMessage({
message: captchaResponse.msg,
type: 'error',
duration: 500
});
refreshCaptcha();
return;
}
//密码确认校验
if (registerForm.value.password !== registerForm.value.confirmPassword) {
ElMessage({
message: '两次输入的密码不一致',
type: 'error',
duration: 500
});
return;
}
// 构建注册数据
const registerData = {
username: registerForm.value.username,
password: registerForm.value.password
};
// 根据注册类型添加对应字段
switch (currentType.value) {
case 'email':
registerData.email = registerForm.value.email;
break;
case 'phone':
registerData.phone = registerForm.value.phone;
break;
}
const response = await request.post('/user/register', registerData);
if (response.code === 200) {
ElMessage({
message: '注册成功',
type: 'success',
duration: 500
});
//触发切换到登录表单
emit('toggleForm');
} else {
ElMessage({
message: '注册失败，请稍后重试',
type: 'error',
duration: 500
});
}
}
catch (error) {
console.error('注册失败:', error);
alert(error.response?.message || '注册失败，请稍后重试');
refreshCaptcha();
}
// 根据注册类型添加对应字段
switch (currentType.value) {
case 'email':
registerData.email = registerForm.value.email;
break;
case 'phone':
registerData.phone = registerForm.value.phone;
break;
}
onMounted(() => {
// 初始化图形验证码
refreshCaptcha();
});
const response = await request.post('/user/register', registerData);
// 返回模板需要使用的数据和方法
return {
currentType,
registerTypes,
registerForm,
captchaUrl,
inputType,
placeholder,
showVerifyCode,
cooldown,
sendCode,
refreshCaptcha,
register,
isValidInput
};
if (response.code === 200) {
ElMessage({
message: '注册成功',
type: 'success',
duration: 500
});
// 触发切换到登录表单
emit('toggleForm');
} else {
ElMessage({
message: '注册失败，请稍后重试',
type: 'error',
duration: 500
});
}
}
catch (error) {
console.error('注册失败:', error);
alert(error.response?.message || '注册失败，请稍后重试');
refreshCaptcha();
}
}
onMounted(() => {
// 初始化图形验证码
refreshCaptcha();
});
</script>
<style scoped>

73
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
Unescape View File

@ -31,52 +31,39 @@
</div>
</template>
<script>
<script setup lang="js" name="WelcomeCalendar">
import { ref } from 'vue';
export default {
name: 'WelcomeCalendar',
setup() {
const today = new Date();
// 当前日期信息
const currentMonthText = ref(['一', '月']); // 默认值
const currentDay = ref(today.getDate()); // 当前日期号
const currentWeekday = ref('星','期','日'); // 当前星期完整文字
// 打卡状态
const isCheckedIn = ref(false);
// 初始化日期信息
const initializeDate = () => {
const months = [
'一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月',
];
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
currentMonthText.value = months[today.getMonth()].split('');
currentDay.value = today.getDate();
currentWeekday.value = weekdays[today.getDay()].split('');
};
// 打卡功能
const checkIn = () => {
isCheckedIn.value = true;
};
// 初始化
initializeDate();
return {
currentMonthText,
currentDay,
currentWeekday,
isCheckedIn,
checkIn,
};
},
const today = new Date();
// 当前日期信息
const currentMonthText = ref(['一', '月']); // 默认值
const currentDay = ref(today.getDate()); // 当前日期号
const currentWeekday = ref(['星', '期', '日']); // 当前星期完整文字
// 打卡状态
const isCheckedIn = ref(false);
// 初始化日期信息
const initializeDate = () => {
const months = [
'一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月',
];
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
currentMonthText.value = months[today.getMonth()].split('');
currentDay.value = today.getDate();
currentWeekday.value = weekdays[today.getDay()].split('');
};
// 打卡功能
const checkIn = () => {
isCheckedIn.value = true;
};
// 初始化
initializeDate();
</script>
<style scoped>

2
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue
Unescape View File

@ -95,7 +95,7 @@
</div>
</template>
<script setup>
<script setup lang ="js" name="FeedBack">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

13
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue
Unescape View File

@ -15,21 +15,12 @@
</div>
</template>
<script>
<script setup lang="js" name="MainPage">
import NoticeBoard from '@/components/NoticeBoard.vue';
import WelcomeCalendar from '@/components/WelcomeCalendar.vue';
import PostPage from '@/components/PostPage.vue';
//import UserPage from './UserPage.vue';
// import UserPage from './UserPage.vue';
// import PostDetail from './PostDetail.vue';
export default {
components: {
NoticeBoard,
WelcomeCalendar,
PostPage,
//UserPage,
// PostDetail
}
};
</script>
<style scoped>

53
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationDetail.vue
Unescape View File

@ -19,40 +19,39 @@
</div>
</template>
<script>
<script setup lang="js" name="NotificationDetail">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const currentNotice = ref(null);
const errorMessage = ref('');
// 模拟异步获取通知详情
const mockFetchNotice = (id) => {
return new Promise((resolve) => {
setTimeout(() => {
const notices = [
{ id: 1, title: "系统维护通知", /* 其他字段 */ },
{ id: 2, title: "新功能上线", /* 其他字段 */ }
]
resolve(notices.find(n => n.id === Number(id)))
}, 500)
})
}
{ id: 1, title: "系统维护通知", time: "2024-05-01 10:00", content: "系统将于今晚23:00-24:00进行维护，请提前保存数据。" },
{ id: 2, title: "新功能上线", time: "2024-05-10 09:00", content: "我们上线了新功能，欢迎体验！" }
];
resolve(notices.find(n => n.id === Number(id)));
}, 500);
});
};
export default {
props: ['id'], // 通过路由props接收参数
data() {
return {
currentNotice: null,
errorMessage: ''
}
},
async created() {
try {
const data = await mockFetchNotice(this.id)
if (data) {
this.currentNotice = data
} else {
this.errorMessage = '通知不存在'
}
} catch (error) {
this.errorMessage = '加载失败，请稍后重试'
onMounted(async () => {
try {
const data = await mockFetchNotice(route.params.id);
if (data) {
currentNotice.value = data;
} else {
errorMessage.value = '通知不存在';
}
} catch (error) {
errorMessage.value = '加载失败，请稍后重试';
}
}
});
</script>
<style scoped>

50
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationList.vue
Unescape View File

@ -18,34 +18,32 @@
</div>
</template>
<script>
export default {
data() {
return {
notifications: [
{
id:1,
title: "系统维护通知",
time: "2023-08-20 14:00",
content: "服务器将于今晚24:00进行例行维护，预计持续2小时"
},
{
id:2,
title: "新功能上线",
time: "2023-08-19 09:30",
content: "消息中心新增批量处理功能，欢迎体验"
}
]
}
<script setup lang="js" name="NotificationList">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const notifications = ref([
{
id: 1,
title: "系统维护通知",
time: "2023-08-20 14:00",
content: "服务器将于今晚24:00进行例行维护，预计持续2小时"
},
methods: {
viewDetail(noticeId) {
this.$router.push({
name: 'NotificationDetail',
params: { id: noticeId } // 传递动态参数
})
}
{
id: 2,
title: "新功能上线",
time: "2023-08-19 09:30",
content: "消息中心新增批量处理功能，欢迎体验"
}
]);
function viewDetail(noticeId) {
router.push({
name: 'NotificationDetail',
params: { id: noticeId }
});
}
</script>

146
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
Unescape View File

@ -57,92 +57,74 @@
</div>
</template>
<script>
<script setup lang="js" name="PostDetail">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
export default {
name: 'PostDetail',
setup() {
const route = useRoute();
const postId = ref(route.params.id);
const postTitle = ref('');
const postContent = ref('');
const newComment = ref('');
// 作者信息
const author = ref({
avatar: require('@/assets/default-avatar/boy_4.png'),
name: '珈人1号',
followers: 1234,
});
// 帖子统计信息
const postStats = ref({
likes: 1200,
favorites: 300,
comments: 45,
});
// 发布时间
const postTime = ref('2025年4月20日 14:30');
// 评论数据
const comments = ref([
{
avatar: require('@/assets/default-avatar/girl_1.png'),
name: '评论者1', // 新增评论者名字
text: '这是第一条评论。',
time: '2025年4月20日 15:00',
likes: 10,
},
{
avatar: require('@/assets/default-avatar/boy_2.png'),
name: '评论者2', // 新增评论者名字
text: '这是第二条评论。',
time: '2025年4月20日 15:30',
likes: 5,
},
]);
const isFollowing = ref(false);
const toggleFollow = () => {
isFollowing.value = !isFollowing.value;
};
const sendComment = () => {
if (newComment.value.trim()) {
comments.value.push({
avatar: require('@/assets/default-avatar/boy_1.png'),
name: '新评论者', // 评论者名字
text: newComment.value,
time: new Date().toLocaleString(),
likes: 0,
});
newComment.value = '';
}
};
onMounted(() => {
postTitle.value = `帖子标题 ${postId.value}`;
postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
});
return {
postTitle,
postContent,
comments,
newComment,
sendComment,
author,
postStats,
postTime,
isFollowing,
toggleFollow,
};
},
const route = useRoute();
const postId = ref(route.params.id);
const postTitle = ref('');
const postContent = ref('');
const newComment = ref('');
// 作者信息
const author = ref({
avatar: require('@/assets/default-avatar/boy_4.png'),
name: '珈人1号',
followers: 1234,
});
// 帖子统计信息
const postStats = ref({
likes: 1200,
favorites: 300,
comments: 45,
});
// 发布时间
const postTime = ref('2025年4月20日 14:30');
// 评论数据
const comments = ref([
{
avatar: require('@/assets/default-avatar/girl_1.png'),
name: '评论者1',
text: '这是第一条评论。',
time: '2025年4月20日 15:00',
likes: 10,
},
{
avatar: require('@/assets/default-avatar/boy_2.png'),
name: '评论者2',
text: '这是第二条评论。',
time: '2025年4月20日 15:30',
likes: 5,
},
]);
const isFollowing = ref(false);
const toggleFollow = () => {
isFollowing.value = !isFollowing.value;
};
const sendComment = () => {
if (newComment.value.trim()) {
comments.value.push({
avatar: require('@/assets/default-avatar/boy_1.png'),
name: '新评论者',
text: newComment.value,
time: new Date().toLocaleString(),
likes: 0,
});
newComment.value = '';
}
};
onMounted(() => {
postTitle.value = `帖子标题 ${postId.value}`;
postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
});
</script>
<style scoped>

53
珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue
Unescape View File

@ -57,39 +57,32 @@
</div>
</template>
<script>
<script setup lang="js" name="UserPage">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
export default {
name: 'UserPage',
setup() {
const posts = ref([
{
id:1,
title: '雷霆连续两场或20分钟逆转什么水平',
summary: '今天保罗带领雷霆完成逆转',
likes: 1200,
comments: 10,
favorites: 100,
},
{
id:2,
title: '一个普通人需要多大努力才能考上985',
summary: 'mmmmmmmm',
likes: 2200,
comments: 20,
favorites: 200,
},
]);
const router = useRouter();
const goToPostDetail = (postId) => {
router.push({ name: 'PostDetail', params: { id: postId } });
};
return {
posts,
goToPostDetail,
};
const posts = ref([
{
id: 1,
title: '雷霆连续两场或20分钟逆转什么水平',
summary: '今天保罗带领雷霆完成逆转',
likes: 1200,
comments: 10,
favorites: 100,
},
{
id: 2,
title: '一个普通人需要多大努力才能考上985',
summary: 'mmmmmmmm',
likes: 2200,
comments: 20,
favorites: 200,
},
]);
const router = useRouter();
const goToPostDetail = (postId) => {
router.push({ name: 'PostDetail', params: { id: postId } });
};
</script>

Write Preview
Loading…
Cancel
Save