- 博客(90)
- 收藏
- 关注
原创 es6学习之Generator实现斐波那契数列
斐波那契数列这个数列从第3项开始,每一项都等于前两项之和。例如:0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987 …js代码实现/** * 斐波那契数列 * @param {最大数} max */function* fibonacci(max) { let [prev, curr] = [0, 1]; yield prev; for (;;) { yield curr; [prev, c
2021-07-13 16:20:33 210
原创 vue组件传值
vue组件传值父组件给子组件传值子组件给父组件传值父组件修改子组件的值子组件修改父组件的值父组件给子组件传值实现原理父组件:添加自定义的属性与值子组件:使用props属性接收父组件:<!-- 父组件 --><template> <div id="app"> <!-- 子组件 --> <son :msg="son_msg" /> </div></template><scri
2021-06-28 23:45:39 89 2
原创 使用 Proxy 实现观察者模式
为了检验 es6 学的怎么样了,大家一起来做一到小题目吧!观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。const person = observable({ name: '张三', age: 20});function print() { console.log(`${person.name}, ${person.age}`)}observe(print);person.name = '李四';// 输出// 李.
2021-06-23 20:56:52 321 1
原创 js实现发布订阅模式(简易版)
发布订阅模式概念发布订阅模式:订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。发布订阅模式实例/** * 发布 - 订阅模式 *///定义一个新闻发布平台//主要功能包括任务发布大厅(informationWarehouse),以及订阅任务(subscribe).
2021-05-28 09:41:44 528
原创 js运用闭包函数实现单例模式
运用闭包实现js单例模式运用闭包实现js单例模式闭包函数创建一个闭包函数调用闭包函数注册闭包函数调用注册好的闭包函数补充销毁闭包函数单例模式运用闭包实现js单例模式闭包函数概念:简单说就是函数中嵌套函数,嵌套在这里面的函数叫做闭包函数,外面的函数叫做闭包环境作用:通过闭包函数,可以访问到闭包函数所在局部作用域中的变量及参数特点:闭包的特点或本质:将局部变量常驻内存,这既是它的优点也是它的缺点,使用不当还会造成内存泄漏闭包的原理:闭包是利用JS中的垃圾回收机制,当一个函数被调用时,会开辟空间,函数
2021-05-23 10:06:44 581 1
原创 封装axios
vant封装axiosimport axios from 'axios';import { Toast} from "vant";export default { get: (url, _data = {}) => { return axios .get(url, { params: _data, }) .then((res) => {
2021-05-19 21:21:02 66
原创 JS滚动到页面底部或页面顶部
JS滚到到页面底部window.scrollTo(0, document.documentElement.clientHeight);JS滚到到页面顶部window.scrollTo(0, 0);
2021-05-11 17:26:27 790
原创 vue3.0安装Antd
安装Antd:: 创建 vue3 项目vue create vue_antd_1:: vue3 集成 typescriptvue add typescript:: vue3 安装 routercnpm install vue-router@next --save:: vue3 安装 vuexcnpm install vuex@next --save:: vue3 安装 sasscnpm i node-sass@5.0.0 -Dcnpm i sass-loader@10.1.1 -D.
2021-05-01 14:57:44 918 3
原创 js获取视频第一帧作为封面
/** 截取视频的第一帧*/function getVideoBase64(url) { return new Promise(function (resolve) { let dataURL = ''; let video = document.createElement("video"); video.setAttribute('crossOrigin', 'anonymous');//处理跨域 video.setAttrib
2021-04-25 15:59:54 2902
原创 js实现UTC时间转北京时间
/** utc转北京时间*/function utc2beijing(utc_datetime) { // 转为正常的时间格式 年-月-日 时:分:秒 let T_pos = utc_datetime.indexOf('T'); let Z_pos = utc_datetime.indexOf('.000Z'); let year_month_day = utc_datetime.substr(0, T_pos); let hour_minute_second
2021-04-19 11:37:40 2878 2
原创 vue3.0安装node-sass与sass-loader
package.json添加配置 "node-sass": "^5.0.0", "sass-loader": "^10.1.1", "vue-loader-v16": "^16.0.0-beta.5.4"cnpm i 更新依赖cnpm i解决报错peerDependencies WARNING sass-loader@^10.1.1 requires a peer of sass@^1.3.0 but none was installedpeerDepe.
2021-03-13 13:42:27 1634 1
原创 封装localStorage
//封装操作localstorage本地存储的方法const storage = { //存储 set(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, //取出数据 get(key) { let data = localStorage.getItem(key); if (!(data == null || data == ''))
2021-03-08 18:23:41 86
原创 js 中 const 定义的值是否能更改
js 中 const 定义的值是否能更改使用const定义js基本类型 String使用const定义js基本类型 Number使用const定义js基本类型 Boolean使用const定义js基本类型 Null使用const定义js基本类型 Undefined使用const定义js引用类型 Array使用const定义js引用类型 Object使用const定义js引用类型 Function使用const定义js引用类型 Date验证例子:使用const定义js基本类型 Stringconst s
2021-01-24 15:48:59 2640 5
原创 深拷贝和浅拷贝的区别
深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。假设B复制了A,修改A的时候,看B是否发生变化:如果B跟着也变了,说明是浅拷贝(修改堆内存中的同一个值)如果B没有改变,说明是深拷贝(修改堆内存中的不同的值)深拷贝和浅拷贝的区别浅拷贝(shallowCopy)只是增加了一个指针指向已存在的内存地址,深拷贝(deepCopy)是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存。深拷贝实例JavaScript中两个变量用等于进行值传递的赋.
2021-01-24 14:46:49 521
原创 css 设置背景图片铺满固定不动
页面原型html<div class="main"></div>css.main { position: relative; width: 100%; height: 100%; background-image: url("../../assets/images/bg2.png"); background-attachment: fixed; background-repeat: no-repeat; background-size: co.
2021-01-20 09:11:11 577
原创 sessionStorage操作对象
sessionStorage 操作对象谷歌浏览器查看 sessionStorage谷歌浏览器操作 sessionStorageJavaScript 测试代码// 创建 Clig 对象let Clig = { "name":"李广程", "age":21, "address":"中国"}; // JSON.stringify() // 将 JavaScript 值转换为 JSON 字符串// JSON.parse()// 将 JSON 字符串转换为对象/
2020-12-31 22:01:16 162 2
原创 IDEA快捷键
IDEA常用快捷键IDEA new一个类后自动对对象定义光标放在类后面IDEA new一个类后自动对对象定义光标放在类后面Alt + Enter
2020-12-12 15:33:10 530 1
原创 Redis自增自减计数
INCR key将 key 中存储的数字自增 1 。如果 key 不存在,那么 key 的值会被初始化为 0 ,然后自增 1 。DECR key将 key 中存储的数字自减 1 。如果 key 不存在,那么 key 的值会被初始化为 0,然后自减 1 。INCRBY key 10将 key 中存储的数字自增 10 。如果 key 不存在,那么 key 的值会被初始化为 0 ,然后自增 10 。DECRBY key 10将 key 中存储的数字自减 10 。如果 key .
2020-12-05 18:06:16 5434 1
原创 js实现post跳转页面,同步跳转与异步回调
// jquery需提前引入,否则jquery加载不完全,$.post就执行了,自然会报错// js引入jquerydocument.write("<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'><\/script>");/** post提交:同步写法*/// 提交数据var url = "http://127.0.0.1:8080/shop/api/v1/cart/items/upda
2020-10-20 22:20:31 853 1
原创 移动端开发,响应式代码,CSS3 @media 查询,@media screen
html与css代码:<!DOCTYPE html><html> <head> <!-- 设置编码格式 --> <meta charset="utf-8"> <!-- 手机,移动端开发,需要加的meta标签 --> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-wid
2020-09-30 11:24:31 142
原创 node.js手写http服务器连接mysql数据库
代码数据库数据:创建数据库:CREATE DATABASE zfw;选择数据库:USE zfw;创建数据表:CREATE TABLE `zfw_fangattrs` ( `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT, `pid` int(10) UNSIGNED NOT NULL DEFAULT 0 COMMENT '上级ID', `field_name` varchar(50) CHARACTER SET utf8mb4
2020-09-27 21:22:31 436
原创 SSM增删改查
代码下载代码下载地址代码说明Talent介绍《人事信息管理系统》人才库管理模块软件架构软件架构说明后端:运用Spring,Spring MVC,MyBatis 增删改查前端:运用ajax异步提交数据,bootstrap样式,layer弹窗插件安装教程配置本地的jdk运行环境解压tomcat,在eclipse配置tomcat,将本项目build path配置tomcat创建OA数据库,选择OA数据库,将数据文件夹下的 t_talents.sql 文件用navicat执行一下使用
2020-09-26 20:27:17 290 1
原创 Eclipse快捷键
Eclipse生成get和set方法快捷键光标放在类里面,即在大括号里面,编辑状态Shift + Alt+SEclipse自动修改错误快捷键光标放在错误行Ctrl + 1
2020-09-18 16:14:58 502
原创 安装ffmpeg,视频转码m3u8,浏览器播放
Windows安装配置ffmpeg下载安装包下载地址:FFmpeg安装包下载解压安装包配置环境变量安装成功cmd输入 ffmpeg –version ,如果出现如下说明配置成功视频转码m3u8视频要想转码 m3u8 ,先要将视频转 mp4 ,如果视频是 mp4 ,这一步可以忽略ffmpeg -i 本地视频地址 -y -c:v libx264 -strict -2 转换视频.mp4mp4 转 tsffmpeg -y -i 本地视频.mp4 -vcodec copy
2020-06-18 18:10:40 697
原创 MySQL8.0数据库导出与备份
方法一:可视化工具Navicat操作 1-1、转存sql文件 1-2、另存为sql文件 2-1、新建数据库 2-2、先双击打开刚才创建好的数据库,然后右击,如果右击的选项为灰色则是没有打开数据库,需要双击打开,不用这个数据库,或者数据表的时候,右击关闭数据库,这样可以节省数据库的连接资源。 2-3、选择刚才打开的保存好的sql文件,点击确定然后就会执行数据插入,sql文件插入成功后关闭就ok了。方法二:cm...
2020-06-18 15:15:40 3908
原创 node.js连接mysql数据库
第一步:新建 node_mysql_test 文件夹第二步:在node_mysql_test目录下执行命令:cnpm install mysql2-1: 此时npm会编译node.js连接mysql的环境2-2: 在当前目录编写node.js连接mysql数据库的代码,将文件名命令为 mysql.jsvar mysql = require('mysql');var connection = mysql.createConnection({ ...
2020-06-03 13:42:36 333
原创 手机,移动端开发,需要加的meta标签
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
2020-05-23 09:38:28 244
原创 JavaScript图片采集脚本
// 查找图片轮询imagesFunc = setInterval(function(){document.documentElement.scrollTop = document.body.scrollHeight;}, 2000);// 停止查找图片轮询clearInterval(imagesFunc);function nodeToString ( node ) { var tmpNode = document.createElement( "div" ); tmpNo.
2020-05-19 14:03:23 344
原创 html播放器缓存编写
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>视频缓存</title></head><body> <video controls="controls" id="video">您的浏览器不支持播放该视频!</video> <script type="text/javascript"> le.
2020-05-11 17:43:33 417
原创 video标签实现多个视频循环播放
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>视频合并</title></head><body> <video controls="controls" id="video">您的浏览器不支持播放该视频!</video> <script type="text/javascript.
2020-05-10 16:01:04 1444
原创 Golang VS Swoole 静态网页QPS测试
Golang的http服务器代码package mainimport ( //"fmt" "net/http")func main() { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { w.Write([]byte("你好世界,我是golang...
2020-04-28 22:59:26 888
原创 GitHub与码云自动拉取,替换,上传,更新保存的dos脚本
GitHub仓库托管代码经常要使用,于是为了方便,写了一个自动提交代码的.bat脚本,例如:Chat_GitHub.bat,。首先GitHub已经有项目仓库,并且已经配置本地SSH私匙。接下来就是.bat文件的脚本代码cd C:\Users\dell\Desktop\tempgit clone git@github.com:liguangcheng666/chat.git...
2020-04-26 13:38:31 442
原创 前端第一周总结
标签div标签: 代码:<div> 一个盒子 </div>运用示例:小结:div标签是运用广泛的双标签,使用频率高 p标签:代码: <p>段落标签</p>小结:p标签是段落标签标题标签:代码: <...
2020-02-22 18:46:15 281
原创 弹性布局(display:flex;)属性详解
转载原文:https://www.cnblogs.com/hellocd/p/10443237.htmlFlexbox是 flexible box 的简称(注:意思是“灵活的盒子容器”),是CSS3引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以...
2020-02-20 21:09:07 205
原创 border-radius用法
border-radius作用:给元素添加圆角的边框例: border: 10rpx solid rgba(0,0,0,0.2); border-radius: 50%;效果:
2020-02-02 11:08:40 180
原创 设置网页title旁边的小图标
在html文件中的<head></head>标签里加上:<link rel="icon" href="img/logo.ico" type="images/x-ico" />注意:图片的后缀名必须要是 .ico 格式的。
2020-02-01 18:39:41 406
原创 box-shadow用法
box-shadow作用:添加阴影例: box-shadow:0 10rpx 10rpx rgba(0,0,0,.1) inset;效果:
2020-01-29 22:52:18 352
转载 js 实现加载百分比效果
为了提升用户使用体验,加强网站效果,运用了这个JavaScript预加载。效果地址:http://39.105.0.128/talk/效果:html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加载...
2020-01-28 20:52:25 1716 4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人