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

问题描述

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

I have a project and I've written a lot of code for the backend (Flask / Python) and a lot of code for the front end (Vue). Up until now they've been separate folders / Github repos.

我想知道关于(1)Github存储库和(2)文件结构将它们组合在一起的典型方式.前端取决于后端中的某些功能，因此需要以某种方式进行链接，但是由于项目的两个方面都有大量的代码，因此我认为将它们合并到一个Github中可能会让人不知所措存储库/文件结构.

I was wondering what was typical for combining them together with respect to (1) Github repositories and (2) file structure. The front end depends on some functions in the backend, so they'd need to be linked in some way, but since there is so much code for both aspects of the project, I thought it might be overwhelming to just combine them under one Github repository / file structure.

有人可以提供一些建议或资源吗?

Could anyone offer some suggestions or resources?

推荐答案

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

If you want to keep one Github repos for both backend and frontend application I can suggest the steps below

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

1. You can create folder named client inside the Flask application and move all of the Vue project to that folder.

在客户端文件夹(Vue App)中，在 vue.config.js 文件内添加 outputDir 参数，如下所示

In the client folder(Vue App), add outputDir parameter inside vue.config.js file as follows

const path = require('path');

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

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

在 run.py 文件中，添加以下代码以投放Vue App

In the run.py file, add this code to serve 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的应用程序配置进行更改，但我认为它可以为您提供想法.

The constructions can change according to your application configurations of Flask Application but I think it can give you the idea.

查看本文了解更多信息.

这篇关于我应该如何组织代码的后端和前端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！