添加独立的邮件发送页面，调整邮件表

my-project-backend/pom.xml

@@ -80,7 +80,7 @@
         <dependency>
             <groupId>com.alibaba.fastjson2</groupId>
             <artifactId>fastjson2</artifactId>
-            <version>2.0.25</version>
+            <version>2.0.53</version>
         </dependency>
         <!--    Jwt令牌生成校验框架    -->
         <dependency>

my-project-backend/src/main/java/com/example/config/RabbitConfiguration.java

@@ -1,7 +1,9 @@
 package com.example.config;
 
-import org.springframework.amqp.core.Queue;
-import org.springframework.amqp.core.QueueBuilder;
+import org.springframework.amqp.core.*;
+import org.springframework.amqp.support.converter.Jackson2JsonMessageConverter;
+import org.springframework.amqp.support.converter.MessageConverter;
+import org.springframework.beans.factory.annotation.Qualifier;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 
@@ -10,10 +12,42 @@ import org.springframework.context.annotation.Configuration;
  */
 @Configuration
 public class RabbitConfiguration {
+
+    @Bean
+    public MessageConverter jsonMessageConverter() {
+        return new Jackson2JsonMessageConverter();
+    }
+
+    @Bean("errorQueue")
+    public Queue dlQueue(){
+        return QueueBuilder
+                .durable("error")
+                .ttl(24 * 60 * 60 * 1000)
+                .build();
+    }
+
+    @Bean("errorExchange")
+    public Exchange dlExchange(){
+        return ExchangeBuilder.directExchange("dlx.direct").build();
+    }
+
+    @Bean("dlBinding")   //死信交换机和死信队列进绑定
+    public Binding dlBinding(@Qualifier("errorExchange") Exchange exchange,
+                             @Qualifier("errorQueue") Queue queue){
+        return BindingBuilder
+                .bind(queue)
+                .to(exchange)
+                .with("error-message")
+                .noargs();
+    }
+
     @Bean("mailQueue")
     public Queue queue(){
         return QueueBuilder
                 .durable("mail")
+                .deadLetterExchange("dlx.direct")
+                .deadLetterRoutingKey("error-message")
+                .ttl(3 * 60 * 1000)
                 .build();
     }
 }

my-project-backend/src/main/java/com/example/config/SecurityConfiguration.java

@@ -105,8 +105,8 @@ public class SecurityConfiguration {
         } else if(exceptionOrAuthentication instanceof Authentication authentication){
             User user = (User) authentication.getPrincipal();
             Account account = service.findAccountByNameOrEmail(user.getUsername());
-            if(account.isBanned()) {
-                writer.write(RestBean.forbidden("登录失败，此账户已被封禁").asJsonString());
+            if(account.isBanned()){
+                writer.write(RestBean.forbidden("登录失败，此账户已被封禁，请俩系管理员").asJsonString());
                 return;
             }
             String jwt = utils.createJwt(user, account.getUsername(), account.getId());

my-project-backend/src/main/java/com/example/config/WebConfiguration.java

@@ -1,6 +1,5 @@
 package com.example.config;
 
-import com.baomidou.mybatisplus.annotation.DbType;
 import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
 import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
 import org.springframework.context.annotation.Bean;

my-project-backend/src/main/java/com/example/controller/ForumController.java

@@ -32,10 +32,10 @@ public class ForumController {
     TopicService topicService;
 
     @Resource
-    ControllerUtils utils;
+    AccountService accountService;
 
     @Resource
-    AccountService accountService;
+    ControllerUtils utils;
 
     @GetMapping("/weather")
     public RestBean<WeatherVO> weather(double longitude, double latitude){
@@ -57,7 +57,7 @@ public class ForumController {
     public RestBean<Void> createTopic(@Valid @RequestBody TopicCreateVO vo,
                                       @RequestAttribute(Const.ATTR_USER_ID) int id) {
         Account account = accountService.findAccountById(id);
-        if(account.isMute()) {
+        if (account.isMute()) {
             return RestBean.forbidden("您已被禁言，无法创建新的主题");
         }
         return utils.messageHandle(() -> topicService.createTopic(id, vo));
@@ -104,7 +104,7 @@ public class ForumController {
     public RestBean<Void> addComment(@Valid @RequestBody AddCommentVO vo,
                                      @RequestAttribute(Const.ATTR_USER_ID) int id){
         Account account = accountService.findAccountById(id);
-        if(account.isMute()) {
+        if (account.isMute()) {
             return RestBean.forbidden("您已被禁言，无法创建新的回复");
         }
         return utils.messageHandle(() -> topicService.createComment(id, vo));

my-project-backend/src/main/java/com/example/controller/admin/AccountAdminController.java

@@ -68,23 +68,19 @@ public class AccountAdminController {
         handleBanned(account, save);
         BeanUtils.copyProperties(save, account, "password", "registerTime");
         service.saveOrUpdate(account);
-        AccountDetails details = detailsService.findAccountDetailsById(id);
         AccountDetails saveDetails = object.getJSONObject("detail").toJavaObject(AccountDetails.class);
-        BeanUtils.copyProperties(saveDetails, details);
-        detailsService.saveOrUpdate(details);
-        AccountPrivacy privacy = privacyService.accountPrivacy(id);
+        detailsService.saveOrUpdate(saveDetails);
         AccountPrivacy savePrivacy = object.getJSONObject("privacy").toJavaObject(AccountPrivacy.class);
-        BeanUtils.copyProperties(savePrivacy, privacy);
         privacyService.saveOrUpdate(savePrivacy);
         return RestBean.success();
     }
 
     private void handleBanned(Account old, Account current) {
         String key = Const.BANNED_BLOCK + old.getId();
-        if(!old.isBanned() && current.isBanned()) {
-            template.opsForValue().set(key, "true", expire, TimeUnit.HOURS);
-        } else if(old.isBanned() && !current.isBanned()) {
+        if(old.isBanned() && !current.isBanned()) {
             template.delete(key);
+        } else if(!old.isBanned() && current.isBanned()) {
+            template.opsForValue().set(key, "true", expire, TimeUnit.HOURS);
         }
     }
 }

my-project-backend/src/main/java/com/example/entity/QueueMessage.java

@@ -0,0 +1,30 @@
+package com.example.entity;
+
+import lombok.Getter;
+import lombok.ToString;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@Getter
+@ToString
+public class QueueMessage {
+    private String messageType;
+    private final Map<String, Object> data = new HashMap<>();
+
+    public static QueueMessage create(String messageType) {
+        QueueMessage queueMessage = new QueueMessage();
+        queueMessage.messageType = messageType;
+        return queueMessage;
+    }
+
+    public QueueMessage put(String key, Object value) {
+        data.put(key, value);
+        return this;
+    }
+
+    @SuppressWarnings("unchecked")
+    public <T> T get(String key) {
+        return (T) data.get(key);
+    }
+}

my-project-backend/src/main/java/com/example/entity/dto/Account.java

@@ -6,7 +6,6 @@ import com.baomidou.mybatisplus.annotation.TableName;
 import com.example.entity.BaseData;
 import lombok.AllArgsConstructor;
 import lombok.Data;
-import lombok.NoArgsConstructor;
 
 import java.util.Date;
 
@@ -15,7 +14,6 @@ import java.util.Date;
  */
 @Data
 @TableName("db_account")
-@NoArgsConstructor
 @AllArgsConstructor
 public class Account implements BaseData {
     @TableId(type = IdType.AUTO)

my-project-backend/src/main/java/com/example/entity/dto/VerifyEmail.java

@@ -0,0 +1,30 @@
+package com.example.entity.dto;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.experimental.Accessors;
+
+import java.util.Date;
+
+@Data
+@Accessors(chain = true)
+@TableName("db_verify_email")
+public class VerifyEmail {
+    @TableId(type = IdType.AUTO)
+    Integer id;
+    String email;
+    String type;
+    String code;
+    Date time;
+    boolean success;
+
+    public static VerifyEmail success() {
+        return new VerifyEmail().setSuccess(true);
+    }
+
+    public static VerifyEmail failure() {
+        return new VerifyEmail().setSuccess(false);
+    }
+}

my-project-backend/src/main/java/com/example/filter/JwtAuthenticationFilter.java

@@ -29,7 +29,7 @@ public class JwtAuthenticationFilter extends OncePerRequestFilter {
     JwtUtils utils;
 
     @Resource
-    StringRedisTemplate template;
+    private StringRedisTemplate template;
 
     @Override
     protected void doFilterInternal(HttpServletRequest request,

my-project-backend/src/main/java/com/example/listener/ErrorQueueListener.java

@@ -0,0 +1,37 @@
+package com.example.listener;
+
+import com.example.entity.QueueMessage;
+import com.example.entity.dto.VerifyEmail;
+import com.example.mapper.VerifyEmailMapper;
+import com.example.utils.Const;
+import jakarta.annotation.Resource;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.amqp.rabbit.annotation.RabbitHandler;
+import org.springframework.amqp.rabbit.annotation.RabbitListener;
+import org.springframework.stereotype.Component;
+
+import java.util.Date;
+
+@Slf4j
+@Component
+@RabbitListener(queues = Const.MQ_ERROR)
+public class ErrorQueueListener {
+
+    @Resource
+    VerifyEmailMapper mapper;
+
+    @RabbitHandler
+    public void saveErrorToDatabase(QueueMessage message) {
+        log.error("出现一条错误的队列消息: {}", message);
+        switch (message.getMessageType()) {
+            case "email" -> {
+                VerifyEmail error = VerifyEmail.failure()
+                        .setCode(message.get("code").toString())
+                        .setType(message.get("type"))
+                        .setEmail(message.get("email"))
+                        .setTime(new Date());
+                mapper.insert(error);
+            }
+        }
+    }
+}

my-project-backend/src/main/java/com/example/listener/MailQueueListener.java

@@ -1,6 +1,11 @@
 package com.example.listener;
 
+import com.example.entity.QueueMessage;
+import com.example.entity.dto.VerifyEmail;
+import com.example.mapper.VerifyEmailMapper;
+import com.example.utils.Const;
 import jakarta.annotation.Resource;
+import lombok.extern.slf4j.Slf4j;
 import org.springframework.amqp.rabbit.annotation.RabbitHandler;
 import org.springframework.amqp.rabbit.annotation.RabbitListener;
 import org.springframework.beans.factory.annotation.Value;
@@ -8,30 +13,34 @@ import org.springframework.mail.SimpleMailMessage;
 import org.springframework.mail.javamail.JavaMailSender;
 import org.springframework.stereotype.Component;
 
-import java.util.Map;
+import java.util.Date;
 
 /**
  * 用于处理邮件发送的消息队列监听器
  */
+@Slf4j
 @Component
-@RabbitListener(queues = "mail")
+@RabbitListener(queues = Const.MQ_MAIL, concurrency = "10")
 public class MailQueueListener {
 
     @Resource
     JavaMailSender sender;
 
+    @Resource
+    VerifyEmailMapper emailMapper;
+
     @Value("${spring.mail.username}")
     String username;
 
     /**
      * 处理邮件发送
-     * @param data 邮件信息
+     * @param message 邮件信息
      */
     @RabbitHandler
-    public void sendMailMessage(Map<String, Object> data) {
-        String email = data.get("email").toString();
-        Integer code = (Integer) data.get("code");
-        SimpleMailMessage message = switch (data.get("type").toString()) {
+    public void sendMailMessage(QueueMessage message) {
+        String email = message.get("email"), type = message.get("type");
+        Integer code = message.get("code");
+        SimpleMailMessage mailMessage = switch (type) {
             case "register" ->
                     createMessage("欢迎注册我们的网站",
                             "您的邮件注册验证码为: "+code+"，有效时间3分钟，为了保障您的账户安全，请勿向他人泄露验证码信息。",
@@ -46,8 +55,15 @@ public class MailQueueListener {
                             email);
             default -> null;
         };
-        if(message == null) return;
-        sender.send(message);
+        if(mailMessage == null) return;
+        log.info("正在向 {} 发送 {} 类型的电子邮件...", email, type);
+        sender.send(mailMessage);
+        VerifyEmail record = VerifyEmail.success()
+                .setCode(message.get("code").toString())
+                .setType(message.get("type"))
+                .setEmail(message.get("email"))
+                .setTime(new Date());
+        emailMapper.insert(record);
     }
 
     /**

my-project-backend/src/main/java/com/example/mapper/VerifyEmailMapper.java

@@ -0,0 +1,9 @@
+package com.example.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.example.entity.dto.VerifyEmail;
+import org.apache.ibatis.annotations.Mapper;
+
+@Mapper
+public interface VerifyEmailMapper extends BaseMapper<VerifyEmail> {
+}

my-project-backend/src/main/java/com/example/service/impl/AccountServiceImpl.java

@@ -2,6 +2,7 @@ package com.example.service.impl;
 
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.example.entity.QueueMessage;
 import com.example.entity.dto.Account;
 import com.example.entity.dto.AccountDetails;
 import com.example.entity.dto.AccountPrivacy;
@@ -23,7 +24,6 @@ import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
 
 import java.util.Date;
-import java.util.Map;
 import java.util.Random;
 import java.util.concurrent.TimeUnit;
 
@@ -86,8 +86,9 @@ public class AccountServiceImpl extends ServiceImpl<AccountMapper, Account> impl
                 return "请求频繁，请稍后再试";
             Random random = new Random();
             int code = random.nextInt(899999) + 100000;
-            Map<String, Object> data = Map.of("type",type,"email", email, "code", code);
-            rabbitTemplate.convertAndSend(Const.MQ_MAIL, data);
+            QueueMessage message = QueueMessage.create("email");
+            message.put("type",type).put("email", email).put("code", code);
+            rabbitTemplate.convertAndSend(Const.MQ_MAIL, message);
             stringRedisTemplate.opsForValue()
                     .set(Const.VERIFY_EMAIL_DATA + email, String.valueOf(code), 3, TimeUnit.MINUTES);
             return null;

my-project-backend/src/main/java/com/example/utils/Const.java

@@ -21,6 +21,7 @@ public final class Const {
     public final static String ATTR_USER_ID = "userId";
     //消息队列
     public final static String MQ_MAIL = "mail";
+    public final static String MQ_ERROR = "error";
     //用户角色
     public final static String ROLE_DEFAULT = "user";
     public final static String ROLE_ADMIN = "admin";

my-project-backend/src/main/resources/application-dev.yml

@@ -13,6 +13,12 @@ spring:
     username: admin
     password: admin
     virtual-host: /
+    listener:
+      simple:
+        retry:
+          enabled: true
+          max-attempts: 3
+          initial-interval: 1000ms
   datasource:
     url: jdbc:mysql://localhost:3306/study
     username: root

my-project-frontend/src/App.vue

@@ -3,7 +3,7 @@ import { useDark, useToggle } from '@vueuse/core'
 import {onMounted, provide, ref} from "vue";
 import {isUnauthorized} from "@/net";
 import {apiUserInfo} from "@/net/api/user";
-import zhCn from "element-plus/es/locale/lang/zh-cn";
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 useDark({
   selector: 'html',
@@ -12,13 +12,13 @@ useDark({
   valueLight: 'light'
 })
 
+const loading = ref()
+provide('userLoading', loading)
+
 useDark({
   onChanged(dark) { useToggle(dark) }
 })
 
-const loading = ref(false)
-provide('userLoading', loading)
-
 onMounted(() => {
     if(!isUnauthorized()) {
         apiUserInfo(loading)

my-project-frontend/src/components/TopicCollectList.vue

@@ -1,10 +1,10 @@
 <script setup>
+import {get} from "@/net";
 import {ref} from "vue";
 import LightCard from "@/components/LightCard.vue";
 import router from "@/router";
 import TopicTag from "@/components/TopicTag.vue";
 import {ElMessage} from "element-plus";
-import {apiForumCollect, apiForumCollectDelete} from "@/net/api/forum";
 
 defineProps({
     show: Boolean
@@ -15,11 +15,11 @@ const emit = defineEmits(['close'])
 const list = ref([])
 
 function init() {
-    apiForumCollect(data => list.value = data)
+    get('/api/forum/collects', data => list.value = data)
 }
 
 function deleteCollect(index, tid) {
-    apiForumCollectDelete(tid, () => {
+    get(`/api/forum/interact?tid=${tid}&type=collect&state=false`, () => {
         ElMessage.success('已取消收藏！')
         list.value.splice(index, 1)
     })

my-project-frontend/src/components/TopicCommentEditor.vue

@@ -2,8 +2,8 @@
 import {Delta, QuillEditor} from "@vueup/vue-quill";
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import {ref} from "vue";
+import {post} from "@/net";
 import {ElMessage} from "element-plus";
-import {apiForumCommentSubmit} from "@/net/api/forum";
 
 const props = defineProps({
     show: Boolean,
@@ -22,7 +22,7 @@ function submitComment() {
         ElMessage.warning('评论字数已经超出最大限制，请缩减评论内容！')
         return
     }
-    apiForumCommentSubmit({
+    post('/api/forum/add-comment', {
         tid: props.tid,
         quote: props.quote ? props.quote.id : -1,
         content: JSON.stringify(content.value)

my-project-frontend/src/components/TopicEditor.vue

@@ -6,11 +6,10 @@ import ImageResize from "quill-image-resize-vue";
 import { ImageExtend, QuillWatch } from "quill-image-super-solution-module";
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import axios from "axios";
-import {accessHeader} from "@/net";
+import {accessHeader, post} from "@/net";
 import {ElMessage} from "element-plus";
 import ColorDot from "@/components/ColorDot.vue";
 import {useStore} from "@/store";
-import {apiForumTopicCreate} from "@/net/api/forum";
 
 const store = useStore()
 
@@ -34,7 +33,7 @@ const props = defineProps({
     },
     submit: {
         default: (editor, success) => {
-            apiForumTopicCreate({
+            post('/api/forum/create-topic', {
                 type: editor.type.id,
                 title: editor.title,
                 content: editor.text

my-project-frontend/src/components/UserEditor.vue

@@ -0,0 +1,120 @@
+<script setup>
+import {EditPen} from "@element-plus/icons-vue";
+import {reactive} from "vue";
+import {apiUserDetailTotal, apiUserSave} from "@/net/api/user";
+import {ElMessage} from "element-plus";
+
+const editor = reactive({
+    id: 0,
+    display: false,
+    temp: {},
+    loading: false,
+})
+
+function loadUserEditor(user) {
+    editor.id = user.id
+    editor.display = true
+    editor.loading = true
+    apiUserDetailTotal(editor.id, data => {
+        editor.temp = { ...data, ...user }
+        editor.loading = false
+    })
+}
+
+defineExpose({ loadUserEditor })
+
+function saveUserSettings() {
+    editor.display = false
+    apiUserSave(editor.temp, () => {
+        const user = userTable.data.find(user => user.id === editor.id)
+        Object.assign(user, editor.temp)
+        ElMessage.success('数据保存成功')
+    })
+}
+</script>
+
+<template>
+    <el-drawer v-model="editor.display" size="380" :close-on-click-modal="false">
+        <template #header>
+            <div>
+                <div style="font-weight: bold">
+                    <el-icon><EditPen/></el-icon>
+                    编辑用户信息
+                </div>
+                <div style="font-size: 13px">编辑完成后请点击下方保存按钮</div>
+            </div>
+        </template>
+        <div v-loading="editor.loading" element-loading-text="数据加载中，请稍后..." style="height: 100%">
+            <el-form label-position="top" v-if="!editor.loading">
+                <el-form-item label="用户名">
+                    <el-input v-model="editor.temp.username"/>
+                </el-form-item>
+                <el-form-item label="电子邮件">
+                    <el-input v-model="editor.temp.email"/>
+                </el-form-item>
+                <div style="display: flex;font-size: 14px">
+                    <div>
+                        <span style="margin-right: 10px">禁言</span>
+                        <el-switch v-model="editor.temp.mute"/>
+                    </div>
+                    <el-divider direction="vertical" style="height: 30px;margin: 0 20px"/>
+                    <div>
+                        <span style="margin-right: 10px">账号封禁</span>
+                        <el-switch v-model="editor.temp.banned"/>
+                    </div>
+                </div>
+                <div style="margin-top: 20px;color: #606266;font-size: 14px">
+                    注册时间: {{ new Date(editor.temp.registerTime).toLocaleString() }}
+                </div>
+                <el-divider direction="horizontal"/>
+                <el-form-item label="性别">
+                    <el-radio-group v-model="editor.temp.detail.gender">
+                        <el-radio :label="0">男</el-radio>
+                        <el-radio :label="1">女</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="手机号">
+                    <el-input v-model="editor.temp.detail.phone"/>
+                </el-form-item>
+                <el-form-item label="QQ账号">
+                    <el-input v-model="editor.temp.detail.qq"/>
+                </el-form-item>
+                <el-form-item label="微信账号">
+                    <el-input v-model="editor.temp.detail.wx"/>
+                </el-form-item>
+                <el-form-item label="个人简介">
+                    <el-input type="textarea" :rows="4" v-model="editor.temp.detail.desc"/>
+                </el-form-item>
+                <el-divider direction="horizontal"/>
+                <div style="padding-bottom: 20px">
+                    <div style="margin-bottom: 10px;">隐私设置</div>
+                    <el-checkbox v-model="editor.temp.privacy.phone">
+                        公开展示用户的手机号
+                    </el-checkbox>
+                    <el-checkbox v-model="editor.temp.privacy.email">
+                        公开展示用户的电子邮件地址
+                    </el-checkbox>
+                    <el-checkbox v-model="editor.temp.privacy.wx">
+                        公开展示用户的微信号
+                    </el-checkbox>
+                    <el-checkbox v-model="editor.temp.privacy.qq">
+                        公开展示用户的QQ号
+                    </el-checkbox>
+                    <el-checkbox v-model="editor.temp.privacy.gender">
+                        公开展示用户的性别
+                    </el-checkbox>
+                </div>
+            </el-form>
+        </div>
+        <template #footer>
+            <div style="text-align: center">
+                <el-button type="success" @click="saveUserSettings">保存</el-button>
+                <el-button type="info" @click="editor.display = false">取消</el-button>
+            </div>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped>
+
+</style>

my-project-frontend/src/components/UserInfo.vue

@@ -1,16 +1,15 @@
 <script setup>
+import router from "@/router";
 import {Back, Message, Operation, Right} from "@element-plus/icons-vue";
 import {useStore} from "@/store";
-import {isRoleAdmin, logout} from "@/net";
-import router from "@/router";
-import {computed} from "vue";
-import {useRoute} from "vue-router";
+import {logout} from "@/net";
+
+defineProps({
+    admin: Boolean
+})
 
-const route = useRoute()
 const store = useStore()
 
-const isAdminPage = computed(() => route.fullPath.startsWith("/admin"))
-
 function userLogout() {
     logout(() => router.push("/"))
 }
@@ -18,10 +17,10 @@ function userLogout() {
 
 <template>
     <div class="user-info">
-        <template v-if="isRoleAdmin()">
+        <template v-if="store.isAdmin">
             <el-button type="primary" size="small"
                        @click="router.push('/index')"
-                       v-if="isAdminPage">
+                       v-if="admin">
                 回到用户端
                 <el-icon style="margin-left: 5px">
                     <Right/>
@@ -36,7 +35,7 @@ function userLogout() {
                 </el-icon>
             </el-button>
         </template>
-        <slot/>
+        <template/>
         <div class="profile">
             <div>{{ store.user.username }}</div>
             <div>{{ store.user.email }}</div>
@@ -69,16 +68,10 @@ function userLogout() {
 
 <style scoped>
 .user-info {
-    width: 320px;
     display: flex;
     gap: 20px;
-    justify-content: flex-end;
     align-items: center;
 
-    .el-avatar:hover {
-        cursor: pointer;
-    }
-
     .profile {
         text-align: right;
 

my-project-frontend/src/net/api/forum.js

@@ -1,48 +0,0 @@
-import {get, post} from "@/net";
-import {ElMessage} from "element-plus";
-
-export const apiForumTypes = (success) =>
-    get('/api/forum/types', success)
-
-export const apiForumTopic = (tid, success) =>
-    get(`api/forum/topic?tid=${tid}`, success)
-
-export const apiForumInteract = (tid, type, topic, message) => {
-    get(`/api/forum/interact?tid=${tid}&type=${type}&state=${!topic[type]}`, () => {
-        topic[type] = !topic[type]
-        if(topic[type])
-            ElMessage.success(`${message}成功！`)
-        else
-            ElMessage.success(`已取消${message}！`)
-    })
-}
-
-export const apiForumUpdateTopic = (data, success) =>
-    post('/api/forum/update-topic', data, success)
-
-export const apiForumComments = (tid, page, success) =>
-    get(`/api/forum/comments?tid=${tid}&page=${page}`, success)
-
-export const apiForumCommentDelete = (id, success) =>
-    get(`/api/forum/delete-comment?id=${id}`, success)
-
-export const apiForumCommentSubmit = (data, success) =>
-    post('/api/forum/add-comment', data, success)
-
-export const apiForumTopicCreate = (data, success) =>
-    post('/api/forum/create-topic', data, success)
-
-export const apiForumTopTopics = (success) =>
-    get('/api/forum/top-topic', success)
-
-export const apiForumTopicList = (page, type, success) =>
-    get(`/api/forum/list-topic?page=${page}&type=${type}`, success)
-
-export const apiForumWeather = (longitude, latitude, success) =>
-    get(`/api/forum/weather?longitude=${longitude}&latitude=${latitude}`, success)
-
-export const apiForumCollect = (success) =>
-    get('/api/forum/collects', success)
-
-export const apiForumCollectDelete = (tid, success) =>
-    get(`/api/forum/interact?tid=${tid}&type=collect&state=false`, success)

my-project-frontend/src/net/api/user.js

@@ -1,88 +1,40 @@
-import {useStore} from "@/store";
 import {get, post} from "@/net";
-import {ElMessage} from "element-plus";
-import router from "@/router";
+import {useStore} from "@/store";
 
 export const apiUserInfo = (loadingRef) => {
-    loadingRef.value = true
-    const store = useStore();
+    if(loadingRef) loadingRef.value = true
     get('/api/user/info', (data) => {
+        const store = useStore();
         store.user = data
-        loadingRef.value = false
+        if(loadingRef) loadingRef.value = false
     })
 }
 
-export const apiAuthRegister = (data) => {
-    post('/api/auth/register', data, () => {
-        ElMessage.success('注册成功，欢迎加入我们')
-        router.push("/")
-    })
-}
-
-export const apiAuthAskCode = (email, coldTime, type = 'register') => {
-    coldTime.value = 60
-    get(`/api/auth/ask-code?email=${email}&type=${type}`, () => {
-        ElMessage.success(`验证码已发送到邮箱: ${email}，请注意查收`)
-        const handle = setInterval(() => {
-            coldTime.value--
-            if(coldTime.value === 0) {
-                clearInterval(handle)
-            }
-        }, 1000)
-    }, (message) => {
-        ElMessage.warning(message)
-        coldTime.value = 0
-    })
-}
-
-export const apiAuthRestConfirm = (data, activeRef) =>
-    post('/api/auth/reset-confirm', data, () => activeRef.value++)
-
-export const apiAuthResetPassword = (data) => {
-    post('/api/auth/reset-password', data, () => {
-        ElMessage.success('密码重置成功，请重新登录')
-        router.push('/')
-    })
-}
+export const apiUserChangePassword = (form, success) =>
+    post('/api/user/change-password', form, success)
 
 export const apiUserPrivacy = (success) =>
     get('/api/user/privacy', success)
 
-export const apiUserPrivacySave = (data, loadingRef) => {
+export const apiUserPrivacySave = (data, loadingRef, success) => {
     loadingRef.value = true
     post('/api/user/save-privacy', data, () => {
-        ElMessage.success('隐私设置修改成功！')
         loadingRef.value = false
+        success()
     })
 }
 
-export const apiUserChangePassword = (data, success) =>
-    post('/api/user/change-password', data, success)
-
-export const apiUserDetail = (success) =>
-    get('/api/user/details', success)
-
 export const apiUserDetailSave = (form, success, failure) =>
     post('/api/user/save-details', form, success, failure)
 
-export const apiUserModifyEmail = (form, success) =>
-    post('/api/user/modify-email', form, success)
-
-export const apiNotificationList = (success) =>
-    get('/api/notification/list', success)
-
-export const apiNotificationDeleteAll = (success) =>
-    get(`/api/notification/delete-all`, success)
-
-export const apiNotificationDelete = (id, success) =>
-    get(`/api/notification/delete?id=${id}`, success)
+export const apiUserDetail = (success) =>
+    get('/api/user/details', success)
 
 export const apiUserList = (page, size, success) =>
-    get(`api/admin/user/list?page=${page}&size=${size}`, success)
+    get(`/api/admin/user/list?page=${page}&size=${size}`, success)
 
 export const apiUserDetailTotal = (id, success) =>
     get(`api/admin/user/detail?id=${id}`, success)
 
 export const apiUserSave = (data, success) =>
     post('/api/admin/user/save', data, success)
-

my-project-frontend/src/net/index.js

@@ -113,8 +113,8 @@ function isUnauthorized() {
     return !takeAccessToken()
 }
 
-function isRoleAdmin() {
+function isAdminRole() {
     return takeAccessToken()?.role === 'admin'
 }
 
-export { post, get, login, logout, isUnauthorized, isRoleAdmin, accessHeader }
+export { post, get, login, logout, isUnauthorized, isAdminRole, accessHeader }

my-project-frontend/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import {isRoleAdmin, isUnauthorized} from "@/net";
+import {isAdminRole, isUnauthorized} from "@/net";
+import {useStore} from "@/store";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -70,6 +71,10 @@ const router = createRouter({
                     path: 'forum',
                     name: 'admin-forum',
                     component: () => import('@/views/admin/ForumAdmin.vue')
+                }, {
+                    path: 'email',
+                    name: 'admin-email',
+                    component: () => import('@/views/admin/EmailAdmin.vue')
                 }
             ]
         }
@@ -77,12 +82,12 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-    const unauthorized = isUnauthorized(), admin = isRoleAdmin()
+    const unauthorized = isUnauthorized(), admin = isAdminRole()
     if(to.name.startsWith('welcome') && !unauthorized) {
         next('/index')
     } else if(to.fullPath.startsWith('/admin') && !admin) {
         next('/index')
-    }else if(to.fullPath.startsWith('/index') && unauthorized) {
+    } else if(to.fullPath.startsWith('/index') && unauthorized) {
         next('/')
     } else {
         next()

my-project-frontend/src/store/index.js

@@ -17,6 +17,9 @@ export const useStore = defineStore('general', {
             }
         }
     }, getters: {
+        isAdmin() {
+            return this.user.role === 'admin'
+        },
         avatarUrl() {
             if(this.user.avatar)
                 return `${axios.defaults.baseURL}/images${this.user.avatar}`

my-project-frontend/src/views/AdminView.vue

@@ -1,65 +1,66 @@
 <script setup>
-
 import {
     Bell,
     ChatDotSquare, Collection,
     DataLine,
     Document,
     Files,
-    Location,
+    Location, Message,
     Monitor, Notification, Position, School,
     Umbrella,
     User
 } from "@element-plus/icons-vue";
 import UserInfo from "@/components/UserInfo.vue";
 import {inject, onMounted, ref} from "vue";
-import router from "@/router";
 import {useRoute} from "vue-router";
+import router from "@/router";
 
 const adminMenu = [
     {
         title: '校园论坛管理', icon: Location, sub: [
-            { title: '用户管理', icon: User, index: '/admin/user' },
-            { title: '帖子广场管理', icon: ChatDotSquare, index: '/admin/forum' },
-            { title: '失物招领管理', icon: Bell },
-            { title: '校园活动管理', icon: Notification },
-            { title: '表白墙管理', icon: Umbrella },
-            { title: '合作机构管理', icon: School }
+            {title: '用户管理', icon: User, index: '/admin/user' },
+            {title: '邮件发信管理', icon: Message, index: '/admin/email' },
+            {title: '帖子广场管理', icon: ChatDotSquare, index: '/admin/forum' },
+            {title: '失物招领管理', icon: Bell},
+            {title: '校园活动管理', icon: Notification},
+            {title: '表白墙管理', icon: Umbrella},
+            {title: '合作机构管理', icon: School}
         ]
     }, {
         title: '探索与发现管理', icon: Position, sub: [
-            { title: '成绩管理', icon: Document },
-            { title: '课程表管理', icon: Files },
-            { title: '教务通知管理', icon: Monitor },
-            { title: '在线图书馆管理', icon: Collection },
-            { title: '预约教室管理', icon: DataLine }
+            {title: '成绩查询管理', icon: Document},
+            {title: '班级课程表管理', icon: Files},
+            {title: '教务通知管理', icon: Monitor},
+            {title: '在线图书馆管理', icon: Collection},
+            {title: '预约教室管理', icon: DataLine}
         ]
     }
 ]
 
 const route = useRoute()
 const loading = inject('userLoading')
+
 const pageTabs = ref([])
 
-function handleTabClick({ props }) {
+function handleTabsClick({ props }) {
     router.push(props.name)
 }
 
-function handleTabClose(name) {
+function handleTabRemove(name) {
     const index = pageTabs.value.findIndex(tab => tab.name === name)
     const isCurrent = name === route.fullPath
     pageTabs.value.splice(index, 1)
     if(pageTabs.value.length > 0) {
-        //删除后，标签列表中还有剩余的Tab且关闭的是当前的，则自动进行切换，默认切换到上一个，如果没有上一个，则切换到下一个
+        //若标签列表中仍有未删除的，且关闭的是当前正在浏览的页面，则自动调整到前一个，没有就后一个
         if(isCurrent) {
-            router.push(pageTabs.value[Math.max(0, index - 1)].name)
+            router.push(pageTabs.value[Math.max(0, index - 1)].name)  //优化后算法
         }
-    } else {
+    } else {   //一个都没有了那就回到欢迎页
         router.push('/admin')
     }
 }
 
-function addAdminTab(menu) {
+function openAdminTab(menu) {
     if(!menu.index) return
     if(pageTabs.value.findIndex(tab => tab.name === menu.index) < 0) {
         pageTabs.value.push({
@@ -74,7 +75,7 @@ onMounted(() => {
         .flatMap(menu => menu.sub)
         .find(sub => sub.index === route.fullPath)
     if(initPage) {
-        addAdminTab(initPage)
+        openAdminTab(initPage)
     }
 })
 </script>
@@ -83,15 +84,15 @@ onMounted(() => {
     <div class="admin-content" v-loading="loading" element-loading-text="正在进入，请稍后...">
         <el-container style="height: 100%">
             <el-aside width="230px" class="admin-content-aside">
-                <div class="logo-box">
+                <div style="text-align: center;padding: 15px 0 10px;height: 32px">
                     <el-image class="logo" src="https://element-plus.org/images/element-plus-logo.svg"/>
                 </div>
-                <el-scrollbar style="height: calc(100vh - 57px)">
+                <el-scrollbar style="height: calc(100% - 60px)">
                     <el-menu
                         router
                         :default-active="$route.path"
-                        :default-openeds="['1', '2']"
-                        style="min-height: calc(100vh - 57px);border: none">
+                        :default-openeds="['1', '2', '3']"
+                        style="height: calc(100% - 60px);border-right: none">
                         <el-sub-menu :index="(index + 1).toString()"
                                      v-for="(menu, index) in adminMenu">
                             <template #title>
@@ -101,13 +102,17 @@ onMounted(() => {
                                 <span><b>{{ menu.title }}</b></span>
                             </template>
                             <el-menu-item :index="subMenu.index"
-                                          @click="addAdminTab(subMenu)"
+                                          @click="openAdminTab(subMenu)"
                                           v-for="subMenu in menu.sub">
                                 <template #title>
                                     <el-icon>
                                         <component :is="subMenu.icon"/>
                                     </el-icon>
                                     {{ subMenu.title }}
+                                    <el-tag style="margin-left: 10px" size="small"
+                                            :type="subMenu.tag.type"
+                                            v-if="subMenu.tag">{{ subMenu.tag.name }}
+                                    </el-tag>
                                 </template>
                             </el-menu-item>
                         </el-sub-menu>
@@ -117,18 +122,21 @@ onMounted(() => {
             <el-container>
                 <el-header class="admin-content-header">
                     <div style="flex: 1">
-                        <el-tabs type="card"
-                                 :model-value="route.fullPath"
+                        <el-tabs :model-value="route.fullPath"
+                                 type="card"
                                  closable
-                                 @tab-remove="handleTabClose"
-                                 @tab-click="handleTabClick">
-                            <el-tab-pane v-for="tab in pageTabs"
-                                         :label="tab.title"
-                                         :name="tab.name"
-                                         :key="tab.name"/>
+                                 @tab-remove="handleTabRemove"
+                                 @tab-click="handleTabsClick">
+                            <el-tab-pane
+                                v-for="item in pageTabs"
+                                :key="item.name"
+                                :label="item.title"
+                                :name="item.name">
+                                {{ item.content }}
+                            </el-tab-pane>
                         </el-tabs>
                     </div>
-                    <user-info/>
+                    <user-info admin/>
                 </el-header>
                 <el-main>
                     <router-view v-slot="{ Component }">
@@ -142,26 +150,21 @@ onMounted(() => {
     </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 .admin-content {
     height: 100vh;
     width: 100vw;
+}
 
-    .admin-content-aside {
+.admin-content-aside {
     border-right: solid 1px var(--el-border-color);
 
-        .logo-box {
-            text-align: center;
-            padding: 15px 0 10px;
-            height: 32px;
-
     .logo {
         height: 32px;
     }
-        }
-    }
+}
 
-    .admin-content-header {
+.admin-content-header {
     border-bottom: solid 1px var(--el-border-color);
     height: 55px;
     display: flex;
@@ -181,10 +184,9 @@ onMounted(() => {
 
     :deep(.el-tabs__item) {
         height: 32px;
-            padding: 0 15px;
+        padding: 0 15px !important;
         border-radius: 6px;
-            border: solid 1px var(--el-border-color);
-        }
+        border: solid 1px var(--el-border-color) !important;
     }
 }
 </style>

my-project-frontend/src/views/IndexView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import {get} from '@/net'
 import {inject, reactive, ref} from "vue";
 import {
     Bell,
@@ -12,16 +13,14 @@ import {
 } from "@element-plus/icons-vue";
 import LightCard from "@/components/LightCard.vue";
 import UserInfo from "@/components/UserInfo.vue";
-import {apiNotificationDelete, apiNotificationDeleteAll, apiNotificationList} from "@/net/api/user";
 
 const userMenu = [
-    {
-        title: '校园论坛', icon: Location, sub: [
-            { title: '帖子广场', icon: ChatDotSquare, index: '/index' },
+  { title: '校园论坛', icon: Location, sub: [
+      { title: '帖子广场', index: '/index', icon: ChatDotSquare },
       { title: '失物招领', icon: Bell },
       { title: '校园活动', icon: Notification },
       { title: '表白墙', icon: Umbrella },
-            { title: '海文考研', icon: School }
+      { title: '海文考研', icon: School, tag: { name: '合作机构', type: '' } }
     ]
   }, {
     title: '探索与发现', icon: Position, sub: [
@@ -48,18 +47,18 @@ const searchInput = reactive({
 const notification = ref([])
 
 const loadNotification =
-        () => apiNotificationList(data => notification.value = data)
+        () => get('/api/notification/list', data => notification.value = data)
 loadNotification()
 
 function confirmNotification(id, url) {
-    apiNotificationDelete(id, () => {
+    get(`/api/notification/delete?id=${id}`, () => {
         loadNotification()
         window.open(url)
     })
 }
 
 function deleteAllNotification() {
-    apiNotificationDeleteAll(loadNotification)
+    get(`/api/notification/delete-all`, loadNotification)
 }
 </script>
 
@@ -67,9 +66,7 @@ function deleteAllNotification() {
     <div class="main-content" v-loading="loading" element-loading-text="正在进入，请稍后...">
         <el-container style="height: 100%" v-if="!loading">
             <el-header class="main-content-header">
-                <div style="width: 320px;height: 32px">
                 <el-image class="logo" src="https://element-plus.org/images/element-plus-logo.svg"/>
-                </div>
                 <div style="flex: 1;padding: 0 20px;text-align: center">
                     <el-input v-model="searchInput.text" style="width: 100%;max-width: 500px"
                               placeholder="搜索论坛相关内容...">
@@ -141,6 +138,9 @@ function deleteAllNotification() {
                                   <component :is="subMenu.icon"/>
                                 </el-icon>
                                 {{ subMenu.title }}
+                                <el-tag style="margin-left: 10px" size="small"
+                                        :type="subMenu.tag.type"
+                                        v-if="subMenu.tag">{{ subMenu.tag.name }}</el-tag>
                               </template>
                             </el-menu-item>
                           </el-sub-menu>
@@ -205,9 +205,17 @@ function deleteAllNotification() {
 
     .logo {
         height: 32px;
+        width: 340px;
+        text-align: left;
+
+        :deep(.el-image__inner) {
+            width: 120px;
+        }
     }
 
     .user-info {
+        gap: 20px;
+        width: 340px;
         display: flex;
         justify-content: flex-end;
         align-items: center;
@@ -218,7 +226,6 @@ function deleteAllNotification() {
 
         .profile {
             text-align: right;
-            margin-right: 20px;
 
             :first-child {
                 font-size: 18px;

my-project-frontend/src/views/admin/EmailAdmin.vue

@@ -0,0 +1,32 @@
+<script setup>
+import {Message} from "@element-plus/icons-vue";
+
+</script>
+
+<template>
+    <div class="email-admin">
+        <div class="title">
+            <el-icon><Message/></el-icon>
+            邮件发信列表
+        </div>
+        <div class="desc">在这里查看所有发送的电子邮件列表，失败邮件可以选择重新发送</div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.email-admin {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+        font-weight: bold;
+    }
+
+    .desc {
+        color: #bababa;
+        font-size: 13px;
+        margin-bottom: 20px;
+    }
+}
+</style>

my-project-frontend/src/views/admin/ForumAdmin.vue

@@ -4,7 +4,7 @@
 
 <template>
     <div>
-        我是论坛管理
+        我是帖子管理
     </div>
 </template>
 

my-project-frontend/src/views/admin/UserAdmin.vue

@@ -1,19 +1,12 @@
 <script setup>
 import {EditPen, User} from "@element-plus/icons-vue";
-import {apiUserDetailTotal, apiUserList, apiUserSave} from "@/net/api/user";
-import {reactive, watchEffect} from "vue";
+import {apiUserList} from "@/net/api/user";
+import {reactive, ref, watchEffect} from "vue";
 import {useStore} from "@/store";
-import {ElMessage} from "element-plus";
+import UserEditor from "@/components/UserEditor.vue";
 
 const store = useStore()
 
-const editor = reactive({
-    id: 0,
-    display: false,
-    temp: {},
-    loading: false
-})
-
 const userTable = reactive({
     page: 1,
     size: 10,
@@ -21,6 +14,8 @@ const userTable = reactive({
     data: []
 })
 
+const editorRef = ref()
+
 function userStatus(user) {
     if(user.mute && user.banned)
         return '禁言中、封禁中'
@@ -32,25 +27,6 @@ function userStatus(user) {
         return '正常'
 }
 
-function openUserEditor(user) {
-    editor.id = user.id
-    editor.display = true
-    editor.loading = true
-    apiUserDetailTotal(editor.id, data => {
-        editor.temp = { ...data, ...user }
-        editor.loading = false
-    })
-}
-
-function saveUserDetail() {
-    editor.display = false
-    apiUserSave(editor.temp, () => {
-        const user = userTable.data.find(user => user.id === editor.id)
-        Object.assign(user, editor.temp)
-        ElMessage.success('数据保存成功')
-    })
-}
-
 watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
     userTable.total = data.total
     userTable.data = data.list
@@ -63,11 +39,9 @@ watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
             <el-icon><User/></el-icon>
             论坛用户列表
         </div>
-        <div class="desc">
-          在这里管理论坛的所有用户，包括账号信息、封禁和禁言处理。
-        </div>
-        <el-table :data="userTable.data" height="320">
-            <el-table-column prop="id" label="编号" width="80"/>
+        <div class="desc">在这里管理论坛的所有用户，包括账号信息、封禁和禁言</div>
+        <el-table :data="userTable.data" style="width: 100%;flex: 1">
+            <el-table-column prop="id" label="编号" width="80" />
             <el-table-column label="用户名" width="180">
                 <template #default="{ row }">
                     <div class="table-username">
@@ -82,75 +56,42 @@ watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
                     <el-tag v-else>普通用户</el-tag>
                 </template>
             </el-table-column>
-            <el-table-column prop="email" label="电子邮件"/>
+            <el-table-column prop="email" label="电子邮件" />
             <el-table-column label="注册时间">
                 <template #default="{ row }">
                     {{ new Date(row.registerTime).toLocaleString() }}
                 </template>
             </el-table-column>
-            <el-table-column label="状态" align="center">
+            <el-table-column label="状态" width="100" align="center">
                 <template #default="{ row }">
-                    {{ userStatus(row) }}
+                    <div>{{ userStatus(row) }}</div>
                 </template>
             </el-table-column>
-            <el-table-column label="操作" align="center">
+            <el-table-column label="操作" width="100" align="center">
                 <template #default="{ row }">
-                    <el-button type="primary" size="small" :icon="EditPen"
-                               @click="openUserEditor(row)"
-                               :disabled="row.role === 'admin'">编辑</el-button>
+                    <el-button size="small" type="primary" :icon="EditPen"
+                               @click="editorRef.loadUserEditor(row)"
+                               :disabled="store.user.id === row.id">编辑</el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <div class="pagination">
-            <el-pagination :total="userTable.total"
+        <div style="margin-top: 20px;display: flex;justify-content: right">
+            <el-pagination style="width: fit-content"
+                           :total="userTable.total"
                            v-model:current-page="userTable.page"
                            v-model:page-size="userTable.size"
                            layout="total, sizes, prev, pager, next, jumper"/>
         </div>
-        <el-drawer v-model="editor.display">
-            <template #header>
-                <div>
-                    <div style="font-weight: bold">
-                        <el-icon><EditPen/></el-icon> 编辑用户信息
-                    </div>
-                    <div style="font-size: 13px">编辑完成后请点击下方保存按钮</div>
-                </div>
-            </template>
-            <el-form label-position="top">
-                <el-form-item label="用户名">
-                    <el-input v-model="editor.temp.username"/>
-                </el-form-item>
-                <el-form-item label="电子邮件">
-                    <el-input v-model="editor.temp.email"/>
-                </el-form-item>
-                <div style="display: flex;font-size: 14px;gap: 20px">
-                    <div>
-                        <span style="margin-right: 10px">禁言</span>
-                        <el-switch v-model="editor.temp.mute"/>
-                    </div>
-                    <el-divider style="height: 30px" direction="vertical"/>
-                    <div>
-                        <span style="margin-right: 10px">账号封禁</span>
-                        <el-switch v-model="editor.temp.banned"/>
-                    </div>
-                </div>
-                <div style="margin-top: 10px;color: #606266;font-size: 14px">
-                    注册时间: {{ new Date(editor.temp.registerTime).toLocaleString() }}
-                </div>
-                <el-divider/>
-            </el-form>
-            <template #footer>
-                <div style="text-align: center">
-                    <el-button type="success" @click="saveUserDetail">保存</el-button>
-                    <el-button type="info" @click="editor.display = false">取消</el-button>
-                </div>
-            </template>
-        </el-drawer>
+        <user-editor ref="editorRef"/>
     </div>
 </template>
 
 <style lang="less" scoped>
 .user-admin {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
     .title {
         font-weight: bold;
     }
@@ -168,12 +109,6 @@ watchEffect(() => apiUserList(userTable.page, userTable.size, data => {
         gap: 15px;
     }
 
-    .pagination {
-        margin-top: 20px;
-        display: flex;
-        justify-content: right;
-    }
-
     :deep(.el-drawer__header) {
         margin-bottom: 0;
     }

my-project-frontend/src/views/admin/WelcomeAdmin.vue

@@ -4,7 +4,7 @@
 
 <template>
     <div>
-        我是欢迎页
+        我是管理端欢迎页
     </div>
 </template>
 

my-project-frontend/src/views/forum/Forum.vue

@@ -1,10 +1,10 @@
 <script setup>
+import {get} from "@/net";
 import {useStore} from "@/store";
-import {apiForumTypes} from "@/net/api/forum";
 
 const store = useStore()
 
-apiForumTypes(data => {
+get('/api/forum/types', data => {
     const array = []
     array.push({name: '全部', id: 0, color: 'linear-gradient(45deg, white, red, orange, gold, green, blue)'})
     data.forEach(d => array.push(d))

my-project-frontend/src/views/forum/TopicDetail.vue

@@ -1,6 +1,8 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {reactive, ref} from "vue";
+import {get, post} from "@/net";
+import axios from "axios";
+import {computed, reactive, ref} from "vue";
 import {ArrowLeft, ChatSquare, CircleCheck, Delete, EditPen, Female, Male, Plus, Star} from "@element-plus/icons-vue";
 import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
 import Card from "@/components/Card.vue";
@@ -11,13 +13,6 @@ import {ElMessage} from "element-plus";
 import {useStore} from "@/store";
 import TopicEditor from "@/components/TopicEditor.vue";
 import TopicCommentEditor from "@/components/TopicCommentEditor.vue";
-import {
-    apiForumCommentDelete,
-    apiForumComments,
-    apiForumInteract,
-    apiForumTopic,
-    apiForumUpdateTopic
-} from "@/net/api/forum";
 
 const route = useRoute()
 const store = useStore()
@@ -38,7 +33,7 @@ const comment = reactive({
     quote: null
 })
 
-const init = () => apiForumTopic(tid, data => {
+const init = () => get(`api/forum/topic?tid=${tid}`, data => {
     topic.data = data
     topic.like = data.interact.like
     topic.collect = data.interact.collect
@@ -53,11 +48,17 @@ function convertToHtml(content) {
 }
 
 function interact(type, message) {
-    apiForumInteract(tid, type, topic, message)
+    get(`/api/forum/interact?tid=${tid}&type=${type}&state=${!topic[type]}`, () => {
+        topic[type] = !topic[type]
+        if(topic[type])
+            ElMessage.success(`${message}成功！`)
+        else
+            ElMessage.success(`已取消${message}！`)
+    })
 }
 
 function updateTopic(editor) {
-    apiForumUpdateTopic({
+    post('/api/forum/update-topic', {
         id: tid,
         type: editor.type.id,
         title: editor.title,
@@ -72,7 +73,7 @@ function updateTopic(editor) {
 function loadComments(page) {
     topic.comments = null
     topic.page = page
-    apiForumComments(tid, page - 1, data => topic.comments = data)
+    get(`/api/forum/comments?tid=${tid}&page=${page - 1}`, data => topic.comments = data)
 }
 
 function onCommentAdd() {
@@ -81,7 +82,7 @@ function onCommentAdd() {
 }
 
 function deleteComment(id) {
-    apiForumCommentDelete(id, () => {
+    get(`/api/forum/delete-comment?id=${id}`, () => {
         ElMessage.success('删除评论成功！')
         loadComments(topic.page)
     })

my-project-frontend/src/views/forum/TopicList.vue

@@ -13,7 +13,8 @@ import {
     Microphone, CircleCheck, Star, FolderOpened, ArrowRightBold
 } from "@element-plus/icons-vue";
 import Weather from "@/components/Weather.vue";
-import {computed, onMounted, reactive, ref, watch} from "vue";
+import {computed, reactive, ref, watch} from "vue";
+import {get} from "@/net";
 import {ElMessage} from "element-plus";
 import TopicEditor from "@/components/TopicEditor.vue";
 import {useStore} from "@/store";
@@ -21,7 +22,6 @@ import ColorDot from "@/components/ColorDot.vue";
 import router from "@/router";
 import TopicTag from "@/components/TopicTag.vue";
 import TopicCollectList from "@/components/TopicCollectList.vue";
-import {apiForumTopicList, apiForumTopTopics, apiForumWeather} from "@/net/api/forum";
 
 const store = useStore()
 
@@ -47,10 +47,10 @@ const today = computed(() => {
     const date = new Date()
     return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 })
-
+get('/api/forum/top-topic', data => topics.top = data)
 function updateList(){
     if(topics.end) return
-    apiForumTopicList(topics.page, topics.type, data => {
+    get(`/api/forum/list-topic?page=${topics.page}&type=${topics.type}`, data => {
         if(data) {
             data.forEach(d => topics.list.push(d))
             topics.page++
@@ -75,14 +75,14 @@ function resetList() {
 navigator.geolocation.getCurrentPosition(position => {
     const longitude = position.coords.longitude
     const latitude = position.coords.latitude
-    apiForumWeather(longitude, latitude, data => {
+    get(`/api/forum/weather?longitude=${longitude}&latitude=${latitude}`, data => {
         Object.assign(weather, data)
         weather.success = true
     })
 }, error => {
     console.info(error)
     ElMessage.warning('位置信息获取超时，请检测网络设置')
-    apiForumWeather(116.40529, 39.90499, data => {
+    get(`/api/forum/weather?longitude=116.40529&latitude=39.90499`, data => {
         Object.assign(weather, data)
         weather.success = true
     })
@@ -90,10 +90,6 @@ navigator.geolocation.getCurrentPosition(position => {
     timeout: 3000,
     enableHighAccuracy: true
 })
-
-onMounted(() => {
-    apiForumTopTopics(data => topics.top = data)
-})
 </script>
 
 <template>

my-project-frontend/src/views/settings/PrivacySetting.vue

@@ -2,7 +2,7 @@
 
 import Card from "@/components/Card.vue";
 import {Setting, Switch, Lock} from "@element-plus/icons-vue";
-import {onMounted, reactive, ref} from "vue";
+import {reactive, ref} from "vue";
 import {ElMessage} from "element-plus";
 import {apiUserChangePassword, apiUserPrivacy, apiUserPrivacySave} from "@/net/api/user";
 
@@ -35,7 +35,7 @@ const rules = {
 }
 const formRef = ref()
 const valid = ref(false)
-const onValidate = (prop, isValid) => valid.value = isValid
+const onValidate = (_, isValid) => valid.value = isValid
 
 function resetPassword(){
     formRef.value.validate(valid => {
@@ -57,16 +57,15 @@ const privacy = reactive({
     gender: false
 })
 
-function savePrivacy(type, status){
-    apiUserPrivacySave({ type, status }, saving)
-}
-
-onMounted(() => {
-    apiUserPrivacy(data => {
+apiUserPrivacy(data => {
     Object.assign(privacy, data)
     saving.value = false
-    })
 })
+
+function savePrivacy(type, status){
+    apiUserPrivacySave({ type, status }, saving,
+        () => ElMessage.success('隐私设置修改成功！'))
+}
 </script>
 
 <template>

my-project-frontend/src/views/settings/UserSetting.vue

@@ -3,11 +3,11 @@
 import Card from "@/components/Card.vue";
 import {Message, Refresh, Select, User} from "@element-plus/icons-vue";
 import {useStore} from "@/store";
-import {computed, onMounted, reactive, ref} from "vue";
-import {accessHeader} from "@/net";
+import {computed, reactive, ref} from "vue";
+import {accessHeader, get, post} from "@/net";
 import {ElMessage} from "element-plus";
 import axios from "axios";
-import {apiAuthAskCode, apiUserDetail, apiUserDetailSave, apiUserModifyEmail} from "@/net/api/user";
+import {apiUserDetail, apiUserDetailSave} from "@/net/api/user";
 
 const store = useStore()
 
@@ -28,7 +28,7 @@ const emailForm = reactive({
     email: '',
     code: ''
 })
-const validateUsername = (_, value, callback) => {
+const validateUsername = (rule, value, callback) => {
     if (value === '') {
         callback(new Error('请输入用户名'))
     } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)) {
@@ -61,7 +61,7 @@ function saveDetails() {
                 store.user.usernamew = baseForm.username
                 desc.value = baseForm.desc
                 loading.base = false
-            }, message => {
+            }, (message) => {
                 ElMessage.warning(message)
                 loading.base = false
             })
@@ -69,6 +69,14 @@ function saveDetails() {
     })
 }
 
+apiUserDetail(data => {
+    baseForm.username = store.user.username
+    Object.assign(baseForm, data)
+    baseForm.desc = desc.value = data.desc
+    emailForm.email = store.user.email
+    loading.form = false
+})
+
 const coldTime = ref(0)
 const isEmailValid = ref(true)
 const onValidate = (prop, isValid) => {
@@ -79,7 +87,19 @@ const onValidate = (prop, isValid) => {
 function sendEmailCode() {
     emailFormRef.value.validate(isValid => {
         if (isValid) {
-            apiAuthAskCode(emailForm.email, coldTime, 'modify')
+            coldTime.value = 60
+            get(`/api/auth/ask-code?email=${emailForm.email}&type=modify`, () => {
+                ElMessage.success(`验证码已成功发送到邮箱：${emailForm.email}，请注意查收`)
+                const handle = setInterval(() => {
+                    coldTime.value--
+                    if (coldTime.value === 0) {
+                        clearInterval(handle)
+                    }
+                }, 1000)
+            }, (message) => {
+                ElMessage.warning(message)
+                coldTime.value = 0
+            })
         }
     })
 }
@@ -87,7 +107,7 @@ function sendEmailCode() {
 function modifyEmail() {
     emailFormRef.value.validate(isValid => {
         if (isValid) {
-            apiUserModifyEmail(emailForm, () => {
+            post('/api/user/modify-email', emailForm, () => {
                 ElMessage.success('邮件修改成功')
                 store.user.email = emailForm.email
                 emailForm.code = ''
@@ -111,16 +131,6 @@ function uploadSuccess(response){
     ElMessage.success('头像上传成功')
     store.user.avatar = response.data
 }
-
-onMounted(() => {
-    apiUserDetail(data => {
-        baseForm.username = store.user.username
-        baseForm.desc = desc.value = data.desc
-        Object.assign(baseForm, data)
-        emailForm.email = store.user.email
-        loading.form = false
-    })
-})
 </script>
 
 <template>

my-project-frontend/src/views/welcome/ForgetPage.vue

@@ -80,7 +80,9 @@
 <script setup>
 import {reactive, ref} from "vue";
 import {EditPen, Lock, Message} from "@element-plus/icons-vue";
-import {apiAuthAskCode, apiAuthResetPassword, apiAuthRestConfirm} from "@/net/api/user";
+import {get, post} from "@/net";
+import {ElMessage} from "element-plus";
+import router from "@/router";
 
 const active = ref(0)
 
@@ -127,15 +129,29 @@ const onValidate = (prop, isValid) => {
         isEmailValid.value = isValid
 }
 
-const validateEmail = () => apiAuthAskCode(form.email, coldTime, 'reset')
+const validateEmail = () => {
+    coldTime.value = 60
+    get(`/api/auth/ask-code?email=${form.email}&type=reset`, () => {
+        ElMessage.success(`验证码已发送到邮箱: ${form.email}，请注意查收`)
+        const handle = setInterval(() => {
+          coldTime.value--
+          if(coldTime.value === 0) {
+            clearInterval(handle)
+          }
+        }, 1000)
+    }, (message) => {
+        ElMessage.warning(message)
+        coldTime.value = 0
+    })
+}
 
 const confirmReset = () => {
     formRef.value.validate((isValid) => {
         if(isValid) {
-            apiAuthRestConfirm({
+            post('/api/auth/reset-confirm', {
                 email: form.email,
                 code: form.code
-            }, active)
+            }, () => active.value++)
         }
     })
 }
@@ -143,10 +159,13 @@ const confirmReset = () => {
 const doReset = () => {
     formRef.value.validate((isValid) => {
         if(isValid) {
-            apiAuthResetPassword({
+            post('/api/auth/reset-password', {
                 email: form.email,
                 code: form.code,
                 password: form.password
+            }, () => {
+                ElMessage.success('密码重置成功，请重新登录')
+                router.push('/')
             })
         }
     })

my-project-frontend/src/views/welcome/LoginPage.vue

@@ -62,6 +62,8 @@ const form = reactive({
   remember: false
 })
 
+const loading = inject('userLoading')
+
 const rules = {
   username: [
     { required: true, message: '请输入用户名' }
@@ -71,8 +73,6 @@ const rules = {
   ]
 }
 
-const loading = inject('userLoading')
-
 function userLogin() {
   formRef.value.validate((isValid) => {
     if(isValid) {

my-project-frontend/src/views/welcome/RegisterPage.vue

@@ -68,7 +68,7 @@ import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
 import router from "@/router";
 import {reactive, ref} from "vue";
 import {ElMessage} from "element-plus";
-import {apiAuthAskCode, apiAuthRegister} from "@/net/api/user";
+import {get, post} from "@/net";
 
 const form = reactive({
     username: '',
@@ -131,11 +131,14 @@ const onValidate = (prop, isValid) => {
 const register = () => {
     formRef.value.validate((isValid) => {
         if(isValid) {
-            apiAuthRegister({
+            post('/api/auth/register', {
                 username: form.username,
                 password: form.password,
                 email: form.email,
                 code: form.code
+            }, () => {
+                ElMessage.success('注册成功，欢迎加入我们')
+                router.push("/")
             })
         } else {
             ElMessage.warning('请完整填写注册表单内容！')
@@ -143,7 +146,21 @@ const register = () => {
     })
 }
 
-const validateEmail = () => apiAuthAskCode(form.email, coldTime)
+const validateEmail = () => {
+    coldTime.value = 60
+    get(`/api/auth/ask-code?email=${form.email}&type=register`, () => {
+        ElMessage.success(`验证码已发送到邮箱: ${form.email}，请注意查收`)
+        const handle = setInterval(() => {
+          coldTime.value--
+          if(coldTime.value === 0) {
+            clearInterval(handle)
+          }
+        }, 1000)
+    }, undefined, (message) => {
+        ElMessage.warning(message)
+        coldTime.value = 0
+    })
+}
 </script>
 
 <style scoped>