update

src/router/index.js

@@ -5,11 +5,11 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-  {
+  // {
-    path: '/',
+  //   path: '/',
-    name: 'home',
+  //   name: 'home',
-    component: () => import('../App.vue')
+  //   component: () => import('../App.vue')
-  },
+  // },
   {
     path: '/course',
     name: 'course',
@@ -20,6 +20,11 @@ const routes = [
     path: '/login',
     name: 'login',
     component: () => import('../views/login/loginView.vue'),
+  },
+  {
+    path: '/student',
+    name: 'student',
+    component: () => import('../views/student/studentList.vue'),
   }
 ]
 
@@ -27,9 +32,28 @@ const router = new VueRouter({
   routes
 })
 
+function JwtExpireCheck(jwt) { 
+  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) ;
+  } 
+  throw new Error('No expiration time found in JWT payload');
+}
+import $ from 'jquery'
 router.beforeEach((to, _, next) => {
   const isLoggedIn = localStorage.getItem('user');
-  if (!to.meta.requiresAuth || isLoggedIn) {
+  console.log(localStorage.getItem('user'));
+  if (!to.meta.requiresAuth || JwtExpireCheck(isLoggedIn)) {
+    $.ajaxSetup({
+      headers: { 'token': isLoggedIn }
+    });
     next();
   }
   else {

src/views/course/CourseList.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="">
+    <div>
         <!-- 查询表单 -->
-        <el-form :inline="true" :model="courseSearchForm" class="demo-form-inline">
+        <el-form :inline="true" :model="courseSearchForm">
             <el-form-item label="课程名称">
                 <el-input v-model="courseSearchForm.courseName" placeholder="课程名称"></el-input>
             </el-form-item>

src/views/login/loginView.vue

@@ -33,7 +33,7 @@ export default {
         url: this.$apiUrl + "/userAction/login",
         method: 'POST',
         data: this.loginform,
-        success: (data) => {
+        success:(data)=> {
           if(data.success){
             localStorage.setItem('user', data.data);
             $.ajaxSetup({
@@ -48,7 +48,7 @@ export default {
             });
           }
         },
-        error(xhr){
+        error:(xhr)=>{
           this.$message({
             type: 'error',
             message: '登录失败，code=' + xhr.status,
@@ -57,6 +57,8 @@ export default {
         },
       });
     },
+  },
+  mounted(){
   }
 }
 </script>

src/views/student/studentList.vue

@@ -1,12 +1,108 @@
+<!-- studentList.vue -->
 <template>
   <div>
+    <br><br>
+    <!-- 查询表单 -->
+    <el-form :inline="true" :model="studentSearchForm">
+      <el-form-item label="姓名">
+        <el-input v-model="studentSearchForm.name" placeholder="姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="学号">
+        <el-input v-model="studentSearchForm.code" placeholder="学号"></el-input>
+      </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-select>
+      </el-form-item>
+      <br>
+      <el-form-item label="年级">
+        <el-input v-model="studentSearchForm.grade" placeholder="年级"></el-input>
+      </el-form-item>
+      <el-form-item label="专业">
+        <el-select v-model="studentSearchForm.major">
+          <el-option v-for="(major, index) in majors" :key="major" :label="major" :value="index + 1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="筛选操作">
+        <el-button type="primary" @click="studentListGet">查询</el-button>
+        <el-button plain @click="studentSearchClear">清除</el-button>
+      </el-form-item>
+    </el-form>
+    <br>
+    <hr>
 
+    <!-- 学生表格 -->
+    <el-table :data="studentList.data">
+      <el-table-column prop="name" label="姓名" width="150px"></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">
+        <template slot-scope="scope">
+          <div v-if="scope.row.sex==0">男</div>
+          <div v-else>女</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="专业" width="120px">
+        <template slot-scope="scope">
+          <div>{{ majors[scope.row.major -1] }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注">
+        <template slot-scope="scope">
+            <div style="max-width: 320px;">
+              <p v-if="scope.row.detail.length > 0">{{ scope.row.detail }}</p>
+              <p v-else>没有备注信息</p>
+            </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="180px">
+        <template slot-scope="scope">
+          <div>
+            <el-button size="mini" type="primary" @click="studentEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" @click="studentDelete(scope.row)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
 
 export default {
-
+  data() {
+    return {
+      studentSearchForm: {
+        name: '',
+        code: '',
+        sex: '',
+        grade: '',
+      },
+      majors: ['软件工程', '空间信息', '大数据'],
+      studentList: {
+        data: [{
+            id: 1,
+            name:'测试数据',
+            code:'1111111111',
+            sex: 1,
+            grade: 2023,
+            major: 1,
+            detail: '测试数据'
+          },
+        ],
+        page: 0,
+        pageSize: 10,
+        total: 0
+      },
+    }
+  },
+  methods:{
+    studentListGet(){console.log('查询学生列表:', this.studentSearchForm)},
+    studentSearchClear(){console.log('清除学生查询表单')},
+    studentEdit(student){console.log('编辑学生：',student)},
+    studentDelete(student){console.log('删除学生：',student)},
+  }
 }
 </script>