1. Toy模板网首页
  2. > Toy博客

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

7月前 作者：我是一只月月鸟 分类：Toy博客 阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、前言

前面已经做了Flask-admin库的基本介绍和几个库常用功能如何使用，若不了解请移步到以下博客：

1、?《【Python成长之路】基于Flask-admin库，编写个人工作平台代码详述》

2、?《【Python成长之路】基于Flask-admin库，编写个人工作平台代码 -- 进阶版》

此篇文章主要是讲述：

1、结合pyecharts库实现图表展示

2、结合flask+html+vue，实现后端数据在前端界面展示，以表格为例

3、结合flask+html+vue，实现前端界面数据回传后端

其中各功能效果如下图

1、如何结合pyecharts库实现图表展示

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230505201234668

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230505201123801

2、前端数据展示

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230505203918283

3、前端表单数据回传到后台

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230505215920855

二、图表展示

1、增加数据库类和视图类

由于这里已经在之前文章讲过了，因此不再复述。直接上代码

# 新增价格数据库类 
class Price(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    type = db.Column(db.Unicode(64))
    price = db.Column(db.Float(64))

    def __unicode__(self):
        return self.name

# 新增价格表的视图类
class PriceAdmin(CustomView):
    column_searchable_list = ('price', 'type')
 
    # 添加自定义功能：绘制图表
    from flask_admin.actions import action
    @action('figure', '绘制曲线图',)
    def action_approve(self, ids):
        fruits = []
        prices = []
        for id in ids:
            tmp = query_data_by_id(int(id), table='price', mydb='instance\\sample_db.sqlite')
            fruits.append(tmp[1])
            prices.append(tmp[2])
        # myline为自定义的画图函数，下面重点介绍
        myline(fruits,prices)
        return render_template("line.html")

2、利用pyecharts库生成图表

首先介绍下 pyecharts官方指导文档：https://pyecharts.org/#/zh-cn/intro

本文即使用Line图进行绘制图表，详细代码如下：

from pyecharts.charts import Line
from pyecharts.globals import CurrentConfig
from pyecharts import options as opts
import os

CurrentConfig.ONLINE_HOST = "https://cdn.jsdelivr.net/npm/echarts@latest/dist/"

def myline(x, y):
    line = Line()
    line.add_xaxis(x)
    line.add_yaxis('价格', y)
    line.set_global_opts(title_opts=opts.TitleOpts(title="Line-基本示例", subtitle="价格表"))
    html_path = os.path.join(os.getcwd(), 'templates', 'line.html')
    print(html_path)
    line.render(html_path)

这里要解释下 ，为什么需要添加

CurrentConfig.ONLINE_HOST = "https://cdn.jsdelivr.net/npm/echarts@latest/dist/"

主要原因是如果不加这个配置，通过flask-admin加载line.html时会特别慢，体验效果很不好。因此通过CDN加速改变了网页源代码。

三、结合flask+html+vue，将后端数据传到前端

1、Vue组件示例网站介绍

在使用vue前，提供一个vue示例官网，从里面可以快速实现常用前端界面组件

https://element.eleme.cn/#/zh-CN/component/installation

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

2、结合html+vue，实现前端helloworld展示

为了方便使用，直接采用CDN方式进行安装vue

另外，目前可以通过 ?unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

helloworld.html代码样式如下 ：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

3、编写前端示例代码(表格)

参考https://element.eleme.cn/#/zh-CN/component/table 章节，修改helloworld.html，实现前端表格代码。

主要是将

和script中 的内容进行重新编写。

table.html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
      el: '#app',
        data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      }
    })
</script>
</html>

效果如下 ：

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230505203918283

4、将后端数据传给前端并以表格形式展示

通过分析table.html可以发现，如果想要将后端数据传给前端并展示，关键是将script中的tableData内容进行更换，而这最简单的方式即通过{ datasafe }方式进行传递和赋值。

后端python代码

下面只是简单介绍如何将后端数据进行传递，实际应用中data应为数据库数据或者其他数据。

    @action('table', '前端表格展示', )
    def action_table(self, ids):
        data = [{
            'date': '2023/05/05',
            'name': '鹏哥',
            'address': 'test123456789'
          }]
        # 将data数据进行入参传给table.html
        return render_template('table.html',data=data)

前端html代码

# 其他都不变，仅变更tableData数据内容，通过{{ data|safe }}进行赋值
<script>
    new Vue({
      el: '#app',
        data() {
        return {
          tableData: {{ data|safe}}
        }
      }
    })
</script>

效果如下：

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230505204827718

四、结合flask+html+vue，将前端数据传到后端

1、结合html+vue，编写前端示例代码(表单)

参考https://element.eleme.cn/#/zh-CN/component/form，实现前端表单展示

form.html代码示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
      el: '#app',
        data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        this.$alert('submit!');
      }
    }
    })

</script>
</html>

效果如下 ：

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230505210420402

2、编写前端axios方法及参数

从form.html代码中可 以爬到，立即创建按钮当前仅会弹窗功能，并未实现将数据往后端传递功能。

因此需要在前面使用axios发起请求。

本来想是参考以下代码实现axios请求，但是测试发现并不生效，并且报错： axios.post is not a function

onSubmit() {
 this.axios({
  method: 'post',
  url: '/test',
  data: {'aa':123},
 })
 .then((response) => {
        console.log(response)
 })
 .catch((error) => {
  console.log(error)
 })
},

定位发现是缺少安装axios。为了方便使用，继续使用CDN方式，即在script中添加

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

最终form.html内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
      el: '#app',
        data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        axios({
                method: 'post',
                url: '/test',
                data: {
                'name':this.form.name,
                'region':this.form.region,
                },
            })
            .then((response) => {
                console.log(response)
            })
            .catch((error) => {
                console.log(error)
            })
    },
          resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
    })
</script>
</html>

这里再补充说明下，回传数据data的内容，即name/region都是form中定义好的。当前仅以name/region参数做演示，所有字段都可以进行传递。

另外，重置功能可以简单地通过以下代码实现，但是有2个前置条件：

1、form组件上必须要有ref

2、form-item上必须要有prop属性

# body中重置代码
<el-button @click="resetForm('form')">重置</el-button>

# script中重置代码
this.$refs[formName].resetFields();

即需要body中有以下代码

<el-form ref="form" :model="form" label-width="80px">
    xxx
<el-form-item label="活动名称" prop="name">

3、后端获取数据

python代码如下

from flask_cors import CORS
from flask import request

app = Flask(__name__)
CORS(app, resources=r'/*')

@app.route('/test', methods=['post', 'get'])
def test():
    if request.method == 'POST':
        print("********** post *************")
        data = request.get_json(silent=True)
        # 获取数据后如何处理，可自行编写代码
        print(data['name'])
        print(data['region'])
    return render_template('form.html')

其中，CORS是为了解决跨域问题。

五、完整代码获取

github地址如下：

https://github.com/yuzipeng05/flask_admin_work_platform

FAQ

1、报错：jinja2.exceptions.TemplateSyntaxError: unexpected char '\' at 1100277

【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递

image-20230422144135217

问题定位：通过升级pyecharts版本至最新版本解决；文章来源地址https://www.toymoban.com/news/detail-434535.html

到了这里，关于【Python成长之路】基于Flask-admin库，结合html+vue，实现前后端数据传递的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【GPT，Flask】用Python Flask结合OpenAI的GPT API构建一个可自主搭建的内容生成应用网站

    【GPT，Flask】用Python Flask结合OpenAI的GPT API构建一个可自主搭建的内容生成应用网站

    自己构建模型并进行训练需要很高的知识，技能和资源门槛。如今，通过OpenAI提供的API，则可以快速通过GPT能力构建可以提供内容生成服务的在线网站。这套框架可以提供给用户，用户可以利用该框架在自己的环境（比如自己的公司内）构建内容生成服务。你也可以自己上线

    2024年02月11日
    浏览(43)
  • Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取

    Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取

    flask内容参考:Flask框架入门教程（非常详细） 安装flask 创建一个webapp.py文件，内容如下 运行代码 终端输出如下: 在浏览器输入 返回如下 创建webapp_html_str.py文件，代码如下： 运行 运行代码 在浏览器输入 返回如下 返回一个静态html页面 在工程目录下，创建一个templates目录，在

    2024年02月04日
    浏览(32)
  • 我的“测试开发”成长之路

    我的“测试开发”成长之路

    我相信，有很多测试人员会不断问自己，自己到底要不要坚持做测试，测试的职业发展到底怎么样？如果你还在迷茫，在到处找各种大牛问类似的问题，我希望这篇文章，你看完能够结束你的这个烦恼，给你更多的指明方向，当然也有更多的压力。        这个问题，就像

    2024年02月02日
    浏览(47)
  • Dockerfile成长之路

    Dockerfile成长之路

    随着业务架构的整改,针对非容器化业务全部进行容器化改造,这就设计到了java写的业务代码构建业务镜像,并通过k8s发版,因此,就得学习如何使用dockerfile构建后端业务镜像,可能不止构建后端代码镜像,例如前端写的代码也有可能构建为镜像。还有可能就是要在原有镜像基础上进

    2024年01月24日
    浏览(35)
  • Android程序员成长之路

    Android程序员成长之路

    应该热爱学习Android知识 具备基本的自学能力和解决问题的能力 具备实践能力 Java(基本) C/C++(进阶) Kotlin(基本) Python(可选) 飞书学习路线图 学习路线图正在完善中... 当然读者也可以提出宝贵建议。 我将会按照 Android学习路线图 发布博客文章。 因本人才疏学浅，博客文章中难

    2024年02月09日
    浏览(35)
  • Windows系统使用Python Flask制作Web网站并结合内网穿透公网访问

    Windows系统使用Python Flask制作Web网站并结合内网穿透公网访问

    Flask是一个Python编写的Web微框架，让我们可以使用Python语言快速实现一个网站或Web服务，本期教程我们使用Python Flask搭建一个web问答应用程序框架，并结合cpolar内网穿透工具将我们的应用程序发布到公共网络上，实现可多人远程进入到该web应用程序访问。 在操作上我们将使用

    2024年03月23日
    浏览(24)
  • 一个女程序员的成长之路

    一个女程序员的成长之路

    2013年大学毕业了，带着迷茫与好玩，我还年轻的心态，开始在郑州寻觅工作机会，最后很荣幸的在一家小公司入职了，工作的内容是给种植大棚的用户打电话，推销农药。每天就是在网上各种农业平台上面找号码，打电话， 一天拨打电话的在四十个左右，却累的都说不出话

    2024年02月14日
    浏览(43)
  • 助力成长的开源项目 —— 筑梦之路

    助力成长的开源项目 —— 筑梦之路

    免费的闯关式 SQL 自学教程网站，从 0 到 1 带大家掌握常用 SQL 语法，目前一共有 30 多个关卡，希望你在通关的时候，变身为一个 SQL 高手。除了闯关模式之外，这个项目支持自由选择关卡、自定义关卡、SQL 在线练习广场等功能，方便自由地查漏补缺。 GitHub 地址→GitHub - li

    2024年02月03日
    浏览(28)
  • Spring成长之路—Spring MVC

    Spring成长之路—Spring MVC

            在分享SpringMVC之前，我们先对MVC有个基本的了解。MVC(Model-View-Controller)指的是一种软件思想，它将软件分为三层：模型层、视图层、控制层         模型层即Model： 负责处理具体的业务和封装实体类，我们所知的service层、pojo都属于模型层         视图层即view：

    2024年01月21日
    浏览(32)
  • 硬件工程师成长之路（0）----认识元件

    硬件工程师成长之路（0）----认识元件

    系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 送给大学毕业后找不到奋斗方向的你（每周不定时更新） 中国计算机技术职业资格网 上海市工程系列计算机专业中级专业技术职务任职资

    2024年02月03日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包