Vue 和 Flask前后端分离_vue和flask前后端分离开发

小蚂蚁开源,探索、发现、分享主流开源技术框架,搭建开源技术社区,共创美好开源生态!

项目介绍

一款 Python 语言基于Flask、Vue、ElementUI、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架,可快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,框架自研了一套个性化的图片上传组件,实现了可插拔的组件式开发方式,同时为了敏捷快速开发,框架特地集成了代码生成器,完全自主研发了自定义后端服务模板和前端模板,可以根据已建好的表结构,可以快速的一键生成整个模块的所有代码和增删改查等等功能业务,真正实现了低代码开发方式,极大的节省了人力成本的同时提高了开发效率,缩短了研发周期,是一款真正意义上实现组件化、可插拔式的敏捷开发框架。

Flask, Vue.js, 和 ElementUI 可以很好地协同工作,实现一个前后端分离的应用。在这种架构中,Flask 作为后端服务器,提供 API 接口,处理数据存储和业务逻辑;Vue.js 作为前端框架,处理用户界面和用户交互;ElementUI 是一套为 Vue.js 实现的桌面端组件库,可以帮助你更快地构建界面。

后端(Flask)

  1. 设置 Flask 项目:创建一个新的 Flask 项目,并安装必要的依赖。
  2. 定义 API 接口:使用 Flask 的路由系统定义 API 接口,例如 /api/users、/api/products 等。
  3. 处理请求和响应:编写处理请求的函数,并根据需要返回 JSON 响应。
  4. 数据库和模型:设置数据库(如 SQLite、MySQL、PostgreSQL),并使用 ORM(如 SQLAlchemy)定义数据模型。
  5. 运行和测试:运行 Flask 开发服务器,并使用工具(如 Postman)测试 API 接口。

前端(Vue.js + ElementUI)

  1. 设置 Vue 项目:使用 Vue CLI 创建一个新的 Vue 项目,并安装 ElementUI。


登录鉴权

from flask import request

from utils import R
from utils.jwts import parse_payload

# 检测是否已登录
def check_login():
    # 自定义忽略URL数组
    ignoreURL = ['/login', '/captcha']
    if request.path not in ignoreURL and request.method != "OPTIONS":
        # 获取浏览器头
        access_token = request.headers.get("Authorization", "")
        # 字符串替换
        access_token = access_token.replace('Bearer ', "")
        # JWT解密
        result = parse_payload(access_token)
        # 结果标识
        code = result['code']
        if code != 0:
            return R.failed(code=401, msg=result['msg'])
        # # 用户ID
        # userId = result['data']['userId']

版权声明

本文章版权归作者所有,未经作者允许禁止任何转载、采集,作者保留一切追究的权利;


案例分享

DjangoAdmin敏捷开发框架