vue-admin-flask-example 项目教程

1. 项目目录结构及介绍

vue-admin-flask-example/
├── build/
├── config/
├── dist/
├── src/
├── static/
├── .babelrc
├── .gitignore
├── Dockerfile
├── LICENSE
├── README.md
├── _config.yml
├── data.sqlite
├── docker-compose.yml
├── favicon.ico
├── index.html
├── manage.py
├── package.json
└── requirements.txt

目录结构介绍

• build/: 存放构建相关的配置文件。
• config/: 存放项目的配置文件。
• dist/: 存放打包后的前端文件。
• src/: 存放前端源代码。
• static/: 存放静态资源文件。
• .babelrc: Babel 配置文件。
• .gitignore: Git 忽略文件配置。
• Dockerfile: Docker 构建文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• _config.yml: 项目配置文件。
• data.sqlite: SQLite 数据库文件。
• docker-compose.yml: Docker Compose 配置文件。
• favicon.ico: 网站图标文件。
• index.html: 前端入口文件。
• manage.py: Flask 应用启动文件。
• package.json: 前端项目依赖配置文件。
• requirements.txt: Python 依赖配置文件。

2. 项目启动文件介绍

manage.py

manage.py 是 Flask 应用的启动文件，负责启动后端服务。以下是该文件的主要内容：

from flask import Flask, jsonify
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
CORS(app)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.sqlite'
db = SQLAlchemy(app)

# 路由和视图函数定义
@app.route('/')
def index():
    return "Hello, World!"

if __name__ == '__main__':
    app.run(debug=True)

启动步骤

1. 安装 Python 依赖：

   pip install -r requirements.txt
   

2. 启动 Flask 应用：

   python manage.py
   

3. 项目配置文件介绍

config/ 目录

config/ 目录下存放了项目的配置文件，通常包括开发环境、测试环境和生产环境的配置。

docker-compose.yml

docker-compose.yml 文件用于定义和运行多容器 Docker 应用程序。以下是该文件的主要内容：

version: '3'
services:
  web:
    build: .
    ports:
      - "5000:5000"
    volumes:
      - .:/code
    environment:
      FLASK_ENV: development

package.json

package.json 文件用于管理前端项目的依赖和脚本。以下是该文件的主要内容：

{
  "name": "vue-admin-flask-example",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

requirements.txt

requirements.txt 文件用于管理 Python 项目的依赖。以下是该文件的主要内容：

Flask==1.1.2
Flask-CORS==3.0.8
Flask-SQLAlchemy==2.4.1

通过以上配置文件，可以方便地管理项目的依赖和环境配置。