springboot+mybatis+vue3.0+ts+elementUIplus学生管理系统

一、系统登录页面

二、修改密码页面

三、首页

三、学生信息列表

四、编辑学生信息页面

五、个人信息页面


六、页面丢失页面

七、前端代码目录

八、前端代码部分页面

<template>
  <div class="student-container">
    <el-row>
      <el-col :span="4" class="student-head">
        <el-input
          v-model="query.queryString"
          placeholder="请输入学号"
          clearable
          @clear="seachStudent()"
        />
      </el-col>
      <el-col :span="2" class="student-head">
        <el-button type="primary" @click="seachStudent()">搜索</el-button>
      </el-col>
      <el-col :span="16" class="student-head">
        <div class="student-add">
          <el-button type="success" @click="addStudent()">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="student-table" style="margin-top:10px;">
      <el-table
        :header-cell-style="{background:'rgb(226, 218, 246)'}"
        :data="tableData"
        style="width: 100%"
        stripe
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="stuno" label="学号" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="cardID" label="身份证编号" width="180" />
        <el-table-column prop="collegeno" label="学院编号" width="180" />
        <el-table-column prop="collegename" label="学院名称" width="180" />
        <el-table-column prop="gradeno" label="年级编号" width="180" />
        <el-table-column prop="gradename" label="年级名称" width="180" />
        <el-table-column prop="classno" label="班级编号" width="180" />
        <el-table-column prop="classname" label="班级名称" width="180" />
        <el-table-column prop="nation" label="民族" width="180" />
        <el-table-column prop="phoneNumber" label="电话" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="birthday" label="生日" width="180" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column prop="remark" label="备注" width="180" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.prevent="editStudent(scope.row)">编辑</el-button>
            <el-button link type="danger" size="small" @click.prevent="deleteStudent(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="query.currentPage"
          :page-size="query.pageSize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="studentDialog"
      :title="studentDialogTitle"
      destroy-on-close
      width="50%"
      draggable
      :before-close="handleClose"
    >
      <el-form :model="studentForm" ref="studentFormRef" size="small" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="学号:">
              <el-input v-model="studentForm.stuno" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名:">
              <el-input v-model="studentForm.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证编号:">
              <el-input v-model="studentForm.cardID" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族:">
              <el-select  style="width:100%;" v-model="studentForm.nation" class="m-2" placeholder="请选择民族">
                <el-option
                  v-for="item in nationList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年龄:">
              <el-input v-model="studentForm.age" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别:">
              <el-input v-model="studentForm.sex" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学院编号:">
              <el-input v-model="studentForm.collegeno" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学院名称:">
              <el-input v-model="studentForm.collegename" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="年级编号:">
              <el-input v-model="studentForm.gradeno" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级名称:">
              <el-input v-model="studentForm.gradename" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班级编号:">
              <el-input v-model="studentForm.classno" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级名称:">
              <el-input v-model="studentForm.classname" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话:">
              <el-input v-model="studentForm.phoneNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱:">
              <el-input v-model="studentForm.email" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地址:">
              <el-input v-model="studentForm.address" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input v-model="studentForm.remark" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="footer-button">
          <el-button style="margin-right:50px;" color="#626aef" @click="saveMethod()">保存</el-button>
          <el-button color="#626aef" plain @click="returnMethod()">返回</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reqGetStudentList } from '@/models/requestModel'
import { resGetStudentList, resStudent } from '@/models/responseModel'
import { User, Nation } from '@/models/Utils'
import { getStudentList } from '@/api/student'
import { reactive, ref } from 'vue'
import { fa } from 'element-plus/lib/locale'
const studentFormRef = ref()
const studentDialog = ref<boolean>(false)
const tableData = ref<resStudent[]>([])
const total = ref<number>(0)
const studentDialogTitle = ref<string>('新增学生')
const query = reactive<reqGetStudentList>({
  queryString: '',
  pageSize: 10,
  currentPage: 1
})
const returnMethod = () => {
  studentDialog.value = false
}
const saveMethod = () => {
  studentDialog.value = false
}

const nationList = reactive<Nation []>([{
  label: '汉族',
  value: '汉族'
}, {
  label: '壮族',
  value: '壮族'
}, {
  label: '满族',
  value: '满族'
}, {
  label: '回族',
  value: '回族'
}, {
  label: '苗族',
  value: '苗族'
}, {
  label: '维吾尔族',
  value: '维吾尔族'
}, {
  label: '土家族',
  value: '土家族'
}, {
  label: '彝族',
  value: '彝族'
}, {
  label: '蒙古族',
  value: '蒙古族'
}, {
  label: '藏族',
  value: '藏族'
}, {
  label: '侗族',
  value: '侗族'
}, {
  label: '瑶族',
  value: '瑶族'
}, {
  label: '朝鲜族',
  value: '朝鲜族'
}, {
  label: '白族',
  value: '白族'
}, {
  label: '哈尼族',
  value: '哈尼族'
}, {
  label: '哈萨克族',
  value: '哈萨克族'
}, {
  label: '黎族',
  value: '黎族'
}, {
  label: '傣族',
  value: '傣族'
}, {
  label: '畲族',
  value: '畲族'
}, {
  label: '傈僳族',
  value: '傈僳族'
}, {
  label: '仡佬族',
  value: '仡佬族'
}, {
  label: '高山族',
  value: '高山族'
}, {
  label: '拉祜族',
  value: '拉祜族'
}, {
  label: '水族',
  value: '水族'
}, {
  label: '佤族',
  value: '佤族'
}, {
  label: '纳西族',
  value: '纳西族'
}, {
  label: '拉祜族',
  value: '拉祜族'
}, {
  label: '羌族',
  value: '羌族'
}, {
  label: '土族',
  value: '土族'
}, {
  label: '仫佬族',
  value: '仫佬族'
}, {
  label: '锡伯族',
  value: '锡伯族'
}, {
  label: '柯尔克孜族',
  value: '柯尔克孜族'
}, {
  label: '达斡尔族',
  value: '达斡尔族'
}, {
  label: '景颇族',
  value: '景颇族'
}, {
  label: '毛南族',
  value: '毛南族'
}, {
  label: '撒拉族',
  value: '撒拉族'
}, {
  label: '布朗族',
  value: '布朗族'
}, {
  label: '塔吉克族',
  value: '塔吉克族'
}, {
  label: '景颇族',
  value: '景颇族'
}, {
  label: '阿昌族',
  value: '阿昌族'
}, {
  label: '普米族',
  value: '普米族'
}, {
  label: '鄂温克族',
  value: '鄂温克族'
}, {
  label: '怒族',
  value: '怒族'
}, {
  label: '京族',
  value: '京族'
}, {
  label: '基诺族',
  value: '基诺族'
}, {
  label: '德昂族',
  value: '德昂族'
}, {
  label: '保安族',
  value: '保安族'
}, {
  label: '俄罗斯族',
  value: '俄罗斯族'
}, {
  label: '裕固族',
  value: '裕固族'
}, {
  label: '乌孜别克族',
  value: '乌孜别克族'
}, {
  label: '门巴族',
  value: '门巴族'
}, {
  label: '独龙族',
  value: '独龙族'
}, {
  label: '塔塔尔族',
  value: '塔塔尔族'
}, {
  label: '赫哲族',
  value: '赫哲族'
}, {
  label: '珞巴族',
  value: '珞巴族'
}])
const restStudentFormRef = () => {
  studentFormRef.value?.resetFields()
}
const studentForm = reactive<resStudent>({
  address: '',
  age: null,
  birthday: '',
  cardID: '',
  classname: '',
  classno: '',
  collegename: '',
  collegeno: '',
  courseno: '',
  email: '',
  gradename: '',
  gradeno: '',
  id: '',
  name: '',
  nation: '',
  password: '',
  phoneNumber: '',
  remark: '',
  sex: '',
  stuno: ''
})
const onSubmit = () => {
  console.log('submit!')
}
const deleteStudent = (row: resStudent) => {
  console.log(row)
}
const addStudent = () => {
  studentDialogTitle.value = '新增学生信息'
  studentDialog.value = true
}
const editStudent = (row: resStudent) => {
  studentDialogTitle.value = '编辑学生信息'
  studentForm.address = row.address
  studentForm.age = row.age
  studentForm.birthday = row.birthday
  studentForm.cardID = row.cardID
  studentForm.classname = row.classname
  studentForm.classno = row
  studentForm.collegename = row.collegename =
  studentForm.collegeno = row.collegeno
  studentForm.courseno = row.courseno
  studentForm.email = row.email
  studentForm.gradename = row.gradename
  studentForm.gradeno = row.gradeno
  studentForm.id = row.id
  studentForm.name = row.name
  studentForm.nation = row.nation
  studentForm.password = row.password
  studentForm.phoneNumber = row.phoneNumber
  studentForm.remark = row.remark
  studentForm.sex = row.sex
  studentForm.stuno = row.stuno
  studentDialog.value = true
}
const seachStudent = () => {
  getStudentListMethod()
}
const getStudentListMethod = () => {
  getStudentList(query).then((res: any) => {
    tableData.value = res.listData
    total.value = res.totalCount
    console.log(tableData, 888888)
  })
}
const handleSizeChange = (val: number) => {
  query.pageSize = val
  getStudentListMethod()
}
const handleCurrentChange = (val: number) => {
  query.currentPage = val
  getStudentListMethod()
}
const handleClose = () => {
  studentDialog.value = false
  console.log(111111)
}
getStudentListMethod()
</script>

<style lang="less" scoped>
.student-container {
  width: 100%;
  height: 100%;
}
.student-head {
  margin-top: 10px;
  margin-left: 10px;
}
.student-add {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.footer-button {
  display: flex;
  justify-content: center;
  width: 100%;
}
</style>

九、后端代码目录

十、mybatiis配置

package com.studentservice.config;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class MybatisConfig {
    private static String resource = "mybatis.xml";
    private static InputStream inputStream;
    private static SqlSessionFactory sqlSessionFactory;
    static {
        try {
            inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static SqlSession getSSqlSession() {
        return sqlSessionFactory.openSession();
    }
}

如需要源码请加2777255072，希望本博客对你有所帮助，谢谢双击点赞！