我应该如何组织代码的后端和前端? [英] How should I organize the backend and frontend of my code?

问题描述

我有一个项目，我为后端(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.

查看这篇文章 了解更多.

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