- 博客(45)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Axios封装及使用
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。使用过 Ajax 的前端开发都知道，Ajax 可以进行 http 请求，而 Axios 则实现了对 ajax 的封装，只不过它是 Promise 的实现版本。
2022-09-19 14:10:20
364
1
原创 Vue混入mixins，让你减少一半代码
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
2022-09-14 11:50:38
858
1
原创 Vuex 3使用总结
但是当遇到多个组件共享状态时，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力，甚至会导致无法维护的代码。getter可以认为是 store 的计算属性，返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。写过 vue 项目的程序员应该都知道父子组件传参的方式，通过子组件的 props 参数，和 $emit 来触发事件。基于此，把组件的共享状态抽取出来，以一个全局单例模式管理，vuex 就产生了。如果有多个组件需要共用状态的某计算属性，可以使用它。
2022-09-12 17:57:35
589
原创 近期前端面试总结
1.工厂模式 - 传入参数即可创建实例虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode2.单例模式 - 整个程序有且仅有一个实例vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉3.发布-订阅模式 (vue 事件机制) 发布订阅模式的核心就是一对多的关系，一个发布者发起事件，所有的订阅者都会执行4.观察者模式 (响应式数据原理)
2022-09-09 12:00:29
290
原创 移动端列表分页，删除交互优化
在小程序、H5等移动端中，列表的加载不同于PC端的表格，数据是分页显示的。在移动端中，一般都是上滑加载新数据，但是不会切换显示已加载的上一页数据，而是拼接到底部。该篇博客使用 Vue + elementUI 技术栈实现。
2022-09-02 17:54:34
1343
原创 单例模式设计——Vue单例组件实现实例
单例模式，顾名思义就是只有一个实例。在 Vue 中，应用到该设计模式的有 vuex、vue-route 等。相关的设计模式和实现在网上可以找到很多教程，这里不做赘述。在系统中，适合单例模式使用场景最常用的功能要算是登录了，本章节单讲登录弹窗的单例实现。............
2022-08-31 18:18:37
3343
原创 CSS和JS实现内容折叠/展开效果
经常逛 CSDN 的朋友会发现如下效果：当代码行数超过指定高度的时候，会有折叠，点击展开按钮后才会展示全部。这一效果在知乎、百度知道也很常见。
2022-08-22 11:06:08
5527
原创 node.js实现token验证——从数据库验证登录到redis存储
做过前后端分离项目的同学应该都做过 token 验证，在前端登录的时候需要缓存后端传过来的 token，然后在需要验证权限的接口带上 token。本章节来实现使用 node 进行 token 的权限验证。
2022-08-20 11:16:30
1697
原创 node.js热启动
但是在更改相关代码后，项目并不能自动更新，需要自己手动 ctrl + c 停止后，再运行上述指令，才能重新看到代码更改后的效果。刚学 node.js 不久，需要编译运行 node 项目都知道需要在项目路径下输入。如果是 windows 平台使用相关代码编辑器运行可能会报如下错误。这是因为没有管理员权限的原因，可以使用管理员身份运行 cmd。能不能让代码自动检测更新后自动重新运行项目？使用 nodemon 运行项目。安装 nodemon。.........
2022-08-16 18:09:19
482
原创 socket.io实现简易版群聊
最近学了点 websocket 的技术知识，了解到 node.js 有相关技术——socket.io可以实现，就想着实现一个简单版本的群聊。在浏览器中打开2个窗口，访问 http://localhost:3000/socket需要安装 express 和 socket.io。下面的代码开放了 public 文件目录为可以公开访问的文件目录，里面主要放置一些 css 文件。index.js前端实现前端文件放置在 pages > socket > index.html 路径。这里引用了2个css文件，主
2022-08-11 11:57:26
392
原创 Linux发布node应用——使用nohup和&指令
在Linux系统安装node环境之后，想要在系统上将node应用跑起来。创建一个输出 Hello World 的简单应用。使用 putty 连接到服务器后，运行 node serve.js；然后在浏览器输入可以在浏览器显示。
2022-08-08 10:26:49
864
原创 服务器发送事件：express使用SSE实现消息推送
最开始学习ajax的时候，为了实时获取最新信息（比如未读消息），通过定时器setInterval不断调用API。这样做虽然可以实现效果，但是这种方法并不能判断后端是否有新的消息产生，只能通过客户端不断请求，浪费带宽和服务器资源。最好的方法是在服务端生产新消息后，推送到客户端，也就是服务器主动推送。......
2022-07-23 17:54:21
1152
原创 Express入门——Hello World!
众所周知，node.js是运行在服务端的JavaScript。而Express则是基于Node.js平台的极简Web开发框架，它提供了丰富的HTTP工具。使用Express可以快速地搭建完整功能的网站。这里在window平台上演示。
2022-07-22 10:29:09
245
原创 钉钉小程序实现自定义表单模板组件（二）
上一篇说的是自定义表单模板，这一篇则是针对表单模板的编辑。在 components 文件目录下新建 formDetail 组件formDetail.axmlformDetail.js
2022-06-15 15:20:01
539
原创 钉钉小程序实现自定义表单模板组件（一）
之前实现过在 web 端的自定义表单，使用 vue + elementUI，参考链接：https://blog.csdn.net/weixin_43930421/article/details/125041581现在随着移动端完善，需要在钉钉小程序上也实现类似自定义表单。首先引入 colorUI，参考：https://blog.csdn.net/weixin_43930421/article/details/124748879在 components 文件目录下新建 custForm组件custFor
2022-06-14 15:58:44
1654
原创 js相等性判断：==、===和Object.is
JavaScript 针对值，提供了三种不同比较操作：非严格相等，或者叫抽象相等。从字面意思就可以看出，它对2个值的比较并不会十分严格。一般会忽略类型的比较，比如 ‘1’ == 1 会被认为是相等的。严格相等 ===简单说，如果两个被比较的值类型相同，值也相同，那就判断两个值全等。不过需要注意的是，当两个值分别为 +0 和 -0 时，被认为是全等的。Object.isObject.is 大体上和 === 的比较类似。但是针对于正负0值的判断有所不同。还有就是对于 NaN （not a number的
2022-06-13 15:42:05
118
原创 vue+elementUI实现的标签选择及新建组件
实现如下图所示的一个标签选择组件。图1：标签选中时的效果图2：标签新建时的效果tagSelect.vue
2022-06-11 11:49:51
1074
1
原创 钉钉小程序时间选择组件
虽然钉钉小程序自带了时间选择 api。但是这个功能所展示的 ui 界面在 ios 和安卓系统上并不一致。而且在 ios 上日期是一行行去滑动的，导致选择跨年或跨月日期就要滑动很久。基于以上2点考虑，决定自己开发组件，以满足功能需求。效果图如下。因为系统全局引入了 colorUI，所以在组件中也用到了相关样式，引入参考：https://blog.csdn.net/weixin_43930421/article/details/124748879在 components 文件目录下新建 tmSelect 组件
2022-06-10 09:47:16
1604
原创 钉钉小程序和微信小程序的使用区别：picker
微信小程序组件的丰富和完善程度要远远高于钉钉小程序。这里说说这两个小程序中 picker 组件的区别。微信的 picker 组件通过 mode 参数可以设置为多种选择器类型。对于不同的mode，picker拥有不同的属性。相比之下，钉钉的 picker 选择器就单调的可怜。它没有 mode 去设置各种选择器，只能够设置为单列的选择器。日期、时间选择器虽然钉钉小程序不能通过 picker 直接设置日期和时间选择器，但是可以通过开放的接口 dd.datePicker 去打开日期选择列表。这里需要注意的是最好在
2022-06-09 09:48:32
1755
2
原创 path和params不可同时使用，Vue Router注意事项
最近项目遇到了个路由问题，在项目中通过类似如下写法获取不到参数也就是说，如果同时在路由中使用 path 和 params，在对应页面是获取不到 params 参数的。后面翻阅了 Vue Router 文档，找到了下面这句话注意：如果提供了 path，params 会被忽略在主页面中，定义了 toA 函数，将跳转至 A 页面。在 a 页面中，通过 name 和 params 的配合可以获取到参数。修改 toA 函数，通过 path 和 params 获取到的参数为 undefined如果需要使用 pa
2022-06-08 09:55:41
1964
原创 钉钉小程序编辑图片 editPicture
开发应用过程中，时常要用到裁剪图片的场景。最常使用到头像裁剪的场景要算是头像编辑了。vue 项目可使用 vue-cropper 实现，参考：https://blog.csdn.net/weixin_43930421/article/details/124836898但是在钉钉小程序中，就可以很简便的调用到手机自带的图片编辑功能。head.axml给图片赋予点击事件后，在 selImg 方法中选中图片后调用 editPicture 编辑注意需要判断当前钉钉版本是否支持，调用成功，success 函数
2022-06-07 10:32:07
1008
原创 钉钉小程序固定在底部的按钮组件
一种是固定在右下角的圆形按钮，一种是固定底部的提交按钮。首先引入 colorUI，参考：https://blog.csdn.net/weixin_43930421/article/details/124748879在 components 文件目录下新建 floatBtn 组件floatBtn.axmlfloatBtn.jsfloatBtn.acss参数事件说明参数/事件说明默认值color按钮颜色，查看 color 颜色值‘blue’position......
2022-06-06 14:30:08
708
原创 vue+elementUI实现自定义表单模板组件（二）
前言在上一节主要解决了表单模板的创建问题，在数据库中的存储格式为字符串。主要是通过前端处理，保存为 json 数组的字符串，形如[ { label:"文本", required:true, type:"text", icon:"el-icon-s-tools", placeholder:"", _vModel:"field0" }]再通过 JSON.stringify() 转为 json 串后存入数据库。有了表单模板之后，如何在前端进行呈现并编辑，这一节就理清这一思路。表
2022-05-31 10:02:26
1059
原创 vue+elementUI实现自定义表单模板组件（一）
前言如下图，实现一个可以自定义的表单。本文以实现思路为主，并未提供完整代码。思路1、页面布局为左中右布局：左边显示可以定义的表单控件，中间显示预览效果，右边则为选中某个控件后可以编辑的属性。如下图，先择单选项后，可以编辑选项。2、使用 vuedraggable 拖拽组件，直接拖动左边的控件到中间生成表单。vuedraggable 文档可查阅：https://github.com/SortableJS/Vue.Draggable（你也可以不使用该组件，直接利用点击事件，点击左边控件后在中间生成
2022-05-30 10:54:13
4087
原创 vue项目配置生产、测试和开发环境
目前的 web 项目开发基本都是基于前后端分离的模式。在实际的开发过程中，从开发到测试完成、发布到线上所调用到的接口地址可能都不一样，那就需要在项目中分别配置各个环境的接口地址（或者域名，也可以定义不同环境下的不同变量）。首先，在项目根目录下新建3个文件 .env 、.env.test、 .env.production第二步，编辑文件.env（开发环境）NODE_ENV=developmentVUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名
2022-05-28 11:43:43
4630
6
原创 js根据文件名返回对应文件类型
const getFileType = (filename) => { //根据文件名返回对应文件类型 let type = "unknown"; if (!filename) return type; let index = filename.lastIndexOf("."); let extension = filename.substr(index + 1); extension = extension.split('?')[0]; const typeMap = {
2022-05-27 09:10:33
572
原创 JSON数组操作函数：去重、按key值分割显示
JSON数组去重/* * JSON数组去重 * @param: [array] json Array * @param: [string] 唯一的key名，根据此键名进行去重 */const uniqueArray = (array, key) => { if (array.length > 0) { var result = [array[0]]; for (var i = 1; i < array.length; i++) { var ite
2022-05-26 09:11:39
316
原创 利用递归实现钉钉小程序点击富文本，进行图片预览效果
问题钉钉小程序的 rich-text 富文本组件，提供了在手机上浏览图文信息的富文本内容功能。但是如何实现点击富文本信息，实现其中图片的预览？rich-text 组件提供了下列事件，但是很难通过这些事件定位到用户具体点击了哪张图片（富文本中可能存在多张图片，也可能没有图片）解决退而求其次，只要点击了组件内容，如果其中存在图片信息，就调用 previewImage 接口实现预览。其中难点在于使用递归查询 nodes 数组是否存在图片节点。// 点击富文本预览图片const richTap =
2022-05-25 09:18:34
722
原创 js常用正则判断函数，包括手机号，邮箱等
// 判断是否数值const isNumber = (val) => { var regPos = /^\d+(\.\d+)?$/; //非负浮点数 var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数 if (regPos.test(val) || regNeg.test(val)) { return true; }
2022-05-24 09:01:51
223
原创 钉钉小程序头像组件
在 components 文件目录新增 avatar 组件avatar.axml<image class="ava-round {{size}}" mode="aspectFit" src="{{url}}" onError="onError" />avatar.acss.ava-round{ border-radius: 50%;}.mini{ height: 60rpx; width: 60rpx;}.lg{ height: 100rpx; width:
2022-05-23 10:09:24
205
原创 Node Sass does not yet support your current environment问题解决
因更新了 node 版本，导致目前的 vue 项目编译一直报错。项目中有引入了sass模块，执行 npm run dev 的时候报了以下错误：Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime尝试解决1、卸载当前版本node sassnpm uninstall --save node-sass2、更新到最新版本cnpm install node-sa
2022-05-22 11:14:44
2162
2
原创 JavaScript ES6新特性
JavaScript ES6带来了新的语法和特性，使得代码更加的现代和可读。它包括许多重要功能，如箭头函数、模板字符串、解构赋值等等。const 和 letconst 是 ES6 中用于声明变量的新关键字。const 比 var 强大。一旦使用，变量就不能重新分配。换句话说，它声明的是一个只读的常量。这对于定位选择器非常有用。例如，当我们有一个触发事件的按钮时，或者当您想在JavaScript中选择HTML元素时，请使用const而不是var。 // ES5 var btn = document.
2022-05-21 14:32:12
2343
原创 钉钉小程序sjs日期对象
钉钉小程序中的 sjs 相当于微信小程序的 wxs，可以在 axml 中引入 js 方法。sjs 中的数据类型和原生 js 大致相当，详情可以查阅链接：https://open.dingtalk.com/document/orgapp-client/data-type注意但是需要注意的是，sjs 中的日期类型和原生有细微的区别。原生 js 获取日期对象：var d = new Date();d.getFullYear(); // 获取当前年份sjs 获取日期对象：var date =
2022-05-20 11:29:55
389
原创 基于vue-cropper头像裁剪上传组件
安装 vue-croppernpm install vue-cropper此外，项目使用了 elementUI 框架，可自行引入。代码实现<template> <div> <div class="cropper-containter cropper-size" :class="customClass" v-if="showContainter"> <div class="cropper_wrap" v-if="showUpCropp
2022-05-18 10:20:54
282
原创 钉钉小程序省市区选择组件
效果图：首先引入 colorUI，参考：https://blog.csdn.net/weixin_43930421/article/details/124748879代码实现
2022-05-17 10:25:58
663
2
原创 vue+elementUI实现日期快选组件
如下图，利用 vue+elementUI 实现一个日期快选的组件。在这引用 dateUtil.js 工具包，参考：https://blog.csdn.net/weixin_43930421/article/details/124745006代码实现在 components 文件目录新建 DateSelect.vue 文件。<template> <el-popover v-model="showPopover" style="padding:8px
2022-05-16 10:38:59
633
原创 钉钉小程序星级评分组件
前言因为小程序引入了 colorUI 框架，请参照如下文章：https://blog.csdn.net/weixin_43930421/article/details/124748879组件截图代码实现在 components 文件目录下新建 rate 组件。rate.axml<view> <view> <text a:for="{{max}}" data-value="{{item}}" key="{{index
2022-05-15 09:52:58
347
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人