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

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'),
}

3. 要在Flask应用程序中创建要服务的dist文件夹，请转到客户端文件夹，然后根据软件包管理器运行npm run build或yarn build 。

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

查看这篇文章以了解更多。