Api编写

完成接口1对接

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;

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;

work/src/views/DoHomeworkView.vue

@@ -5,25 +5,35 @@
         <div class="title">
           {{ 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 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 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>
@@ -32,19 +42,20 @@
           <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"
+                  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>
@@ -52,7 +63,7 @@
 
         <!-- 提交按钮 -->
         <div class="submit">
-            <img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png">
+          <img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png" @click="submit">
         </div>
         <!-- 提交次数 -->
         <div class="submit-times">
@@ -64,47 +75,37 @@
 </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("未知错误，请联系管理员");
     }
-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>
@@ -194,9 +209,11 @@ function submit() {
 
 .title {
   font-size: 1.65rem;
-  font-weight: 500;
+  font-weight: 600;
   /* 居中显示 */
   text-align: center;
+  /*字体颜色*/
+  color: #3f27b1;
 }
 
 .question {
@@ -238,6 +255,9 @@ function submit() {
   height: 30rem;
 }
 
+.ql-toolbar.ql-snow .ql-formats {
+  margin: 0;
+}
 .Short-answers {
   height: 48rem;
 }

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/, '')
+      }
+    }
+  }
 })