Skip to content

Latest commit

 

History

History
145 lines (104 loc) · 3.89 KB

README.md

File metadata and controls

145 lines (104 loc) · 3.89 KB

以下是一个适用于 Django、Flask 和 Vue2 前后端分离项目开发模板的 README.md 示例：

# Django + Flask + Vue2 Fullstack Template

This is a project template designed for developing fullstack applications using Django, Flask, and Vue.js (version 2)
with a clear separation between frontend and backend. The project architecture follows modern development practices,
ensuring flexibility, scalability, and maintainability.

## Table of Contents

- [Project Overview](#project-overview)
- [Features](#features)
- [Technologies](#technologies)
- [Getting Started](#getting-started)
- [Backend Setup](#backend-setup)
    - [Django API](#django-api)
    - [Flask API](#flask-api)
- [Frontend Setup](#frontend-setup)
- [Project Structure](#project-structure)
- [Contributing](#contributing)
- [License](#license)

## Project Overview

This project serves as a template to quickly start a fullstack web application using:

- **Django** as the primary backend framework for authentication, ORM, and administration.
- **Flask** for lightweight microservices or specific API endpoints.
- **Vue.js (v2)** for a modular and responsive frontend interface.

By utilizing these frameworks, this template enables the development of complex web applications with clear separation
of concerns between the frontend and backend.

## Features

- Django and Flask both configured as separate backends, allowing flexible API development.
- Vue.js as the frontend framework, structured with single-file components for better modularity.
- Backend and frontend are fully decoupled, with the frontend consuming APIs via RESTful services.
- Configurable and extendable to suit any web application needs.

## Technologies

### Backend:

- **Django**: Full-featured backend for handling core business logic, database interaction, authentication, and an admin
  panel.
- **Flask**: Lightweight framework for building additional APIs or microservices.

### Frontend:

- **Vue.js 2**: Progressive JavaScript framework for building interactive user interfaces.
- **Vue Router**: Frontend routing for seamless navigation.
- **Vuex**: State management for managing global state across the app.
- **Axios**: HTTP client for API communication with Django and Flask backends.

## Getting Started

### Prerequisites

Ensure you have the following installed:

- Python (version 3.11)
- Node.js (version 18)
- npm or yarn (for managing frontend dependencies)
- Virtualenv (optional but recommended for Python environment management)

## Backend Setup

### Django API

1. Navigate to the backend folder:
   ```bash
   cd django_admin

  1. Install dependencies and set up a virtual environment:

    python -m venv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate.bat     # Windows
pip install -r requirements.txt

  2. Apply migrations and start the Django server:

    python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Django will be running at http://localhost:8000.

Flask API

  1. Navigate to the Flask backend folder:

    cd flask_admin

  2. Install dependencies:

    pip install -r requirements.txt

  3. Run the Flask application:

    flask run

Flask will be running at http://localhost:8000.

Frontend Setup

  1. Navigate to the frontend directory:

    cd vue_admin

  2. Install the dependencies:

    npm install  # or yarn install

  3. Start the Vue.js development server:

    npm run serve  # or yarn serve

The Vue frontend will be available at http://localhost:8080.

Contributing

We welcome contributions! Please follow these steps to contribute:

  1. Fork the repository.
  2. Create a new feature branch.
  3. Make your changes.
  4. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.