首页 > 其他分享 >前端功能页面展示笔记(一)

前端功能页面展示笔记(一)

时间:2024-09-27 14:52:24浏览次数:3  
标签:img 前端 base64 bytes 笔记 images app 页面

同域:协议域名和端口号相同


解决跨域问题  

CORS(app)      from flask_cors import CORS

app = Flask(__name__)
CORS(app)
@app.route('/', methods=['GET'])
def generate_images():配置路由后面要紧跟调用的函数

通过this.images调用的数据一定要存在于data()中声明

后端启动后才能够运行前后端响应,查看前端页面检查,如果出现net相关错误考虑
是否后端未启动

将后端生成的图片准为字节流数据,存储在数组中
seek(0) 方法的作用是将文件指针移动到数据流的起始位置,即位置 0。
这个操作在你需要重新读取或者处理整个数据流时很有用,确保你从数
据的开头开始读取。

        # 保存图表到字节流
        img_bytes = io.BytesIO()JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
        plt.savefig(img_bytes, format='png')
        img_bytes.seek(0)
        images.append(img_bytes.getvalue())


将字节流数据转变为Base64编码的字符串,然后给前端读取
JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
img_base64 = base64.b64encode(img_data).decode('utf-8')
images_base64.append(img_base64)

localstorage的用法
localStorage.setItem('','')
来实现参数传递
API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。


多线程用法:
设置为多线程使用,Thread = True


1.读取编辑框的值并且传给父亲组件,在父组件测试能够接收成功;
2.设置菜单框参数;显示哪些和不显示哪一些;


1.将商品参数真正的保存在数据库中;
2.调用接口inserTbItem,将商品参数插入数据库,注意传入的参数,imag参数比较特殊,需要转为字符串
3.测试添加商品添加成功,并且显示在页面上;
4.添加商品成功后,跳转页面


1.重置页面,图片和文本编辑没清空
2.图片处理-----找属性filr-list,存储图片列表,注意传递参数,添加查看属性介绍,查看是否成功,在上传图片文件处理
2.图片处理----file-list会隐式上传图片,只需要添加方法将该数组置空就可以了,注意默认效果
3.父亲组件需要获取子组件的清空方法,ref = "upload"

1.html为空


子元素100%,但是父亲元素没有100%,是不能够撑起来的

标签:img,前端,base64,bytes,笔记,images,app,页面
From: https://blog.csdn.net/m0_55924178/article/details/142593434

相关文章

  • 计算机常见术语笔记(一)
    目录Ubuntu介绍Conda介绍镜像源介绍Sklearn介绍Vim编辑器使用教程Python解释器安装sklearn库pytorch介绍Python和pytorch的关系与区别_pycache_文件损失函数如何使用VueCliVueCSSUbuntu介绍是基于Linux内核的一个发行版本终端 只是人机交互的一个接口,提......
  • 前端必知必会-jQuery遍历DOM函数
    文章目录jQuery遍历元素什么是遍历?jQuery遍历-祖先遍历DOM树jQueryparent()方法jQueryparents()方法jQueryparentsUntil()方法总结jQuery遍历元素什么是遍历?jQuery遍历,即“移动”,用于根据HTML元素与其他元素的关系“查找”(或选择)HTML元素。从一......
  • 前端必知必会- jQuery - 尺寸函数
    文章目录jQuery-尺寸jQuerywidth()和height()方法jQueryinnerWidth()和innerHeight()方法jQueryouterWidth()和outerHeight()方法jQuery更多width()和height()总结jQuery-尺寸使用jQuery,可以轻松处理元素和浏览器窗口的尺寸。jQuery尺寸方......
  • 前端必知必会-jQuery - 获取和设置 CSS 类
    文章目录jQuery-获取和设置CSS类jQueryaddClass()方法jQueryremoveClass()方法jQuerytoggleClass()方法jQuery-css()方法返回CSS属性设置CSS属性设置多个CSS属性总结jQuery-获取和设置CSS类使用jQuery,可以轻松操作元素的样式。jQuery操......
  • 【前端样式】Sweetalert2简单用法
    1、先安装sweetalert2库:        npminstallsweetalert22、引用SweetAlert2库:        importSwalfrom'sweetalert2';3、代码拷过去直接去测试,vue代码<template><div><el-buttonstyle="color:#C03639"@click="test">......
  • 软件测试学习笔记丨curl命令发送请求
    本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/32332一、简介cURL是一个通过URL传输数据的,功能强大的命令行工具。cURL可以与ChromeDevtool工具配合使用,把浏览器发送的真实请求还原出来,附带认证信息,脱离浏览器执行,方便开发者重放请求、修改参数调试,编写脚本。也可以单......
  • 软件测试学习笔记丨Mock的价值与实战
    本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/32331一、Mock的价值与意义1.1简介测试过程中,对于一些不容易构造或获取的对象,用一个虚拟的对象来替代它,达到相同的效果,这个虚拟的对象即Mock。当做测试时,如果后端某些接口还不成熟,所依赖的接口不稳定,所依赖的接口为第三方......
  • 我,一个小白,居然用 AI 工具修改了公司前端代码!
    背景有一天同事发现公司网站的某个页面上有三个H1标签,懂行的都知道,有三个H1标签虽然不会对网站的访问产生影响,但是对于搜索引擎来讲,就比较麻烦了,因为一般搜索引擎都是靠H1标签、TDK等来对网页的内容进行抓取,然后再进行质量优劣的判断。三个H1标签,搜索引擎就不知道到底应......
  • 我,一个小白,居然用 AI 工具修改了公司前端代码!
    背景有一天同事发现公司网站的某个页面上有三个H1标签,懂行的都知道,有三个H1标签虽然不会对网站的访问产生影响,但是对于搜索引擎来讲,就比较麻烦了,因为一般搜索引擎都是靠H1标签、TDK等来对网页的内容进行抓取,然后再进行质量优劣的判断。三个H1标签,搜索引擎就不知道到底应......
  • 实战笔记:Vue2项目Webpack 3升级到Webpack 4的实操指南
    在Web开发领域,保持技术的更新是非常重要的。随着前端构建工具的快速发展,Webpack已经更新到5.x版本,如果你正在使用Vue2项目,并且还在使用Webpack3,那么是时候考虑升级一下Webpack了。我最近将我的Vue2项目从Webpack3升级到了Webpack4。以下是我升级过程中积累的经验和步骤,希望......