- 博客(106)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 艺术二维码生成插件，内附小程序版
给大家分享一个可以生成艺术二维码的插件，内附小程序版。预览地址: http://yating.online/art-qrcode/艺术二维码生成原理https://blog.csdn.net/lemisi/article/details/88831289艺术二维码插件：普通版git地址：https://github.com/Chenyating/wx-art-qrcode下载方式npm i art-qrcode使用方法import "artQRCode.js";var qrBox =
2021-06-17 09:06:18
690
2
原创 有看板娘的vuepress-theme-ting清新简易主题
vuepress-theme-ting这是一个vuepress主题，主要功能有博客归档分类，以及留言，个人展示等；主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；预览地址ting主题预览地址installcd ting-Blognpm install vuepress-theme-ting修改配置module.exports = {...
2019-11-12 19:56:22
2940
2
原创 前端：艺术二维码生成过程canvas+html2canvas.js+qrcode.js
生成艺术二维码的体验地址：:http://yating.online/demo/qr/喜欢的话，给个星吧~https://github.com/Chenyating/ART-QR-Code体验图片：存在问题：1、目前仅适用于pc端；2、内容过于复杂，可能无法识别出来；3、有的二维码，用手机可以扫描出来，但是无法图片识别；现在讲一下大概开发的过程：...
2019-03-26 22:55:44
3286
原创 （小游戏）详解前端扫雷代码：HTML+JS+DIV实现原理
游戏地址：http://www.yating.online/game/mine.html喜欢就给我点个星吧：https://github.com/Chenyating/easyGame先了解一下扫雷这个游戏规则：我们可以先，打开你的电脑——》程序——》游戏——》扫雷，先玩几分钟，你就会得到规律：点击任意方块，会出现2种结果： 如果是炸弹就引爆，游戏则结束。 如果...
2018-10-21 20:02:13
4289
原创 （小游戏）详解前端俄罗斯方块代码：HTML+JS+CANVAS实现原理
喜欢就给我点个星吧：https://github.com/Chenyating/easyGame想写个俄罗斯方块的小游戏，发现网上的各位大佬的代码，我看不明白。好吧，其实我一直都看不懂别人的代码。可是，flag已经立了，写肯定是要写的啦。嗯……还是自力更生，自给自足。撸起袖子，说写就写。现在就说说我自己的经验；查看效果，请点击这个地址哦~，你们可以玩一把，告诉我需要改进的地...
2018-09-24 00:33:24
6996
15
原创 （小游戏）贪吃蛇前端代码
游戏地址：http://www.yating.online/game/retroSnaker.html喜欢就给我点个星吧~：https://github.com/Chenyating/easyGame附上html代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> ...
2018-08-30 12:03:33
1522
2
原创 背景高斯模糊
1、svg<svg class="widget-discuss-person-bg" preserveAspectRatio="xMidYMid slice" viewBox="0,0,660,370" > <defs> <filter id="f1" x="0" y="0"> <f
2020-11-27 10:36:47
454
原创 小程序自定义圆形进度环
<view class="circle-progress" style="box-shadow: inset 0 0 0 {{width}}rpx {{bgColor}}; width:{{size}}rpx ;height:{{size}}rpx" > <view class="circle-progress-item circle-progress-item--l"> <view class="circle-progress-bar" style="t
2020-10-21 19:22:23
401
原创 清新UI组件库——select组件开发思路
清新组件库：http://ifresh-ui.yating.online/源码地址：https://github.com/Chenyating/iFresh-uiselect组件遇到的问题思路：单选跟多选，就是radio跟checkbox的结合体；条件判断，是否可以多选。z-index失效的原因：父级元素position可能是relative，或者是没有position；元素存在float属性解决办法：position设置部位relative去掉float，清除浮动，浮动元素设
2020-07-01 11:09:03
418
原创 清新UI组件库——radio组件开发思路
清新组件库：http://ifresh-ui.yating.online/源码地址：https://github.com/Chenyating/iFresh-uiradio组件遇到的问题互斥问题相同radio的name一致的时候可以实现互斥问题。name取名字：const now = Date.now();let num = 0;const radomName = () => { return `ifRadio_${now}_${num++}`}radio-grou
2020-07-01 11:07:24
335
原创 清新UI组件库——page组件开发思路
清新组件库：http://ifresh-ui.yating.online/源码地址：https://github.com/Chenyating/iFresh-uipage组件遇到的问题返回的页面数问题当页面过于长的时候，可以这样显示。页面数小于等于6，就默认遍历1-6页面数大于6时，如果当前页小于2或者大于总页数-2：返回数组为[1,2,3,……,page-1,page]页面数大于6时，如果当前页为中间值：返回数组为[……,current-1,current,current+1,……]
2020-07-01 11:05:43
356
原创 清新UI组件库——checkboxt组件开发思路
清新组件库：http://ifresh-ui.yating.online/源码地址：https://github.com/Chenyating/iFresh-uicheckbox组件遇到的问题跟radio性质差不多。当为checkbox组的时候，值的类型为array；判断当单个值的时候。先判断value是否存在，再判断是否为boolean，选中取反。值为label；修改样式checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式.当点击的
2020-07-01 11:03:27
262
原创 清新UI组件库——开发组件库准备
清新组件库：http://ifresh-ui.yating.online/源码地址：https://github.com/Chenyating/iFresh-ui开发组件库准备准备vscode语言框架：vue，vuepress，vue-cli3，less参考框架： iview-ui，element-ui开发定位风格：小清醒，简洁颜色：主打绿，底白色字体：oppo字体免费商用新建项目全局安装npm install -g @vue/cli 或 yarn global ad
2020-07-01 11:00:17
398
原创 清新UI组件库——input组件开发思路
清新组件库：http://ifresh-ui.yating.online/源码地址：https://github.com/Chenyating/iFresh-uiinput组件遇到的问题v-model问题外部value变化，input的值没有变化？[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mV2HarjW-1593572054748)(/img/bVbIVRS)]先理解v-model的性质<input v-model="searchText">
2020-07-01 10:57:02
452
原创 koa异步执行后发送data
// koa里执行异步的时候，需要在function里加async// 然后 await 异步方法；router.get("/", async function(ctx, next) { var str = null; // 执行异步 await readDocument().then(data => { str = data; }); // jsonp ...
2020-01-06 17:21:51
378
原创 事件循环
事件循环什么是事件循环js按照语句先后顺序执行，首先执行同步代码。2. 接着从宏任务的头部取出一个任务执行，执行过程中若遇到微任务则将其添加到微任务的队列中；3. 宏任务执行完完毕后，微任务的队列中是否存在微任务，若存在则按顺序全部执行完毕；4. gui渲染5. 继续执行宏任务，以此类推。从宏任务到微任务构成事件序号监测机制，即eventloopfunction A() { ...
2020-01-02 10:16:30
272
原创 typescript语法
ts 数据类型：布尔值：let isDone:boolean=false;数字：let decLiteral:number=6;字符串：let name:string="bob"数组:let list:number[]=[1,2,3]元组：Tuple允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型...
2019-12-25 15:01:41
672
原创 编写router的坑
默认App有显示；<template> <router-view></router-view></template>新建一个pages/index，就放在app中了<template> <router-view></router-view></template>route...
2019-11-25 16:01:17
364
原创 websocket+vue+node在线群聊
最近刚写了一个在线群聊的功能。一个是vue页面；一个是后台服务js；需要先下载ws<template><div> <!-- 先输入昵称 --> <div class="before" v-if="!ifEnter"> <Input @on-search="settingName()" v-model="...
2019-11-01 16:39:26
718
1
原创 跨域的理解
备注：端口和协议的不同，只能通过后台来解决localhost和127.0.0.1虽然都指向本机，但也属于跨域当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信...
2019-10-30 16:18:47
462
原创 js：遍历某个文件下所有文件的指定的文件类型
//使用队列的方法，先进先出，每次都遍历第一个数值；//参数名称：fileRoad：文件路径，fileType：要筛选的文件类型，belongFile：所在文件夹名称（选填）。//then（data）：data为筛选出来的文件列表信息async function getFileList(fileRoad, fileType, belongFile) { var newFileList =...
2019-10-14 16:44:43
3236
原创 编程题：遍历数组每一项，生成新数组
遍历数组每一项，生成新数组var arr = [[1, 2, 3],[[[[[[11]]]]]], [4, [5]], [6, [7, 8, 9,[10]]]];得到 brr： [1, 2, 3, 4, 6,5, 7, 8, 9, 10,11]//把arr的每个数值存放到新的数组brr里；var arr = [[1, 2, 3],[[[[[[11]]]]]], [4, [5]], [6,...
2019-10-14 14:46:26
2291
原创 编程题：给定两个字符串形式的非负整数 num1 和num2 ，计算它们的和,并以字符串输出
给定两个字符串形式的非负整数 num1 和num2 ，计算它们的和,并以字符串输出。要求：num1 和num2 的长度都小于 5100.num1 和num2 都只包含数字 0-9.num1 和num2 都不包含任何前导零。你不能使用任何內建 BigInteger 库，也不能直接将输入的字符串转换为整数形式。例如：输入：‘123,12’返回：‘135’思路：把字符串以“...
2019-10-12 11:26:36
3423
原创 react入门
什么是react：一个用于动态构建用户界面的js库；facebook开源的js库；特点：声明式编程组件化编码支持客户端与服务器渲染高效单向数据流react高效的原因：虚拟DOM，不总是直接操作DOM高效的DOM diff算法，最小化页面重绘；模块与组件：模块：每个js文件都算是一个模块。（向外提供特定功能的js程序）组件：用来实现特定功能效果的代码集合...
2019-09-21 14:59:50
216
原创 js：构造函数和class
es6中class实现面向对象编程的新形式class Animal{ // 每一个类中都有一个构造器，若没有指定构造器，那么这个构造器是隐形的，构造器的作用，就是每当new一个类，必然优先执行构造器中的代码 constructor(name,age){ this.name=name;//通过new实例的属性，叫做实例属性：dog.name thi...
2019-09-21 14:58:30
3299
2
原创 js：class的子类继承
当有n个子类的时候，方法相同，就会显得代码冗余；这个时候就需要创建一个父类来继承；class American{ constructor(name,age){ this.name=name; this.age=age; }}const a1=new American("jack",12);class Chinese{ constr...
2019-09-21 14:57:07
624
原创 vue生命周期
### vue的生命周期：1、new vue():创建一个vue实例，就会进入组件的创建过程；2、init:初始化组件的事件和生命周期函数；3、beforeCreat()是组件创建的第一个生命周期；data和methods都没有被触发；4、created():第二个生命周期函数，组件的data和methods已经初始化完毕；主要发起ajax请求；5、把data的数据拿到，并解析执行模板...
2019-09-21 14:55:33
163
原创 react创建组件的方法
创建组件的两种方法1、工厂函数：function方式创建2、ES6class方式创建3、es5的react。createClass({render(){return 虚拟DOM}})注意：组件名字必须大写；工厂函数，以函数来创建组件// 创建组件的方式，组件首字母大写 function Hello(props){ console.log(props) //p...
2019-09-21 14:54:15
314
原创 把 http换成 https
把 http换成 https这是我现在的博客地址：https://www.yating.online/(╹▽╹)感谢运维小哥的指导~ssl证书：实现网站HTTPS化，使网站可信，防劫持、防篡改、防监听、安全加密。SSL 证书就是遵守 SSL协议，由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能。该安全协议主要用来提供对用户和服务器的认证；对传...
2019-09-21 14:52:45
1956
原创 防抖函数和节流函数
防抖函数在连续点击n次的时间之内，只取最后一次操作；概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时function debounce(fn,delay){ var timer=null; return (...args)=>{ clearTimeOut(timer); var timer=setTimeOut((...
2019-09-17 11:28:38
205
原创 console.log(字符图案)，生成器，字符画
可以通过本地址生成,预览地址如下：http://www.yating.online/tools/notes
2019-09-04 11:47:33
4305
原创 node使用jwt生成token
使用jwt生成tokenJSON Web Token（JWT）是目前最流行的跨域身份验证解决方案。1、引入jsonwebtokenvar jwt = require('jsonwebtoken');2、生成一个token// 生成一个tokenconst secret = 'yating';function makeToken(name, password, exp) {...
2019-09-02 17:28:16
1167
1
原创 封装node连接Mysql的直连接和连接池的方法
node连接Mysql的连接方式node连接数据库的方法有两种：1、直连接数据库、2、数据库连接池本来我的连接方式就是这样的：创建连接连接数据库写对数据表操作的方法最后exports，在其他地方就引用这个方法但是这样这个方法不足：长时间不操作就会自动关闭连接方法太多，太累赘了。没有封装，一点都不好看。用完我没有关闭连接；// 这是我原来的方法：// 1、创建连接...
2019-08-30 09:59:55
1002
原创 axios封装
server/http.js:// 封装一下axios方法；import axios from 'axios' // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLaxios.defaults.baseURL = 'http://172.28.194...
2019-08-19 16:23:18
202
原创 在nuxt引入view
1、先下载：npm install iview --save2、在plugins创建文件import Vue from 'vue';import iView from 'iview';Vue.use(iView);import 'iview/dist/styles/iview.css';3、在nuxt.config.js引入 // 引入iview； plugins: [...
2019-08-17 10:19:07
952
原创 nuxt跨域
安装npm install @nuxtjs/axios @nuxtjs/proxy --savenuxt.conf文件：modules: [ '@nuxtjs/axios','@nuxtjs/proxy' ], axios: { proxy: true, // 表示开启代理 prefix: '/api', // 表示给请求url加个前缀 /api ...
2019-08-15 15:16:51
3068
原创 less入门到入门
一、变量：@变量名：值；@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue;}其实就是：#header { color: #6c94be;}二、混合模式：将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。假设我们有以下样式:.bordered ...
2019-08-05 20:03:06
163
原创 router从入门到入门
动态路由匹配： // 动态路径参数 以冒号开头 { path: '/user/:id', component: User }/user/foo 和 /user/bar 都将映射到相同的路由。所以他们的id分别表示foo，bar对应的：this.$route.params.id=foo;this.$route.params.id=bar;一个“路径参数”使用冒号 : 标记。当...
2019-08-02 10:33:58
289
原创 git的安装与配置，github的ssh配置，多账号配置
git：界上最先进的分布式版本控制系统下载地址：https://git-scm.com/downloads一、安装：选择好安装路径，然后一路next就行了。创建一个新文件夹，在新的文件空白处点击右键，你会发现有git的小图标。点击，Git Bash Here，然后开始配置一下git；一、配置个人的用户信息：$ git config --global user.na...
2019-07-17 01:15:29
299
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人