（八）山东大学软件学院项目实训-基于大模型的模拟面试系统-面试官和面试记录的分享功能（2）

本文记录在发布文章时，可以添加自己创建的面试官和面试记录到文章中这一功能的实现。
前端

首先是在原本的界面的底部添加了两个多选框（后期需要美化调整）

实现的代码：

1.       <el-col style="margin-top: 1rem;">
2.           <el-select
3.             style="width: 100%; margin-bottom: 1rem;"
4.             v-model="selectedInterviewers"
5.             multiple
6.             filterable
7.             placeholder="请选择面试官"
8.             :loading="interviewersLoading">
9.             <el-option
10.               v-for="item in interviewersList"
11.               :key="item.interviewerId"
12.               :label="item.name"
13.               :value="item.interviewerId">
14.               <span>{{ item.name }}</span>
15.             </el-option>
16.           </el-select>
18.           <el-select
19.             style="width: 100%; margin-bottom: 1rem;"
20.             v-model="selectedInterviews"
21.             multiple
22.             filterable
23.             placeholder="请选择面试记录"
24.             :loading="interviewsLoading">
25.             <el-option
26.               v-for="item in interviewsList"
27.               :key="item.chatId"
28.               :label="item.topic"
29.               :value="item.chatId">
30.               <span>{{ item.topic }}</span>
31.               <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.topic }}</span> -->
32.             </el-option>
33.           </el-select>
34.       </el-col>

复制代码

然后是前端脚本，添加以下函数：

• getInterviewers用来获取该用户创建的所有面试官。
  
• getInterviews用来获取该用户创建的所有面试记录。
  

其次，在创建文章和生存文章时，也添加了两个列表分别存储面试官ID和面试记录ID。

1.     // 获取用户创建的面试官列表
2.     async getInterviewers() {
3.       let _ts = this;
4.       _ts.interviewersLoading = true;
5.       try {
6.         const res = await _ts.$axios.$get('/api/share/getUserInterviewers');
7.         if (res) {
8.           _ts.$set(_ts, 'interviewersList', res);
9.           console.log(res);
10.         }
11.       } catch (err) {
12.         _ts.$message.error('获取面试官列表失败');
13.       } finally {
14.         _ts.interviewersLoading = false;
15.       }
16.     },

复制代码

1.     // 获取用户创建的面试记录列表
2.     async getInterviews() {
3.       let _ts = this;
4.       _ts.interviewsLoading = true;
5.       try {
6.         const res = await _ts.$axios.$get('/api/share/getUserChatRecords');
7.         if (res) {
8.           _ts.$set(_ts, 'interviewsList', res);
9.           console.log(res);
10.         }
11.       } catch (err) {
12.         _ts.$message.error('获取面试记录列表失败');
13.       } finally {
14.         _ts.interviewsLoading = false;
15.       }
16.     }

复制代码

后端接口

• getUserInterviewers用来获取该用户创建的所有面试官。
  
• /getUserChatRecords用来获取该用户创建的所有面试记录。
  

1.     @GetMapping("/getUserInterviewers")
2.     public GlobalResult getUserInterviewers() {
3.         Long idUser = UserUtils.getCurrentUserByToken().getIdUser();
4.         List<Interviewer> interviewers = interviewerService.findInterviewers().stream()
5.                 .filter(interviewer -> interviewer.getUserId() != null && interviewer.getUserId().equals(idUser))
6.                 .collect(Collectors.toList());
7.         return GlobalResultGenerator.genSuccessResult(interviewers);
8.     }
10.     @GetMapping("/getUserChatRecords")
11.     public GlobalResult getUserChatRecords() {
12.         Long idUser = UserUtils.getCurrentUserByToken().getIdUser();
13.         
14.         // 1. 查询用户的所有面试官
15.         List<Interviewer> interviewers = interviewerService.findInterviewers();
16.         
17.         // 2. 收集所有面试记录
18.         List<ChatRecords> allRecords = new ArrayList<>();
19.         for (Interviewer interviewer : interviewers) {
20.             ChatRecords query = new ChatRecords();
21.             query.setUserId(idUser);
22.             query.setInterviewerId(interviewer.getInterviewerId());
23.             allRecords.addAll(chatService.getChatRecords(query));
24.         }
25.         
26.         return GlobalResultGenerator.genSuccessResult(allRecords);
27.     }

复制代码

问题记录

• 前端发送的 JSON 中：
  

1.      "chatRecordsList": [248],          // 数字数组
2.      "interviewerList": ["680c96954b1d8a29c9e78e97"]  // 字符串数组

复制代码

• 后端 DTO 期望：
  

1.      private List<ChatRecordsDto> chatRecordsList;  // 需要对象而非数字
2.      private List<Interviewer> interviewerList;     // 需要对象而非字符串

复制代码

• FastJSON 无法直接将 248 或字符串 ID 转换为 ChatRecordsDto/Interviewer 对象。
  

办理方案

调整前端 JSON 布局

后端需要完整的对象而非 ID，前端发送嵌套对象：

1. {
2.   "chatRecordsList": [{"id": 248}],  // 匹配 ChatRecordsDto 结构
3.   "interviewerList": [{"id": "680c96954b1d8a29c9e78e97"}]  // 匹配 Interviewer 结构
4. }

复制代码

详细修改：

1.       let article = {
2.         idArticle: _ts.idArticle,
3.         articleTitle: _ts.articleTitle,
4.         articleContent: articleContent,
5.         articleContentHtml: articleContentHtml,
6.         articleTags: _ts.articleTags.join(","),
7.         articleStatus: 0,
8.         interviewerList: _ts.selectedInterviewers.map(id => ({
9.           interviewerId: id,
10.           name: null,
11.           userId: null,
12.           knowledgeBaseId: null,
13.           customPrompt: null,
14.           settingsList: null
15.         })),
16.         chatRecordsList: _ts.selectedInterviews.map(id => {
17.           const interview = _ts.interviewsList.find(item => item.chatId === id);
18.           return {
19.             interviewer: {
20.               interviewerId: interview ? interview.interviewerId : null,
21.               name: null,
22.               userId: null,
23.               knowledgeBaseId: null,
24.               customPrompt: null,
25.               settingsList: null
26.             },
27.             branch: null,
28.             chatId: id,
29.             userId: null,
30.             interviewerId: interview ? interview.interviewerId : null,
31.             createdAt: null,
32.             updatedAt: null,
33.             topic: null,
34.           };
35.         })
36.       };

复制代码