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

在现代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 SQLAlchemy

db = 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, db

user_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_bp

def 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_app

app = 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
    }
  ]
});

五、整合前后端

1. 运行 Flask 后端：

cd backend
flask run

1. 运行 Vue 前端：

cd frontend
npm install
npm run serve

通过这种方式，Flask 处理后端的 HTTP 请求与数据库交互，而 Vue 负责创建动态、响应式的用户界面。这种组合使得应用架构清晰，前后端开发可独立进行，提高了开发效率和代码的可维护性。

使用 Flask 和 Vue 实现 MVC 分层结构，有助于更好地分离关注点，从而更加高效地开发和维护复杂的 web 应用程序。希望这篇博客对你理解和实现 Flask + Vue 的 MVC 架构有所帮助！