- 博客(28)
- 收藏
- 关注
RSS订阅原创 防抖的三种形式
时间戳实现当触发时间相加大于500毫秒时执行触发和执行同时无法保证最后一次触发一定执行function throttle(callback, duration = 500) { let prevTime = Date.now() return function () { let now = Date.now() if (now - prevTime > duration) { callback() prevTime = now }
2021-07-06 23:21:31
219
原创 p命名空间和c命名空间
p命名空间实体类中必须有set方法；实体类中必须有无参构造器（默认存在）；导入p命名空间注入方式依赖。<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:util="http://www.springframework.org/schema/util" xmlns:
2020-10-23 11:26:15
470
原创 java继承与方法重写重载
继承java使用 extends 和 implements 这两个关键字来实现继承.extends 一个子类只能拥有一个父类，只能继承一个类。implements 可以同时继承多个接口,多个接口逗号隔开。public class Animal { private String name; public Animal(String myName) { name = myName; } Animal() { System.out.p
2020-09-25 14:19:00
500
原创 nginx安装与配置
安装官网复制 yum 源使用 vim 创建 etc/yum.repos.d/nginx.repo文件，将下面的内容复制到文件中。[nginx]name=nginx repobaseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/gpgcheck=0enabled=1将 2 中的文件 OS 改为 centos, OSRELEASE 改为 7 保存（centos7对应自己服务器的系统）。yum install nginx安装n
2020-06-12 22:13:15
172
原创 ajax封装
encodeURIComponent实现了对一些特殊字符的编码，传到后台需后台解码，可以根据自己的业务只对一些特殊的接口做编码。post请求头Content-Type一般有json和form两种格式，分别以json和键值对格式传给后端。function axios({ url, method = 'GET', params, data = {}, header, success,...
2020-05-07 17:44:50
133
原创 nodejs请求头跨域问题
有的时候，我们将token放在header中传给后端，发现前端报错：Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.这是应为请求头跨域的缘故，可以在后端代码跨域中加上 res.header(“Access-Control-Allow-Headers”,...
2020-04-12 18:56:12
504
原创 js发布订阅模式
发布订阅模式广泛用于js中，从早期的jq事件池的机制到后面vue的eventbus都是典型的发布订阅模式。在该模式中，发布者向事件池中发送或移除事件，由事件池通知订阅者。这样大大降低了代码之间的耦合度，使得代码更利于维护。这一点也是和观察者模式最大的区别，观察者是发布者直接发送消息给订阅者，是强耦合的。一个简单的发布订阅模式let subscribe = function () { c...
2020-03-31 20:30:23
293
原创 node实现token验证及vue前端获取用户信息权限控制
基本思路用户登录校验成功后服务端会根据 用户信息和时间 生成token，并将其和用户的信息一起发送给客户端。客户端将token存到localStorage，将用户的信息挂载到vue实例下，每次发送请求或进行操作可以通过用户信息判断其是否有权限。客户端每次发送请求都将token携带在请求头中传给服务端。服务端每次接收请求验证token的有效性和时间是否过期，如无法验证通过，返回错误的信息给...
2020-03-26 11:43:37
1456
2
原创 vue中使用echart及常见问题
基本使用安装npm install echarts创建实例(实现一个简单的柱形图)<!--为ECharts准备一个具备大小（宽高）的Dom--><div id="main" style="width: 600px;height:400px;"></div>mounted() { var myChart = echarts.init...
2020-03-21 11:40:42
418
原创 vue实现大文件切片上传
利用file里面的slice方法可以将文件切片，前端进行切片处理向http并发传递。等所有切片上传完成后再向服务器发送一个合并切片的请求。<input type="file" @change="onChange" ref="fileInput" />onChange() { let self = this; let file = this.$refs.fileInpu...
2020-03-15 12:34:09
4234
2
原创 nodejs与vue（elementui）实现图片上传
前端这里我们利用elementui实现文件上传，利用accept限制上传文件类型，同时通过js限制上传大小，借口返回后调用uploadSuccess得到url。<el-upload class="upload-demo" action="/api/album/upload" :on-success="uploadSuccess" :before-uploa...
2020-03-14 20:42:23
1547
原创 nodejs实现后台分类分页
获取前端传过来的数据写mongodb查询语句使用async实现异步操作控制代码先查询符合条件的总数再查询分页传给前端var express = require('express');var router = express.Router();var async = require('async');var MongoClient = require('mongodb').Mongo...
2020-02-05 20:38:19
1135
原创 js单线程（js在node和浏览器中运行的机制）
js 运行的顺序 同步→异步（微任务→宏任务）先执行全局的同步代码，在node中从微任务队列中依次取出所有的任务放入调用栈中执行，然后开始宏任务，宏任务队列中的所有任务都取出来执行（在浏览器中，浏览器只取一个，执行完一个宏任务后再执行下一个），每个宏任务阶段执行完毕后，开始执行微任务，再开始执行下一阶段宏任务，以此构成事件循环node中 同步→所有微任务→所有宏任务（同步→所有微任务→...
2019-08-10 12:43:24
262
原创 图片懒加载
代码思路页面滚动时加载图片判断页面窗口+页面滚动距离是否大于图片距顶部的距离，大于则加载。通过创建实例预加载图片，加载完成后赋到图片上。<div> <img src="images/loading.gif" data-src="images/1.jpg"></div><div> <img src="images/loadin...
2019-07-05 17:29:30
147
原创 express的基本使用
安装expressyarn add express创建一个server.js文件var express = require('express');var app = express();app.get('/', function(req, res){ res.send('this is the hello word');})app.listen(3000);console...
2019-06-03 19:32:28
180
原创 js伪数组
拥有length属性，但不具有索引和数组的方法，本质是一个对象。//一个简单的伪数组var arr = { length: 3, "0": "first", "1": "second", "2": "third"};将伪数组转化成数组<body> <ul id="ul"> <li id="li">&...
2019-05-08 11:00:18
166
原创 vue自定义指令
vue可以中通过Vue.directive注册一个全局的自定义指令// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})实现一个拖拽的自定义指令import Vue ...
2019-05-06 23:20:00
175
原创 vue组件开发
局部组件import component1 from '../component/zl-header';export default { name: "twoWeekReport", components: { component1 },};全局组件import component1 from './component/zl-header.vue';Vue.com...
2019-04-24 12:57:22
191
原创 百度地图的使用
申请AK创建应用项目名称：xxx应用类型： 浏览器端白名单： *（测试环境）引入脚本<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>创建实例及定位var map = new BMap.Map("allmap")...
2019-04-20 22:06:31
148
原创 js常用封装
时间处理function dateToString(date){ //2018年X月X日 00:00:00 星期X // y/m/d h:M:s var week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"] var dateStr = ""; var y = date.getFullYear(); var m = date.getM...
2019-04-09 15:47:54
114
原创 js防抖和限流
防抖function debounce(callback,delay=300){ var t = null return function(){ clearTimeout(t) t = setTimeout(callback,delay) } } window.onscroll = debounce(function(){ cons...
2019-04-08 10:54:56
3383
原创 js操作audio和video
自定义样式audio和vedio是默认看不见元素的，可以使用设置controls样式使其可见(该样式由浏览器自己提供)，在network中看到media看到相关的信息。这里我们取消controls自定义它的样式。 <div class="box"> <video id="myVideo"> <source src="http://www....
2019-04-06 17:13:12
419
原创 vuex
组件之间的通信props，this.$emit(事件，传值)vuex一个状态管理器，可以储存数据，实现组件之间的通信。state 存放数据getters 类似于计算属性Mutations 更改 Vuex store中的状态的唯一方法一个mutation = 一个事件类型 和 一个 回调函数Actions 类似于 mutation，不同在于：Actions 提交的...
2019-03-06 15:48:08
116
原创 vue-cli 2.x和3.0正向代理跨域
vue-cli3.0 需要自己去手动添加vue.config.js文件//vue-cli 3.0中 devServer: { port: 8080, // 端口号 host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 // proxy: 'ht...
2019-03-06 15:32:08
948
原创 vue-cli 3.0 项目创建
1. 安装nodehttp://nodejs.cn/download/2. yarn安装https://yarn.bootcss.com/docs/install/#windows-stable// 换源 国内npm比较慢yarn config set registry https://registry.npm.taobao.org3. webpack安装yarn global a...
2019-03-03 16:52:52
131
原创 css面试
自适应布局BFC的作用：消除Margin Collapse 容纳浮动元素 阻止文本换行双飞翼布局 .l{ background: #000; height: 300px; float: left; width: 200px; } .r{ background: pink; height...
2019-01-24 22:06:00
148
原创 jq实现轮播淡入淡出
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&a
2018-11-15 17:41:15
507
原创 3D二级旋转导航栏
1 效果图 2 代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet&a
2018-09-14 20:08:10
398
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人