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

查看this article，了解更多信息。

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

1 个答案: