- 博客(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
231
原创 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
478
原创 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
509
原创 nginx安装与配置
安装 官网复制 yum 源 使用 vim 创建 etc/yum.repos.d/nginx.repo文件，将下面的内容复制到文件中。 [nginx] name=nginx repo baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/ gpgcheck=0 enabled=1 将 2 中的文件 OS 改为 centos, OSRELEASE 改为 7 保存（centos7对应自己服务器的系统）。 yum install nginx安装 n
2020-06-12 22:13:15
182
原创 ajax封装
encodeURIComponent实现了对一些特殊字符的编码，传到后台需后台解码，可以根据自己的业务只对一些特殊的接口做编码。 post请求头Content-Type一般有json和form两种格式，分别以json和键值对格式传给后端。 function axios({ url, method = 'GET', params, data = {}, header, success, ...
2020-05-07 17:44:50
141
原创 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
522
原创 js发布订阅模式
发布订阅模式广泛用于js中，从早期的jq事件池的机制到后面vue的eventbus都是典型的发布订阅模式。在该模式中，发布者向事件池中发送或移除事件，由事件池通知订阅者。这样大大降低了代码之间的耦合度，使得代码更利于维护。这一点也是和观察者模式最大的区别，观察者是发布者直接发送消息给订阅者，是强耦合的。 一个简单的发布订阅模式 let subscribe = function () { c...
2020-03-31 20:30:23
306
原创 node实现token验证及vue前端获取用户信息权限控制
基本思路 用户登录校验成功后服务端会根据 用户信息和时间 生成token，并将其和用户的信息一起发送给客户端。 客户端将token存到localStorage，将用户的信息挂载到vue实例下，每次发送请求或进行操作可以通过用户信息判断其是否有权限。 客户端每次发送请求都将token携带在请求头中传给服务端。 服务端每次接收请求验证token的有效性和时间是否过期，如无法验证通过，返回错误的信息给...
2020-03-26 11:43:37
1477
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
431
原创 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
4253
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
1564
原创 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
1147
原创 js单线程（js在node和浏览器中运行的机制）
js 运行的顺序 同步→异步（微任务→宏任务） 先执行全局的同步代码，在node中从微任务队列中依次取出所有的任务放入调用栈中执行，然后开始宏任务，宏任务队列中的所有任务都取出来执行（在浏览器中，浏览器只取一个，执行完一个宏任务后再执行下一个），每个宏任务阶段执行完毕后，开始执行微任务，再开始执行下一阶段宏任务，以此构成事件循环 node中 同步→所有微任务→所有宏任务（同步→所有微任务→...
2019-08-10 12:43:24
269
原创 图片懒加载
代码思路 页面滚动时加载图片 判断页面窗口+页面滚动距离是否大于图片距顶部的距离，大于则加载。 通过创建实例预加载图片，加载完成后赋到图片上。 <div> <img src="images/loading.gif" data-src="images/1.jpg"> </div> <div> <img src="images/loadin...
2019-07-05 17:29:30
154
原创 express的基本使用
安装express yarn 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
191
原创 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
175
原创 vue自定义指令
vue可以中通过Vue.directive注册一个全局的自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 实现一个拖拽的自定义指令 import Vue ...
2019-05-06 23:20:00
184
原创 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
203
原创 百度地图的使用
申请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
155
原创 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
122
原创 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
3397
原创 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
430
原创 vuex
组件之间的通信 props，this.$emit(事件，传值) vuex 一个状态管理器，可以储存数据，实现组件之间的通信。 state 存放数据 getters 类似于计算属性 Mutations 更改 Vuex store中的状态的唯一方法 一个mutation = 一个事件类型 和 一个 回调函数 Actions 类似于 mutation，不同在于： Actions 提交的...
2019-03-06 15:48:08
121
原创 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
957
原创 vue-cli 3.0 项目创建
1. 安装node http://nodejs.cn/download/ 2. yarn安装 https://yarn.bootcss.com/docs/install/#windows-stable // 换源 国内npm比较慢 yarn config set registry https://registry.npm.taobao.org 3. webpack安装 yarn global a...
2019-03-03 16:52:52
143
原创 css面试
自适应布局 BFC的作用：消除Margin Collapse 容纳浮动元素 阻止文本换行 双飞翼布局 .l{ background: #000; height: 300px; float: left; width: 200px; } .r{ background: pink; height...
2019-01-24 22:06:00
154
原创 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
519
原创 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
420
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人