帮我用spring boot写一个学生宿舍管理系统前后端分离企业级开发

好的，下面是一个简单的学生宿舍管理系统的前后端分离企业级开发实现。

## 后端

### 技术栈

- Spring Boot
- Spring Security
- MyBatis
- MySQL
- Swagger2

### 实现步骤

1. 创建 Spring Boot 项目，并添加以下依赖：

<dependencies>
    <!-- Spring Boot -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- Spring Security -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>

    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.3</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.2.6</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>

    <!-- Swagger2 -->
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger2</artifactId>
        <version>2.9.2</version>
    </dependency>
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger-ui</artifactId>
        <version>2.9.2</version>
    </dependency>
</dependencies>

2. 创建数据库，并添加数据表。

3. 创建实体类、Mapper 接口和 XML 文件，并配置 MyBatis。

4. 配置 Spring Security，实现登录和权限控制。

5. 集成 Swagger2，生成 API 文档。

### 示例代码

由于篇幅原因，这里只给出一个示例代码文件：

- `Student.java`：学生实体类。

public class Student {
    private Integer id;
    private String name;
    private Integer gender;
    private String phone;
    private Integer roomId;

    // 省略 getter 和 setter 方法
}

## 前端

### 技术栈

- Vue.js
- Element UI
- Axios

### 实现步骤

1. 创建 Vue.js 项目，并添加以下依赖：

"dependencies": {
    "axios": "^0.21.1",
    "element-ui": "^2.15.1",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
}

2. 创建页面组件和路由。

3. 使用 Element UI 组件，实现页面布局和样式。

4. 使用 Axios，与后端 API 进行交互。

### 示例代码

由于篇幅原因，这里只给出一个示例代码文件：

- `StudentList.vue`：学生列表页面组件。

<template>
  <div>
    <el-table :data="students" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="roomName" label="宿舍"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      students: []
    }
  },
  mounted() {
    axios.get('/api/students').then(response => {
      this.students = response.data
    }).catch(error => {
      console.error(error)
    })
  }
}
</script>