基于Flask和Vue.js的学生宿舍管理系统开发实践-代码聚汇网

基于Flask和Vue.js的学生宿舍管理系统开发实践

FlaskVue.js学生宿舍管理系统

|难度：普通|阅读约 11 分钟

1. 项目概述

这个基于Python Flask和Vue.js开发的学生宿舍管理系统，是我在实际工作中为某高校开发的一个完整解决方案。系统采用前后端分离架构，后端使用Flask框架提供RESTful API，前端采用Vue.js构建响应式界面，数据库选用MySQL进行数据存储。整套系统从需求分析到部署上线共耗时3个月，目前已在生产环境稳定运行1年多。

提示：这个项目特别适合高校信息化建设、计算机专业学生毕业设计，以及想学习全栈开发的开发者参考。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 系统架构设计

2.1 技术选型考量

选择Flask+Vue的组合主要基于以下考虑：

Flask轻量灵活，适合快速开发中小型Web应用
Vue.js渐进式框架，学习曲线平缓，组件化开发效率高
RESTful API接口规范，前后端完全解耦
MySQL关系型数据库成熟稳定，适合管理结构化数据

2.2 系统功能模块

系统主要包含以下核心功能模块：

学生信息管理：学籍信息录入、查询、修改
宿舍分配管理：自动/手动分配宿舍床位
访客登记系统：访客信息记录与查询
报修管理：在线提交、处理维修申请
水电费管理：用量记录、费用计算
管理员后台：系统配置、权限管理

3. 核心功能实现

3.1 后端API开发

使用Flask-SQLAlchemy进行数据库操作，典型的学生模型定义如下：

python复制class Student(db.Model):
    __tablename__ = 'students'
    id = db.Column(db.Integer, primary_key=True)
    student_id = db.Column(db.String(20), unique=True, nullable=False)
    name = db.Column(db.String(50), nullable=False)
    gender = db.Column(db.String(10))
    college = db.Column(db.String(100))
    major = db.Column(db.String(100))
    class_name = db.Column(db.String(50))
    phone = db.Column(db.String(20))
    dorm_id = db.Column(db.Integer, db.ForeignKey('dorms.id'))
    bed_number = db.Column(db.Integer)
    
    def to_dict(self):
        return {c.name: getattr(self, c.name) for c in self.__table__.columns}

3.2 前端Vue组件开发

宿舍分配组件关键代码示例：

javascript复制<template>
  <div class="dorm-assign">
    <el-table :data="students" style="width: 100%">
      <el-table-column prop="student_id" label="学号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="showAssignDialog(scope.row)">
            分配宿舍
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-dialog title="宿舍分配" v-model="dialogVisible">
      <!-- 宿舍选择表单 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [],
      dialogVisible: false
    }
  },
  methods: {
    async loadStudents() {
      const res = await this.$http.get('/api/students/unassigned')
      this.students = res.data
    },
    showAssignDialog(student) {
      this.currentStudent = student
      this.dialogVisible = true
    }
  },
  mounted() {
    this.loadStudents()
  }
}
</script>

4. 数据库设计

4.1 主要数据表结构

表名	字段	类型	说明
students	id	INT	学生ID
	student_id	VARCHAR(20)	学号
	name	VARCHAR(50)	姓名
dorms	id	INT	宿舍ID
	building	VARCHAR(20)	楼栋
	room_number	VARCHAR(10)	房间号
	capacity	INT	床位数量
repairs	id	INT	报修ID
	student_id	INT	关联学生
	description	TEXT	问题描述
	status	VARCHAR(20)	处理状态

4.2 关键关系设计

学生与宿舍：多对一关系
学生与报修：一对多关系
访客与学生：多对一关系

5. 系统部署方案

5.1 开发环境搭建

安装Python 3.8+和Node.js 14+

创建虚拟环境：

bash复制python -m venv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate  # Windows

安装后端依赖：

bash复制pip install flask flask-sqlalchemy flask-cors flask-migrate

安装前端依赖：
```
bash复制cd frontend
npm install
```

5.2 生产环境部署

推荐使用Nginx+Gunicorn方案：

配置Nginx反向代理

使用Gunicorn启动Flask应用：

bash复制gunicorn -w 4 -b 127.0.0.1:5000 app:app

部署Vue项目：
```
bash复制npm run build
```
配置Nginx静态文件服务

6. 开发经验与技巧

6.1 前后端联调要点

使用Postman测试API接口

统一响应格式：

json复制{
  "code": 200,
  "message": "success",
  "data": {}
}

跨域问题解决方案：

python复制from flask_cors import CORS
CORS(app, resources={r"/api/*": {"origins": "*"}})

6.2 性能优化建议

数据库查询优化：
- 使用SQLAlchemy的lazy loading
- 添加适当的索引
前端性能优化：
- 按需加载组件
- 使用Vue的keep-alive缓存组件

API响应缓存：

python复制@app.route('/api/students')
@cache.cached(timeout=60)
def get_students():
    # ...

7. 常见问题解决方案

7.1 数据库连接问题

错误现象：OperationalError: (2003, "Can't connect to MySQL server")

解决方案：

检查MySQL服务是否启动

确认连接配置正确：

python复制app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@localhost/dbname'

确保有足够的权限

7.2 前端路由问题

问题描述：刷新页面后出现404