- 博客(39)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 Electron+Vue3+TypeScript+Vite桌面应用程序项目初始化
https://www.webxiu.com.cn/post/10005241初始化vite项目yarn create vite todolist --template vue-tscd todolistyarnyarn dev浏览器访问3000端口安装Electronyarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer如果觉得安装慢，可以改为淘宝
2022-05-12 11:45:18
1915
2
原创 CSS伪类：CSS3鼠标滑过按钮动画第二节
原文地址：http://www.javanx.cn/20191225/buttonhover-2-1/前言有了第一小节的经验，我们可以对直接的动画效果做一些升级效果，如果组合:before、:after，效果有更酷。请先看一下效果示例吧：下面一个一个示例讲解示例一<button class="btn-1">按钮一</button><style>button{ position: relative; width: 100px; height:
2020-08-18 16:36:33
140
原创 Electron+Vue3+TypeScript+Vite +Vue.Draggable 完成事务拖动
原文地址：《Electron+Vue3+TypeScript+Vite +Vue.Draggable 完成事务拖动》前言有了简单的框架，下面来点实际业务相关的操作吧，集成 Vue.Draggable，将每一项任务拖拽任务到每个分类吧。Vue.Draggable 已经提供了一些完美的示例，这是 Vue.Draggable 官方提供的示例，https://sortablejs.github.io/vue.draggable.next/#/two-lists是不是正是我们要的呢？集成 Vue.Dr
2022-05-16 17:51:32
546
原创 Electron+Vue3+TypeScript+Vite桌面应用TodoList UI架构
原文地址：https://www.webxiu.com.cn/post/10005242前言上一章节《Electron+Vue3+TypeScript+Vite桌面应用程序项目初始化》完成后，我们的桌面应用程序如上图，这次我们先美化一下界面，形成初步的UI框架。从这里开始需要书写css，我们选择SCSS工具，先安装：npm install sass -save-dev新建assets/scss/globalVariable.scss// 这里书写全局的css样式，或者方法等修改 vite
2022-05-13 16:57:38
588
原创 说说对 Node 中的 Buffer 的理解？应用场景？
一、是什么在Node应用中，需要处理网络协议、操作数据库、处理图片、接收上传文件等，在网络流和文件的操作中，要处理大量二进制数据，而Buffer就是在内存中开辟一片区域（初次初始化为8KB），用来存放二进制数据在上述操作中都会存在数据流动，每个数据流动的过程中，都会有一个最小或最大数据量如果数据到达的速度比进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之，如果数据到达的速度比进程消耗的数据慢，那么早先到达的数据需要等待一定量的数据到达之后才能被处理这里的等待区就指的缓冲区（Buf.
2022-05-11 10:34:12
299
转载 Node如何实现jwt鉴权机制？说说你的思路
一、是什么JWT（JSON Web Token），本质就是一个字符串书写规范，如下图，作用是用来在用户和服务器之间传递安全可靠的信息在目前前后端分离的开发过程中，使用token鉴权机制用于身份验证是最常见的方案，流程如下：服务器当验证用户账号和密码正确的时候，给用户颁发一个令牌，这个令牌作为后续用户访问一些接口的凭证后续访问会根据这个令牌判断用户时候有权限进行访问Token，分成了三部分，头部（Header）、载荷（Payload）、签名（Signature），并以.进行拼接。其中头部和载.
2022-05-10 11:51:29
468
原创 CSS简笔画：纯CSS绘制一辆婴儿车
专栏也更新了一小半了，不知道大家都学到了吗？CSS学习其实不难，难的是动手实践，当你看到一个效果是，觉得这个实现起来很难、很难，但是你一旦动手，一步一步分解实现，会发现也没有想象中的那么难。下面我们动手写一个纯CSS婴儿车，你将学习到下列知识：你能get到1、CSS Flex水平垂直居中2、CSS 变量（前面小节已经讲过）3、CSS 伪类的灵活使用4、CSS 相对定位和绝对定位5、CSS 绘制 半圆形 扇形 三角形6、CSS transform 变形看图解构婴儿车结构很简单，从下至上，.
2020-08-27 09:32:35
318
原创 CSS简笔画：纯CSS绘制一顶帽子
夏天，人人都希望有一顶漂亮的帽子吧？来，我送给你。看图解构帽子结构很简单，分为帽檐、帽冠、饰带、饰带上面有花朵html帽子结构<div class="cap"> <!-- 帽冠 --> <div class="top"> <!-- 饰带 --> <div class="lace"> <!-- 花朵 --> <div class="flower"> &l.
2020-08-27 09:31:16
357
原创 CSS3萌宠系列，纯CSS3诞生的可爱狗狗
好可爱一只小狗狗！睡觉憨憨的样子，听到细微的声音，立马竖起他的耳朵，看向远方。你是不是想拥有这样一只忠实而又可爱的狗狗呢？可爱的你值得拥有！上图是用什么软件制作的呢？用纯CSS+HTML你信吗？不信的，让我们拭目以待吧！看图解构看上图，狗狗有圆圆头，2只小小的眼睛和2只长长的耳朵，鼻子，嘴巴，4只脚，身体、尾巴组成。细节：1、地上有阴影，狗狗抬头时阴影会缩小2、狗狗是趴着在，所有只能看到3只脚3、狗狗睡觉时，呼吸会让身体上下起伏4、狗狗抬头时，耳朵会上扬有了结构思路，我们可以先来画出.
2020-08-21 11:51:31
307
原创 CSS3之3D魔方鼠标控制酷炫效果
前面文章有制作水晶魔方，这次我们升级一下它的功能，通过鼠标控制魔方旋转。大家先看效果这酷炫的效果，你怎么看？鼠标事件这次效果，咱们需要用JS实现。主要是监听鼠标事件，计算鼠标滑动距离，改变魔方的rotateX、rotateYJS有哪些鼠标事件呢？1、click：单击事件。2、dblclick：双击事件。3、onmousedown：鼠标按下时触发事件，不管按住左键/右键还是滑轮都可以4、onmousemove：鼠标移动实时触发事件5、onmouseup：鼠标松开时触发事件6、mous
2020-08-20 09:48:29
419
1
原创 炫酷的CSS 作图web组件 - css-doodle
今天不写代码，就看看人家是如何写代码的。什么是css-doodle<css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以运用于Web页面中。当你看到Custom Elements、Shadow DOM和CSS Grid的时候，一定很担忧兼容问题。事实上你的担忧是正常的
2020-08-20 09:47:24
454
原创 CSS 3D世界，3D 透视照片墙
有了前面2章内容，大家应该对CSS 3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。结构用一个容器div.photo，装六个面<div class="photo"> <div class="example"></div> <div class="example"></div> <div class="ex
2020-08-20 09:45:12
507
原创 CSS 3D世界，360°旋转水晶魔方
你家有类似的水晶魔方吗？我第一次见到它的时候，就觉得这个东西真不错，所以我家现在有2个。不过一个已经坏掉了，坐车放在箱子里面，颠簸导致水晶的四个角都破损了，大家如果要携带一定要小心哦。现在我们来制作一个永远不会破损的水晶魔方，用代码实现，要不代码出bug，永远不坏。CSS3实现水晶魔方效果。结构水晶是一个正方体，所以有6个面，用html表示如下：<ul class="cube-inner"> <li class="top"></li> <li c
2020-08-20 09:42:36
335
原创 CSS 3D世界，纯CSS如何绘制三棱锥
非常抱歉，断更了半年，原因也是有很多，疫情期间在老家也是没有电脑，上班后非常的忙，种种原因吧。让小伙伴们久等了，非常抱歉！后续还是保持正常更新，不辜负小伙伴们的信任。下面还是回归今天的主题：CSS如何制作三棱锥？结构三棱锥，大家看图，应该能看到它共有4个面，分别是3个侧面，1个底面。我们将其细分为，前面、左面、右面和底面。用html表示如下：<ul class="cones-inner"> <li class="front"></li> <li c
2020-08-20 09:41:12
485
原创 CSS绘制铅笔：比心
铅笔，距今已有四百多年的历史，其中，绘画素描的铅笔分为诸多类型，它分成三个发展阶段，分为石墨、木制笔杆、带帽铅笔。1564年，在英格兰一个叫巴罗代尔的地方，人们发现了一种黑色矿物——石墨。很快，当地的一些牧羊人发现，可以用石墨在羊身上画上记号。受此启发，人们把石墨块切成小条拿来写字和绘画。但石墨条很容易弄脏手，而且容易折断。1761年，德国化学家法伯尔解决了这个问题：他先把石墨矿石研磨成粉末，用水冲洗去杂质，获得纯净的石墨粉；接着，他又在石墨粉中掺入硫磺、锑、松香等物质；然后再将这种混合物加热凝固，并压.
2020-08-20 09:39:40
387
原创 CSS爱心：把你的心我的心串一串
前面几个小节都要提到Box-Shadow，这个小节让我们来真正感受它的强大吧。话不多说，直接看图：这个扑通扑通跳动的心，就是Box-Shadow制作的。如果你看过前面小节《CSS3 Box-Shadow Loading，创造无限可能》，应该看到这个效果，就可以自己动手做了。下面我们一起动手试试吧绘制心形<div class="heart"></div>css.heart { font-size: 30px; width: 1em; height: 1em;
2020-08-20 09:39:07
214
原创 Box-Shadow Loading，可以创造无限可能
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPZgs4eQ-1597887470974)(http://cdn.javanx.cn/wp-content/themes/lensnews2.2/images/201912/7/1.gif)]Box-Shadow 通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，“多层阴影”，制作一些非常有趣的动画。box-shadow: h-shadow v-shadow blur spread color ins
2020-08-20 09:38:25
214
1
原创 CSS进度条式Loading，加载到100%我们的距离就近了
进度条，大家应该都看到过，一个定宽的容器，里面按百分比展示进度，这就是进度条。CSS + HTML可以很简单的实现进度条功能，下面我们看一个简单示例示例一<div class="progress" id="progress1"></div>css#progress1{ position: relative; width: 200px; height: 20px; background: #dfdfdf;}#progress1:before{ p.
2020-08-20 09:37:32
1039
原创 CSS机械齿轮Loading，爱的魔力转圈圈
前言“爱的魔力转圈圈，想你想到心花怒放黑夜白天，可是我害怕爱情只是一瞬间，转眼会不见…”，嗨起来，小伙伴们，跟我一起来！干啥玩意？这节是计算机课，不是音乐课。确定不是机械课？额，差不太多吧，总之就是玩儿个轮子。看图，怎么都是机械课啊，但是我们本次课程，只需要将其效果用HTML + CSS实现，所以还是计算机课，想上音乐课、机械课的可以先离开一下。下面回归正题，对示例讲解先来个轮子大家肯定想，齿轮的锯齿如何实现呢？其实很简单就可以画出来，大家看下方代码<div id="loadin
2020-08-20 09:35:43
248
原创 CSS伪类：CSS3鼠标滑过按钮动画第三节
原文地址：http://www.javanx.cn/20191226/buttonhover-2-2/前言有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就到此结束了，本章结尾会对前3小节进行一定的总结。下面继续本小节的主题，请先看一下效果示例：看过前两小节的小伙伴，可能不需要看下面的源码，就知道如何实现了，大家可以先自己动手试试，然后再回头来看看。或许实现方式
2020-08-18 16:55:17
250
原创 纯CSS绘制圣诞老人头像
原文地址：http://www.javanx.cn/20191224/css0/前言下面看看示例图：图例解析看了上图，我们先分解一下图形，一步一步实现1、整个头像用一个圆形包裹2、头像分为上下两部分，头和身体3、头有分为帽子，脸部，胡子，耳朵；身体上还有扣子4、脸上有眼睛，鼻子，嘴巴ok，分解细致后，我们就把大致的结构画出来，动画先忽略。html结构分解身体部分<div class="window"> <div class="santa"> &l
2020-08-18 16:35:17
544
原创 CSS伪类：CSS3鼠标滑过按钮动画
原文地址：http://www.javanx.cn/20191224/buttonhover/前言按钮，对开发者而言，是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式，增加一些用户体验。比如：hover样式、点击样式、loading样式等。下面我们通过简单示例在学习一下css3动画和css伪类。示例一<button class="btn-1">按钮一</button><style>button{ position: relative; w
2020-08-18 16:32:17
397
原创 Vue.js 如何使用 Socket.IO ？
在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，PC网页完成登录并跳转)、订单语言提醒等，这些都是建立在两端实时通信的基础上的。对前端而言，来实现浏览器和服务器实时通信，最好的选择就是Socket.IO库，能够快速的实现两端实时通信功能。1、什么是 Socket.IO?Socket.IO是一个WebSocket库，可以在浏览器和服务器之间实现实...
2019-07-23 15:53:39
1980
转载 阿里制造：“犸良”一站式动效制作平台
犸良是什么？“犸良” 是一款基于 Lottie 的动效设计平台。能够快速生成设计师想要的动态效果，并交付给开发，极大地提高了设计效率和设计还原度。作为一站式动效制作平台，通过海量的动效素材以及可视化编辑能力，帮助零基础的用户轻松完成动效制作。上面说到了 Lottie ，那 Lottie 你了解嘛？什么是Lottie ？能够解析渲染通过 AE 上的 Bodymovin 插件将 AE 中制作...
2019-07-09 09:36:08
2727
转载 Vuex+localStorage数据状态持久化
前言在前面文章中，我们详细的讲述了Vuex相关的知识，没有了解的小伙伴可以先去了解一波:《Vuex是什么？Vuex能做什么？Vuex怎么使用？》这篇文章主要是讲讲如何使Vuex数据持久化？顾名思义，浏览器想要数据持久化，必须用到localStorage或者sessionStorage，可能还有不知道这两个东西是干什么的小伙伴，简单的说一下：localStorage和sessionSto...
2019-06-18 15:18:20
1364
原创 Vue全局指令：如何添加全局指令？（附2个常用自定义指令）
前言前面有专门的文字，讲过Vue指令，以及如何使用指令，今天就来讲讲如何添加全局指令，并且附上2个非常适用的例子。《Vue如何创建自定义指令？》如何添加全局指令？在上面文章中，提到过一种方法，在main.js（入口JS文件）中引入你已经写好的指令文件，可以省略文件后缀：// main.jsimport focus from 'xxx/directive'如果你有多个指令文件了？怎...
2019-05-30 17:51:47
15712
原创 JavaScript正则表达式入门知识详细介绍
前言正则表达式，在各种语言（JS、Java、Php等）里面都是很常见的，而且语法都有相似之处。作为新手，第一次接触正则，可能一脸茫然，这是什么东西，语法这么奇怪。其实它的语法是有迹可循的，而且基本是规定的语法模式，只要掌握它的语法，你也可以写出属于你自己的正则表达式。下面就是我们一起学习的内容，可以先了解一下：1、什么是正则表达式？2、正则表达式用在什么地方？3、如何创建一个正则表达式...
2019-05-30 17:50:45
224
原创 如何快速上手基础的CSS3动画
前言说起CSS3动画，就必须说说 transform，translate，transition，animation这4个属性，transform主要定义元素的动作，比如旋转、倾斜、位移等，translate是transform里面的属性，用于2D/3D位移。后2个主要对动作进行描述，动画时间、速度曲线、次数等。下面我用是一些简单的示例，让大家快速的入门上手:快速开始第一个动画...
2019-05-30 17:48:15
141
原创 VUE开发一个组件——Vue list列表滑动删除
前言滑动删除，在很多APP软件里面可以见到，比如淘宝的订单列表，QQ微信的聊天记录等等，今天就来看看JavaScript是如何实现这个功能的，之所以说是vue，主要是框架是vue啦，主要还是JS+CSS部分。页面部分页面就超级简单咯，遍历一个列表，添加touchstart和touchend事件，并添加删除按钮。如果滑动就添加move类样式，向左滑动60px。<ul> <...
2018-11-30 14:12:58
3224
3
原创 VUE开发一个组件——Vue PC城市选择控件
前言前面用vue开发了三四个组件了，都是H5的，现在来看看PC是如何玩转组件的？其实和H5相同，样式不同而已。相关推荐《VUE开发一个组件——日历选择控件》 《VUE开发一个组件——移动端弹出层（IOS版）》 《VUE开发一个组件——Vue tree树形结构》都提供源码，可以去github上面获取。城市控件开始今天的课题，制作一个PC版的城市选择控件。样式制作...
2018-11-27 16:53:36
3256
5
原创 原生JavaScript和Vue、小程序都是如何阻止事件冒泡的？
前言事件冒泡，可能有些同学还不是很清楚，什么是事件冒泡？来看个简单例子。<div onclick="alert('最外层')"> <div onclick="alert('中间层')"> <a id="ahref" href="http://www.javanx.cn" onclick="alert('最里层')&q
2018-11-21 12:07:07
438
原创 调用百度API，文字转语音
前言文字转语音，运用在什么场景了？一般后台管理系统会用到，提示管理员有“新的订单”、“新的任务”等等，管理员可以马上收到，并及时处理。就好比，在餐厅，经常会听到“你有新的订单”。下面就来看看是如何做到的。示例首先我们需要用到百度API, 百度演示地址。javascript实现起来其实很简单，请看function audioPlay(text){ var zhTex...
2018-10-31 16:57:07
14046
1
百度地图API自己的小应用
[b][align=left][align=center][color=red][size=large][/size][/color][/align][/align][/b]body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}#allmap {height: 100%;overflow: hi...
2013-11-26 11:49:45
129
c#开发ic刷卡器。
现在的问题是，我需要读11位和14位的ic卡，8位的我可以读。这里的11位，14位和8位指的是IC卡的id。怎么编写代码使读卡器能读11位或者14位的，求源码。下面的三个图就是源码和，例子。 int sector = 3; st = Program.rf_card(icdev, 0, snr); //寻卡 MessageBox.Sh...
2013-10-17 18:05:51
854
在applet调用js时出现错误(已解决)
import java.security.AccessController;import java.security.PrivilegedAction;import java.text.SimpleDateFormat;import java.util.Date;import javax.swing.JApplet;import netscape.javascript.JSOb...
2013-09-24 09:23:37
296
CSS中的Filter样式特效1
[align=center]CSS中的Filter样式特效1[/align] 从IE 4.0版开始，就提供了一些内置的多媒体滤镜特效，正是由于这些基于CSS的样式属性的控制，于是我们在编写网页的时候，即使我们不用图片，也可以使我们的文字，图片，按钮或是DIV标识鲜艳无比，充满生气，从而为自己的网页增加了比较美妙的视觉效果。 下面，我们就来看看CSS的Filter样式。这里，即使你没有CSS这...
2013-08-21 22:38:44
101
官方spring-framework-3.2.1.jar
[align=center][size=xx-large][color=darkred]spring-framework-3.2.1.jar[/color][/size][/align]下载提供给大家[img]http://dl2.iteye.com/upload/attachment/0085/8175/08363c1f-856c-3c9a-88de-c95b52117ca7...
2013-06-16 01:11:12
146
原创 spring监听器
Spring3 下使用proxool做连接池的时候出现异常 ERROR 2010-07-06 12:27:10,328 [org.logicalcobwebs.proxool.ProxoolDriver] [Problem]org.logicalcobwebs.proxool.ProxoolException: Attempt to refer to a unregistered
2013-06-15 02:26:13
904
监听器优先于数据库连接池运行
Spring3 下使用proxool做连接池的时候出现异常 ERROR 2010-07-06 12:27:10,328 [org.logicalcobwebs.proxool.ProxoolDriver] [Problem]org.logicalcobwebs.proxool.ProxoolException: Attempt to refer to a unregistered po...
2013-06-15 02:16:44
174
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人