我应该如何组织代码的后端和前端？

Question

我有一个项目，我为后端 (Flask / Python) 和前端 (Vue) 编写了很多代码。到目前为止，它们一直是单独的文件夹/Github 存储库。

我想知道在 (1) Github 存储库和 (2) 文件结构方面将它们组合在一起的典型做法是什么。前端依赖于后端的一些功能，所以它们需要以某种方式链接起来，但是由于项目的两个方面的代码太多，我认为将它们组合在一个 Github 存储库/文件结构。

谁能提供一些建议或资源？

Answer 1

如果您想为后端和前端应用程序保留一个 Github 存储库，我可以建议执行以下步骤

您可以在 Flask 应用程序中创建名为 client 的文件夹，并将所有 Vue 项目移动到该文件夹。
在客户端文件夹（Vue App）中，在vue.config.js文件中添加outputDir参数作为关注

const path = require('path');

module.exports = {
  outputDir: path.resolve(__dirname, '../dist'),
}

要在 Flask 应用程序中创建 dist 文件夹以提供服务，请转到客户端文件夹并运行 npm 运行 build 或yarn build 取决于你的包管理器。
在run.py文件中，添加这段代码服务于Vue App

from flask import Flask, render_template
app = Flask(__name__,
            static_folder = "./dist",
            template_folder = "./dist")

@app.route('/')
def index():
    return render_template("index.html")

构造可以根据您的 Flask 应用程序配置而改变，但我认为它可以给您思路。

查看 this article 了解更多信息。

我应该如何组织代码的后端和前端？

How should I organize the backend and frontend of my code?

architecture

design-patterns

software-design