一站式网上办事大厅

小明：你好，李老师！我最近在学习关于大学网上办事大厅的项目，想请教一下师范大学是怎么设计请假系统的？

李老师：你好，小明！很高兴你对这个感兴趣。师范大学的请假系统是基于Web开发的，主要使用了Spring Boot框架和MySQL数据库，前端用的是Vue.js。整个系统的目标是让师生能够方便地在线提交、审批和查看请假申请。

小明：听起来挺复杂的，能不能给我讲讲具体的实现步骤？还有相关的代码吗？

李老师：当然可以。首先，我们需要设计一个数据库表来存储请假信息。比如，学生ID、请假类型、开始时间、结束时间、请假原因、审批状态等字段。下面是一个简单的SQL语句示例：

CREATE TABLE leave_request (
    id INT PRIMARY KEY AUTO_INCREMENT,
    student_id VARCHAR(20) NOT NULL,
    leave_type VARCHAR(50) NOT NULL,
    start_date DATE NOT NULL,
    end_date DATE NOT NULL,
    reason TEXT,
    status ENUM('pending', 'approved', 'rejected') DEFAULT 'pending'
);

小明：那后端怎么处理这些数据呢？有没有具体的Java代码示例？

李老师：好的，我们用Spring Boot来搭建后端服务。这里有一个简单的Controller类，用于接收请假请求并保存到数据库中：

@RestController
@RequestMapping("/api/leave")
public class LeaveController {

    @Autowired
    private LeaveService leaveService;

    @PostMapping("/submit")
    public ResponseEntity submitLeave(@RequestBody LeaveRequest request) {
        try {
            leaveService.submitLeave(request);
            return ResponseEntity.ok("请假申请已提交");
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("提交失败");
        }
    }

    @GetMapping("/list")
    public ResponseEntity> getLeaveList() {
        List requests = leaveService.getLeaveRequests();
        return ResponseEntity.ok(requests);
    }
}

小明：那前端部分呢？是不是用Vue.js写的？能给我看看代码吗？

李老师：是的，前端用的是Vue.js，我们可以通过Axios向后端发送请求。下面是一个简单的Vue组件，用于提交请假申请：

<template>
  <div>
    <h2>请假申请</h2>
    <form @submit.prevent="submitLeave">
      <label>学生ID：<input v-model="leave.studentId" /></label>
      <label>请假类型：<select v-model="leave.leaveType">
        <option value="病假">病假</option>
        <option value="事假">事假</option>
        <option value="公假">公假</option>
      </select></label>
      <label>开始时间：<input type="date" v-model="leave.startDate" /></label>
      <label>结束时间：<input type="date" v-model="leave.endDate" /></label>
      <label>请假原因：<textarea v-model="leave.reason"></textarea></label>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leave: {
        studentId: '',
        leaveType: '',
        startDate: '',
        endDate: '',
        reason: ''
      }
    };
  },
  methods: {
    async submitLeave() {
      const response = await this.$axios.post('/api/leave/submit', this.leave);
      alert(response.data);
    }
  }
};
</script>

小明：这样看起来确实很直观。那审批流程是怎么实现的呢？是不是需要管理员登录后才能处理？

李老师：没错，审批流程需要管理员权限。我们通常会设置一个后台管理页面，管理员可以查看所有未处理的请假申请，并进行批准或拒绝。这里是一个简单的审批接口示例：

@PutMapping("/approve/{id}")
public ResponseEntity approveLeave(@PathVariable Long id) {
    try {
        leaveService.approveLeave(id);
        return ResponseEntity.ok("审批成功");
    } catch (Exception e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("审批失败");
    }
}

@PutMapping("/reject/{id}")
public ResponseEntity rejectLeave(@PathVariable Long id) {
    try {
        leaveService.rejectLeave(id);
        return ResponseEntity.ok("已驳回");
    } catch (Exception e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("操作失败");
    }
}

小明：那前端怎么展示审批结果呢？是不是要根据状态显示不同的信息？

李老师：是的，前端可以根据请假状态显示不同的提示信息。例如，如果状态是“pending”，就显示“等待审批”；如果是“approved”，就显示“已批准”；如果是“rejected”，就显示“已被驳回”。下面是一个简单的条件渲染示例：

<div>
  <span v-if="request.status === 'pending'">等待审批已批准

protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
            .antMatchers("/api/leave/**").authenticated()
            .antMatchers("/admin/**").hasRole("ADMIN")
            .anyRequest().permitAll()
        .and()
        .formLogin();
}