update

src/App.vue

@@ -28,6 +28,10 @@
                 <span slot="title">教师信息</span>
               </el-menu-item>
             </router-link>
+            <el-menu-item index="4" @click="logout">
+              <i class="el-icon-s-management"></i>
+              <span slot="title">退出登录</span>
+            </el-menu-item>
           </el-menu>
         </el-aside>
         <el-container>
@@ -46,13 +50,39 @@
 </template>
 
 <script>
-
+import $ from 'jquery'
 export default {
   data() {
     return {
+      login: this.loginCheck()
     }
   },
   methods: {
+    loginCheck(){
+      const jwt = localStorage.getItem('user');
+      if (!jwt) {
+        return false;
+      }
+      const parts = jwt.split('.');
+      if (parts.length !== 3) {
+        return false;
+      }
+      const payload = JSON.parse(atob(parts[1]));
+      if (payload.exp) {
+        return (new Date(payload.exp) > new Date() / 1000);
+      } 
+    },
+    logout(){
+      localStorage.removeItem('user');
+      this.login=false;
+      if(this.$route.name!=="login"){
+        this.$router.push("login");
+      }
+      $.ajax({
+        url: this.$apiUrl + "/userAction/logout",
+        method: "GET",
+      });
+    }
   },
   mounted:()=>{
   }

src/router/index.js

@@ -25,6 +25,13 @@ const routes = [
     path: '/student',
     name: 'student',
     component: () => import('../views/student/studentList.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/teacher',
+    name: 'teacher',
+    component: () => import('../views/teacher/teacherList.vue'),
+    meta: { requiresAuth: true }
   }
 ]
 
@@ -46,10 +53,10 @@ function JwtExpireCheck(jwt) {
   } 
   throw new Error('No expiration time found in JWT payload');
 }
+
 import $ from 'jquery'
 router.beforeEach((to, _, next) => {
   const isLoggedIn = localStorage.getItem('user');
-  console.log(localStorage.getItem('user'));
   if (!to.meta.requiresAuth || JwtExpireCheck(isLoggedIn)) {
     $.ajaxSetup({
       headers: { 'token': isLoggedIn }
@@ -57,7 +64,7 @@ router.beforeEach((to, _, next) => {
     next();
   }
   else {
-    next({ path: '/login', query: { redirect: to.fullPath } });
+    next({ path: '/login', query: { redirect: to.name } });
   }
 });
 

src/views/course/CourseList.vue

@@ -17,7 +17,7 @@
                 <el-button type="success" @click="courseAdd">添加</el-button>
             </el-form-item>
         </el-form>
-        <br><br>
+        <br><br><hr>
 
         <!-- 课程表格 -->
         <el-table :data="courseList.data">

src/views/login/loginView.vue

@@ -39,7 +39,12 @@ export default {
             $.ajaxSetup({
               headers: { 'token': data.data }
             });
-            this.$router.push({ name: 'home' });
+            if (this.$route.query.redirect){
+              this.$router.push({ name: this.$route.query.redirect });
+            }else{
+              this.$route.push("student");
+            }
+            
           }else{
             this.$message({
               type: 'error',

src/views/student/studentList.vue

@@ -12,8 +12,8 @@
       </el-form-item>
       <el-form-item label="性别">
         <el-select v-model="studentSearchForm.sex" placeholder="性别">
-          <el-option label="男" value="0"></el-option>
-          <el-option label="女" value="1"></el-option>
+          <el-option label="男" value=0></el-option>
+          <el-option label="女" value=1></el-option>
         </el-select>
       </el-form-item>
       <br>
@@ -35,7 +35,7 @@
 
     <!-- 学生表格 -->
     <el-table :data="studentList.data">
-      <el-table-column prop="name" label="姓名" width="150px"></el-table-column>
+      <el-table-column prop="name" label="姓名"></el-table-column>
       <el-table-column prop="code" label="学号" width="150px"></el-table-column>
       <el-table-column prop="grade" label="年级" width="80px"></el-table-column>
       <el-table-column label="性别" width="50px">
@@ -49,12 +49,16 @@
           <div>{{ majors[scope.row.major - 1] }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="备注">
+      <el-table-column label="备注" width="50px">
         <template slot-scope="scope">
+          <el-popover trigger="click" placement="left">
             <div style="max-width: 320px;">
               <p v-if="scope.row.detail.length > 0">{{ scope.row.detail }}</p>
               <p v-else>没有备注信息</p>
             </div>
+            <i class="el-icon-info" slot="reference"></i>
+          </el-popover>
+
         </template>
       </el-table-column>
       <el-table-column label="操作" width="180px">
@@ -66,11 +70,17 @@
         </template>
       </el-table-column>
     </el-table>
+    <br>
+
+    <!-- 分页器 -->
+    <el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" :total="studentList.total">
+    </el-pagination>
   </div>
 </template>
 
 <script>
-
+import $ from 'jquery'
 export default {
   data() {
     return {
@@ -92,17 +102,72 @@ export default {
           detail: '测试数据'
         },
         ],
-        page: 0,
+        page: 1,
         pageSize: 10,
         total: 0
       },
     }
   },
   methods: {
-    studentListGet(){console.log('查询学生列表:', this.studentSearchForm)},
-    studentSearchClear(){console.log('清除学生查询表单')},
+    studentListGet() {
+      $.ajax({
+        url: this.$apiUrl + "/studentAction/get",
+        metthod: "POST",
+        data: {
+          name: this.studentSearchForm.name,
+          code: this.studentSearchForm.code,
+          sex: (this.studentSearchForm.sex === '' ? -1 : this.studentSearchForm.sex),
+          grade: (this.studentSearchForm.grade % 1 !== 0 || this.studentSearchForm.grade === '' ? -1 : parseInt(this.studentSearchForm.grade)),
+          page: this.studentList.page,
+          pageSize: this.studentList.pageSize
+        },
+        success: (data) => {
+          console.log(data);
+          if (data.success) {
+            this.studentList.data = data.data;
+            this.studentList.total = data.count;
+          } else if (data.msg === 'not login') {
+            localStorage.removeItem('user');
+            this.$router.push("/login")
+          } else {
+            this.$message({
+              type: 'error',
+              message: '请求数据失败，' + data.msg,
+              showClose: true
+            });
+          }
+        },
+        error: (xhr) => {
+          this.$message({
+            type: 'error',
+            message: '请求数据失败，code=' + xhr.status,
+            showClose: true
+          });
+        }
+      });
+    },
+    studentSearchClear() {
+      this.studentSearchForm = {
+        name: '',
+        code: '',
+        sex: '',
+        grade: '',
+      };
+      this.studentListGet();
+    },
     studentEdit(student) { console.log('编辑学生：', student) },
     studentDelete(student) { console.log('删除学生：', student) },
+    handleSizeChange(val) {
+      this.studentList.pageSize = val;
+      this.studentListGet();
+    },
+    handleCurrentChange(val) {
+      this.studentList.page = val;
+      this.studentListGet();
+    },
+  },
+  mounted(){
+    this.studentListGet();
   }
 }
 </script>

src/views/teacher/teacherList.vue

@@ -0,0 +1,13 @@
+<template>
+  <div><h1>尚未完成</h1></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>