From 936a1459631c6d4a02a6b81be4ef90f71617f889 Mon Sep 17 00:00:00 2001
From: lenghui <h280650@163.com>
Date: Mon, 16 Dec 2024 10:13:03 +0800
Subject: [PATCH] =?UTF-8?q?Api=E7=BC=96=E5=86=99=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A31=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 work/src/api/HomeworkApi.js       |   8 ++
 work/src/api/index.js             |  16 ++++
 work/src/views/DoHomeworkView.vue | 176 +++++++++++++++++++++-----------------
 work/vite.config.js               |  10 +++
 4 files changed, 132 insertions(+), 78 deletions(-)
 create mode 100644 work/src/api/HomeworkApi.js
 create mode 100644 work/src/api/index.js

diff --git a/work/src/api/HomeworkApi.js b/work/src/api/HomeworkApi.js
new file mode 100644
index 0000000..9d55035
--- /dev/null
+++ b/work/src/api/HomeworkApi.js
@@ -0,0 +1,8 @@
+import service from ".";
+const homeworkApi = {
+    //获取作业
+    getHomeworkQuestion(id) {
+        return service.post('api/homework_client/gethomeworkquestion', {id: id});
+    }
+}
+export default homeworkApi;
\ No newline at end of file
diff --git a/work/src/api/index.js b/work/src/api/index.js
new file mode 100644
index 0000000..a6ba51f
--- /dev/null
+++ b/work/src/api/index.js
@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const service = axios.create({
+    // baseURL: 'http://192.168.8.191:8080',
+    // baseURL: 'http://localhost:8080',
+    baseURL: '/api',
+});
+// http://192.168.8.191:8080
+
+//Axios的响应拦截器..
+service.interceptors.response.use(resp => {
+    return resp.data;
+}, error => {
+    return Promise.reject(error);
+});
+export default service;
\ No newline at end of file
diff --git a/work/src/views/DoHomeworkView.vue b/work/src/views/DoHomeworkView.vue
index 1e62866..ec273c0 100644
--- a/work/src/views/DoHomeworkView.vue
+++ b/work/src/views/DoHomeworkView.vue
@@ -3,108 +3,109 @@
     <div class="main">
       <div class="content">
         <div class="title">
-          {{questionList[0].name}}
+          {{ questionList[0].name }}
         </div>
-        <template v-for="(question,index) in questionList" :key="index">
-          <!--单选-->
+        <template v-for="(question, questionIndex) in questionList" :key="questionIndex">
+          <!-- 单选 -->
           <template v-if="question.type == 1">
             <div class="question">
-              {{index+1}}. {{question.description}}（单选）
+              {{ questionIndex + 1 }}. {{ question.description }}（单选）
             </div>
-            <div v-for="(answer,index) in question.content" :key="index" class="answer">
-              <div class="selected"><input id="select1" name="radio" type="radio"><label for="select1">{{answer.text}}</label></div>
+            <div v-for="(answer, index) in question.content" :key="index" class="answer">
+              <div class="selected">
+                <input :id="`select-${questionIndex}-${index}`" name="radio" type="radio"
+                       v-model="selectedAnswers[questionIndex]"
+                       :value="answer.text"
+                >
+                <label :for="`select-${questionIndex}-${index}`">{{ answer.text }}</label>
+              </div>
             </div>
           </template>
 
-          <!--多选-->
+          <!-- 多选 -->
           <template v-if="question.type == 2">
             <div class="question">
-              {{index+1}}. {{question.description}}（多选）
+              {{ questionIndex + 1 }}. {{ question.description }}（多选）
             </div>
-            <div v-for="(answer,index) in question.content" :key="index" class="answer">
-              <div class="selected"><input id="checkbox1" name="checkbox" type="checkbox"><label
-                  for="checkbox1">{{answer.text}}</label>
+            <div v-for="(answer, index) in question.content" :key="index" class="answer">
+              <div class="selected">
+                <input :id="`checkbox-${questionIndex}-${index}`" name="checkbox" type="checkbox"
+                       v-model="selectedAnswers[questionIndex]"
+                       :value="answer.text"
+                >
+                <label :for="`checkbox-${questionIndex}-${index}`">{{ answer.text }}</label>
               </div>
             </div>
           </template>
 
-          <!--简答题-->
+          <!-- 简答题 -->
           <template v-if="question.type == 3">
             <div class="Short-answers">
               <div class="question">
-                {{index+1}}. {{question.description}}
+                {{ questionIndex + 1 }}. {{ question.description }}
               </div>
               <el-input
-                  v-model="title"
-                  style="width: 100%;padding: 3.5%"
+                  v-model="editorTitles[questionIndex]"
+                  style="width: 100%; padding: 3.5%"
                   size="large"
                   placeholder="请输入标题(5-100字符)"
                   maxlength="100"
+                  minlength="5"
                   show-word-limit
               />
               <div class="editor">
                 <!-- 引入 VueQuill 编辑器 -->
-                <quill-editor v-model="content" :options="editorOptions"></quill-editor>
+                <quill-editor v-model:content="editorContents[questionIndex]" :options="editorOptions"></quill-editor>
               </div>
             </div>
           </template>
         </template>
 
-          <!--提交按钮-->
-          <div class="submit">
-            <img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png">
-          </div>
-          <!-- 提交次数 -->
-          <div class="submit-times">
-            <span>您已提交0次，每个作业可以提交3次</span>
-          </div>
+        <!-- 提交按钮 -->
+        <div class="submit">
+          <img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png" @click="submit">
+        </div>
+        <!-- 提交次数 -->
+        <div class="submit-times">
+          <span>您已提交0次，每个作业可以提交3次</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {onMounted, ref} from 'vue';
+import homeworkApi from "@/api/HomeworkApi.js";
+import {ElMessage} from "element-plus";
 
 const questionList = ref([]);
 
-function getQuestionList(Id) {
-  questionList.value = [
-    {
-      "id": 1377,
-      "name": "12-9课后作业",
-      "description": "是否抄底",
-      "content": "[{\"id\":\"\",\"text\":\"是\"},{\"id\":\"\",\"text\":\"否\"}]",
-      "status": 1,
-      "type": 1
-    },
-    {
-      "id": 1378,
-      "name": "12-9课后作业",
-      "description": "抄底股票",
-      "content": "[{\"id\":\"\",\"text\":\"恒邦股份\"},{\"id\":\"\",\"text\":\"上海电气\"},{\"text\":\"葫芦娃\",\"id\":\"\"}]",
-      "status": 1,
-      "type": 2
-    },
-    {
-      "id": 1379,
-      "name": "12-9课后作业",
-      "description": "如何看待抄底",
-      "content": "[{\"id\":\"\",\"text\":\"\"}]",
-      "status": 1,
-      "type": 3
+function getQuestionList(id) {
+  homeworkApi.getHomeworkQuestion(id).then(resp => {
+    if (resp.code == 200){
+      questionList.value = resp.data;
+      for (let i = 0; i < questionList.value.length; i++) {
+        questionList.value[i].content = JSON.parse(questionList.value[i].content);
+      }
+    }else {
+      ElMessage.error("未知错误，请联系管理员");
     }
-  ]
-  for (let i = 0; i < questionList.value.length; i++) {
-    questionList.value[i].content = JSON.parse(questionList.value[i].content);
-  }
+  });
 }
-getQuestionList(1);
-
+getQuestionList(1377);
 
 // 绑定到编辑器的内容
-const content = ref('请输入内容');
-const title = ref('');
+const editorContents = ref([]);
+const editorTitles = ref([]);
+// 初始化数组
+onMounted(() => {
+  questionList.value.forEach(() => {
+    editorContents.value.push('');
+    editorTitles.value.push('');
+  });
+});
+
 // 编辑器配置选项
 const editorOptions = {
   // 配置项
@@ -112,35 +113,49 @@ const editorOptions = {
   placeholder: '请输入内容',
   modules: {
     toolbar: [
-      ['bold', 'italic', 'underline',
-        'strike', 'blockquote', 'code-block', {'header': 1},
-        {'header': 2},
+      [
+        'bold', 'italic', 'underline',
+        'strike', 'blockquote', {'header': 1},{'header': 2},
+        {'size': ['small', false, 'large', 'huge']},
+        {'header': [1, 2, 3, 4, 5, 6, false]},
+        'code-block',
         {'list': 'ordered'},
         {'list': 'bullet'},
         {'script': 'sub'},
         {'script': 'super'},
         {'indent': '-1'},
         {'indent': '+1'},
-        {'direction': 'rtl'},
-        {'size': ['small', false, 'large', 'huge']},
-        {'header': [1, 2, 3, 4, 5, 6, false]},
         {'color': []}, {'background': []},
-        {'font': []},
         {'align': []},
-        'clean'
+        'clean',
       ]
     ]
   }
 };
 
-//提交作业
-const homework = ref({
-  id: 1,
-  jwCode: 1,
-  formId: 1,
-  content: content.value,
+// 提交作业
+const homework = ref([]);
+
+const selectedAnswers = ref([]);
+questionList.value.forEach(() => {
+  selectedAnswers.value.push([]);
 });
+
 function submit() {
+  homework.value = [];
+  for (let i = 0; i < questionList.value.length; i++) {
+    if (questionList.value[i].type == 1 || questionList.value[i].type == 2) {
+      homework.value.push({
+        "id": questionList.value[i].id,
+        "answer": selectedAnswers.value[i]
+      });
+    } else if (questionList.value[i].type == 3) {
+      homework.value.push({
+        "id": questionList.value[i].id,
+        "answer": [editorTitles.value[i], editorContents.value[i]]
+      });
+    }
+  }
   console.log(homework.value);
 }
 </script>
@@ -171,14 +186,14 @@ function submit() {
   width: 93%;
   height: 80%;
   overflow-y: scroll;
-  /*居中显示*/
+  /* 居中显示 */
   left: 50%;
   transform: translate(-50%, 0);
   top: 12.5%;
   text-align: left;
 }
 
-/*滚动条样式*/
+/* 滚动条样式 */
 .content::-webkit-scrollbar {
   width: 3px;
 }
@@ -194,9 +209,11 @@ function submit() {
 
 .title {
   font-size: 1.65rem;
-  font-weight: 500;
-  /*居中显示*/
+  font-weight: 600;
+  /* 居中显示 */
   text-align: center;
+  /*字体颜色*/
+  color: #3f27b1;
 }
 
 .question {
@@ -222,7 +239,7 @@ function submit() {
   margin-right: 1%;
   width: 1.2rem;
   height: 1rem;
-  /*透明度*/
+  /* 透明度 */
   opacity: 0.8;
   cursor: pointer; /* 鼠标悬停时变成手的形状 */
 }
@@ -238,6 +255,9 @@ function submit() {
   height: 30rem;
 }
 
+.ql-toolbar.ql-snow .ql-formats {
+  margin: 0;
+}
 .Short-answers {
   height: 48rem;
 }
@@ -260,4 +280,4 @@ function submit() {
   color: #858585;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/work/vite.config.js b/work/vite.config.js
index 63d1997..bc08d23 100644
--- a/work/vite.config.js
+++ b/work/vite.config.js
@@ -13,4 +13,14 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://192.168.8.191:8080',
+        changeOrigin: true,
+
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
 })