- 博客(63)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3+element plus upload组件回显图片base64的实现
最近遇到个需求，需要基于vue3+element plus的upload组件回显图片，通常我们是通过后端直接返回的url来回显就行了，而且在element plus也给出了示例：不过，o_O，我们下面将要以base64的形式来填充，其实也很简单，自己构造一个这样的对象就行了，url里面放我们base64字符串，然后其他的造成即可，下面请看我的实现样例：将图片列表渲染到组件里重点就是替换上面fileList就可。ok啦。
2024-01-26 17:36:14
625
原创 浅谈一下人工智能对我们的生活影响有多大
总体而言，人工智能已经成为我们日常生活的一部分，深刻地改变了我们的工作方式、生活方式和思维方式。然而，随着技术的不断发展，我们也需要关注和管理相关的伦理和社会问题，以确保人工智能的影响对社会产生积极和可持续的影响。通过分析我们的历史行为和喜好，人工智能能够为我们提供更符合个人兴趣的内容，使我们更容易发现新的知识和享受个性化的娱乐体验。影响： 自动化提高了许多重复性和繁琐的任务的效率，使我们能够更集中精力于创造性和战略性的工作。影响： 个性化教学通过分析学生的学习风格和水平，提供定制化的学习计划。
2023-12-01 15:59:47
267
原创 npm、pnpm、yarn之间的区别
然后有一点，最好不要混用，不然会有未知的错误，至少我在单一的情况只用一种来管理还是没有遇到啥错误的。它是一个成熟、广泛使用的工具，有着大量的开源包。平时在项目开发中，经常用到npm、pnpm、yarn这些来安装包，但是它们之间到底有什么区别呢，一直没太搞明白。我只知道他们都是可以从npm官网上下载包，安装完包咱们就可以写代码了，其他的不觉明历，所以认为需要总结下。是一种较新的包管理工具，旨在解决npm中的依赖项重复安装的问题。是由Facebook提供的包管理工具，旨在提高性能和安全性。
2023-12-01 15:21:07
277
原创 vue3+element plus实现查询条件展开和收起功能
如图所示，这样一个查询页面，上面的条件太多，使得下面的列表展示的空间就变得很小了。所以，需要有一个东西控制，当条件太多时，就展示一个展开/收起按钮，可以控制查询条件的展开和收起。
2023-11-29 14:19:18
1647
1
原创 vue3+element plus图片预览点击按钮直接显示图片的预览形式
不同的是，这里element plus并没有给出实际样例，只是用文字描述了下，咱就是说，家人们，这坑不坑，我还是看了别人的博客才知道这块的用处>_
2023-11-21 16:42:03
1533
原创 Vue3+Vue Router跳转相同路由监听页面刷新并执行某个操作
最近遇到了个这样的需求，大概就是：点击某个按钮，进入某个页面，然后再在这个页面执行某个操作（比如请求某个接口、赋初始值啥的）。这个需求看似简单，其实也不难。**但是，**我遇到了个问题，就是当在
2023-11-16 21:41:39
1914
原创 一键解决“Postman打不开，一直在加载”方案
,点击这个exe打开（也就是说我们不要从快捷方式里面打开），就可以了！如果还是不行，就删除那个最新的版本，再试试能不能打开~进入postman所在安装目录（我的是。
2023-11-09 10:22:56
6166
5
原创 1024到了，而我这篇技术博客没人看到
现在也在写新系统的项目，用的vue3。技术是很新的，不过一些规范上面还得自己总结，有接口规范、UI的样式设计及交互（这是重点，有的都要通过不断的沟通，原型图、ui图一般情况下是没有的。去年的这个时候，应该是刚好我从另一家公司离职，那是一家互联网公司，然后我加入了一家传统行业（智能制造行业）的小型软件公司。这么一想，这一年到底干了啥哟，对了，谈了个女朋友，半年了，现在感觉情感也有些危机了。对于技术的细节，这一篇不想赘述，本文主要讲一下这一年，我在工作中所使用到的技术，以及这一年怎么过的，浅谈一下。
2023-10-24 20:51:48
80
原创 一篇关于前端开发中字符串与数字常用方法的总结
最近在写代码时，使用js方法处理字符串与数字，遇到了一些bug或者是在es6方法使用上耽误了过多的调试时间，在此记录一下，加深一下印象。
2023-09-04 14:32:09
102
原创 浏览器自带api语音播报speechSynthesis.speak()无法自动播报问题分析及非完美解决方案
这里主要说说语音播报的部分。本来觉得用浏览器自带的API来实现直接写一句话就ok了，但是没想到居然有一个bug。那就是这条语音有时候能播报，有时候就没有声音了？最近遇到一个需求，就是前端页面要实时监听后端传过来的数据，同时当后端传过来这条数据时前端界面要语音播报这条数据。* @param msg 播报的信息。* @param msg 播报的信息。//#region 语音播报封装。// 初次播报使用模拟按钮触发。'哈哈哈哈哈，这是声音~'// 添加点击事件处理程序。// 模拟用户点击事件。
2023-07-04 23:16:35
3888
7
原创 这14种UML图，你知道几个？
UML-Unified Modeling Language 统一建模语言，又称标准建模语言。是用来对软件密集系统进行可视化建模的一种语言。UML的定义包括UML语义和UML表示法两个元素。
2023-05-25 17:59:53
1223
原创 react生命周期总结（旧、新生命周期及Hook）
什么是react生命周期呢？当我们使用各种框架开发程序时，当这个框架启动、程序刚运行时、各个页面之间的交互、数据渲染到页面上面、程序运行结束，应当会有个闭环的操作，而在这个环的起点和终点之间的各个节点，框架给给定一些特定函数供我们自行调用，方便我们执行一些操作，这便是生命周期。react也是如此。主要分为三个阶段 初始化阶段、更新阶段、卸载组件。执行的流程为：constructor->componentWillMount->render->componentDidMount 组件将要挂载，这个是在执行r
2022-07-10 15:09:51
3675
原创 如何使用前端css代码去掉百度地图左下角的图标
如何使用前端css代码去掉百度地图左下角的图标写在前面：本文为百度地图开发系列文章之一，前期回顾：webGIS，基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标（本篇就是）以上对应视频教程（博客与视频前面的序号是一一对应的）：百度地图开发从零开始00初始化地图创建helloWorld百度地图开发从零开始01去地图左下角图标个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端
2022-05-10 20:41:33
1420
原创 前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！前端css单位小结：vh、vw、百分比、rem、px、计算属性calc1 vh视口的高度，也就是眼睛可以看到屏幕的高度，如果你的屏幕分辩率为1920*1080，那么视口的高度就是1080px，vh可用于写自适应。一般给css div 的 height赋值用。2 vw与vh相对的，视口的宽度，同理，如果.
2022-05-10 20:40:32
2324
原创 React Hooks之EChars的基础使用
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！本文将使用的技术栈为：React HooksEcharsreact 官网：https://zh-hans.reactjs.org/docs/hooks-state.html#gatsby-focus-wrapperEChars官网：https://echarts.apache.org/zh/tu.
2022-05-09 12:28:51
775
原创 前端如何高效写页面 | 实战小结阶段一
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！最近公司在做一个新的项目，与之前大部分都是用ant design组件化开发相比，需要手动画页面的地方较多（这里的手动指的是用div+css布局自己画前端页面，或者自定义antd的样式），花费了老多的时间。所以特地在本阶段做一个小结，来记录如何可以更高效的写前端页面。在目前阶段看来，写一个完整的前端页面.
2022-05-09 12:26:51
1511
2
原创 基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续经过今天的不断努力终于获取到了地图位置坐标的逆向解析地址！直接把下面这个链接赋值到浏览器就可以得到返回值https://api.map.baidu.com/reverse_geocoding/v3/?ak=GXn1gkhgbbWet55NCy.
2022-05-09 12:26:06
1721
原创 基于百度地图api获取某一点的详细信息 逆向解析地址
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！基于百度地图api获取某一点的详细信息 逆向解析地址首先上图，就是我们想要实现的效果：本章您将能学到：使用百度地图api动态获取到地图上某一点的中文地址详细信息与对应的坐标轴信息。开发所用到的语言：Html、Css、Javascript。 本篇将直接拷贝在Html文件里面，直接打开即可运行。参考：全.
2022-05-09 12:25:11
768
原创 前端项目启动 npm 安装 之 常见错误 意外解决了 一直报 esbuild 的问题，使程序正常运行
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！通常要运行一个前端项目操作流程为：npm install （用于安装库，可以理解为初试化用的）npm start （启动项目）1、 上面这两个为我们理想话的安装，实际上会遇到各种意想不到的bug，比如网络原因，这个时候我们要切换npm 的安装源：参考：npm切换默认源 https://www..
2022-05-09 12:23:45
11219
1
原创 昨天，我写了个上千级的bug
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！话不多说，如封面图。就是这个错误，一直不断地往上飙升，甚至涨到了好几千个bug。今天特地把它记录一下。在这个上千级的bug中，使用的技术栈是react，实现的功能为百度地图的渲染。但是， bug的主要原因不在上面。 是css的一个基础，继承高度，首先我给子组件一个100%的高度，给了父组件一个定高，但.
2022-05-09 12:22:47
122
原创 前端开发之mock.js使用——前后端分离，生成随机数据
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！前言本篇目标在于先简单了解mock.js，然后可以简单使用，运行出第一个Mock.js的“HelloWorld”。一、Mock.js是什么？官网： http://mockjs.com/官方简介：Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下.
2022-05-09 12:20:44
482
原创 使用react修改ant design默认样式|自定义
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！本章将通过从修改ant design 的 Input 组件默认样式着手，讲解如何自定义自己的样式，以达到举一反三，可以修改任意ant design的组件样式！1 自定义样式效果图预览没在身边，后期补。2 方法1 直接用内联样式修改直接用在标签里面写style={{…}}，括号里面写上我们想要的样.
2022-05-09 12:19:43
3264
原创 ES6 常用语法小结 | 实战开发后复盘
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！let & constlet与const都是块级作用域，推荐使用let和const，而不是var；不同点：let是定义的变量可以重新赋值，const定义的变量不可以重新赋值，所以一般我们定义的变量值为固定的时使用const。let arr = [];const today = 'Frid.
2022-05-09 12:18:07
80
原创 使用百度地图绘制点、线、面 | Javascript
写在前面：本文为百度地图开发系列文章之一，前期回顾：webGIS，基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点、线、面 | Javascript（本篇讲解）百度地图开发系列之个性化地图使用的2种方法以上对应视频教程（博客与视频前面的序号是一一对应的）：百度地图开发从零开始00初始化地图创建helloWorld百度地图开发从零开始01去地图左下角图标个人前端网站：zhangqiang.hk.cn欢迎加入博主的前端
2022-05-09 12:16:00
4442
2
原创 win10任务栏图标显示异常（重启资源管理器无果）解决方法
win10任务栏图标显示异常（重启资源管理器无果）解决方法方法1：- Ctrl+Win+R打开任务管理器- 点击【文件】，点击【运行新任务】，输入【Explorer】，运行，此刻可以看到Windows资源管理器，点击右键重新启动一般情况下方法1都可以解决，但是，不知咋滴，我的就是不行，后来本人试了n次误打误撞了方法二，解决了。。。方法2：- 在桌面底部右击，选择【任务栏设置】- 点击【在桌面模式下自动隐藏任务栏】，打开、关闭，OK了。...
2022-05-08 20:45:00
2008
1
原创 webGIS，基于百度地图的HelloWord实现
写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！本篇github源码地址： https://github.com/front-end-study-GoGoGo/webGIS-basic-BMapGL1 先上运行效果图2 介绍随着前端技术的不断发展，WebGIS普及度也越来越广，本篇将主要讲解基于百度地图JavaScript API GL v1.0.
2022-05-08 16:40:27
865
原创 结合moment时间插件自己封装一个获取【上周、上月、上季度、上年】时间段函数
(https://juejin.cn/post/6987962113788493831)写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！在日常开发中，获取时间的需求是必不可少的，可以说是经常出现，这不，近段时间接触了几个项目里面就有好几处出现了时间获取的需求。下面本文将以react+antd为技术栈，时间插件主要采用moment插件二次封装，展现一个封
2022-05-08 16:39:12
695
原创 一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放（显示文本、应用等项目的大小）概念
写在前面：本文作为本人学习总结之用，同时分享给大家，如果觉得这些内容有对你也有用的话，就请点个赞吧~ 谢谢~因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！个人前端博客网站：https://zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：706947563（点击即可直接进，来自qq官方的快捷代码），专注前端开发，共同学习进步！本章你将能学到：结合css、div布局对屏幕尺寸、分辨率、缩放有更深一层的理解。这几个小知识点，也许我们在日常中，经常
2022-05-08 16:38:20
628
原创 react子父组件相互通信传值系列之——父组件传值与函数给子组
写在前面：本系列代码源码已经上传github，大家可以随意下载，后面会给上视频讲解辅助，帮助大家更加融会贯通！源码地址：JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子； (github.com)本文作为本人学习总结之用，同时分享给大家，如果觉得这些内容有对你也有用的话，就请点个赞吧~ 谢谢~因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！个人前端博客网站：https://zhangqiang.hk.cn.
2022-05-08 16:36:59
580
原创 react子父组件互相通信传值
react子父组件互相通信传值写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：https://zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！子父组件传值源码地址：JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子； (github.com)本系列你将能学到：父组件传值与函数给子组件，在子组件可使用父组件的值与函数；
2022-05-08 16:33:43
134
原创 css常用布局系统整理——实战开发后复盘小结
回炉重造，css常规布局系统整理——实战开发后复盘小结写在前面： 在了解css布局之前，我们先了解两个小概念，我认为这将对你有所帮助！ 块级元素：display:bloak；占据一行，下一个元素自动换行，如div等； 行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等； 行内块：display:inline-bloak；使行内元素具有块级元素特性、使块级元素具有行内元素特性；1 基础css布局1.1 position定位 pos
2022-05-08 16:32:40
352
原创 前端开发之mock.js使用——前后端分离，生成随机数据
文章目录前言一、Mock.js是什么？二、如何使用Mock.js1.引入库2.写数据3.发送请求总结前言本篇目标在于先简单了解mock.js，然后可以简单使用，运行出第一个Mock.js的“HelloWorld”。一、Mock.js是什么？官网： http://mockjs.com/官方简介：Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：根据数据模板生成模拟数据模拟 Ajax 请求，生成并返回模拟数据基于 HTM
2022-05-08 16:31:22
295
原创 浅谈vscode+react环境部署，运行第一个react框架
文章目录前言一、安装vscode二、安装node、npm、yarn（采用淘宝镜像）1.安装node2.安装yarn三、拉取React脚手架，运行第一个项目总结前言react官网 https://react.docschina.org/docs/getting-started.html运行结果图：一、安装vscode见链接：https://www.cnblogs.com/csji/p/13558221.html。二、安装node、npm、yarn（采用淘宝镜像）1.安装node.
2022-05-08 16:30:28
1123
原创 js随机生成一个[min,max]范围的整数，举一反三
</head><body><h2>JavaScript Math.random()</h2><p>点击按钮, getRndInteger(min, max) 会返回 0（包含）到 3（包含）到数字:</p><button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,3)">点我</button><
2022-05-08 16:29:16
252
原创 funweb后端代码安装教程从零到可以运行——以funservice_commander为例
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、后端代码运行所需的相关软件二、详细安装1.vscode2.在vscode中安装go语言3.Git bash4.Msys5.验证三、代码运行与生成插件总结前言本文只为可以实现可以将代码成功在自己电脑上跑起来为目标，如有不足之处，欢迎读者优化！通过本文，你将可以看到如何从零到可以运行funweb后端代码，如何生成一个后端插件接口。一、后端代码运行所需的相关软件vscode、在vscode中安装go语言、Gi
2022-05-07 20:45:00
214
原创 CSS基础教程学习总结
前言记录css学习内容，查漏补缺。文章目录前言一、CSS是什么？1.1 CSS的"hello world"二、CSS选择器及几种引用方式2.1 id选择器2.2 class选择器2.3 几种引用方式2.3.1 外部引用2.3.2 内部引用2.3.3 内联引用2.3.4 优先级三、CSS position定位3.1 示例图3.2 代码四、CSS float浮动4.1 示例图4.2 代码总结一、CSS是什么？ 简而言之，就是样式、布局，使html的框架更好看，把html元素定位在自己想要放的位置。1
2022-05-07 12:52:24
51
原创 HTML基础教程
HTML学习总结前言一、HTML简介二、语句用法1."Hello Word"2.块级元素与内联元素3.float布局总结前言 为了达到温故而知新的效果，在此记录一些看完之后总结的HTML语句。一、HTML简介超文本标记语言，用写网页的，骨架。二、语句用法1.“Hello Word”代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello Wor
2022-05-07 12:51:47
46
原创 Ant Design4.x rule验证规则的两种写法（函数与正则表达式）
1 函数验证 //函数 const checkPrice = (rule, value) => { if (value.number > 0) { return Promise.resolve(); } return Promise.reject('Price must be greater than zero!'); };//表单 <Form.Item name="price" label="Price"
2022-05-07 12:50:44
648
原创 react+antd Tree树控件（Demo可以直接运行）实现（递归生成数据）同时支持左边图标自定义也可以加自己的Logo
1 先上完成效果图2 上代码（粘贴复制可以直接运行）import React, { useState } from 'react'import { Tree } from 'antd';import { SmileOutlined, WalletOutlined, TabletOutlined} from '@ant-design/icons';function IsTree(props) { //这是我从数据库得到的树的json数据 let d =
2022-05-07 12:48:43
1992
原创 react调用antd4.X自定义图标 icon | 阿里巴巴矢量图标
1 先贴图2 看官网代码https://ant.design/components/icon-cn/#components-icon-demo-custom使用 iconfont.cn，使用多个和单个是异曲同工之处。那里的scriptUrl是生成的一个远程链接，我们在react里面调用它即可。3 看这篇博客https://blog.csdn.net/weixin_44021270/article/details/1073776584 解决阿里巴巴矢量图标自定义更改后无法引用问题当我
2022-05-07 12:48:09
455
gson-2.8.5
2018-12-10
前端开发中块级元素与行内元素分别指的是什么？
2023-12-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人