final

README.md

@@ -1,30 +1,35 @@
-<<<<<<< HEAD
+
 # student-information-sys-front
 
 学生信息管理系统的前端工程。
-=======
+============================
+
 # student-information-sys
 
 ## Project setup
+
 ```
 pnpm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 pnpm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 pnpm run build
 ```
 
 ### Lints and fixes files
+
 ```
 pnpm run lint
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
->>>>>>> 5ea95bc (init)
+### 后端接口配置
+
+修改文件src/apiConfig.js中的apiUrl，空字符串表示前后端位于同一台服务器。

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

@@ -22,12 +22,22 @@
                 <span slot="title">课程信息</span>
               </el-menu-item>
             </router-link>
-            <router-link to="teacher">
+            <router-link to="course">
               <el-menu-item index="3">
-                <i class="el-icon-s-management"></i>
-                <span slot="title">教师信息</span>
+                <i class="el-icon-menu"></i>
+                <span slot="title">课程信息</span>
               </el-menu-item>
             </router-link>
+            <router-link to="score">
+              <el-menu-item index="4">
+                <i class="el-icon-s-management"></i>
+                <span slot="title">学分信息</span>
+              </el-menu-item>
+            </router-link>
+            <el-menu-item index="5" @click="logout">
+              <i class="el-icon-s-management"></i>
+              <span slot="title">退出登录</span>
+            </el-menu-item>
           </el-menu>
         </el-aside>
         <el-container>
@@ -46,13 +56,57 @@
 </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(){
+      this.$confirm(
+        "确定要退出登录吗？",
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        localStorage.removeItem('user');
+        this.login = false;
+        if (this.$route.name !== "login") {
+          this.$router.push("login");
+        }
+        $.ajax({
+          url: this.$apiUrl + "/userAction/logout",
+          method: "GET",
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '取消退出',
+          showClose: true
+        });
+      });
+    }
+  },
+  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 = '';
     }
 };

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

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

@@ -7,13 +7,37 @@ Vue.use(VueRouter)
 const routes = [
   // {
   //   path: '/',
-  //   name: 'root',
+  //   name: 'home',
   //   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'),
+  },
+  {
+    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 }
+  },
+  {
+    path: '/score',
+    name: 'score',
+    component: () => import('../views/score/scoreView.vue'),
+    // meta: { requiresAuth: true }
   }
 ]
 
@@ -21,4 +45,33 @@ 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 || JwtExpireCheck(isLoggedIn)) {
+    $.ajaxSetup({
+      headers: { 'token': isLoggedIn }
+    });
+    next();
+  }
+  else {
+    next({ path: '/login', query: { redirect: to.name } });
+  }
+});
+
 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

@@ -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>
@@ -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">
@@ -111,13 +111,13 @@
 
         <!-- 添加弹出框 -->
         <el-dialog title="添加课程" :visible.sync="courseAddDialogVisible">
-            <el-form :model="courseEditForm">
-                <el-form-item label="课程名称">
+            <el-form :model="courseEditForm" :rules="courseRules">
+                <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,17 +361,18 @@ export default {
         },
         courseListGet() {
             $.ajax({
-                url: this.$apiUrl + "/courseAction/list",
+                url: this.$apiUrl + "/courseAction/get",
                 method: "GET",
                 data: {
                     page: this.courseList.page,
                     pageSize: this.courseList.pageSize,
                     keyword: this.courseSearchForm.courseName,
-                    courseType: this.courseSearchForm.courseType
+                    type: this.courseSearchForm.courseType
                 },
                 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,73 @@
+<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 }
+            });
+            if (this.$route.query.redirect){
+              this.$router.push({ name: this.$route.query.redirect });
+            }else{
+              this.$router.push("student");
+            }
+            
+          }else{
+            this.$message({
+              type: 'error',
+              message: '登录失败，' + data.msg,
+              showClose: true
+            });
+          }
+        },
+        error:(xhr)=>{
+          this.$message({
+            type: 'error',
+            message: '登录失败，code=' + xhr.status,
+            showClose: true
+          });
+        },
+      });
+    },
+  },
+  mounted(){
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/score/scoreView.vue

@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <el-tabs v-model="activeName" @tab-click="changeTab">
+            <el-tab-pane label="学生成绩" name="stu">
+                <!-- 查询表单 -->
+                <el-row :gutter="30">
+                    <el-col :span="8"><el-input v-model="studentCode" placeholder="学号"></el-input></el-col>
+                    <el-col :span="3"><el-button type="primary" @click="searchByStu">查询</el-button></el-col>
+                </el-row>
+                <br><br>
+                <!-- 查询结果集 -->
+                <el-descriptions title="查询结果：">
+                    <el-descriptions-item label="学生姓名">{{ studentScore.name }}</el-descriptions-item>
+                    <el-descriptions-item label="学号">{{ studentScore.code }}</el-descriptions-item>
+                    <el-descriptions-item label="学分">{{ studentScore.score }}</el-descriptions-item>
+                    <el-descriptions-item label="课程数">{{ studentScore.count }}</el-descriptions-item>
+                </el-descriptions>
+            </el-tab-pane>
+            <el-tab-pane label="课程成绩" name="cou">
+                <!-- 查询表单 -->
+                <el-row :gutter="30">
+                    <el-col :span="8">
+                        <el-select v-model="couresSearchId" multiple filterable remote reserve-keyword placeholder="请输入关键词"
+                            :remote-method="remoteMethod" :loading="loading">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-col>
+                    <el-col :span="3"><el-button type="primary" @click="searchByStu">查询</el-button></el-col>
+                </el-row>
+                <br><br>
+                <!-- 查询结果集 -->
+                <el-table :data="scoreList"></el-table>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script>
+import $ from 'jquery'
+export default {
+    data() {
+        return {
+            activeName: "stu",
+            studentCode: '',
+            studentScore: {name:'',code:'',score:'',count:0},
+            scoreList:{},
+        }
+    },
+    methods: {
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        searchByStu(){
+            $.ajax({
+                url: this.$apiUrl + "/scoreAction/getByStu",
+                method: "GET",
+                data: {studentCode: this.studentCode},
+                success:(data)=>{
+                    if (data.success){
+                        this.studentScore.code = this.studentCode;
+                        this.studentScore.name = data.msg;
+                        this.studentScore.score = data.data;
+                        this.studentScore.count = data.count;
+                    } else{
+                        this.$message({
+                            type: 'error',
+                            message: '查询失败',
+                            showClose: true
+                        });
+                    }
+                },
+                error: (xhr) => {
+                    this.$message({
+                        type: 'error',
+                        message: '请求数据失败，code=' + xhr.status,
+                        showClose: true
+                    });
+                }
+            });
+        },
+        searchByCou(){},
+    },
+    mounted(){},
+}
+</script>
+
+<style>
+
+</style>

src/views/student/studentList.vue

@@ -0,0 +1,370 @@
+<!-- studentList.vue -->
+<template>
+  <div>
+    <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-button type="success" @click="studentAdd" style="float: right;">添加</el-button>
+      </el-form-item>
+    </el-form>
+    <br>
+    <hr>
+
+    <!-- 学生表格 -->
+    <el-table :data="studentList.data">
+      <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">
+        <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="备注" 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">
+        <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>
+    <br>
+
+    <!-- 分页器 -->
+    <el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" :total="studentList.total">
+    </el-pagination>
+
+    <el-dialog title="编辑学生" :visible.sync="studentEditDialogVisible">
+      <el-form :model="studentEditForm" label-position="top">
+        <el-row :gutter="25">
+          <el-col :span="11">
+            <el-form-item label="姓名">
+              <el-input v-model="studentEditForm.name" placeholder="姓名"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="学号">
+              <el-input v-model="studentEditForm.code" placeholder="学号"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="25">
+          <el-col :span="11">
+            <el-form-item label="性别">
+              <el-select v-model="studentEditForm.sex" placeholder="性别">
+                <el-option label="男" :value=0></el-option>
+                <el-option label="女" :value=1></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="年级">
+              <el-input v-model="studentEditForm.grade" placeholder="年级"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="专业">
+          <el-select v-model="studentEditForm.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-input type="textarea" v-model="studentEditForm.detail" placeholder="备注"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="studentEditDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="studentSubmit()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery'
+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: 1,
+        pageSize: 10,
+        total: 0
+      },
+      studentEditDialogVisible: false,
+      studentEditForm: {id: -1, code: '', name: '', sex: '', grade: '', major: '', detail: ''},
+    }
+  },
+  methods: {
+    studentListGet() {
+      $.ajax({
+        url: this.$apiUrl + "/studentAction/get",
+        metthod: "POST",
+        data: {
+          name: this.studentSearchForm.name,
+          code: this.studentSearchForm.code,
+          sex: (this.studentSearchForm.sex % 1 !== 0 || this.studentSearchForm.sex === '' ? -1 : this.studentSearchForm.sex),
+          grade: (this.studentSearchForm.grade % 1 !== 0 || this.studentSearchForm.grade === '' ? -1 : parseInt(this.studentSearchForm.grade)),
+          major: (this.studentSearchForm.major % 1 !== 0 || this.studentSearchForm.major === '' ? -1 : parseInt(this.studentSearchForm.major)),
+          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: '',
+        major: '',
+      };
+      this.studentListGet();
+    },
+    studentEdit(student) { console.log('编辑学生：', student)
+      this.studentEditDialogVisible = true;
+      this.studentEditForm = student;
+     },
+    studentDelete(student) { 
+      this.$confirm(
+        '确定要删除学生'+student.name+'吗？',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(()=>{
+        $.ajax({
+          url: this.$apiUrl + "/studentAction/delete",
+          method: 'POST',
+          data: student,
+          success: (data)=>{
+            if (data.success){
+              this.$message({
+                type: 'success',
+                message: '删除成功',
+                showClose: true
+              });
+              this.studentListGet();
+            }else{
+              this.$message({
+                type: 'error',
+                message: '删除失败',
+                showClose: true
+              });
+            }
+          },
+          error:(xhr)=>{
+            this.$message({
+              type: 'error',
+              message: '请求数据失败，code=' + xhr.status,
+              showClose: true
+            });
+          }
+        });
+      }).catch(()=>{
+        this.$message({
+          type: 'info',
+          message: '取消删除',
+          showClose: true
+        });
+      });
+     },
+    handleSizeChange(val) {
+      this.studentList.pageSize = val;
+      this.studentList.page = 1;
+      this.studentListGet();
+    },
+    handleCurrentChange(val) {
+      this.studentList.page = val;
+      this.studentListGet();
+    },
+    studentAdd(){
+      this.studentEditForm = { id: -1, code: '', name: '', sex: '', grade: '', major: '', detail: '' };
+      this.studentEditDialogVisible = true;
+    },
+    studentSubmit(){
+      if(this.studentEditForm.id===-1){
+        this.$confirm(
+          "确定要添加学生"+this.studentEditForm.name+"吗？",
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(()=>{
+          $.ajax({
+            url: this.$apiUrl + '/studentAction/add',
+            method: "POST",
+            data: this.studentEditForm,
+            success: (data) => {
+              if (data.success) {
+                this.$message({
+                  type: 'success',
+                  message: '保存成功',
+                  showClose: true,
+                });
+                this.studentEditDialogVisible = false;
+                this.studentListGet();
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: data.msg,
+                  showClose: true,
+                });
+              }
+            },
+            error: (xhr) => {
+              this.$message({
+                type: 'error',
+                message: '请求数据失败，code=' + xhr.status,
+                showClose: true,
+              });
+            }
+          });
+        }).catch(()=>{
+          this.$message({
+            type: 'info',
+            message: '取消添加',
+            showClose: true
+          });
+        });
+      }else{
+        this.$confirm(
+          "确定要修改学生" + this.studentEditForm.name + "吗？",
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
+          $.ajax({
+            url: this.$apiUrl + '/studentAction/edit',
+            method: "POST",
+            data: this.studentEditForm,
+            success: (data) => {
+              if (data.success) {
+                this.$message({
+                  type: 'success',
+                  message: '修改成功',
+                  showClose: true,
+                });
+                this.studentEditDialogVisible = false;
+                this.studentListGet();
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: data.msg,
+                  showClose: true,
+                });
+              }
+            },
+            error: (xhr) => {
+              this.$message({
+                type: 'error',
+                message: '请求数据失败，code=' + xhr.status,
+                showClose: true,
+              });
+            }
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '取消保存',
+            showClose: true
+          });
+        });
+      }
+    },
+  },
+  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>