- 博客(49)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 三年不断优化更新的接口服务封装代码推荐，支持后端多种微服务对接，可多平台移植使用
碎碎念看了下上次文章发布时间，2个月前。好久没更新了。技术深度方面也没有特别多的一个加深。这次来一个老生常谈的事情吧。api服务封装。这是我干前端这些年一步步慢慢优化过来的代码。特性：1、支持多个不同微服务（核心）2、集中配置中心3、简化开发流程和优化开发体验4、解耦，可移植一、列举下大家都是怎么封装的接口服务我来吐槽下大家这些都会产生什么问题，我全部试过1、增加接口拦截服务，什么重复接口防止提交好多文章都在axios上面做文章，基于axios本身的api进行再封装。
2021-09-18 16:26:55
418
原创 webpack项目打包或git提交更新版本号，检测项目版本更新实现。
本次项目地址：https://github.com/ht-sauce/vue3-pc-template1、pre-commit：husky，lint-staged最近vue3创建新项目package.json多了点东西叫做pre-commit作用是：项目要使用git进行代码提交时，使用叫pre-commit的git钩子，在调用git commit 命令时自动执行某些脚本检测代码，若检测出错，则阻止commit代码，也就无法push，保证了出错代码只在我们本地，不会把问题提交到远程仓库配置
2021-06-22 17:46:03
1201
1
原创 我的前端项目目录约定和基础规范建议。一个5年前端接触者的推荐
甘雨镇楼废话其实我以前觉得这个文章没必要写。但是干前端三年多（15年底接触前端开发），我发现后端做前端的时候，前端新手入学的时候对于这个基础的约定规范，都是东拼西凑，慢慢的把自己的风格习惯搭建起来。而很多没有追求的就是穷举写法。写到哪里是哪里。我这里会对于我个人这些年逐步沉淀的习惯分享给大家。有react的见解也有vue的见解。大家互相促进文后有阿里前端九部规范文档一、我的目录结构1、目录结构项目是vue项目，但是react其实也差不多。config ...
2021-05-29 10:51:37
1208
原创 vue3下jsx教学，保证业务上手无问题！手敲代码，有知识点，附带和template对比
前言原因：闲的。还有一个原因吗？嘿嘿然后之前就说过了，我拿vue3直接干公司项目了，是内部的孵化项目，客户不多，但是也是正规的生产项目。技术栈说明：公司项目：js，element-plus，vue3，jsx，常规template，按需加载（单独领出来是因为这个也会导致你的项目填坑变多）个人组件库研究项目：TypeScript，vue3，jsx，常规template主要讲公司项目吧，公司项目上线一个月。还算稳定，不过我需要给没能力填坑的大家看一个截图。一、vue3生产注意点.
2021-01-06 09:04:04
1725
1
原创 基于vue3和element-plus的省市区级联组件,elui-china-area-dht发布
说明其实该组件很简单，核心在于全国省市区数据的来源，还有数据格式化以及组件封装。然后大家应该知道在vue2阶段其实有一个省市区的第三方封装的组件，我想大家应该不少人使用过。看源码，作者应该暂时没有发布vue3的计划。那么我这里就提前一步给大家个福利。使用的话直接看使用部分就行了。核心原理数据基于：https://github.com/airyland/china-area-data根据第三方提供的省市区数据部分，将数据改为element-plus所需的嵌套数据结构封装Chin
2021-01-05 11:43:12
3508
7
原创 用react-create-app搭建一个类似vue的初始项目（eslint，prettier，rouer）
不废话了，这次直接开干。也是我逐步的搭建过程。当手记了总结看最后。本次项目地址：https://github.com/ht-sauce/react-template1、创建项目这个没什么可以说的，就是一个命令：npm create 你的项目名称附带官网地址：https://www.html.cn/create-react-app/docs/setting-up-your-edi...
2019-12-27 17:26:10
582
原创 自己封装一个文件上传函数（使用axios）
序言昨天在写博客的个人动态页面，里面涉及到了图片上传。之前我都是用的别人的插件和elementUI的upload组件。但是现在没法用了。页面的效果差别有点大，如果改elementUI的样式，会很累。这时候很愁人啊。（懒啊！）这是页面开发的效果，很像qq空间的感觉。一、选型1、选择1：自己从新写系列。我参考了（简称xhr）和Fetch文档地址：XMLHt...
2019-11-28 14:41:16
2901
原创 决图片溢出，样式不对问题，个人博客开发（三）
废话：最近写博客。重新写了下文章编辑器。用的quill.js，觉得应该分享下。有些坑还是需要注意下的。一、vue-quill-editor引入和使用1、先放官方的一个文档地址：https://github.surmon.me/vue-quill-editor/npm地址：https://www.npmjs.com/package/vue-quill-editor2、使用方式...
2019-11-22 17:32:27
450
原创 前端开发linux下安装nginx
废话：表示买了阿狸云的服务器直接买了三年。真爽。总共230。1g1核1M 40G既然买了服务器肯定是要做点什么的。作为一个技术开发肯定要弄一个个人博客之类的是不是。服务器买了，那就搞起。还有其实linux没有想象中那么难。怎么说呢，够用就行。就是要多百度下。一、工具准备工具主要是xshell，用于命令操作xftp：用于文件上传以及操作这两个工具配合下来，那...
2019-11-02 10:08:35
321
原创 前端开发搭建博客系统（二），jwt权鉴设计以及中途遇到的问题。献给前端
废话部分上次废话太多，估计有些小伙伴没看太清楚。这次会精简很多。只拿关键的出来讲。个人属于前端，后端看到了扣下留情。希望本文能帮助大家项目地址：前端：https://github.com/ht-sauce/dream后端：https://github.com/ht-sauce/dream-admin一、权鉴选型这块没太多可以说的，基本百度的结果就是jwt而eggjs...
2019-11-02 10:07:36
259
原创 vue打包优化大小,vue服务端渲染，非cli环境实现spa单页面项目
引言：写这篇文章的目的主要在于刚才看了一位掘友的文章，但是我看了他的代码有点粗糙，甚至是我觉得无法作为一篇好的给予新手的引导文章。这里我先抱歉一声，因为我这样做有损你的声誉。先放上该掘友的文章，还是很不错的，只是希望多点注解会更好：https://juejin.im/post/5d9ff02df265da5baf4104d9#comment一、知识点和目的1、打包优化的目的...
2019-10-12 14:40:25
530
原创 vue实现树形组件，参考并解析elementUI树形组件
废话部分，不想看的跳过就行了，发发牢骚本来是不想发出来的，但是呢，最后出于装逼，讨论和分享的想法下还是拿出来。而且我对于树形组件的自定义节点这块，还是没有理解透彻。也希望有大神帮忙解惑。然后其实我的眼界还是有限，一直都停留在ui组件上面，但是作为一个普通的前端，大家不都干这样的事情吗?既然你觉得我眼界小，那么请说说你在干什么。（一次偏激的回复）感慨：如果没有网络的世界我想我会抑...
2019-10-12 14:39:16
2666
原创 vue轮播组件实现，懂，但是写过才算，附带好用的gif录制工具
写这个组件起因记得就这两天有掘友发一个沸点说找女票千万别找同行，好了，曾经我是erp软件实施，现在转前端。女票也是前端。然后她发我一个链接（打不开看gif图）：http://ipark.jsboon.com/static/dashboard/yjw/yjw.html这个链接的最右侧有一个轮播的效果。说起来这整个页面是不咋的，不过里面涉及的东西都比较复杂。附带gif录制工具：http:/...
2019-09-26 10:32:42
374
原创 vue下个人实现拼图验证码
缘由：之前看哔哩哔哩官网登录的时候有一个拼图验证码，很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，12306的图片验证码都没有拼图验证码对前端的要求来的复杂，和难。我总结下知识点：1、弹窗功能2、弹窗基于元素定位3、元素拖动4、canvas绘图...
2019-09-11 17:39:33
6927
3
原创 vue递归组件，认识树形组件基础原理，纯数据驱动组件
背景1、个人心血来潮想试试如何实现无限嵌套组件，也就是当数据不确定的情况下，如何渲染组件2、自我思考以后肯定会需要用到这种思维和开发方式，早点学，早点掌握3、好奇之前jqui的文件夹列表实现说明：组件写的很垃圾，很丑，大家请关注原理实现开始实现第一步思考首先既然是树形渲染，那么for循环是肯定需要的，问题：for循环的时候只能单列循环，也确实是数据驱动，但是...
2019-08-24 14:38:52
651
原创 多个nodejs下指定nodejs版本运行项目，指定nodejs版本运行项目
前言：很早之前nodejs就出来了，大家在运行项目的时候都是一个nodejs走天下。服务器上面也是一个nodejs环境。但是大家都应该知道，如果电脑上面已经存在nodejs了那么就不能装第二个了。那么我的项目和别人的项目环境不一样，会不会出问题呢。很负责的说，如果你们两个的环境不一致那么就会出问题。所以我们正确的部署nodejs项目的方式应该和java等项目一样，所有包文件和项目文件要开发的时...
2019-08-14 16:21:23
5849
原创 妈妈再也不用担心css难写了！css的奇技淫巧（转）
声明：这个博客是个人在掘金上面看到大神总结了很多的css技巧转发的。非常好用。最后有福利举例：1、三角形生成器（自动生成css代码）：代码：.triangle { width: 0; height: 0; border-style: solid; border-width: 0 50px 100px 50px; border-color: transp...
2019-08-14 08:46:04
571
原创 vue下自己开发富文本编辑器（二）带你从入门到放弃，个人已经基本开发完成
上一篇总结：上一篇其实代码开发方面，基本原理都看的差不多了，但是发生了无限嵌套的问题。总结下富文本遇到的问题：1、元素跨标签处理2、如何正确选择到你要的元素3、跨行设置元素未选中部分换行（默认回车事件导致）4、多个功能直接交叉使用问题（要有取舍）5、css新旧混合问题6、代码块插入问题7、其实还有更多问题，但是没有开发过的那真的不知其中各种滋味…………目前还...
2019-08-08 17:17:38
789
原创 记录css实现外大内小的3d效果（3d转换）
首先感谢这篇博文：https://www.cnblogs.com/zheshiyigemanong/p/6793634.html效果图：下面是代码部分：html部分：<div class="div1"> <img src="./img/1.jpg" height="411" width="658" alt="" /> <div cla...
2019-08-02 15:13:52
326
原创 vue部署到eggjs下，并且实现多页面vue项目部署，eggjs前端渲染项目（附个人github示例地址）
项目背景这个是我个人博客下一步开发的流程，上一篇博客讲过，我会研究eggjs后端框架，给我的博客建立后端系统。这里有人会说前端不需要学后端。怎么说呢，nodejs也是js，并且像阿里等大公司，别人虽然也用nginx之类，但是前端项目已经不是放在nginx上面跑了，所以，前端开发需要熟悉在nodejs环境下运行和开发。项目已经上传git地址：https://github.com/...
2019-07-26 15:20:08
5951
1
转载 最简单的小程序数据监听，最简单的vuex原理，实现跨页面通讯（转）
声明转载至：简书：原文地址：https://www.jianshu.com/p/2ba137a02f09代码部分：//模拟数据定时变化startWebSocket() { setInterval(()=> { this.setChangedData(121212); }, 5000);},//二级页面的监听函数addListener: function(ca...
2019-07-23 09:16:15
677
转载 egg.js入门教程视频文件（转载于cnode社区）
记得上篇博客我满怀欣喜的去搞富文本，结果撞的头破血流。简直是惨不忍睹。后来我也说了，我的那个有比较严重的问题，后期会考虑重构。（第一版已经放弃了）之后我说我会去看关于后端nodejs koa框架方面的东西。这次呢我选择的框架是eggjs，跳过了koa框架。（我以前用过express，写过很小的网站。）一开始直接翻官方文档说实在看的头昏脑涨。之后逛cnode社区，发现有教程。教程很基...
2019-07-19 16:41:48
904
原创 vue下自己开发富文本编辑器（一）带你从入门到放弃
前言：首先，我这个文章不会写非常详细的代码，但是我会把我目前博客开发的富文本编辑遇到的问题罗列出来。然后一点点的说明如何解决。说实在目前遇到的问题，已经想让我放弃自己开发富文本了，真的是非诚勿扰。这个坑没那么简单。（捂脸哭）开发环境：vueCli3.X一、HTML5的富文本contentEditable="true"这个属性我不介绍了，不懂得自己百度二、编写页面遇到的坑（...
2019-07-16 11:47:56
4851
原创 浏览器检测是否支持webrtc（看看你的浏览器能不能h5视频）
需求：需要实现手机浏览器上的实施在线视频聊天功能。项目经理让我写demo，唉，懒得写。然后就不停的翻腾讯的实施音视频文档，发现只要支持webrtc就可以。那么要么就自己写测试，要么就找测试工具。第一：腾讯提供的测试工具（不直观）地址：https://www.qcloudtrtc.com/webrtc-samples/abilitytest/index.html第二：某公司提供（...
2019-07-10 17:32:00
7838
原创 vue自己开发ui插件
首先，我最近写了四个组件了，代码都在我之前的博客当中。我是参考了elementUI的源码来写的。不然，自己写还不知道什么时候能写出来。非常感谢elementUI的开源贡献。这里附上elementUI开源地址：https://github.com/ElemeFE/element下面是介绍我自己的代码部分。一、首先是项目结构，声明，我是在个人项目上直接开发，未打算发布到npm上面。...
2019-07-02 10:50:19
811
2
原创 vue自定义组件（四）指令模式实现loading，模仿elementUI v-loading
指令模式（蒙版） fullscreen Boolean v-dht-loading.fullscreen 在非全屏模式下，dom没有渲染完成下会导致元素顶部对齐 background String 0, 0, 0, 0.5 text String 加载中... iconSrc ...
2019-07-02 10:37:26
4582
9
原创 vue自定义组件（三）函数式实现loading加载
页面顶部进度条模式，服务模式（参考elementUI服务模式） mask Boolean FALSE let cesg = {}; //展现与传值 cesg = this.$dhtLoading({ mask: true, background: "red" }); //关闭 cesg.close();...
2019-07-02 10:34:02
2808
原创 自定义vueUI组件库（二）替代传统img标签，实现图片懒加载
dht-img 替代原有的img标签功能，组件本身的宽高都由最外层容器所决定，支持图片加载失败处理 src String src本地图片需要require fit String cover alt String 加载失败 当最终还是加载失败的时候 error-src ...
2019-06-27 17:36:14
584
原创 vueUI组件开发历程，text组件，代替传统p标签（一）
组件功能表dht-text 替代p标签，需要提前指定元素的宽高 text String nowrap Boolean TRUE 默认不换行 num Boolean TRUE 默认不控制字数显示，如果控制字数显示则，最后部分用省略号代替 copy ...
2019-06-27 17:31:34
1122
原创 微信小程序ajax封装，加入防抖，全局错误正确信息处理，加载蒙版处理（改）
说明：这篇博客其实和之前发的一篇博文是差不多的，只不过一个是在vue环境使用，一个是在微信小程序下使用。同样：封装基于promise解决问题：1、ajax加载蒙版2、全局错误提示3、全局成功提示4、防抖功能配合（解决蒙版延迟导致客户能够点击多次）5、默认数据过滤处理，当字符串中出现NaN，undefined，null则过滤，数据为空过滤，注意长度为零的数组不过滤...
2019-06-19 14:28:22
678
原创 ajax二次封装配合防抖处理，vue，axios，elementUI（改）
纯属个人记录，代码很糙，因为博客之前发布过一次，这次是修订之后的。已经比较全面的解决了我目前所遇到的痛点。项目痛点：1、每次接口调用完成都需要处理错误提示和操作成功提示。2、页面蒙版并不能解决用户点击提交的时候重复提交请求解决：1、ajax继承页面蒙版控制2、错误和成功信息既可以全局处理也可以自定义3、ajax代码集成防抖函数4、默认数据过滤处理，当字符串中出现Na...
2019-06-11 16:27:24
1031
转载 js节流和防抖（转）
直接上代码。其中防抖反而是最简单的，我已经把代码吃透，并且附上注释。防抖部分只有代码。但是也没有问题。都来自大神的博客，并且自己小改。大神博客地址：防抖：https://blog.csdn.net/Beijiyang999/article/details/79832604节流：https://blog.csdn.net/Beijiyang999/article/details/79...
2019-06-10 16:27:46
109
原创 vue下实现window.print局部打印
代码是我同事提供的，这个发博客主要就是记录下，下一次好用。下面上代码// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this...
2019-04-30 16:00:54
4780
1
原创 小程序实现数据监听
项目描述：本人是这个项目中需要使用websocket返回的数据，但是websocet如果放在页面中切换就会频繁的断开重连。这是不切实际的。所以将websocket写在了app.js下面，但是问题也随之而来。虽然app.js下面数据实时变化，但是我websocket的数据不会对应实时更新到别的页面。最后感谢简书的一位大佬，具体链接在最后代码部分：//app.jsApp({ ...
2019-04-25 11:23:58
11900
原创 （websocket）微信小程序心跳包和pc心跳包
1、我的开发方式全部为es6的语法，并且用es6的class方式封装心跳2、代码仅供参考，虽然实际项目中个人是有使用的3、所有代码我都用注释，就不仔细解释了。但是能用。一、pc心跳class WebSockets { constructor(opt) { //websocket实例 this.ws = null; //url this.url ...
2019-04-25 11:13:37
2875
转载 vue下将图片打包为zip进行下载
需要使用到的技术：import JSZip from "jszip";import FileSaver from "file-saver";使用函数，上代码传入数据格式如下：[{name:"你的图片名称，不能重复",baseImg:"后端传输给你的base64图片"}]//批量下载门店二维码转化StoreDowQrcode(arr, blogTitle = "二维码"...
2019-03-23 13:24:18
5307
3
原创 js连续请求并发处理，promise和async/await
本次使用，核心在于promise和async/await的使用。上代码：//获取所有门店的数据,一万家门店情况this.storelists(1, 10000, "", true)//注意async .then(async e => { let that = this;//for循环进行所有数据处理 for (var i = 0; i < e.le...
2019-03-22 12:49:28
2857
原创 vue部署到nginx非根目录下面，vue cli3.0
先贴nginx配置#nginx作为服务器需要的配置 location /miniprogram { root D:/nginx/html/miniprogram; index index.html; try_files $uri $uri/ /index.html; }这段配置就是简单的指向index首页和静态文件所在...
2019-03-09 16:00:20
4488
4
原创 vue不打包指定js
方案：在index.html中如下图所示用script标签导入<script src="<%= BASE_URL %>api/api.js"></script>关键点：必须要参考favicon.ico的引用方式。给你当前的引用路径增加变参，vue因为版本不同变参不同，我是vue cli3下变参是：<%= BASE_URL %...
2019-03-07 18:20:51
4745
原创 vueCli3.0发布到nginx，vue项目部署
1、nginx部分nginx.conf配置文件#user nobody;worker_processes auto;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;event...
2019-03-02 12:38:42
6645
wxbarcode，个人修改增加回调返回临时图片路径
2018-12-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人