0
点赞
收藏
分享

微信扫一扫

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

小铺有酒一两不够 2024-09-26 阅读 18

在现代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 架构有所帮助!

举报

相关推荐

0 条评论