当前位置：首页 > news >正文

基于 Flask 和 Vue 的 MVC 分层结构详解

news 2025/5/14 14:05:11

在现代web应用开发中，MVC（Model-View-Controller）架构是一种常用的设计模式。它将应用程序分为三部分：模型（Model）、视图（View）和控制器（Controller），以实现清晰的职责分离和代码的可维护性。今天，我们将详细解释如何在 Flask 和 Vue 的组合中实现这一架构。

一、什么是 MVC 分层结构

Model（模型）: 负责数据的表示和处理，通常与数据库交互。
View（视图）: 负责用户界面的展示，即用户看到的部分。
Controller（控制器）: 负责处理业务逻辑，协调模型和视图之间的交互。

在 Flask + Vue 组合中，Flask 通常负责后端部分（主要是Model和Controller），而 Vue 负责前端部分（主要是View）。

二、项目结构

让我们先来看一个典型的 Flask + Vue 项目结构：

my_project/
│
├── backend/
│   ├── app/
│   │   ├── __init__.py
│   │   ├── models.py
│   │   ├── views.py
│   │   ├── controllers/
│   │   │   ├── __init__.py
│   │   │   ├── user_controller.py
│   ├── run.py
│   ├── config.py
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── views/
│   │   ├── router/
│   │   ├── store/
│   │   ├── App.vue
│   │   ├── main.js
│   ├── package.json
│
├── .gitignore
├── README.md
└── requirements.txt

三、Flask 中的 MVC 实现

1. Model（模型）

在 Flask 中，模型通常由 SQLAlchemy 或其他 ORM （对象关系映射）库实现。模型定义数据库的表结构及其交互方式。

# models.py in app
from flask_sqlalchemy import SQLAlchemydb = SQLAlchemy()class User(db.Model):id = db.Column(db.Integer, primary_key=True)username = db.Column(db.String(80), unique=True, nullable=False)email = db.Column(db.String(120), unique=True, nullable=False)def __repr__(self):return f'<User {self.username}>'

2. Controller（控制器）

控制器处理客户端的请求，执行应用逻辑，并返回响应。在 Flask 中，控制器通常是视图函数或蓝图（Blueprint）模块。

# user_controller.py in app/controllers
from flask import Blueprint, jsonify, request
from app.models import User, dbuser_bp = Blueprint('user_bp', __name__)@user_bp.route('/users', methods=['GET'])
def get_users():users = User.query.all()return jsonify([user.username for user in users])@user_bp.route('/users', methods=['POST'])
def create_user():data = request.get_json()new_user = User(username=data['username'], email=data['email'])db.session.add(new_user)db.session.commit()return jsonify({'message': 'User created'}), 201

3. View（视图）

在 Flask 中，视图通常指的是向前端提供的API端点，与前端的 Vue 应用程序交互。

# views.py in app
from flask import Flask
from app.models import db
from app.controllers.user_controller import user_bpdef create_app():app = Flask(__name__)app.config.from_object('config.Config')db.init_app(app)app.register_blueprint(user_bp, url_prefix='/api')return app

# run.py in backend
from app.views import create_appapp = create_app()if __name__ == '__main__':app.run(debug=True)

四、Vue 中的 MVC 实现

1. Model（模型）

在 Vue 中，模型通常由 Vuex 管理状态，Vuex 是 Vue 的状态管理库。

// store/index.js in frontend/src
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';Vue.use(Vuex);export default new Vuex.Store({state: {users: []},mutations: {SET_USERS(state, users) {state.users = users;}},actions: {async fetchUsers({ commit }) {const response = await axios.get('/api/users');commit('SET_USERS', response.data);}},getters: {getUsers: state => state.users}
});

2. View（视图）

视图由 Vue 组件组成，这些组件负责展示用户界面。

// components/UserList.vue in frontend/src/components
<template><div><h1>User List</h1><ul><li v-for="user in users" :key="user">{{ user }}</li></ul></div>
</template><script>
export default {computed: {users() {return this.$store.getters.getUsers;}},created() {this.$store.dispatch('fetchUsers');}
};
</script>

3. Controller（控制器）

在 Vue 中，路由和组件的交互可以看作是控制器部分。Vue Router 负责页面导航和组件的加载。

// router/index.js in frontend/src/router
import Vue from 'vue';
import Router from 'vue-router';
import UserList from '../components/UserList.vue';Vue.use(Router);export default new Router({routes: [{path: '/users',name: 'UserList',component: UserList}]
});