Ant Design

最近做了一个将通话记录，语音转文字并可以在聊天记录里标注动机和摘要的需求， 上图只是一个小小的模块， 第一次接到使用到语音相关的需求，记录一下 上图是一个客服聊天记录的模块，语音转文字，将录音展示出来，可以音频播放，可以滑动进度条，倍速播放等等，以前自己心血来潮，使用原生js写过一个类似于网易音乐，播放音乐的播放器，包括进度条，音量调节啥的。 当然做项目吗，还是使用HTML自带的更好，省时省力高高效 我们的service后台前端工程使用的是react + ant-design + node作为中间层 后端使用的是Java 后端只需要给前端提供录音音频，再讲智能组语音转文字转成的文字传给我就好了， 在前端工程里，语音播放、倍速，进度条代码如下： 1、在state里定义了语音倍速的选择数组： 2、在render函数里渲染的时候使用audio标签，并遍历渲染倍速播放按钮，进度条啥的都有audio自带的属性实现了，就是这么简单 3、自定义切换倍速函数changeMultiple，嗯，不可避免的使用了原生JS获取了dom节点，然后给dom元素添加倍速属性playbackRate就可以了 一个小小的如上图所示的语音播放功能就实现了， 在实现需求的时候，不忘给自己充充电，顺便把video和audio自带的所有的属性、方法、事件都学习了一遍，感觉，嗯，真好用~~~

　　最近在做一个后台推送的需求，其中有一处功能是，可以从本地选择txt文件上传，这个txt包含每个被推送客户的uid。其实这个txt文件的意义只是对操作者来说比较方便，因为这个txt文件可以在另一个页面通过导出的方式得到，导出后可以直接使用。所以这个txt文件没有必要做到真正的上传，只是执行一个“上传”的伪动作，让我们可以拿到这个txt文件，而不是传给后台。 　　首先，这个上传的部分我们放在了Ant Design的form表单里，整个结构是由 Form.Item进行包裹的，上传的逻辑集中在了Upload这个组件里。 <Form.Item label="推送人群" extra=""> {getFieldDecorator('personTxt', { rules: [{ required: true, message: '请选择推送人群文件' }], valuePropName: 'fileList', getValueFromEvent: this.normFile })( <Upload action="//upload.58cdn.com.cn/json?rand=0.1298" //必填，上传的地址 name="personfile" //自行指定 listType="file" //指定上传的是文件 accept=".txt" //指定可上传的文件类型

软件环境 macOS Big Sur 11.1 React 16.12.0 Ant Design 4.10.0 实际效果 现有一个需求，是上传文件，点击浏览文件按钮，选中文件后，在按钮的上方显示，上传的文件列表，如下图所示 当前效果 目前使用阿里的Ant UI组件库，使用其中的上传组件，官方提供的示例，如下图如示 本地使用后，如下图所示 如何才能实现，我们需要的效果呢，Google了好多文章，找到了一种方式，就是重写itemRender方法，自定义文件列表的展示，使用这个方法，需要重写多个action。 后来查看公司前端人员写的代码，看到另一种解决方法。 主要使用两个Upload组件，第一个Upload组件主要是展示文件列表，第二个Upload组件是选择文件上传的这个操作，不过，选择文件后，把文件列表在下方展示隐藏起来。 showUploadList: false, //不显示上传的列表 把得到的文件列表，赋值给第一个Upload组件中，大概如下： beforeUpload(file: any, fileList: any) { setFileList(fileList); //设置文件列表 return false; //不要调用上传文件接口 }, <!--第一个Upload组件--> <Upload fileList={fileList}></Upload> 部分代码如下：

软件环境 macOS Big Sur 11.1 React 16.12.0 Ant Design 4.10.0 实际效果 现有一个需求，是上传文件，点击浏览文件按钮，选中文件后，在按钮的上方显示，上传的文件列表，如下图所示 当前效果 目前使用阿里的Ant UI组件库，使用其中的上传组件，官方提供的示例，如下图如示 本地使用后，如下图所示 如何才能实现，我们需要的效果呢，Google了好多文章，找到了一种方式，就是重写itemRender方法，自定义文件列表的展示，使用这个方法，需要重写多个action。 后来查看公司前端人员写的代码，看到另一种解决方法。 主要使用两个Upload组件，第一个Upload组件主要是展示文件列表，第二个Upload组件是选择文件上传的这个操作，不过，选择文件后，把文件列表在下方展示隐藏起来。 showUploadList: false, //不显示上传的列表 把得到的文件列表，赋值给第一个Upload组件中，大概如下： beforeUpload(file: any, fileList: any) { setFileList(fileList); //设置文件列表 return false; //不要调用上传文件接口 }, <!--第一个Upload组件--> <Upload fileList={fileList}></Upload> 部分代码如下：

作业格式 课程名称： 软件工程1916|W（福州大学） 作业要求： 团队作业第二次—项目选题报告 团队名称： 那周余嘉熊掌将得队 作业目标：确定和分析选题，绘制评审表 团队信息： 队员学号 队员姓名 博客地址 备注 221600131 Jamin https://www.cnblogs.com/JaminWu/ 队长 221600308 我超可爱的 http://www.cnblogs.com/XNC-SoCute/ 221600305 haziza http://www.cnblogs.com/haziza/ 221600340 你看见我的小熊了吗 https://www.cnblogs.com/stereohearts/ 221600426 Hunterj Lin https://www.cnblogs.com/HunterJ/ 021600823 玫葵 https://www.cnblogs.com/offeroques/ 选题报告 ========== 1、选题题目 <center> **福州大学服务外包与软件设计实验室对外网站** </center> 2、选题背景、概况、意义 背景 福州大学服务外包与软件设计实验室成立于2013年，位于福州大学数学与计算机科学学院3号楼201室，是一个充满创新和热情的团队。实验室通过搭建开放的技术交流学习空间

先说下背景，来公司之前，我也和大多数后端开发者一样开发的后端逻辑比较多，一碰到前端页面，也只能开发简单的功能，复杂点儿的功能根本不会。但随着开发时间的增长，越来越感觉一名优秀的开发者不仅仅要懂得服务端逻辑接口层的开发，还应该站在产品的角度，UI的角度去看待他的作品。借助ant design的相关内容，开发一个又一个稳定而又实用的功能，非常欣慰。抽空聊下我在前端开发上的感触吧，希望对大家有所帮助。 先来说我在知乎的一篇文章上读到的两个概念，人机交互和无意识设计： 人机交互 谈到前端开发，先说下人机交互。人机交互是指人和计算机之间通过行为动作，互相影响互相作用的一个过程。主要涉及：人、计算机或系统、动作行为，互相的影响结果这四个方面。 交互的过程经过这几个阶段： 由动作发起者确定【目标】。 根据目标制定【计划】。 【确认】计划可行性。 可行，就进行实际【执行】触发按钮，开关等进行作用于系统。 系统作出反馈，进行改变，动作发起者【感知】这种改变。 通过一定的方法【诠释】这些改变。 【对比】目标，如果一致，则代表目标达成。 无意识设计 意识 我们想做一件事情时候，仔细去想，会产生很多关于这件事情的观念、意象、情感。比方说，想喝咖啡的时候，想到星巴卡，想到它的环境、氛围、以及放松的感觉。这种自己能清晰意识到的心里活动就是意识。(摘自网上) 无意识 潜藏在我们的意识中，不需要去想

点击 蓝色字 免费订阅， 每天收到这样的好信息 前言 : 最近有不少粉丝关注本公众号。并且我已经 成功开通了流量主同时会赚一点点广告费,我打算每个月把这部分钱拿出来给大家买点书刊,算是给大家一点福利吧。大家想买什么书扫描下方的加他拉你加群。最后,非常感谢大家的关注。 私活接单qq群：716817407 介绍 Finer进销存是一款面向中小企业的供销链管理系统，基于J2EE快速开发平台Jeecg-Boot开发，采用前后端分离架构：SpringBoot2.x，Ant Design&Vue，Mybatis-plus，Shiro，JWT。 项目基于十多年的中小企业管理经验，由ERP领域的资深专家设计；产品分为基础版、标准版、企业版三个版本，可适应不同的管控流程；对于灵活多样的个性化的管理需求，在Jeecg-Boot支撑下，利用其强大的代码生成器，无需写任何代码就可以快速实现大多功能，也可手工加入复杂的业务逻辑！ 基础版：管结果，直接出入库，生成应收应付，进行收付款并核销 标准版：管过程，业务从合同、申请、订单开始 企业版：管协同，全过程跟踪管理，集成协同办公 本发布为基础版 功能模块 ┌─库存管理 │ ├─入库管理 │ │ ├─采购入库(自动生成采购应付) │ │ ├─采购退货出库(自动生成红字采购应付) │ │ ├─盘盈入库 │ │ ├─涨库入库 │ │ └─其他入库 │ ├─出库管理

1、使用customRequest customRequest 通过覆盖默认的上传行为，可以自定义自己的上传实现 Function 定义customRequest，之前定义action行为会被覆盖，可以注释掉 <a-upload name="file" :multiple="false" @change="changeFile" :customRequest="customRequest" > <a-button type="primary"> <a-icon type="upload" />导入Excel</a-button> </a-upload> 　 changeFile(info) { // 上传文件 if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { this.$message.success(`${info.file.name} 上传成功`); } else if (info.file.status === 'error') { this.$message.error(`${info.file.name} 上传失败.`); } }, customRequest(data){ // 上传提交

SwitchHosts 简介 SwitchHosts 是一个用于快速切换 hosts 的开源免费的小工具，基于 Electron 开发，同时使用了 React、Ant Design 以及 CodeMirror 等框架/库，支持跨平台(Windows、Linux、Mac); 我最初使用 SwitchHosts 是在很多年前的 Windows 平台下，那个时候 SwitchHosts 是基于 Python 写的，界面比较丑，好在使用方便，丑点也无所谓；经历几年的发展， SwitchHosts 变得越来越好看，功能也丰富了不少： gitHub 开源地址 gitHub 下载地址 百度网盘下载地址 SwitchHosts 主要功能： 快速切换 hosts hosts 文件语法高亮 远程 hosts 方案 图标快速切换 Linux 下 SwitchHosts 安装使用 Windows 平台和 Mac 平台都能傻瓜式安装使用，使用也没多大的难处。这里主要说一下Ubuntu下使用 SwitchHosts 的安装配置： 解压并移动到自己指定的目录下： unzip SwitchHosts-linux-x64_v3.3.9.5343.zip mv SwitchHosts!-linux-x64 ~/software/switchHosts 进入目录，执行 SwitchHosts 启动命令即可启动: cd

“我们活得好好的，为什么要工程化？” 让我们从原始的前端开始。用记事本新建一个卡哇伊的a.html页面，给它点样式a.css，DUANG加特技a.js。无须编译，本地预览，OK，没问题，上传服务器，等用户访问。哇，前端好好玩，好简单有木有？！然后，我们访问页面，效果还行，再看下网络请求，200！完美！ 等一下，还没完呢？小公司到这儿就OK了，数据上上去，没兼容问题，完美啊！大公司说：注意性能，我要访问量！不好玩了吧！看看a.css的请求，如果每次用户访问都要加载，是不是很影响性能，浪费宽带啊！如果网络请求状态是304就好了！304，本地缓存！ 这回成了吗？不行，304是协商缓存，还是要和服务器通信一次。于是必须彻底灭掉这个请求，那么强制使用本地缓存，不要和服务器通信。那么问题来了：都不让浏览器发资源请求了，这缓存还咋更新呢？对，更新页面中引用的资源路径，让浏览器放弃缓存，加载新资源。问题解决，完美！ 大兄弟，别慌呀！现在a.html上面只有一个a.css，带上版本参数来改变资源路径，OK。假如还有b.css、c.css，某次上线只改了a.css的版本，通用的路径生成器上将全部版本都改了，那岂不是又有浪费了。这样一来，要解决这种问题就必须让版本修改和文件内容关联，才能准确地对应资源版本。什么东西与文件内容相关呢？大佬们想到利用数据摘要算法对文件求摘要信息