Flask+Vue+ElementUI框架基本使用实践教程

已于 2023-07-15 09:51:11 修改
阅读量368 收藏 1
点赞数
文章标签： python flask vue elementui
于 2023-04-22 07:48:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76362680/article/details/130185453
版权

项目介绍

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

项目特点

  • 模块化、松耦合
  • 模块丰富、开箱即用
  • 简洁易用、快速接入
  • 文档详尽、易于维护
  • 自顶向下、体系化设计
  • 统一框架、统一组件、降低选择成本
  • 开发规范、设计模式、代码分层模型
  • 强大便捷的开发工具链
  • 设计为团队及企业使用

集成模块

  • 用户管理：用于维护管理系统的用户，常规信息的维护与账号设置。
  • 角色管理：角色菜单管理与权限分配、设置角色所拥有的菜单权限。
  • 菜单管理：配置系统菜单，操作权限，按钮权限标识等。
  • 职级管理：主要管理用户的职级。
  • 岗位管理：主要管理用户担任职务。
  • 部门管理：配置系统组织机构，树结构展现支持数据权限。
  • 字典管理：对系统中常用的较为固定的数据进行统一维护。
  • 配置管理：对系统的常规配置信息进行维护，网站配置管理功能进行统一维护。
  • 通知公告：系统通知公告信息发布维护。

软件信息

系统演示

版本说明

版本名称版本说明版本地址
Django+Layui混编版采用Django、Layui、MySQL等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Django_Layui
Flask+Layui混编版采用Flask、Layui、MySQL等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Flask_Layui
Tornado+Layui混编版采用Tornado、Layui、MySQL等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Tornado_Layui
Fastapi+Layui混编版采用Fastapi、Layui、MySQL等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Fastapi_Layui
Django+EleVue前后端分离版采用Django、Vue、ElementUI等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Django_EleVue
Flask+EleVue前后端分离版采用Flask、Vue、ElementUI等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Flask_EleVue
Tornado+EleVue前后端分离版采用Tornado、Vue、ElementUI等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Tornado_EleVue
Fastapi+EleVue前后端分离版采用Fastapi、Vue、ElementUI等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Fastapi_EleVue
Django+AntdVue前后端分离版采用Django、Vue、AntDesign等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Django_AntdVue
Flask+AntdVue前后端分离版采用Flask、Vue、AntDesign等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Flask_AntdVue
Tornado+AntdVue前后端分离版采用Tornado、Vue、AntDesign等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Tornado_AntdVue
Fastapi+AntdVue前后端分离版采用Fastapi、Vue、AntDesign等框架研发https://gitee.com/djangoadmin/DjangoAdmin_Fastapi_AntdVue

模块展示

在这里插入图片描述

特别鸣谢

感谢Flask、Vue、ElementUI等优秀开源项目。

版权声明

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

沙拉.伊万卡
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flask+Vue+ElementUI搭建的系统后台框架
一米阳光的博客
04-25 156
一款 Python 语言基于Flask、Vue2.x、ElementUI、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的图片上传组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义后端服务模板和前端模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提高了开发
使用flask+vue+element-ui创建数据管理系统（1）
rraion的博客
12-17 2057
创建vue项目 vue create vue-project 配置如下 不适用默认的vue2或者3，自定义配置 组件选用Babel，Typescript，Router，Linter，Vuex 使用vue2 不使用历史模式路由 使用单独文件存储配置json 引入element-ui npm i element-ui -S 在main.js 里面写入以下内容： 测试路由 添加页面，添加路由，启动界面测试（测试成功） 测试样式 注意 将App.vue的内容全部清空可能导致错误，经测试，至少保留 &
Flask+Vue+ElementUI开源框架推荐
一米阳光的博客
04-18 821
一款 Python 语言基于Flask、Vue2.x、ElementUI、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的图片上传组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义后端服务模板和前端模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提高了开发
Flask+Vue+ElementUI框架企业级后台管理系统
一米阳光的博客
04-25 213
一款 Python 语言基于Flask、Vue2.x、ElementUI、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的图片上传组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义后端服务模板和前端模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提高了开发
Flask+Vue+ElementUI大数据分析管理系统
一米阳光的博客
04-25 221
一款 Python 语言基于Flask、Vue2.x、ElementUI、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的图片上传组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义后端服务模板和前端模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提高了开发
Python-使用Flask和ElementUI快速搭建企业中台系统
08-10
使用 Flask 和 Element UI 快速搭建企业中台系统
FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
geinvse_seg的博客
02-26 3588
FLASK+VUE–前后端分离（一）- Flask基础讲解之路由、视图函数及代码实现 FLASK+VUE–前后端分离（二）- VUE基础安装及项目的简易介绍 FLASK+VUE–前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆 FLASK+VUE–前后端分离（四）- VUE+Element-UI简单搭建主页布局 FLASK+VUE–前后端分离（五）- VUE测试/线上/开发环境地址配置+拦截器+全局导航守卫+基础配置+获取设置cookie等系列 一、简单介绍所用到的基本库及安装配置
vue + elementUI + Flask配置
丶Melody
03-11 3384
版本信息 @vue-cli 4.2 elementUI 2.13.0 注意事项 @vue-cli 4.2 少了很多配置文件, 只有一个babel.config.js和包版本文件. elementUI 按需引入 配置babel.config.js module.exports = { 'presets': [ '@vue/app', ['@babel/preset-env', {...
flask template中使用Vue，遇到引入element-ui无效问题，Unknown custom element did you register the component correc
yuxuan89814的专栏
11-19 1490
本人最近在将A项目中的一个flask template页面前后端代码，迁移至B项目的中。 A项目 template页面中使用了Vue，使用了element-ui组件。B项目也是flask 框架，之前没有项目使用vue框架。迁移后页面一直无法正常调试出。报错内容： Unknown custom element did you register the component correctly 原因应该是：element-ui没有被正确引用。 但是看代码，确实是引用了的 <li.
python flask+vue3+sqlite 前后端分离 简单个人博客网站项目源码
06-05
flask+vue3+sqlite 前后端分离 简单个人博客网站项目 Vue3采用新的组件式API开发，axios后端接口请求。 flask采用sqlalchemy管理数据库，采用token验证登陆信息。 已实现文章列表显示，文章内容markdown渲染，文章...
基于Flask+vue 设计出来的环境管理系统源码.zip
06-08
一个基于Flask+vue 设计出来的环境管理系统，前端通过nginx进行部署。
Flask+Vue 仓储物资管理系统
05-29
基于Flask+Vue的仓储物资管理系统。主要功能包括：商品管理、供应商管理、客户管理、仓库管理、商品出入库以及退货、数据统计与分析、管理员管理等。
YOLOv5 + Flask + Vue实现基于深度学习算法的垃圾检测系统源码+数据库
最新发布
02-21
YOLOv5 + Flask + Vue实现基于深度学习算法的垃圾检测系统源码+数据库 技术特性 深度学习 YOLOv5：高效、准确的目标检测算法，实时识别检测图像和视频中的各种对象 PyTorch：机器学习框架，以动态计算图为基础，具有...
基于深度学习算法的垃圾检测系统（YOLOv5 + Flask + Vue）
01-31
使用说明在zip压缩包 README 文件中，请仔细阅读。 技术特性 深度学习 YOLOv5：高效、准确的目标检测算法，实时识别检测图像和视频中的各种对象 PyTorch：机器学习框架，以动态计算图为基础，具有灵活性和易用性 ...
FLASK+VUE--前后端分离（四）- VUE+Element-UI简单搭建主页布局
万物皆有灵
12-13 3329
FLASK+VUE–前后端分离（一）- Flask基础讲解之路由、视图函数及代码实现 FLASK+VUE–前后端分离（二）- VUE基础安装及项目的简易介绍 FLASK+VUE–前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆 回顾： 上一章节我们分享到登陆成功后跳转到home页面，该章节延续上一章节，我们针对home面进行简单的布局。 一、home主页布局 1、主页的布局-目录创建： （1）el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，
深入浅出Flask(25)： H-ui前端框架的导航
大坡3D软件开发
08-22 471
前面学习了按钮组，在这里更加深入地学习了组合各种组件，不但要有按钮组合，还有菜单的组合，这样才能更加适合ERP或者MES等操作的系统，因为这样的系统需要选择的参数比较多，所以采用导航条或工具条，都是比较常用的做法。 比如实现下面的例子： 在这个导航条里，前面是标题，后面是导航页面，在每一个菜单选项可以有多层菜单，如下： 这样的布局可以满足很多应用的场景了，因此是必须熟悉的开发模式。 实现这种显示的代码如下： <div class="codeView docs-example"&
后端Flask + 前端Vue + Element UI 练习系统
程西西
07-06 2946
参考视频 vue脚手架https://www.bilibili.com/video/BV1oV411o71h?p=10&spm_id_from=pageDriver element uihttps://www.bilibili.com/video/BV1y5411p7DX?from=search&seid=8577385779960500416 vue电商系统 https://www.bilibili.com/video/BV1EE411B7SU?p=1 最终简陋效果，...
flask+vue+elementui 实现分页,模糊查询,数据展示
weixin_47906106的博客
07-11 1135
效果展示 Vue flask
flask+vue的图片上传功能使用upload怎么实现
06-01
在 Flask 中实现 Vue 图片上传功能，可以使用 Flask 的 Flask-Uploads 扩展，它可以方便的处理文件上传。下面是一个使用 Flask-Uploads 实现 Vue 图片上传功能的代码示例： 1. 安装 Flask-Uploads 扩展： ``` pip install flask-uploads ``` 2. 在 Flask 中配置上传文件存储位置： ```python from flask import Flask from flask_uploads import UploadSet, IMAGES, configure_uploads app = Flask(__name__) app.config['UPLOADED_PHOTOS_DEST'] = 'static/uploads/photos' photos = UploadSet('photos', IMAGES) configure_uploads(app, photos) ``` 3. 在 Vue 中添加文件上传组件： ```html <template> <div> <input type="file" @change="onFileChange"> <button @click="upload">上传</button> </div> </template> <script> export default { data() { return { file: null, url: null } }, methods: { onFileChange(event) { this.file = event.target.files[0] }, upload() { let formData = new FormData() formData.append('photo', this.file) axios.post('/upload', formData).then(response => { this.url = response.data.url }) } } } </script> ``` 4. 在 Flask 中添加上传文件的路由： ```python from flask import request, jsonify from app import app, photos @app.route('/upload', methods=['POST']) def upload(): if 'photo' in request.files: filename = photos.save(request.files['photo']) url = photos.url(filename) return jsonify({'url': url}) return '', 400 ``` 在这个例子中，我们使用了 Flask-Uploads 扩展来处理文件上传并且将上传的文件保存在 `static/uploads/photos` 目录下。在 Vue 中，我们使用 `input` 标签和 `FormData` 对象来上传文件，并在上传成功后将文件的 URL 显示出来。在 Flask 中，我们定义了一个路由 `/upload`，用于接收上传的文件，通过 Flask-Uploads 扩展将文件保存到本地，并返回文件的 URL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值