AddChatDetail.vue

<template>
  <div>
    <el-button @click="goBack()">后退</el-button>
    <h4 class="text-center">新增ChatGpt问答</h4>
    <el-container class="container">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="问题">
          <el-input v-model="form.question"></el-input>
        </el-form-item>

        <el-form-item label="答案">
          <el-input type="textarea" v-model="form.response"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="clearContent">取消</el-button>
        </el-form-item>
      </el-form>
    </el-container>
  </div>
</template>
<script>
// 导入 axios 请求库
import axios from "axios";
export default {
  name: "AddChatDetail",
  data() {
    return {
      form: {
        question: "",
        response: "",
      },
    };
  },
  methods: {
    clearContent() {
      this.form.question = "";
      this.form.response = "";
    },
    async onSubmit() {
      const data = {
        question: this.form.question,
        response: this.form.response,
      };
      axios
        .post("http://120.79.36.53:8888/chatbot", data)
        .then((response) => {
          // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
          if (response.data.code === 200) {
            this.$message.success({
              message: "问题和答案新增成功",
              duration: 1000,
            });
            this.goBack();
          }
        })
        .catch((error) => {
          // 处理错误
          this.$message.error("系统异常");
        });
    },
    goBack() {
      // 传递参数到前一个页面
      const params = {
        // 参数名: 参数值
        back: "back",
      };
      // 使用 $router.push() 导航到前一个页面
      this.$router.push({
        path: "/home/chat", // 前一个页面的路径
        query: params, // 参数对象
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh; /* 如果希望 `el-container` 在整个视口居中，可以使用 height: 100vh; 来设置容器的高度 */
}
</style>