update

package.json

@@ -12,7 +12,8 @@
     "element-ui": "^2.15.14",
     "jquery": "^3.7.1",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -20,6 +21,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       vue-router:
         specifier: ^3.5.1
         version: 3.6.5(vue@2.7.16)
+      vuex:
+        specifier: ^3.6.2
+        version: 3.6.2(vue@2.7.16)
     devDependencies:
       '@babel/core':
         specifier: ^7.12.16
@@ -39,6 +42,9 @@ importers:
       '@vue/cli-plugin-router':
         specifier: ~5.0.0
         version: 5.0.8(@vue/cli-service@5.0.8(@vue/compiler-sfc@3.5.13)(lodash@4.17.21)(vue-template-compiler@2.7.16)(vue@2.7.16)(webpack-sources@3.2.3))
+      '@vue/cli-plugin-vuex':
+        specifier: ~5.0.0
+        version: 5.0.8(@vue/cli-service@5.0.8(@vue/compiler-sfc@3.5.13)(lodash@4.17.21)(vue-template-compiler@2.7.16)(vue@2.7.16)(webpack-sources@3.2.3))
       '@vue/cli-service':
         specifier: ~5.0.0
         version: 5.0.8(@vue/compiler-sfc@3.5.13)(lodash@4.17.21)(vue-template-compiler@2.7.16)(vue@2.7.16)(webpack-sources@3.2.3)
@@ -3617,6 +3623,11 @@ packages:
     resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
     deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
 
+  vuex@3.6.2:
+    resolution: {integrity: sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==}
+    peerDependencies:
+      vue: ^2.0.0
+
   watchpack@2.4.2:
     resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
     engines: {node: '>=10.13.0'}
@@ -7750,6 +7761,10 @@ snapshots:
       '@vue/compiler-sfc': 2.7.16
       csstype: 3.1.3
 
+  vuex@3.6.2(vue@2.7.16):
+    dependencies:
+      vue: 2.7.16
+
   watchpack@2.4.2:
     dependencies:
       glob-to-regexp: 0.4.1

src/App.vue

@@ -53,6 +53,8 @@ export default {
     }
   },
   methods: {
+  },
+  mounted:()=>{
   }
 }
 </script>

src/apiConfig.js

@@ -1,5 +1,5 @@
 export default {
     install(Vue) {
-        Vue.prototype.$apiUrl = 'http://localhost:8080/learn02_war_exploded';
+        Vue.prototype.$apiUrl = 'http://localhost:8080';
     }
 };

src/main.js

@@ -9,11 +9,14 @@ Vue.use(ElementUI);
 
 //引入配置作为插件
 import apiConfig from './apiConfig';
+
+import store from './store'
 Vue.use(apiConfig);
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -5,15 +5,21 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-  // {
+  {
-  //   path: '/',
+    path: '/',
-  //   name: 'root',
+    name: 'home',
-  //   component: () => import('../App.vue')
+    component: () => import('../App.vue')
-  // },
+  },
   {
     path: '/course',
     name: 'course',
-    component: () => import('../views/course/CourseList.vue')
+    component: () => import('../views/course/CourseList.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('../views/login/loginView.vue'),
   }
 ]
 
@@ -21,4 +27,14 @@ const router = new VueRouter({
   routes
 })
 
+router.beforeEach((to, _, next) => {
+  const isLoggedIn = localStorage.getItem('user');
+  if (!to.meta.requiresAuth || isLoggedIn) {
+    next();
+  }
+  else {
+    next({ path: '/login', query: { redirect: to.fullPath } });
+  }
+});
+
 export default router

src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/course/CourseList.vue

@@ -111,13 +111,13 @@
 
         <!-- 添加弹出框 -->
         <el-dialog title="添加课程" :visible.sync="courseAddDialogVisible">
-            <el-form :model="courseEditForm">
+            <el-form :model="courseEditForm" :rules="courseRules">
-                <el-form-item label="课程名称">
+                <el-form-item label="课程名称" prop="name">
                     <el-col :span="16">
                         <el-input v-model="courseEditForm.name" placeholder="课程名称" width="200px"></el-input>
                     </el-col>
                 </el-form-item>
-                <el-form-item label="课程性质">
+                <el-form-item label="课程性质" prop="type">
                     <el-col :span="16">
                         <el-select v-model="courseEditForm.type" placeholder="课程性质">
                             <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
@@ -125,17 +125,17 @@
                         </el-select>
                     </el-col>
                 </el-form-item>
-                <el-form-item label="课程学分">
+                <el-form-item label="课程学分" prop="credit">
                     <el-col :span="16">
-                        <el-input-number v-model="courseEditForm.credit"></el-input-number>
+                        <el-input-number v-model.number="courseEditForm.credit" step="0.5"></el-input-number>
                     </el-col>
                 </el-form-item>
-                <el-form-item label="课程年级">
+                <el-form-item label="课程年级" prop="grade">
                     <el-col :span="16">
-                        <el-input v-model="courseEditForm.grade" placeholder="课程年级"></el-input>
+                        <el-input v-model.number="courseEditForm.grade" placeholder="课程年级"></el-input>
                     </el-col>
                 </el-form-item>
-                <el-form-item label="课程专业">
+                <el-form-item label="课程专业" prop="major">
                     <el-col :span="16">
                         <el-select v-model="courseEditForm.major" placeholder="课程专业">
                             <el-option v-for="(courseMajor, index) in courseMajors" :key="courseMajor"
@@ -143,7 +143,7 @@
                         </el-select>
                     </el-col>
                 </el-form-item>
-                <el-form-item label="课程备注">
+                <el-form-item label="课程备注" prop="detail">
                     <el-col :span="16">
                         <el-input type="textarea" autosize placeholder="备注内容" v-model="courseEditForm.detail">
                         </el-input>
@@ -151,7 +151,7 @@
                 </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
-                <el-button @click="courseEditDialogVisible = false">取 消</el-button>
+                <el-button @click="courseAddDialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="courseAddSubmit()">确 定</el-button>
             </div>
         </el-dialog>
@@ -184,6 +184,29 @@ export default {
             courseEditDialogVisible: false,
             courseEditForm: { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" },
             courseAddDialogVisible: false,
+            courseRules:{
+                name:[
+                    { required: true, message: '请输入课程名称', trigger: 'blur' },
+                    { min: 4, max: 25, message: '长度在 4 到 25 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '课程性质不能为空' },
+                ],
+                credit:[
+                    { required: true, message: '课程学分不能为空' },
+                    { type: 'number', message: 'invalid' }
+                ],
+                grade:[
+                    { required: true, message: '课程年级不能为空' },
+                    { type: 'number', message: 'invalid' }
+                ],
+                major:[
+                    { required: true, message: '课程专业不能为空' },
+                ],
+                detail:[
+                    { max: 200, message: '长度应小于 200 个字符', trigger: 'blur' }
+                ]
+            },
         };
     },
     methods: {
@@ -215,7 +238,7 @@ export default {
                 type: 'warning'
             }).then(() => {
                 $.ajax({
-                    url: this.$apiUrl + "/courseAction/update",
+                    url: this.$apiUrl + "/courseAction/edit",
                     method: "POST",
                     data: this.courseEditForm,
                     success: (data) => {
@@ -274,7 +297,7 @@ export default {
                                 message: '添加成功',
                                 showClose: true
                             });
-                            this.courseEditDialogVisible = false;
+                            this.courseAddDialogVisible = false;
                         }
                         this.courseListGet();
                     },
@@ -338,7 +361,7 @@ export default {
         },
         courseListGet() {
             $.ajax({
-                url: this.$apiUrl + "/courseAction/list",
+                url: this.$apiUrl + "/courseAction/get",
                 method: "GET",
                 data: {
                     page: this.courseList.page,
@@ -348,7 +371,8 @@ export default {
                 },
                 success: (data) => {
                     console.log(data);
-                    this.courseList = data;
+                    this.courseList.data = data.data;
+                    this.courseList.total = data.count;
                 },
                 error: (xhr) => {
                     this.$message({

src/views/login/loginView.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div class="login-card">
+      <el-form ref="form" :model="loginform" label-width="80px">
+        <el-form-item label="用户名">
+          <el-input v-model="loginform.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input type="password" v-model="loginform.password"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="login">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery'
+export default {
+  data(){
+    return {
+      loginform: {
+        username: '',
+        password: ''
+      },
+    }
+  },
+  methods:{
+    login(){
+      $.ajax({
+        url: this.$apiUrl + "/userAction/login",
+        method: 'POST',
+        data: this.loginform,
+        success: (data) => {
+          if(data.success){
+            localStorage.setItem('user', data.data);
+            $.ajaxSetup({
+              headers: { 'token': data.data }
+            });
+            this.$router.push({ name: 'home' });
+          }else{
+            this.$message({
+              type: 'error',
+              message: '登录失败，' + data.msg,
+              showClose: true
+            });
+          }
+        },
+        error(xhr){
+          this.$message({
+            type: 'error',
+            message: '登录失败，code=' + xhr.status,
+            showClose: true
+          });
+        },
+      });
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/student/studentList.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+
+}
+</script>