基于Vue3+Spring Boot+Mybatis前后段分离的师生双选系统

前端：

vue3+element-plus+Axios+Vite

后端：

SpringBoot2+mybatis+maven

数据库：

Mysql8.0+

前端代码样例展示：

实现登录：

<template>
  <div class="login">
    <div class="div_inner">
        <!-- <div class="div_left" >
            <img src="../assets/login.png" alt="" style="width: 100%;">
        </div> -->
        <div class="div_right">
            <el-form :model="form" :rules="rules" ref="loginRef" label-position="top">
                <h3 class="margin-auto">登录</h3>
                <el-form-item label="用户名：" prop="username" >
                    <el-input v-model="form.username" placeholder="手机号" :suffix-icon="EditPen"/>
                </el-form-item>
                <el-form-item label="密码：" prop="userPassword">
                    <el-input v-model="form.userPassword" show-password placeholder="6-10位任意字母+数字组合" />
                </el-form-item>
                <el-form-item label="验证码：" prop="code" style="width: 60%;">
                    <div style="display: flex;">
                        <el-input v-model="form.code" placeholder="验证码" :suffix-icon="EditPen" style="width: 200px;"/>
                        <div>
                            <ValidCode @getCode="getNewCode"/>
                        </div>
                    </div>
                </el-form-item>
                <!-- 角色 -->
                <el-form-item label="角色">
                    <el-radio-group v-model="form.role">
                        <el-radio value="1">学生</el-radio>
                        <el-radio value="2">老师</el-radio>
                        <el-radio value="3">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width: 300px;" @click="onSubmit" :loading="isLoading">登录</el-button>
                    <!-- <el-button type="primary" @click="regist">注册</el-button> -->
                </el-form-item>
                <div style="display: flex;font-size: small">
                    <div style="flex: 1;">还没有账号？请<span style="color: #409eff;cursor: pointer;" @click="regist">注册</span></div>
                    <div style="flex: 1;text-align: right;"><span style="color: #409eff;cursor: pointer;" @click="dialogFormVisible = true">忘记密码？</span></div>
                </div>
        </el-form>
        </div>
    </div>
    <div>
        <el-dialog v-model="dialogFormVisible" title="找回密码" width="500">
            <el-form :model="forgetUserform">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="forgetUserform.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="forgetUserform.name" autocomplete="off" />
            </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="resetPassword">
                确认
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { reactive, ref } from "vue"
import { View,Hide,EditPen } from '@element-plus/icons-vue'
import request from "../utils/request.js"
import {useRouter} from 'vue-router'
import ValidCode from './ValidCode.vue'

const router = useRouter()
//定义是否登录加载中
const isLoading = ref(false)
const showPassword = ref(false)
let code = ref('')

const dialogFormVisible = ref(false)
function handleIconClick(){  
  showPassword.value = !showPassword.value;  
}
const form = reactive(
    {
        username:'',
        userPassword:'',
        role:'1',
        code:''
    }
)
const forgetUserform = reactive(
    {

    }
)
const pCode = ref('')
//获取组件验证码
const getNewCode = (code) => {
    //console.log("组件验证码："+code.toLowerCase())
    //不区分大小写
    pCode.value = code.toLowerCase()
    //console.log("验证码pCode："+pCode.value)
}
//校验验证码
const validatePass2 = (rule, value, callback) => {
    if(value === ''){
        callback(new Error('请输入验证码'))
    }else if(value.toLowerCase() != pCode.value){
        callback(new Error('验证码错误'))
    }else{
        callback()
    }
}
//定义表单规则
const rules = {  
      username: [  
        { 
            required: true, message: '请输入手机号', trigger: 'blur' 
        } ,
        {  
            pattern: /^1[3456789]\d{9}$/, // 假设的手机号正则表达式  
            message: '请输入正确的手机号格式',  
            trigger: 'blur'  
        } 
      ],
      userPassword:[
        { 
            required: true, message: '请输入密码', trigger: 'blur' 
        } ,
        {  
            pattern: /^[a-zA-Z0-9]{6,10}$/,   
            message: '请输入正确的密码格式：6-10位任意字母+数字组合',  
            trigger: 'blur'  
        }
      ],
      code:[
        {
            validator: validatePass2,
            trigger:'blur'
        }
      ]
    }


//登录
const onSubmit = async () => {
    isLoading.value = true
    //console.log("验证码pCode："+pCode.value)
    try{
        //console.log('开始验证登录')
        await request(
            {
                method:'post',
                url:'/login',
                data:form
            }
        ).then(
            res => {
                console.log(res)
                if(res.code == '200'){//登录成功
                    localStorage.setItem("username", res.data.username)
                    localStorage.setItem("role", res.data.role)
                    localStorage.setItem("token",res.data.token)
                    localStorage.setItem("userData",JSON.stringify(res.data))
                    router.push('/toHome')
                }else if(res.code == '403'){
                    ElMessage.error("登录信息有误")
                    router.push('/login')
                }else if(res.code == '401'){
                    ElMessage.error("用户登录失败")
                    router.push('/login')
                }else{
                    ElMessage.error("系统错误，用户登录失败")
                    router.push('/login')
                }
            }
        )         
    }catch(err){
        console.log(err.message)
        isLoading.value = false
        // 如果验证失败，将执行此处的代码  
        ElMessage.error('表单校验失败:')
    }
    isLoading.value = false
}
//注册
const regist = () => {
    router.push('/regist')
}
</script>

<style scoped >
.div_inner{
    display: flex;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    width: 30%;
    height: 58vh;
    z-index: 1; 
}
.div_right{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}
.div_left{
    display: flex;
    flex: 1;
}
.login{
    background-image: url('../assets/backgroud-login.jpg');
    background-color: #0f9876;  
    background-size: cover;  
    /* 背景图片不重复 */  
    background-repeat: no-repeat;  
    /* 背景图片始终位于元素的中心 */  
    background-position: left;

    height: 100vh;
    display: flex;
    align-items: center;
    justify-content:center;
}
.margin-auto {  
  margin-left: 40%;  
  margin-right: 30px;  
}
/* .el-form{
    width: 300px;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    .el-form-item{
        margin-top: 20px;
        width: 95%;
    }
}
.margin-auto {  
  margin-left: 40%;  
  margin-right: auto;  
} */
</style>

后端样例展示：

public class StudentController {

    @Autowired
    private StudentService studentService;
    @Autowired
    private TeacherService teacherService;
    @Autowired
    private SuggestionService suggestionService;
    /**
    * @Description: 根据姓名模糊查询
    * @Param: [username]
    * @return: com.example.springboot.common.Result
    * @Author: liu_xwei
    * @Date: 2024/4/16
    */
    @GetMapping("/select/{name}")
    public Result selectByName(@PathVariable String name){
        List<Student> studentList = new ArrayList<>();
        try {

            studentList = studentService.selectByName(name);
        }catch (Exception e){
            e.printStackTrace();
            return Result.error("student模糊查询出错");
        }
        return Result.success(studentList);
    }
    /**
     * @Description: 分页模糊查询
     * @Param: [name, pageNum 当前页码, pageSize 分页数目, userNo]
     * @return: com.example.springboot.common.Result
     * @Author: liu_xwei
     * @Date: 2024/4/15
     */
    @GetMapping("/selectPage")
    public Result selectByPage(@RequestParam String name,
                               @RequestParam Integer pageNum,
                               @RequestParam Integer pageSize
    ){
        //System.out.println(pageNum);
        Page<Student> userPage = new Page<Student>();
        try {

            userPage = studentService.selectPage(name, pageNum, pageSize);
        }catch (Exception e){
            e.printStackTrace();
            return Result.error("student分页模糊查询出错");
        }
        studentService.selectPage(name, pageNum, pageSize);

        return Result.success(userPage);
    }
    /**
    * @Description: 查询导师名下已经提交审批的学生
    * @Param: [name, pageNum, pageSize]
    * @return: com.example.springboot.common.Result
    * @Author: liu_xwei
    * @Date: 2024/4/20
    */
    @GetMapping("/selectByState")
    public Result selectByState(@RequestParam String name,
                               @RequestParam Integer pageNum,
                               @RequestParam Integer pageSize,
                                 @RequestParam String uid
    ){
        Page<Student> userPage = new Page<Student>();
        Teacher teacher = new Teacher();
        List<Suggestion> sduIdList = new ArrayList<Suggestion>();
        try {
            //根据uid获取当前导师的tutorId 根据tutorId筛选学生
            teacher = teacherService.selectUuid(uid).get(0);
            //已提交申请 未审批的学生学号
            sduIdList = suggestionService.selectByTutorId(teacher.getTutorId());
            //System.out.println("=============="+sduIdList);


            userPage = studentService.selectByState(name, pageNum, pageSize);
            //获取查询数据
            Integer total = userPage.getTotal();
            List<Student> studentList= userPage.getList();
            //重新封装过滤后的学生数据 该导师下的未审批的学生
            userPage.setTotal(sduIdList.size());
            // Step 1: 提取学生ID
            Set<String> validStuIds = sduIdList.stream()
                    .map(Suggestion::getStuId)
                    .collect(Collectors.toSet());

            // Step 2: 过滤学生列表
            List<Student> studentList1 = studentList.stream()
                    .filter(student -> validStuIds.contains(student.getSduId()))
                    .collect(Collectors.toList());
            System.out.println("==========="+studentList1);
            userPage.setList(studentList1);
            userPage.setName(teacher.getName());
            userPage.setTutorId(teacher.getTutorId());
        }catch (Exception e){
            e.printStackTrace();
            return Result.error("student分页模糊查询出错");
        }
        studentService.selectPage(name, pageNum, pageSize);

        return Result.success(userPage);
    }
    @PostMapping("/add")
    @Transactional
    public Result add(@RequestBody Student student){

        try {

            studentService.insertUser(student);
        }catch (Exception e){
            e.printStackTrace();
            return Result.error("student表数据插入错误");
        }
        return Result.success();
    }
    /**
     * @Description: 修改
     * @Param: [user]
     * @return: com.example.springboot.common.Result
     * @Author: liu_xwei
     * @Date: 2024/4/14
     */
    @PutMapping("/update")
    @Transactional
    public Result update(@RequestBody Student student){

        try {

            studentService.updateUser(student);
        }catch (Exception e){
            e.printStackTrace();
            return Result.error("student表数据更新错误");
        }
        return Result.success();
    }
    /**根据uid精确查询
    * @Description:
    * @Param: [name]
    * @return: com.example.springboot.common.Result
    * @Author: liu_xwei
    * @Date: 2024/4/17
    */
    @PostMapping("/selectSduId")
    public Result selectByUId(@RequestBody Student student){
        List<Student> studentList = new ArrayList<Student>();
        try{
            studentList = studentService.selectByUId(student.getUid());
        }catch (Exception e){
            e.printStackTrace();
            return Result.error("student根据uid精确查询出错");
        }
        if(studentList.size() == 0){//没有用户
            return Result.success();
        }
        return Result.success(studentList);
    }
    /**
    * @Description: 导师查询名下审批学生信息
    * @Param: [name, pageNum, pageSize]
    * @return: com.example.springboot.common.Result
    * @Author: liu_xwei
    * @Date: 2024/4/20
    */
    @GetMapping("/queryApplication")
    public Result queryApplication(@RequestParam String name,
                                   @RequestParam Integer pageNum,
                                   @RequestParam Integer pageSize,
                                   @RequestParam String uid){

        Page<Student> studentPage = new Page<Student>();
        try {
            //首先根据uid获取导师id
            Teacher teacher = teacherService.selectUuid(uid).get(0);
            String tutorId = teacher.getTutorId();
            studentPage = studentService.selectPageByTid(name,pageNum,pageSize,tutorId);

        }catch (Exception e){
            e.printStackTrace();
            return Result.error("查询审批数据失败","500");
        }

        return Result.success(studentPage);
    }
    public Result selectByNoState(){

        return Result.success();
    }
}

需要源码的加QQ2669088427