react
文章平均质量分 67
scv5cs
这个作者很懒,什么都没留下…
展开
-
使用react完成图片放大功能(淘宝放大镜)
文章目录效果引用组件实现原理CSS部分React JS部分效果引用组件import React from 'react';import ImageMagnifier from "./ImageMagnifier";class ImgDemo extends React.Component{ constructor(props) { super(props); this.state={ // 略缩图: minI原创 2021-04-20 15:03:30 · 2488 阅读 · 0 评论 -
django restful framework+ react实践
文章目录引言STEP1:后端部分安装环境,创建Project创建Django APP创建Django modelDjango REST serializersDjango views设置Django URLSSTEP2 : REACT 前端安装react环境编写React antd 代码总结引言本系列文章将使用django框架,react前端来完成本地文件上传功能的网页。Django API我们使用的是Django REST framework(DRF)。我会把所需的步骤尽可能详细的写出来,里面遇到的原创 2021-04-19 10:59:22 · 489 阅读 · 0 评论 -
react前端转换list为csv并保存在本地
数据list格式如下:list=[ {itemID:0,itemLabel:A}, {itemID:1,itemLabel:B}, {itemID:2,itemLabel:C}, {itemID:3,itemLabel:D}, ... {itemID:10,itemLabel:a},]想要转换为csv数据形式,并保存在本地:效果如图:代码1.首先进行list to csv转换:const csvString =[ [ "itemID",原创 2021-04-13 16:50:32 · 482 阅读 · 0 评论 -
react组件引用本地图片并进行标记 生成csv本地文件
引用我最近在使用react写网页,有一个需求是:在前端读取本地的图片文件,在react组件中显示,并且对图片文件进行标记。标记的结果存在本地csv文件中。因为只是本地读取,本地存储,所以整个流程都不涉及与后端交互,纯前端就可以完成。效果实现下面的实现只是思路以及核心代码,全部代码可移步Github。为了使得标记可以自行修改,所以我把图片当作div的背景图片显示。标记当作div的p元素。render()函数很简单: render(){ return(原创 2021-04-05 14:56:20 · 480 阅读 · 0 评论 -
react d3 list数据画折线图 同一页面显示多个图表
引用我在用react做网页前端,目前的要求是:用d3在网页画折线图,并且同一页面显示花了的多个图表。效果实现下面的实现只是思路以及核心代码,全部代码可移步Github.首先说明一下数据,每个图表都是一个通道,每个通道里面的数据都是list,将所有数据存到本地json文件中。格式如下:{ "0_channel":[ -4.89354133605957e-05, -8.702278137207031e-06, .......原创 2021-04-05 14:29:33 · 716 阅读 · 0 评论 -
React ant-design 动态目录
引言我最近在使用react写web前端,React UI组件库是使用Ant Design。我做的项目的一个需求是:在网页上渲染动态目录,即实时响应后端的目录变化。我使用的是antd的树形控件Tree来展示目录的组织架构,层级关系。同时树形控件,自带了展开收起选择等交互功能。效果从后端获取共有两级目录,其中00-MNIST、01-CIFAR10是第一级目录。目前选中00-MNIST下的01_hw,点击∨可以收起目录:同时,后端如果按照约定的标准格式增删改了目录,前端会实时对应渲染。实现下面的原创 2021-04-05 13:41:01 · 318 阅读 · 0 评论 -
React 自定义表单实现
引言我在使用react写web前端,React UI组件库是使用Ant Design。我的项目有一个功能要求是:可以自定义表单的item(选择自己需要的数据进行录入,并且可以删除不想要的item)并提交。效果自定义表单:如图的Custom Config表单,鼠标点击空白选择框,会自动弹出来所有的item选项,点击对应的item选项,可以添加到Custom Config中:每个item旁边的有Θ选项,点击Θ,Custom Config会删除此item。完成自定义。实现导入需要的组件与包原创 2021-04-05 13:22:23 · 1204 阅读 · 0 评论 -
react ant-design 在一个页面同时使用并提交多个表单
引言我在使用react写web前端,React UI组件库是使用Ant Design。我做的项目的一个需求是:在网页的一个页面上,同时使用多个表单,可以修改自定义表单的item(选择自己需要的 数据进行录入,并且可以删除不想要的item),点击最顶层的按钮,可以同时提交多个表单。效果单一表单一个组件点击Done提交:Core Config组件,按钮在组件内,点击Done,会提交本组件内的表单数据。多个表单同时使用:如上图所示,一个页面有多个表单(Custom Config、ta原创 2021-04-05 12:58:38 · 6948 阅读 · 0 评论