首页
/ vue-admin-flask-example 项目教程

vue-admin-flask-example 项目教程

2024-09-14 16:12:41作者:彭桢灵Jeremy

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

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

热门项目推荐

项目优选

收起
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
610
115
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
286
79
mdmd
✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器:支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性
Vue
111
25
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
60
48
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
45
29
go-stockgo-stock
🦄🦄🦄AI赋能股票分析:自选股行情获取,成本盈亏展示,涨跌报警推送,市场整体/个股情绪分析,K线技术指标分析等。数据全部保留在本地。支持DeepSeek,OpenAI, Ollama,LMStudio,AnythingLLM,硅基流动,火山方舟,阿里云百炼等平台或模型。
Go
1
0
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
205
57
MateChatMateChat
前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。 官网地址:https://matechat.gitcode.com
376
36
RuoYi-VueRuoYi-Vue
🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本
Java
182
44
frogfrog
这是一个人工生命试验项目,最终目标是创建“有自我意识表现”的模拟生命体。
Java
8
0