init

README-zh.md

@@ -8,6 +8,15 @@
 
 目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
 
+<p align="center">
+  <b>SPONSORED BY</b>
+</p>
+<p align="center">
+   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
+      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
+   </a>
+</p>
+
 ## Extra
 
 如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)

README.md

@@ -9,8 +9,16 @@ English | [简体中文](./README-zh.md)
 
 **The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
 
-## Build Setup
+<p align="center">
+  <b>SPONSORED BY</b>
+</p>
+<p align="center">
+   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
+      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
+   </a>
+</p>
 
+## Build Setup
 
 ```bash
 # clone the project

src/api/classes.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+export function addClass(data) {
+  return request({
+    url: '/api/class/add',
+    method: 'post',
+    data
+  })
+}
+
+export function updateClass(data) {
+  return request({
+    url: '/api/class/update',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteClass(data) {
+  return request({
+    url: '/api/class/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function classInfo(params) {
+  return request({
+    url: '/api/class/info',
+    method: 'get',
+    params
+  })
+}
+

src/api/score.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function scoreList(params) {
+  return request({
+    url: '/api/score/list',
+    method: 'get',
+    params
+  })
+}
+
+export function scoreInfo(params) {
+  return request({
+    url: '/api/score/info',
+    method: 'get',
+    params
+  })
+}
+
+export function scoreAdd(data) {
+  return request({
+    url: '/api/score/add',
+    method: 'post',
+    data
+  })
+}
+
+export function scoreUpdate(data) {
+  return request({
+    url: '/api/score/update',
+    method: 'post',
+    data
+  })
+}
+
+export function scoreDelete(data) {
+  return request({
+    url: '/api/score/delete',
+    method: 'post',
+    data
+  })
+}
+

src/api/subject.js

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+export function subjectList(params) {
+  return request({
+    url: '/api/subject/list',
+    method: 'get',
+    params
+  })
+}
+
+export function subjectCreate(data) {
+  return request({
+    url: '/api/subject/add',
+    method: 'post',
+    data
+  })
+}
+
+export function subjectUpdate(data) {
+  return request({
+    url: '/api/subject/update',
+    method: 'post',
+    data
+  })
+}
+
+export function subjectDelete(data) {
+  return request({
+    url: '/api/subject/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function subjectInfo(params) {
+  return request({
+    url: '/api/subject/info',
+    method: 'get',
+    params
+  })
+}

src/api/table.js

@@ -1,9 +1,28 @@
 import request from '@/utils/request'
 
+// 学生列表
 export function getList(params) {
   return request({
-    url: '/vue-admin-template/table/list',
+    url: '/api/account/list',
     method: 'get',
     params
   })
 }
+
+// 班级列表
+export function getClassList(params) {
+  return request({
+    url: '/api/class/list',
+    method: 'get',
+    params
+  })
+}
+
+// 新增班级
+export function addClass(data) {
+  return request({
+    url: '/api/class/add',
+    method: 'post',
+    data
+  })
+}

src/api/user.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/vue-admin-template/user/login',
+    url: '/api/account/login',
     method: 'post',
     data
   })
@@ -10,15 +10,46 @@ export function login(data) {
 
 export function getInfo(token) {
   return request({
-    url: '/vue-admin-template/user/info',
-    method: 'get',
-    params: { token }
+    url: '/api/account/info',
+    method: 'get'
   })
 }
 
-export function logout() {
+export function createUser(data) {
   return request({
-    url: '/vue-admin-template/user/logout',
-    method: 'post'
+    url: '/api/account/student/add',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteUser(params) {
+  return request({
+    url: '/api/account/delete',
+    method: 'get',
+    params
+  })
+}
+
+export function userDetail(params) {
+  return request({
+    url: '/api/account/detail',
+    method: 'get',
+    params
+  })
+}
+
+export function updateUser(data) {
+  return request({
+    url: '/api/account/update',
+    method: 'post',
+    data
+  })
+}
+
+export function getTeachers() {
+  return request({
+    url: '/api/account/teacher-list',
+    method: 'get'
   })
 }

src/layout/components/Navbar.vue

@@ -16,12 +16,6 @@
               Home
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
           <el-dropdown-item divided @click.native="logout">
             <span style="display:block;">Log Out</span>
           </el-dropdown-item>

src/layout/components/Sidebar/Logo.vue

@@ -24,7 +24,7 @@ export default {
   },
   data() {
     return {
-      title: 'Vue Admin Template',
+      title: '成绩管理系统',
       logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
     }
   }

src/router/index.js

@@ -51,113 +51,155 @@ export const constantRoutes = [
       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'dashboard' }
+      meta: { title: '主页', icon: 'dashboard' }
     }]
   },
 
   {
-    path: '/example',
+    path: '/teacher',
     component: Layout,
-    redirect: '/example/table',
+    redirect: '/teacher/table',
     name: 'Example',
-    meta: { title: 'Example', icon: 'el-icon-s-help' },
+    meta: { title: '教师', icon: 'el-icon-s-help' },
     children: [
       {
         path: 'table',
         name: 'Table',
-        component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'table' }
+        component: () => import('@/views/student/index'),
+        meta: { title: '学生管理', icon: 'table' }
       },
       {
-        path: 'tree',
-        name: 'Tree',
-        component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree' }
+        path: 'class',
+        name: 'Class',
+        component: () => import('@/views/class/index'),
+        meta: { title: '班级管理', icon: 'table' }
+      },
+      {
+        path: 'subject',
+        name: 'Subject',
+        component: () => import('@/views/subject/index'),
+        meta: { title: '科目管理', icon: 'table' }
+      },
+      {
+        path: 'score',
+        name: 'Score',
+        component: () => import('@/views/score/index'),
+        meta: { title: '成绩管理', icon: 'table' }
       }
+      // {
+      //   path: 'tree',
+      //   name: 'Tree',
+      //   component: () => import('@/views/tree/index'),
+      //   meta: { title: 'Tree', icon: 'tree' }
+      // }
     ]
   },
 
   {
     path: '/form',
     component: Layout,
+    hidden: true,
     children: [
       {
         path: 'index',
         name: 'Form',
         component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'form' }
-      }
-    ]
-  },
-
-  {
-    path: '/nested',
-    component: Layout,
-    redirect: '/nested/menu1',
-    name: 'Nested',
-    meta: {
-      title: 'Nested',
-      icon: 'nested'
-    },
-    children: [
-      {
-        path: 'menu1',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'Menu1',
-        meta: { title: 'Menu1' },
-        children: [
-          {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'Menu1-2',
-            meta: { title: 'Menu1-2' },
-            children: [
-              {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
-          }
-        ]
+        props: route => ({ id: route.query.id }),
+        meta: { title: '学生编辑', icon: 'form' }
       },
       {
-        path: 'menu2',
-        component: () => import('@/views/nested/menu2/index'),
-        meta: { title: 'menu2' }
+        path: 'class',
+        name: 'class-form',
+        component: () => import('@/views/form/class'),
+        props: route => ({ id: route.query.id }),
+        meta: { title: '班级编辑', icon: 'form' }
+      },
+      {
+        path: 'subject',
+        name: 'subject-form',
+        component: () => import('@/views/form/subject'),
+        props: route => ({ id: route.query.id }),
+        meta: { title: '科目编辑', icon: 'form' }
+      },
+      {
+        path: 'score',
+        name: 'score-form',
+        component: () => import('@/views/form/score'),
+        props: route => ({ id: route.query.id }),
+        meta: { title: '成绩编辑', icon: 'form' }
       }
     ]
   },
 
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-        meta: { title: 'External Link', icon: 'link' }
-      }
-    ]
-  },
+  // {
+  //   path: '/nested',
+  //   component: Layout,
+  //   redirect: '/nested/menu1',
+  //   name: 'Nested',
+  //   meta: {
+  //     title: 'Nested',
+  //     icon: 'nested'
+  //   },
+  //   children: [
+  //     {
+  //       path: 'menu1',
+  //       component: () => import('@/views/nested/menu1/index'), // Parent router-view
+  //       name: 'Menu1',
+  //       meta: { title: 'Menu1' },
+  //       children: [
+  //         {
+  //           path: 'menu1-1',
+  //           component: () => import('@/views/nested/menu1/menu1-1'),
+  //           name: 'Menu1-1',
+  //           meta: { title: 'Menu1-1' }
+  //         },
+  //         {
+  //           path: 'menu1-2',
+  //           component: () => import('@/views/nested/menu1/menu1-2'),
+  //           name: 'Menu1-2',
+  //           meta: { title: 'Menu1-2' },
+  //           children: [
+  //             {
+  //               path: 'menu1-2-1',
+  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+  //               name: 'Menu1-2-1',
+  //               meta: { title: 'Menu1-2-1' }
+  //             },
+  //             {
+  //               path: 'menu1-2-2',
+  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+  //               name: 'Menu1-2-2',
+  //               meta: { title: 'Menu1-2-2' }
+  //             }
+  //           ]
+  //         },
+  //         {
+  //           path: 'menu1-3',
+  //           component: () => import('@/views/nested/menu1/menu1-3'),
+  //           name: 'Menu1-3',
+  //           meta: { title: 'Menu1-3' }
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       path: 'menu2',
+  //       component: () => import('@/views/nested/menu2/index'),
+  //       name: 'Menu2',
+  //       meta: { title: 'menu2' }
+  //     }
+  //   ]
+  // },
+
+  // {
+  //   path: 'external-link',
+  //   component: Layout,
+  //   children: [
+  //     {
+  //       path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
+  //       meta: { title: 'External Link', icon: 'link' }
+  //     }
+  //   ]
+  // },
 
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: 'Vue Admin Template',
+  title: '学生成绩管理系统',
 
   /**
    * @type {boolean} true | false

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login, getInfo, createUser } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
@@ -24,18 +24,45 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  SET_UID: (state, uid) => {
+    state.uid = uid
   }
 }
 
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { accountId, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
+      login({ accountId: parseInt(accountId, 10), password: password }).then(response => {
+        const { result } = response
+        commit('SET_TOKEN', result.token)
+        commit('SET_NAME', result.username)
+        commit('SET_AVATAR', result.headImg)
+        setToken(result.token)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  createUser({ commit }, form) {
+    return new Promise((resolve, reject) => {
+      const birthday = new Date(form.birthday)
+      const formateBirthday = `${birthday.getFullYear()}-${String(birthday.getMonth() + 1).padStart(2, '0')}-${String(birthday.getDate()).padStart(2, '0')}`
+      const data = {
+        username: form.username,
+        gender: parseInt(form.gender, 10),
+        birthday: formateBirthday,
+        phone: form.phone,
+        college: form.college,
+        classId: parseInt(form.classId, 10)
+
+      }
+      createUser(data).then(response => {
+        // const { result } = response
         resolve()
       }).catch(error => {
         reject(error)
@@ -46,18 +73,18 @@ const actions = {
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const { data } = response
+      getInfo().then(response => {
+        const { result } = response
 
-        if (!data) {
-          reject('Verification failed, please Login again.')
+        if (!result) {
+          return reject('Verification failed, please Login again.')
         }
 
-        const { name, avatar } = data
+        const { username, userId } = result
 
-        commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        resolve(data)
+        commit('SET_NAME', username)
+        commit('SET_UID', userId)
+        resolve(result)
       }).catch(error => {
         reject(error)
       })
@@ -66,15 +93,11 @@ const actions = {
 
   // user logout
   logout({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
-        removeToken() // must remove  token  first
-        resetRouter()
-        commit('RESET_STATE')
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      resetRouter()
+      commit('RESET_STATE')
+      resolve()
     })
   },
 

src/utils/get-page-title.js

@@ -1,6 +1,6 @@
 import defaultSettings from '@/settings'
 
-const title = defaultSettings.title || 'Vue Admin Template'
+const title = defaultSettings.title || '成绩管理系统'
 
 export default function getPageTitle(pageTitle) {
   if (pageTitle) {

src/utils/request.js

@@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: 'http://xiaobaitao.com:8080/', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })
@@ -19,7 +19,7 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers['token'] = getToken()
     }
     return config
   },
@@ -46,7 +46,7 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.ret_code !== 0) {
       Message({
         message: res.message || 'Error',
         type: 'error',
@@ -54,7 +54,7 @@ service.interceptors.response.use(
       })
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      if (res.code === 1002) {
         // to re-login
         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
           confirmButtonText: 'Re-Login',

src/utils/validate.js

@@ -9,12 +9,3 @@
 export function isExternal(path) {
   return /^(https?:|mailto:|tel:)/.test(path)
 }
-
-/**
- * @param {string} str
- * @returns {Boolean}
- */
-export function validUsername(str) {
-  const valid_map = ['admin', 'editor']
-  return valid_map.indexOf(str.trim()) >= 0
-}

src/views/class/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="120px">
+      <el-row class="filter-row" type="flex" justify="start">
+        <el-col :span="6">
+          <el-form-item label="班级id">
+            <el-input v-model="filter.id" placeholder="请输入班级id" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="班级名称">
+            <el-input v-model="filter.name" placeholder="请输入班级名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="专业">
+            <el-input v-model="filter.major" placeholder="请输入专业名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4" offset="0">
+          <el-form-item>
+            <el-button type="primary" @click="onFilter">筛选</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4" offset="0">
+          <el-form-item>
+            <el-button type="primary" @click="handleAdd">新增</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column align="center" label="班级id">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column label="入学年份">
+        <template slot-scope="scope">
+          {{ scope.row.year }}
+        </template>
+      </el-table-column>
+      <el-table-column label="班级名称" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="专业" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.major }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="导员账户id" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.counselorAccountId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="学生人数" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.studentCount }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
+          <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getClassList } from '@/api/table'
+import { deleteClass } from '@/api/classes'
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      filter: {
+        id: '',
+        name: '',
+        major: ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getClassList().then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      this.$router.push('/form/class')
+    },
+    handleEdit(classData) {
+      this.$router.push({
+        path: '/form/class',
+        query: { id: classData.id }
+      })
+    },
+    onFilter() {
+      this.listLoading = true
+      getClassList(this.filter).then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleDelete(id) {
+      this.$confirm('确认删除该班级吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          id: id
+        }
+        deleteClass(data).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.fetchData()
+        }).catch(() => {
+          this.$message({
+            type: 'error',
+            message: '删除失败, 请重试!'
+          })
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.button-container {
+  display: flex;
+  justify-content: flex-end; /* 使按钮靠右 */
+  margin-bottom: 10px; /* 按钮与表格之间的间距 */
+}
+.filter-row {
+  margin-bottom: 20px; /* 增加行间距 */
+}
+.el-form-item {
+  margin-bottom: 0; /* 移除表单项的底部间距 */
+}
+</style>

src/views/form/class.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-form-item label="入学年份">
+        <el-input v-model="form.year" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item label="班级名称">
+        <el-input v-model="form.name" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item label="专业">
+        <el-select v-model="form.major" placeholder="选择专业">
+          <el-option label="软件工程" value="SoftwareEngineering" />
+          <el-option label="网络工程" value="NetworkEngineering" />
+          <el-option label="信息安全" value="InformationSecurity" />
+          <el-option label="人工智能" value="ArtificialIntelligence" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="导员">
+        <el-select v-model="form.counselorAccountId" placeholder="选择导员">
+          <el-option
+            v-for="counselor in counselors"
+            :key="counselor.userId"
+            :label="counselor.username + counselor.userId"
+            :value="counselor.userId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="学生数量">
+        <el-input v-model="form.studentCount" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getTeachers } from '@/api/user'
+import { addClass, updateClass, classInfo } from '@/api/classes'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      form: {
+        id: '',
+        year: '',
+        name: '',
+        major: '',
+        counselorAccountId: '',
+        studentCount: ''
+      },
+      counselors: []
+    }
+  },
+  created() {
+    // 请求导员列表
+    getTeachers().then(response => {
+      this.counselors = response.result
+    })
+
+    if (this.id) {
+      const params = {
+        id: this.id
+      }
+      this.loading = true
+      classInfo(params).then(response => {
+        const { result } = response
+        this.form = {
+          id: result.id,
+          year: result.year,
+          name: result.name,
+          major: result.major,
+          counselorAccountId: result.counselorAccountId,
+          studentCount: result.studentCount
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+      console.log('id is {}', this.id)
+    }
+  },
+
+  methods: {
+    onSubmit() {
+      this.loading = true
+      if (this.form.id) {
+        updateClass(this.form).then(() => {
+          this.$message({
+            type: 'info',
+            message: '更新成功'
+          })
+          this.$router.push('/teacher/class')
+        })
+      } else {
+        addClass(this.form).then(() => {
+          this.$router.push('/teacher/class')
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        })
+        this.$router.push('/teacher/class')
+      }
+    },
+    onCancel() {
+      this.$router.push('/teacher/class')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line{
+  text-align: center;
+}
+</style>
+

src/views/form/index.vue

@@ -1,77 +1,111 @@
 <template>
   <div class="app-container">
     <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
+      <el-form-item label="学生姓名">
+        <el-input v-model="form.username" style="width: 200px;" />
       </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
+      <el-form-item label="性别">
+        <el-select v-model="form.gender" placeholder="选择性别">
+          <el-option label="男" value="1" />
+          <el-option label="女" value="2" />
         </el-select>
       </el-form-item>
-      <el-form-item label="Activity time">
+      <el-form-item label="出生日期">
         <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
+          <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" style="width: 200px;" />
         </el-col>
       </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
+      <el-form-item label="联系方式">
+        <el-input v-model="form.phone" style="width: 200px;" />
       </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
+      <el-form-item label="学院">
+        <el-select v-model="form.college" placeholder="选择学院">
+          <el-option label="电控" value="electronic" />
+          <el-option label="机械" value="mechanical" />
+          <el-option label="计算机" value="computer" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
+      <el-form-item label="班级">
+        <el-input v-model="form.classId" style="width: 200px;" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <el-button @click="onCancel">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import { userDetail, updateUser } from '@/api/user'
+
 export default {
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
   data() {
     return {
       form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+        userId: '',
+        username: '',
+        gender: '',
+        birthday: '',
+        phone: '',
+        college: '',
+        classId: ''
       }
     }
   },
+  created() {
+    if (this.id) {
+      const params = {
+        id: this.id
+      }
+      this.loading = true
+      userDetail(params).then(response => {
+        const { result } = response
+        this.form = {
+          userId: result.userId,
+          username: result.username,
+          gender: result.gender,
+          birthday: new Date(result.birthday),
+          phone: result.phone,
+          college: result.college,
+          classId: result.classId
+        }
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+      console.log('id is {}', this.id)
+    }
+  },
+
   methods: {
     onSubmit() {
-      this.$message('submit!')
+      this.loading = true
+      if (this.form.userId) {
+        updateUser(this.form).then(() => {
+          this.$message({
+            type: 'info',
+            message: '更新成功'
+          })
+        })
+      } else {
+        this.$store.dispatch('user/createUser', this.form).then(() => {
+          this.$router.push('/teacher/table')
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        })
+      }
     },
     onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
+      this.$router.push('/teacher/table')
     }
   }
 }

src/views/form/score.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-form-item label="学生姓名" placeholder="选择学生">
+        <el-select v-model="form.studentName" @change="updateStudentId">
+          <el-option
+            v-for="student in studentList"
+            :key="student.userId"
+            :label="student.username"
+            :value="student.username"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="学生账户">
+        <el-input v-model="form.studentId" style="width: 200px;" disabled />
+      </el-form-item>
+      <el-form-item label="班级名称" placeholder="选择班级">
+        <el-select v-model="form.className" @change="updateClassId">
+          <el-option
+            v-for="classData in classList"
+            :key="classData.id"
+            :label="classData.name"
+            :value="classData.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="班级id">
+        <el-input v-model="form.classId" style="width: 200px;" disabled />
+      </el-form-item>
+      <el-form-item label="科目名称">
+        <el-select v-model="form.subjectName" @change="updateSubjectId">
+          <el-option
+            v-for="subject in subjectList"
+            :key="subject.id"
+            :label="subject.name"
+            :value="subject.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="科目id">
+        <el-input v-model="form.subjectId" style="width: 200px;" disabled />
+      </el-form-item>
+      <el-form-item label="学年">
+        <el-select v-model="form.year" style="width: 200px;">
+          <el-option
+            v-for="year in years"
+            :key="year"
+            :label="year"
+            :value="year"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="学期">
+        <el-radio-group v-model="form.term">
+          <el-radio label="1">上</el-radio>
+          <el-radio label="2">下</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="分数">
+        <el-input v-model="form.score" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { scoreInfo, scoreAdd, scoreUpdate } from '@/api/score'
+import { getList, getClassList } from '@/api/table'
+import { subjectList } from '@/api/subject'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      form: {
+        id: '',
+        studentId: '',
+        studentName: '',
+        className: '',
+        classId: '',
+        subjectId: '',
+        subjectName: '',
+        year: '',
+        term: '',
+        score: ''
+      },
+      studentList: [],
+      classList: [],
+      subjectList: [],
+      years: [2021, 2022, 2023, 2024, 2025, 2026]
+    }
+  },
+  created() {
+    if (this.id) {
+      Promise.all([getList(), getClassList(), subjectList()])
+        .then(([studentRes, classRes, subjectRes]) => {
+          this.studentList = studentRes.result
+          this.classList = classRes.result
+          this.subjectList = subjectRes.result
+          const params = {
+            id: this.id
+          }
+          this.loading = true
+          scoreInfo(params).then(response => {
+            const { result } = response
+            this.form = result
+            const classData = this.classList.find(classData => classData.id === Number(this.form.classId))
+            if (classData) {
+              this.form.className = classData.name
+            }
+            this.form.term = String(this.form.term)
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
+        })
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.loading = true
+      if (this.form.id) {
+        scoreUpdate(this.form).then(() => {
+          this.$message({
+            type: 'info',
+            message: '更新成功'
+          })
+          this.$router.push('/teacher/score')
+        })
+      } else {
+        scoreAdd(this.form).then(() => {
+          this.$router.push('/teacher/score')
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        })
+      }
+    },
+    onCancel() {
+      this.$router.push('/teacher/score')
+    },
+    updateStudentId() {
+      const selectedStudent = this.studentList.find(student => student.username === this.form.studentName)
+      if (selectedStudent) {
+        this.form.studentId = Number(selectedStudent.userId)
+      }
+    },
+    updateClassId() {
+      const classData = this.classList.find(classData => classData.name === this.form.className)
+      if (classData) {
+        this.form.classId = Number(classData.id)
+      }
+    },
+    updateSubjectId() {
+      const subject = this.subjectList.find(subject => subject.name === this.form.subjectName)
+      if (subject) {
+        this.form.subjectId = Number(subject.id)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line{
+  text-align: center;
+}
+</style>
+

src/views/form/subject.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-form-item label="科目名称">
+        <el-input v-model="form.name" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item label="科目类型">
+        <el-select v-model="form.type" placeholder="选择类型">
+          <el-option label="必修" value="1" />
+          <el-option label="选修" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="学分">
+        <el-input v-model="form.credit" style="width: 200px;" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { subjectInfo, subjectCreate, subjectUpdate } from '@/api/subject'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      form: {
+        id: '',
+        name: '',
+        type: '',
+        credit: ''
+      }
+    }
+  },
+  created() {
+    if (this.id) {
+      const params = {
+        id: this.id
+      }
+      this.loading = true
+      subjectInfo(params).then(response => {
+        const { result } = response
+        const typeMapping = {
+          1: '必修',
+          2: '选修'
+        }
+        this.form = {
+          id: result.id,
+          name: result.name,
+          type: result.type,
+          credit: result.credit
+        }
+        this.form.type = typeMapping[result.type] || ''
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+      console.log('id is {}', this.id)
+    }
+  },
+
+  methods: {
+    onSubmit() {
+      this.loading = true
+      if (this.form.id) {
+        subjectUpdate(this.form).then(() => {
+          this.$message({
+            type: 'info',
+            message: '更新成功'
+          })
+          this.$router.push('/teacher/subject')
+        })
+      } else {
+        subjectCreate(this.form).then(() => {
+          this.$router.push('/teacher/subject')
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        })
+      }
+    },
+    onCancel() {
+      this.$router.push('/teacher/subject')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line{
+  text-align: center;
+}
+</style>
+

src/views/login/index.vue

@@ -3,7 +3,7 @@
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">管理系统</h3>
       </div>
 
       <el-form-item prop="username">
@@ -12,10 +12,10 @@
         </span>
         <el-input
           ref="username"
-          v-model="loginForm.username"
-          placeholder="Username"
-          name="username"
-          type="text"
+          v-model="loginForm.accountId"
+          placeholder="校园账户id"
+          name="账户ID"
+          type="number"
           tabindex="1"
           auto-complete="on"
         />
@@ -30,7 +30,7 @@
           ref="password"
           v-model="loginForm.password"
           :type="passwordType"
-          placeholder="Password"
+          placeholder="密码"
           name="password"
           tabindex="2"
           auto-complete="on"
@@ -53,20 +53,16 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+// import { validUsername } from '@/utils/validate'
 
 export default {
   name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
-      } else {
-        callback()
-      }
+      callback()
     }
     const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
+      if (value.length < 5) {
         callback(new Error('The password can not be less than 6 digits'))
       } else {
         callback()
@@ -74,8 +70,8 @@ export default {
     }
     return {
       loginForm: {
-        username: 'admin',
-        password: '111111'
+        accountId: '1000',
+        password: 'admin'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],

src/views/score/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="120px">
+      <el-row class="filter-row" type="flex" justify="start">
+        <el-col :span="4">
+          <el-form-item label="学生账户">
+            <el-input v-model="filter.accountId" placeholder="请输入账户id" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="科目id">
+            <el-input v-model="filter.subjectId" placeholder="请输入科目id" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="班级id">
+            <el-input v-model="filter.classId" placeholder="请输入班级id" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="年份">
+            <el-input v-model="filter.year" placeholder="请输入年份" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="学期">
+            <el-input v-model="filter.term" placeholder="请输入学期" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="button-row" type="flex" justify="start">
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" @click="onFilter">成绩查询</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="success" @click="handleAdd">成绩录入</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column align="center" label="学生账户">
+        <template slot-scope="scope">
+          {{ scope.row.studentId }}
+        </template>
+      </el-table-column>
+      <el-table-column label="学生姓名">
+        <template slot-scope="scope">
+          {{ scope.row.studentName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="班级id" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.classId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="科目" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.subjectName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="学年" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.year }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="学期" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.term }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="分数" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.score }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
+          <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { scoreList, scoreDelete } from '@/api/score'
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      filter: {
+        accountId: '',
+        subjectId: '',
+        classId: '',
+        year: '',
+        term: ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      scoreList().then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      this.$router.push('/form/score')
+    },
+    handleEdit(classData) {
+      const idStr = String(classData.id)
+      this.$router.push({
+        path: '/form/score',
+        query: { id: idStr }
+      })
+    },
+    onFilter() {
+      this.listLoading = true
+      scoreList(this.filter).then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleDelete(id) {
+      this.$confirm('确认删除该班级吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          id: id
+        }
+        scoreDelete(data).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.fetchData()
+        }).catch(() => {
+          this.$message({
+            type: 'error',
+            message: '删除失败, 请重试!'
+          })
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.filter-row {
+  margin-bottom: 20px; /* 增加行间距 */
+}
+.el-form-item {
+  margin-bottom: 0; /* 移除表单项的底部间距 */
+}
+.button-row {
+  margin-top: 10px; /* 增加按钮与筛选区域的间距 */
+  margin-bottom: 10px;
+}
+.el-button {
+  margin-right: 10px; /* 增加按钮之间的间距 */
+}
+</style>

src/views/student/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="120px">
+      <el-row class="filter-row" type="flex" justify="start">
+        <el-col :span="8">
+          <el-form-item label="按 UID 筛选">
+            <el-input v-model="filter.uid" placeholder="请输入 UID" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="按班级筛选">
+            <el-input v-model="filter.classId" placeholder="请输入班级" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" @click="onFilter">筛选</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item>
+            <el-button type="primary" @click="handleAdd">新增</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column align="center" label="校园账户id">
+        <template slot-scope="scope">
+          {{ scope.row.userId }}
+        </template>
+      </el-table-column>
+      <el-table-column label="姓名" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.username }}
+        </template>
+      </el-table-column>
+      <el-table-column label="班级" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.classId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="性别" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.gender }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="出生日期" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.birthday }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="联系方式" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.phone }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="学院" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.college }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row.userId)">修改</el-button>
+          <el-button type="text" @click="handleDelete(scope.row.userId)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/table'
+import { deleteUser } from '@/api/user'
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      filter: {
+        uid: '',
+        classId: ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList().then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      this.$router.push('/form/index')
+    },
+    onFilter() {
+      this.listLoading = true
+      getList(this.filter).then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleEdit(userId) {
+      this.$router.push({
+        path: '/form/index',
+        query: { id: userId }
+      })
+    },
+    handleDelete(userId) {
+      this.$confirm('确认删除该账户吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log(userId)
+        const param = {
+          id: parseInt(userId, 10)
+        }
+        console.log(param)
+        deleteUser(param).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.fetchData()// 重新获取数据
+        }).catch(() => {
+          this.$message({
+            type: 'error',
+            message: '删除失败, 请重试!'
+          })
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.button-container {
+  display: flex;
+  justify-content: flex-end; /* 使按钮靠右 */
+  margin-bottom: 10px; /* 按钮与表格之间的间距 */
+}
+.filter-row {
+  margin-bottom: 20px; /* 增加行间距 */
+}
+.el-form-item {
+  margin-bottom: 0; /* 移除表单项的底部间距 */
+}
+</style>

src/views/subject/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="120px">
+      <el-row class="filter-row" type="flex" justify="start">
+        <el-col :span="6">
+          <el-form-item label="科目id">
+            <el-input v-model="filter.id" placeholder="请输入科目id" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="科目名称">
+            <el-input v-model="filter.name" placeholder="请输入科目名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="类型">
+            <el-select v-model="filter.type" placeholder="选择类型" clearable>
+              <el-option label="必修" value="1" />
+              <el-option label="选修" value="2" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4" offset="0">
+          <el-form-item>
+            <el-button type="primary" @click="onFilter">筛选</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4" offset="0">
+          <el-form-item>
+            <el-button type="primary" @click="handleAdd">新增</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column align="center" label="科目id">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column label="科目名称">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column label="科目类型" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.type == '1'? '必修' :'选修' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="学分" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.credit }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
+          <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { subjectList, subjectDelete } from '@/api/subject'
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      filter: {
+        id: '',
+        name: '',
+        type: ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      subjectList().then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      this.$router.push('/form/subject')
+    },
+    handleEdit(classData) {
+      this.$router.push({
+        path: '/form/subject',
+        query: { id: classData.id }
+      })
+    },
+    onFilter() {
+      this.listLoading = true
+      subjectList(this.filter).then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleDelete(id) {
+      this.$confirm('确认删除该班级吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          id: id
+        }
+        subjectDelete(data).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.fetchData()
+        }).catch(() => {
+          this.$message({
+            type: 'error',
+            message: '删除失败, 请重试!'
+          })
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.button-container {
+  display: flex;
+  justify-content: flex-end; /* 使按钮靠右 */
+  margin-bottom: 10px; /* 按钮与表格之间的间距 */
+}
+.filter-row {
+  margin-bottom: 20px; /* 增加行间距 */
+}
+.el-form-item {
+  margin-bottom: 0; /* 移除表单项的底部间距 */
+}
+</style>

src/views/table/index.vue

@@ -1,5 +1,29 @@
 <template>
   <div class="app-container">
+    <el-form label-width="120px">
+      <el-row class="filter-row" type="flex" justify="start">
+        <el-col :span="8">
+          <el-form-item label="按 UID 筛选">
+            <el-input v-model="filter.uid" placeholder="请输入 UID" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="按班级筛选">
+            <el-input v-model="filter.classId" placeholder="请输入班级" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item>
+            <el-button type="primary" @click="onFilter">筛选</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item>
+            <el-button type="primary" @click="handleAdd">新增</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -7,36 +31,41 @@
       border
       fit
       highlight-current-row
+      style="width: 100%"
     >
-      <el-table-column align="center" label="ID" width="95">
+      <el-table-column align="center" label="校园账户id">
         <template slot-scope="scope">
-          {{ scope.$index }}
+          {{ scope.row.userId }}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
+      <el-table-column label="姓名">
         <template slot-scope="scope">
-          {{ scope.row.title }}
+          {{ scope.row.username }}
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
+      <el-table-column label="班级" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
+          <span>{{ scope.row.classId }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
+      <el-table-column label="性别" align="center">
         <template slot-scope="scope">
-          {{ scope.row.pageviews }}
+          <span>{{ scope.row.gender }}</span>
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
+      <el-table-column label="出生日期" align="center">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          <span>{{ scope.row.birthday }}</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
+      <el-table-column label="联系方式" align="center">
         <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
+          <span>{{ scope.row.phone }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="学院" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.college }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -60,7 +89,11 @@ export default {
   data() {
     return {
       list: null,
-      listLoading: true
+      listLoading: true,
+      filter: {
+        uid: '',
+        classId: ''
+      }
     }
   },
   created() {
@@ -70,10 +103,38 @@ export default {
     fetchData() {
       this.listLoading = true
       getList().then(response => {
-        this.list = response.data.items
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    handleAdd() {
+      this.$router.push('/form/index')
+    },
+    onFilter() {
+      this.listLoading = true
+      getList(this.filter).then(response => {
+        this.list = response.result
+        this.listLoading = false
+      }).catch(() => {
         this.listLoading = false
       })
     }
   }
 }
 </script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.button-container {
+  display: flex;
+  justify-content: flex-end; /* 使按钮靠右 */
+  margin-bottom: 10px; /* 按钮与表格之间的间距 */
+}
+.filter-row {
+  margin-bottom: 20px; /* 为筛选功能与表格之间添加间距 */
+}
+</style>