先引入axios用于与后端的通信
先设置显示对话框可见，使其一进入页面就可看见提示框
设置各问题选择的按钮不可见，这样就不有前后组件顺序的问题
设置responseMessage变量作为将前端输入传给后端进行数据处理
设置response变量用于将后端传入的信息传回前端
为了ui界面的美观，先设置回答界面不可见
return{
tipVisible: true, // 初始状态为显示对话框
inputText: '', // 输入框的内容
buttonVisible: false,
civilServiceVisible: false,
educationalVisible: false,
bankVisible: false,
enterpriseVisible: false,
showText: false,
displayMessage:'',
simulator:"模拟器给出修改意见以及标准答案：",
response: [], // 用于显示回复的消息
responseMessage: '', // 响应消息
responseAreaVisibility:false
};
先是显示问题的方法（以考公为例）
handleCivilQuestion(question) {
this.civilServiceVisible=false;
switch (question) {
case 'civilQuestion1': this.civilQuestion1();break;
case 'civilQuestion2':this.civilQuestion2();break;
case 'civilQuestion3':this.civilQuestion3();break;
case 'civilQuestion4':this.civilQuestion4();break;
case 'civilQuestion5':this.civilQuestion5();break;
default:break;
}
},
civilQuestion1() {
this.showText=true;this.displayMessage="问题一：你认为什么是成为一名优秀公务员的关键特质?";},
civilQuestion2() {
this.showText=true;this.displayMessage="问题二：举一个你在团队合作中发挥关键作用的例子。"; },
civilQuestion3() {
this.showText=true;this.displayMessage="问题三：你如何看待个人利益与公共利益之间的关系?"; },
civilQuestion4() {
this.showText=true;this.displayMessage="问题四：你为什么想要加入公务员队伍?";},
civilQuestion5() {
this.showText=true;this.displayMessage="问题五：你的长远职业规划是什么？";},
关闭对话框的方法
close() {
this.tipVisible = false; // 点击按钮时隐藏对话框
this.buttonVisible=true;
},
发送输入的文字以及后端通信的方法
利用axios进行前后端数据的传输
inputDialog(){
axios.post('http://localhost:8002/api/generate_response', { user_input: (this.displayMessage+this.inputText) })
.then(response => {
console.log('API响应数据:', response.data); // 输出API响应数据以进行调试
if (response.data && response.data.message) {
this.responseMessage = response.data.message;
// this.extendedResponse = response.data.extended;
console.log('设置的responseMessage:', this.responseMessage); // 输出设置的响应消息
//console.log('设置的extendedResponse:', this.extendedResponse); // 输出设置的扩展消息
} else {
console.error('响应数据格式不正确:', response.data);
}
})
.catch(error => {
console.error('生成回复时出错:', error);
});
//提交对话内容
if (this.inputText.trim() !== '') {
this.response.push(this.inputText.trim()); // 将输入框中的内容追加到消息数组中
this.inputText = ''; // 清空输入框
this.responseAreaVisibility=true;
}},
问题选择框逻辑（以考公为例）
civilService(){
this.responseAreaVisibility=false;
this.responseMessage='';
this.response=[];
this.showText=false;
this.civilServiceVisible=true;
this.educationalVisible=false;
this.bankVisible=false;
this.enterpriseVisible=false;
},
后续尽请期待~
