[新增]老师、学生课程页交互

src/views/login/Login.vue

@@ -33,7 +33,7 @@
     <div style="padding-top: 40px;">
       <button
         :class="{ 'is-loading': submitting }"
-        class="login"
+        class="button login"
         @click="loginAction"
       >
         登 陆
@@ -43,7 +43,7 @@
       <router-link
         :to="{ name: 'REGISTER' }"
         :class="{ 'is-text': true }"
-        class="register"
+        class="button register"
         type="submit"
         >没有账户，注册
       </router-link>
@@ -122,16 +122,17 @@ export default {
 .register {
   color: #7396fd;
   margin-top: 20px;
-  padding: 10px 0px 10px 0px;
+  /*padding: 10px 0px 10px 0px;*/
   font-size: 1rem;
   width: 100%;
   display: flex;
   justify-content: center;
   border: 1px solid #82b1ed;
+  text-decoration: none;
 }
 .login {
   color: #ffffff;
-  padding: 10px 0px 10px 0px;
+  /*padding: 10px 0px 10px 0px;*/
   display: flex;
   justify-content: center;
   font-size: 1rem;

src/views/login/Register.vue

@@ -70,7 +70,7 @@
     <div style="padding-top: 20px;">
       <button
         :class="{ 'is-loading': submitting }"
-        class="register"
+        class="button register"
         @click="registerAction"
       >
         注 册
@@ -80,7 +80,7 @@
     <router-link
       :to="{ name: 'LOGIN' }"
       :class="{ 'is-text': true }"
-      class="login"
+      class="button login"
       type="submit"
       >已有账户，登陆
     </router-link>
@@ -172,7 +172,7 @@ export default {
 }
 .register {
   color: #ffffff;
-  padding: 10px 0 10px 0;
+  /*padding: 10px 0 10px 0;*/
   display: flex;
   justify-content: center;
   font-size: 1rem;
@@ -184,11 +184,12 @@ export default {
 .login {
   color: #7396fd;
   margin-top: 20px;
-  padding: 10px 0 10px 0;
+  /*padding: 10px 0 10px 0;*/
   font-size: 1rem;
   width: 100%;
   display: flex;
   justify-content: center;
   border: 1px solid #82b1ed;
+  text-decoration: none;
 }
 </style>

src/views/student/Home/index.vue

@@ -8,7 +8,7 @@
           <img
             class="newSubject"
             src="../../../assets/white.png"
-            @click="isCardModalActive = true"
+            @click="joinCouseActive = true"
           />
         </div>
       </div>
@@ -22,23 +22,101 @@
         </div>
       </div>
     </div>
+    <!-- 新建课程模态框 -->
+    <b-modal :active.sync="joinCouseActive" :width="320" scroll="keep">
+      <div class="card">
+        <div class="title">加入课程</div>
+        <div class="content">
+          <b-field
+            label="选课码"
+            :type="$v.coursenum.$error ? 'is-danger' : ''"
+            :message="
+              $v.coursenum.$error
+                ? [
+                    !$v.coursenum.minLength ? '选课码不少于4个字符' : undefined,
+                    !$v.coursenum.maxLength
+                      ? '选课码不多于10个字符'
+                      : undefined,
+                    !$v.coursenum.required ? '请填写选课码' : undefined,
+                    !$v.coursenum.alphaNum ? '选课码应为字母或数字' : undefined
+                  ]
+                : ''
+            "
+          >
+            <b-input
+              v-model="$v.coursenum.$model"
+              placeholder="请输入选课码"
+            ></b-input>
+          </b-field>
+          <a
+            :class="['button', 'is-link', { 'is-loading': submitting }]"
+            @click="joinSubject"
+            >加入课程</a
+          >
+        </div>
+      </div>
+    </b-modal>
   </div>
 </template>
 
 <script>
 import Card from "@/components/Card";
-import { getStudentCourses } from "@/api/course";
+import { getStudentCourses, postStudentCourse } from "@/api/course";
+import {
+  required,
+  minLength,
+  maxLength,
+  alphaNum
+} from "vuelidate/lib/validators";
+
 export default {
   components: {
     Card
   },
+  validations: {
+    coursenum: {
+      required,
+      minLength: minLength(4),
+      maxLength: maxLength(10),
+      alphaNum
+    }
+  },
   data() {
     return {
-      courses: []
+      courses: [],
+      joinCouseActive: false,
+      coursenum: "",
+      submitting: false
     };
   },
   mounted() {
     getStudentCourses().then(value => (this.courses = value.data));
+  },
+  methods: {
+    //加入课程
+    joinSubject() {
+      this.$v.$touch();
+      this.submitting = true;
+      if (!this.$v.$invalid) {
+        postStudentCourse(this.coursenum)
+          .then(res => {
+            this.submitting = false;
+            this.joinCouseActive = false;
+            console.log(res);
+            this.$toast.open({
+              message: `${res.data.name} 选课成功`,
+              type: "is-success"
+            });
+          })
+          .catch(e => {
+            this.submitting = false;
+            this.$toast.open({
+              message: e.message,
+              type: "is-danger"
+            });
+          });
+      }
+    }
   }
 };
 </script>
@@ -62,6 +140,22 @@ export default {
     color: #ffffff;
   }
 }
+.card {
+  padding: 30px;
+  .title {
+    font-size: 1.25rem;
+    small {
+      color: gray;
+      font-size: 1rem;
+    }
+  }
+  .content {
+    a {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
+}
 .newSubject {
   height: 80px;
   width: 80px;

src/views/teacher/Home/index.vue

@@ -22,7 +22,7 @@
         </div>
       </div>
     </div>
-    <!-- 成绩比例调控模态框 -->
+    <!-- 新建课程模态框 -->
     <b-modal :active.sync="newSubjectActive" :width="320" scroll="keep">
       <div class="card">
         <div class="title">新建课程</div>
@@ -70,7 +70,11 @@
               placeholder="请输入选课码"
             ></b-input>
           </b-field>
-          <a class="button is-link" @click="newSubject">新建</a>
+          <a
+            :class="['button', 'is-link', { 'is-loading': submitting }]"
+            @click="newSubject"
+            >新建</a
+          >
         </div>
       </div>
     </b-modal>
@@ -110,7 +114,8 @@ export default {
       newSubjectActive: false,
       username: "",
       coursename: "",
-      coursenum: ""
+      coursenum: "",
+      submitting: false
     };
   },
   mounted() {
@@ -119,13 +124,30 @@ export default {
   methods: {
     //新建课程
     newSubject() {
-      let subjectInfo = {
-        name: this.coursename,
-        code: this.coursenum
-      };
-      postTeacherCourse(subjectInfo).then(res => {
-        console.log(res);
-      });
+      this.$v.$touch();
+      if (!this.$v.$invalid) {
+        let subjectInfo = {
+          name: this.coursename,
+          code: this.coursenum
+        };
+        this.submitting = true;
+        postTeacherCourse(subjectInfo)
+          .then(res => {
+            this.submitting = false;
+            console.log(res);
+            this.$toast.open({
+              message: `${res.res.name}创建成功`,
+              type: "is-success"
+            });
+            this.newSubjectActive = false;
+          })
+          .catch(e => {
+            this.$toast.open({
+              message: e.message,
+              type: "is-danger"
+            });
+          });
+      }
     }
   }
 };

vue.config.js

@@ -2,8 +2,8 @@ module.exports = {
   devServer: {
     proxy: {
       "^/api": {
-        // target: "http://localhost:4000/",
-        target: "http://172.19.131.216:8080/",
+        target: "http://localhost:4000/",
+        // target: "http://172.19.131.216:8080/",
         ws: true,
         changeOrigin: true
       }