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

Question

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

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

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

Answer 1

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

1. 您可以在 Flask 应用程序中创建名为 client 的文件夹，并将所有 Vue 项目移动到该文件夹​​。

2. 在客户端文件夹（Vue App）中，在vue.config.js文件中添加outputDir参数，如下

const path = require('path');

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

1. 要在 Flask 应用程序中创建 dist 文件夹以提供服务，请转到客户端文件夹并根据您的包管理器运行 npm run build 或 yarn build。

2. 在 run.py 文件中，添加此代码以提供 Vue 应用程序

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 Application 的应用程序配置进行更改，但我认为它可以为您提供思路。

查看this article 了解更多信息。