DieHunter1024的博客

​前言：一个好的部署工具能帮助开发者提升效率，节省时间，本文将与大家分享私有化Git仓库搭建与Jenkins操作项目部署准备工作：Java环境Node环境GiteaJenkinsNginx(部署前端页面)服务器或者电脑（我这里是window系统+公网映射搭建的本地服务器）首先是搭建一个本地Git代码仓库下载gitea并在需要安装的文件夹下打开，默认访问地址是127.0.0.1:3000打开后选择一下数据库，并在对应文件夹下生成db文件（新建空白txt文件，改后缀名为db）

​感谢博友提供的参考文章：unofficial twrp 3.5.0 Root Lenovo TB-X606F X606FA - twrp unofficial接上篇文章：联想Tab M10 FHD PLUS (TB-X606F)解锁BL，获取root权限（无需第三方recovery），刷xp框架（太极-阳）适用大部分联发科CPU（国际版rom底包）_DieHunter1024的博客-CSDN博客前言：解答一些博友的刷机问题及分享一下最近刷安卓10及root的经历无法解锁BL：需要登录联想账号并

​你是否有上下班总会忘记打卡或者迟到的困扰，这篇文章将带你感受一下自动化工具+JS的魅力首先声明：本文章不针对任何第三方软件，侵删准备工作：安卓手机或模拟器，最好使用模拟器（推荐夜神模拟器安卓7的64位），因为手机条件会比较苛刻（需要root，和谷歌三件套）Auto.js软件，或者其衍生产品AutoX.jsTasker，中文站，原网站需要自动执行的软件，我用的是 *人薪事首先，咱们熟悉一下Auto.js的调试，官方文档已经写的很清楚了，我

前言MVVM实际上是MVC的改进版，其立足于MVP框架。使用Vue时，我们会体会到其与React的区别，绑定表单数据时react对输入框读写需要input事件设置state，以及value绑定，而vue则只需将数据与model绑定即可，这种数据驱动视图却与视图解耦的编程方式使用起来很方便。为了深入体验mvvm模式，我实现了一个mini-vue。MVVM在开始前，我们先试着参照下图实现一个简单的双向绑定案例

前言：这段时间项目迭代时遇到了一个新需求，基于react实现一个Pc版电子签名功能，并生成图片上传。于是我想到了signature_pad，并且在项目使用了这个插件不得不说，用别人造的轮子是真的香，出于好奇，想用原生实现一下电子签名的功能以下是实现过程HTML和css可以参照源码，这里不过多介绍首先引入eventBus，方便代码解耦然后实现Base基类存放公共方法和属性，后续有啥共用属性或方法可以往这加//基类：公共方法和属性import event from './eventBu

前言：记录一下最近的一个需求，产品需要打印表单凭证，需要实现将选中页面的元素或者是组件导出为PDF，方便打印使用到的JS库：html2canvas（截取页面生成canvas），jsPDF（使用JS生成PDF）下面我针对该需求实现一个简单的Demo，并且分享一下遇到的问题首先，我选择了懒加载的案例作为测试对象，因为图片可以检测截图效果，并且有滚动加载长页面我们把整个demo分为两部分，分别是使用上述两个插件实现基本功能使用html2canvas截屏生成canvas......

正如Redux一样，当你不知道是否需要Vuex那就是不需要。不要因为想用Vuex而使用它。用过Vue的人都知道，Vuex是Vue的一个全局状态管理模块，它的作用是多个组件共享状态及数据。

前言：近期公司整改项目，前端的项目和接口全部采用Nginx重新部署，这里就最近用到的Nginx服务器做一个知识点整理，推荐一个Nginx中文文档网站Nginx服务器就不多做介绍，直接进入正题，系统用的是window7 旗舰首先，下载Nginx，这里我下载了1.18版本，解压后得到以下Nginx根目录，推荐把根目录放到环境变量中然后，在根目录导航栏输入cmd并回车进入命令控制常用命令：...

内网穿透又叫端口映射，用一句最简单的话来讲就是：将你的计算机所连接的私有网络映射到公网上，别人通过你给的域名或ip即可访问你本地的服务。具体的原理可参照百度百科这么做可以实现各大厂商的云服务器（阿里云，腾讯云，百度云，华为云等）的效果，通过公网地址访问服务器这里分享一些提供内网穿透的网站，前三种是我用过的，感觉都还不错（仅供参考）：Sunny-Ngrok：免费版，带宽：10 Mbps，限速：128Kbps，限流：无限，隧道数量：每种协议1条SAKURA FRP：免费版（需要支付一元实名认证），

WebSocket在2008年被提出，其通信协议于2011被制定为标准websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接然而，这么做无疑会对服务端造成资源消耗，因为HTTP请求包含较长的头文件，只传递了少许的有用信息，十分消耗资源。于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。

接着上篇文章：ajax获取图片列表，我们来实现一下JS的经典案例，懒加载在web应用中，系统的响应速度对用户体验十分重要，其最主要的影响来源于服务端数据库查询，以及DOM渲染。数据库查询数据量大的情况下，我们可以进行分页配合前端分页或者懒加载进行优化，而这篇文章主要讲的是如何处理后端百万级数据对DOM渲染造成的影响，当然这也是大厂常问的题。

AJAX是个啥？有什么作用？如何实现AJAX？如何使用AJAX？这几个问题我在前端JS的面试题中，遇见了不少，对于前后端分离，单页面渲染流行的今日，ajax似乎变得很重要。那么什么是Ajax？Ajax（Asynchronous JavaScript and XML），又被称为异步 JavaScript 和 XML，它不是一门语言，而是web应用的一门技术。要知道，如果在2009年你了解前端的dom操作，ajax技术和一点点JS语法，你就已经可以找到一份不错的web前端的工作了。也正是Ajax技术..

node环境中实现静态资源托管，网上许多案例都是直接通过Express或koa框架实现的，一行代码就可以解决app.use('/img', express.static(path.join(__dirname, './img')));然而为了追寻原理，我自己试着实现了一个简单的静态资源托管，为下篇懒加载文章做铺垫新建server.js文件执行node代码，在server.js中引入等会要用到的模块http和fs（filesystem）const http = require('http'

前言：该片文章主要介绍一下node环境的安装流程及排雷，为下篇TypeScript文章做铺垫环境安装：这里我使用的是nvm（node管理工具）对node进行安装，直接一步到位，省去一些配置我的gitee上的nvm托管地址当然也可以去GitHub或者码云托管上下载nvm下载好安装包后双击安装nvm，选择我同意，并点击下一步选择安装路径，点击下一步选择安装好后，node快捷方式的路径最后点击安装，途中若杀毒软件提示应用修改环境变量点击允许即可安装完成后在环境变量中多出以下变量，并且在cmd中输

TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。其源于JavaScript（JS的拓展），终于JavaScript（编译成JS）TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

发布/订阅模式和观察者模式一样吗？在许多地方我们都能见到基于这二者或者说基于某种设计模式的框架，函数或插件在浏览器中使用addEventListener(type,fn)对dom元素进行事件委托，事件监听用户的异步操作Android中也有一个事件发布/订阅的轻量级框架：EventBus，原理与web相似Socket.io的许多方法也是基于此类模式，监听与触发事件，批量广播等在Node中同样也有一个events事件触发器解决异步操作的同步响应

谈谈对react的理解react是基于v（视图层）层的一款框架，虚拟dom和diff算法react特点：声明式设计高效，其中高效以现在虚拟dom，最大限度减少与dom的交互和diff算法灵活，体现在可以与已知的框架或库很好的配合JSX，是js语法的扩展组件化，构建组件，是代码的更容易得到复用，比较建议在大型项目的开发单项数据，实现单项数流，从而减少代码复用react有哪几个生命周期自己的总结分为三个阶段，初始，运行中，销毁初始化： 执行getDefaultProps钩子

vue和react的区别React严格上只针对MVC的view层，Vue则是MVVM模式virtual（虚拟） DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制组件写法不一样，React推荐的做法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in

谈谈对Node的理解Node.js 在浏览器外运行V8 JavaScript引擎，单线程 非阻塞I/O 事件驱动,适应于数据高并发,适合多请求,但不适合高运算,有权限读取操作系统级别的API，npm 仓库，常用框架：Express，koa，Socket.io，AdonisJs，NestJS什么是gulp？作用？机制是什么？gulp是基于node的自动化构建工具作用：1 自动压缩JS文件2 自动压缩CSS文件3 自动合并文件4 自动编译sass5 自动压缩图片6 自动刷

谈一谈let与var和const的区别let为ES6新添加申明变量的命令，它类似于var，但是有以下不同： let命令不存在变量提升，如果在let前使用，会导致报错let暂时性死区的本质，其实还是块级作用域必须“先声明后使用”的性质，let 暂时性死区的原因：var 会变量提升，let 不会。let，const和class声明的全局变量不是全局对象的属性const可以在多个模块间共享const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可

说到ES6的Promise，大家并不陌生，它是JS中解决异步的方法之一其优点：避免回调地狱，链式调用，函数思路清晰，逻辑相对回调函数和事件发布/订阅更强缺点：理解性差，异步操作在promise构造函数内部这段时间在整理面试题时发现，Promise的实现可以单独拿出来分享，于是自己实现了一下...

解释一下为何[ ] == ![ ] // ---> true首先看一张图！[ ] 是 false原式：[ ] == false根据第八条，false通过tonumber（）转换为0原式：[ ] == 0根据第十条，[ ]通过ToPrimitive()转换为' '原式：' ' == 0根据第六条原式：0 == 0尝试实现new function ObjectClass() {//对象 console.log(arguments[...

Ajax 是什么? 如何创建一个Ajax？AJAX全称是Asychronous JavaScript And Xml（异步的 JavaScript 和 XML）它的作用是用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持其主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果实现方式（gitee上的案例）：

js的垃圾回收机制是什么原理垃圾回收机制有两种方法第一种是标记清除法：当变量进入执行环境时,就标记这个变量为”进入环境”,当变量离开环境的时候,则将其标记为”离开环境”,垃圾收集器在运行的时候会给储存在内存中的所有变量都加上标记,然后它会去掉环境中的标量以及被环境中的变量引用的标记,而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了,最后,垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间 第二种是引用计数法：当声明了一个变量并将

如何创建函数第一种（函数声明）： function sum1(num1,num2){ return num1+num2; } 第二种（函数表达式）： var sum2 = function(num1,num2){ return num1+num2; } 第三种（函数对象方式）： var sum3 = new Function("num1","num2","return num1+num2");三种弹窗的单词以及三种弹窗的功能1.alert //弹出对话框并输出一段提示信...

解决js兼容性问题使用 event对象 function eventHandler(event) { event = event || window.event} 获取滚动条属性 var scrollTop = document.documentElment.scrollTop || document.body.scrollTop

浏览器的内核 IE: trident内核，Firefox：gecko内核，Safari:webkit内核，Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核，Chrome:Blink(基于webkit，Google与Opera Software共同开发) HTML中的Doctype有什么作用 此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面） div+css的布局较table布局有什么...

前言：5月份的时候在网上买了个联想M10 FHD PLUS平板，当时想找root方法拓展平板更多功能，发现几乎查不到教程，在国外网站也只有一些比较模糊的教程其中包括https://forum.xda-developers.com/thinkpad-tablet/general/twrp-lenovo-tab-m10-fhd-tb-x606f-t4139237...

这个书签涵盖很多程序员必备网站，不止有前端方法一：直接在浏览器打开即可：m.infinitynewtab.com?6iyA0H​方法二：谷歌infinity插件下载：https://www.extfans.com/search/extensions/infinity/（推荐）官网：http://cn.infinitynewtab.com/

从零开始，搭建一个简单的购物平台（十八）前端商城部分：https://blog.csdn.net/time_____/article/details/108918489项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上篇文章后，前端商城部分基本功能已实现，包括商品列表，商品分类，首页商品展示，商品详情，购物车，用户登录注册，剩余内容：用户信息修改，提交订单，订单展示等，这篇文章将对剩余部分完结。用户信息修改的后端接口

从零开始，搭建一个简单的购物平台（十七）前端商城部分：https://blog.csdn.net/time_____/article/details/108893925项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上篇文章对购物车进行了简单的介绍...

从零开始，搭建一个简单的购物平台（十六）前端商城部分：https://blog.csdn.net/time_____/article/details/108769229项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上篇文章讲到了商品详情页面实现，最后一个功能是加入购物车，...

从零开始，搭建一个简单的购物平台（十五）前端商城部分：https://blog.csdn.net/time_____/article/details/108680599项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping在前几篇文章中，我们对首页，分类列表，公共组件，工具类进行了实现，这篇文章将实现商品详情页进行介绍，这里我们将商品详情页细化成多个组件，利用组件通信方式进行监听传递方式从而实现数据传递和效果逻辑先来看看效

从零开始，搭建一个简单的购物平台（十四）前端商城部分：https://blog.csdn.net/time_____/article/details/108545330项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上篇文章对主页和部分公共组件进行了界面和功能实现，之前对项目用到的工具类，路由，全局状态进行了封装，这篇文章将对商品分类，商品主题界面进行介绍商品分类：界面样式及效果注意：由于分类商品列表和主

从零开始，搭建一个简单的购物平台（十三）前端商城部分：https://blog.csdn.net/time_____/article/details/108514710项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping本篇文章介绍实现部分组件和首页部分，首页组件如下，下面介绍一下实现过程pageTitle（页面标题）首先要考虑到标题的返回功能，在methods里写个路由返回函数 methods: {

从零开始，搭建一个简单的购物平台（十二）：https://blog.csdn.net/time_____/article/details/108471436项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping这篇文章我们来实现一下工具类，其他配置和全局状态工具类：工具类我们统一放在utils文件夹下，并部署在Vue原型上（与Axios的一样） 首先我们要实现两个对象深复制的方法，之前博客也有介绍到，后续对全局静态变

从零开始，搭建一个简单的购物平台（十一）：https://blog.csdn.net/time_____/article/details/108447234项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping从这篇文章开始对前端商城开发进行介绍效果图地址：https://gitee.com/DieHunter/myCode/tree/master/shopping/pic效果图也附上：主页 分类 ...

从零开始，搭建一个简单的购物平台（十）：https://blog.csdn.net/time_____/article/details/108442619项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

从零开始，搭建一个简单的购物平台（九）：https://blog.csdn.net/time_____/article/details/105465499项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping拖更时间较长，公司这几个月项目高峰期，请见谅这篇文章主要讲述后端管理系统新增的订单模块的部分内容（前端在之前的计划下稍稍改动，引入了订单的功能，但不包含支付功能），由于与用户管理和商品管理稍有不同，所以单独拎出来介绍一下

前言在另一篇博客中已经实现了远程视频聊天，然而这种方式只能运行在本地或者https服务下，因为navigator.mediaDevices.getUserMedia需要运行在安全模式下，所以这篇文章将对视频聊天做一个改进，达到真正的远程聊天功能之前的案例：使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天搭建https：搭建https的第一步得有一个服务器，相关的配置说明在我另一篇文章有提到案例：本地项目上线流程...

从零开始，搭建一个简单的购物平台（八）：https://blog.csdn.net/time_____/article/details/105452765项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping这篇文章将前后端管理功能完成，也就是将最后修改用户信息功能实现（由于商品管理与用户管理类似，所以不做描述），并...

从零开始，搭建一个简单的购物平台（七）：https://blog.csdn.net/time_____/article/details/105448383项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping...

从零开始，搭建一个简单的购物平台（六）：https://blog.csdn.net/time_____/article/details/105440818项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping到现在为止，项目前后端功能已实现登录，token获取验证，上传头像，添加用户，这篇文章主要讲述实现前后端用户列...

从零开始，搭建一个简单的购物平台（五）：https://blog.csdn.net/time_____/article/details/105437534项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping在第四篇文章中实现了服务端的文件上传以及添加用户的后端功能，并进行了测试，这篇文章主要实现前端上传头像和添加用...

从零开始，搭建一个简单的购物平台（四）：https://blog.csdn.net/time_____/article/details/105414410项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping前面几篇文章将项目配置以及部分功能实现，这篇主要把前端的路由跳转功能实现一下，话不多说，直接开始盘说到路由...

从零开始，搭建一个简单的购物平台（三）：https://blog.csdn.net/time_____/article/details/105411636项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping本篇文章延续上篇的登录界面搭建完成后，进行用户管理后端的编写，主要功能包括：添加用户，上传头像目录结构...

从零开始，搭建一个简单的购物平台（二）：https://blog.csdn.net/time_____/article/details/105408640项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping这篇文章在上次的服务端登录基础上增加前端界面在开始前我们可以简单用postman测试一下token和登录的...

从零开始，搭建一个简单的购物平台（一）：https://blog.csdn.net/time_____/article/details/105191286项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping上一篇文章将项目主体以及插件模块搭建完成，这篇文章目的主要搭建服务端token验证及登录功能服务端：文...

这个项目是我利用空余的时间写的，商城App界面主要模仿零食商贩小程序写的，其余都是自己写的项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

故事发生在几天前公司要求做个仪表盘，大致UI是这样的这不是为难我胖虎嘛，于是找遍整个全网也没找到相似的，只能自己手写一个。然而，最开始是准备用极坐标写的折腾了一上午发现极坐标做出的效果两头是360度的圆环，这使UI给的标注无法实现，于是我又开始研究仪表盘，官方给的实例倒是挺炫酷当我感觉快找到希望时，却无法实现两端圆角以及将刻度显示在数字外，在网上找资料发现也有同学...

分享一个公司项目案例UI小姐姐给的图是这样的：最终实现效果：以下是所有代码首先引入Echarts，cdn或npm都行HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...

分享自己公司项目类似的一个案例，用Echarts中的Polar（极坐标）和Bar（柱状图）实现的大致效果是这样的参照的是AntV中的https://antv-f2.gitee.io/zh/examples/gallery/fitness-ring的效果，只不过我是用Echarts实现的...

WebRTC网页即时通信，是Web Real-Time Communication的缩写，本文使用到RTCPeerConnection对象配合socket+node构建远程实时视频聊天功能，文章有一个不足之处，后面会讲到。相关文档：MediaDevicesWebRTC API参考文章：https://rtcdeveloper.com/t/topic/13777...

入坑前端3年，收藏了一些用得到或者可能会用到的书签基础知识类菜鸟教程 - 学的不仅是技术，更是梦想！（教学齐全，陪伴三年之余，几乎啥都有）http://www.runoob.com/w3school 在线教程（前端官方文档，不解释）http://www.w3school.com.cn/index.html书栈网 · BookStack_程序员IT互联网开源编程书籍免费阅读与下载...

什么是MVC：Model View Controller即：模型-视图-控制器通俗来讲，在编程语言中，Model就是数据，可以理解为数据库，View就是显示数据的外观，Controller是用来连接前两者的行为，常见的Vue采用的是M-V-VM架构，与MVC类似，但是基于MVCMVC的作用：说到作用，就不得不提面向对象与面向过程的区别了面向过程就是，将解决问题的思路流程一步...

购物车可谓是js中十分经典的案例，很多电商平台都会用到，是一个十分考验综合性的案例今天分享一个自己编写的购物车，采用的是原生面向对象实现，数据的传导通过事件代理进行，以下是源码文件夹注释写的很详细HTML:<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-...

用原生js做了一个拖拽调节音量效果是这样的：（拖动时音量随两个圆形交集面积增大而增大）html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...

以下是自己一个项目的本地上传至线上的总结新建服务器实例首先，你需要在各大云服务器平台选购一台合适的服务器这里我选用的是阿里云（window2008 server版）为什么系统选2008而不是2012版？因为2008相对于2012占用的资源较少，当然如果你服务器配置高的话，就不用担心了关闭服务器实例后，在服务器选项更多中选择更换系统配置服务器账号密码并等待安装...

对以前用过的方法做个整合let Methods = (function () { return { // 随机颜色 randomColor: function () { var color = '#' for (let i = 0; i < 6; i++) { va...

小程序数据绑定渲染视图使数据与视图的关系显得很清晰wxml：&lt;!--pages/todoList/toduList.wxml--&gt;&lt;input class='addItem' placeholder-style='font-size:16px;' placeholder='输入事项' bindinput='changeStr' value='{{addStr}}'&g...

小程序可以说是非常火热了，开发周期短，页面简洁，数据控制方便，可以说结合了三大框架的特点小程序的目录结构：页面以index为例utils：工具类目录，供全局调用。在utils中封装一个tools工具类（axios获取请求）class Tools { constructor() { } axios(method, url, data) { return new...

代码附上：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&

一.socket轮询（每隔一段时间向后端请求一次，增加服务器压力）:由于socket连接时采用ws/wss协议，页面必须放在服务器端，所以首先用node产生一个静态文件夹，方便通过IP直接访问static.js:const express = require('express');//这里要引入expressconst app = express();const path = r...