- 博客(26)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 一个扫雷小游戏带你初识VUE3和typescript
一个扫雷小游戏代理初识VUE3和typescript阅读本文你会了解到：vue3的部分新特性typescript的基本使用部分es6语法基础部分为什么要使用ref和reactive来声明变量和对象，下面是官方文档的示意图片但是我相信很多初学者看了也不会特别理解，下面我们用简单的vue2和vue3代码来展示两者的区别// vue2export default { created () { let cup = 0 let fillCup = cup
2021-12-02 17:10:11
4342
原创 教你从零开始画echarts地图
echarts地图制作离线地图下载地址https://datav.aliyun.com/tools/atlas/index.htmlecharts文档地址https://echarts.apache.org/zh/option.html基于VUE编写，其他框架请自行转换，大同小异基础配置先让地图内容出来，npm安装步骤省略，请参考官方文档，创建的div必须设置宽度和高度，关于图表的宽高自适应，参考我的另一篇文章<template> <div class="con
2021-11-08 11:26:33
71206
49
原创 JS设计模式-观察者模式
JS设计模式-观察者模式我个人觉得观察者模式（订阅-发布模式）是最常会见到的一种设计模式了，即是没了解过设计模式，你应该也见过：window.addEventListener('click', function() { // TODO})又或者是在VUE开发中父子组件使用$emit和$on进行事件通信，以及不相关组件的eventbus通信。这都是比较常见的观察者模式。让我们来试想这样一种情况：function fnA() { console.log('function A');}
2021-09-15 14:18:04
263
原创 JS设计模式-代理模式
JS设计模式-代理模式在前端的一些表格里，往往会有一些复选的批量操作，比如给用户批量赋予权限，由于涉及表格分页以及反复翻页的勾选重现，很多时候，都是点击复选框后就像后台发起请求，直接进行数据的持久化。但是这时候就有个问题了，只要我的手速足够快，这种向后台发起请求的频率是非常高的，而我作为LOL的黄金分段玩家，也有自信一秒钟点五个复选框，为此，我们需要一个代理来拦截一下这种高频操作。首先我们模拟向后台发请求的方法，很简单：function ajaxRes(id) { console.log(`请求参
2021-09-09 16:43:10
251
原创 JS设计模式-策略模式
JS设计模式-策略模式设想这样一个功能，公司的年终考核等级会影响员工的年终奖收入，目前为S等级3倍工资，A等级2倍工资，B等级就只能是1个月的工资了。function bonus(level, salary) { if (level === "S") { return salary * 3 } if (level === "A") { return salary * 2 } if (level === "B") {
2021-09-07 14:37:18
121
原创 JS设计模式-单例模式
JS设计模式-单例模式在java中，单例模式被定义为：保证一个类仅有一个实例，并提供一个访问它的全局访问点。这种设计模式在JavaScript中也同样适用，我们可以来保证总是有唯一的对象、方法或者是DOM元素。先来看个最简单的例子：dom1 = document.createElement("div");dom2 = document.createElement("div");console.log(dom1 === dom2); // false其实很显然，dom1和dom2并不是同一个元素，
2021-09-06 16:44:52
165
原创 JavaScript函数节流
JavaScript函数节流在处理echarts图表的时候，往往需要使用window.onresize来监听页面大小，从而进一步去改变echarts的大小，但是resize事件触发的频率极其频繁，如果页面的echarts图表又很多，这无疑是一件十分灾难的事情。首先定义一个节流函数，需要接收一个函数，并且返回一个函数，示例如下：throttle = (fn) => { let timer; return function () { console.log("执行次数
2021-06-25 16:08:29
230
原创 echarts动态改变图表的大小
echarts动态改变图表的大小echarts5以上的版本，echarts容器支持直接设定百分比宽高，但是仍然会有低版本的一个问题，就是浏览器尺寸变动的时候，echarts容器不会响应式的变化。为了解决这个问题，有了如下解决方案：首先echarts容器外要放置一个父元素 <div ref="ct" style="height: 100%; width: 100%"> <div ref="charts" style="height: 100%; width: 100%"
2021-06-01 15:10:37
2288
原创 vue读写excel
有个需求是上传一个文件，读取里面的内容，然后读取第三方的收费接口，然后将结果导出Excel，更是由于客户需要轻量级的应用，并不想进行配置运行环境和服务器部署，所以才有了这种需要前端来读写Excel的需求，博主在这里是用vue搭建了前端项目，最后用electron打包成PC端的可执行应用。在这里我们只介绍读写Excel。首先需要用到的插件：读取Excel的插件js-xlsxnpm install xlsx这个插件亦可以进行Excel的导出，但是普通版本导出无法进行样式的设置，pro版本是收费
2021-01-23 11:12:15
1972
原创 CSS学习(三)——吃豆人加载动画
效果如下：制作的比较简单，其实本功能的困难点就是如何绘制嘴部的扇形，我的思路是这样的：创建一个很大的矩形，使其一个顶点在圆心，如下：然后通过overflow：hidden去除多余的部分，在用transform的rotate和skew进行控制，最终看起来就像嘴在动一样最后源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
2021-01-05 14:23:00
559
1
原创 CSS学习(二)——制作加载动画
效果如下：学习制作关键帧动画，本内容需要注意的地方：var声明自定义属性名称，点我查看文档calc动态计算属性，点我查看文档源码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0".
2021-01-03 16:29:22
213
原创 CSS学习(一)——制作新年贺卡
效果如下：我也是正在学习中，此特效没有太高级的代码语法，只是transform的应用源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cRack<.
2021-01-02 20:45:33
1357
1
原创 vuex-module-decorators简单使用
官方文档：https://championswimmer.in/vuex-module-decorators/安装：npm install vuex-module-decoratorsstore/index.tsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export defaul...
2019-11-08 14:31:40
8092
原创 vue实现自定义组件的v-model
在编写自己的组件时，我们该如何实现v-model双向数据绑定？阅读本文前，你需要了解父子组件的传参方式，如果你的项目使用vuex，那本文对你用处也不大。我们看一下官方文档，来了解一下v-model到底做了什么事情。其实说的通俗易懂一点，v-model只做了两件事：1、监听<input>等元素本身的input事件。2、动态绑定父/子组件传递过来的值。好了，有了这...
2019-10-27 15:47:48
369
原创 Windows 配置 Aria2 及 Web 管理面板教程
Aria2 简介Aria2 是一个多平台轻量级，支持 HTTP、FTP、BitTorrent 等多协议、多来源的命令行下载工具。Aria2 可以从多个来源、多个协议下载资源，最大的程度上利用了你的带宽。Aria2 有着非常小的资源占用，在关闭磁盘缓存的情况下，物理内存占用通常为 4M（正常 HTTP/FTP 下载的情况下），BitTorrent 下载每秒2.8M/S的情况下，CPU 占有率约为...
2019-10-27 11:46:27
2282
1
原创 一些js小技巧
记录一下自己写前端的一些小技巧，供自己备忘使用。您可以随意转载1、字符串转数字strToNumber(str){ return +str;}你可以用“+”快速使得字符类型转为数字类型let a = this.str4number("1234");let b = this.str4number("");let c = this.str4number("123a");...
2019-07-15 14:46:11
211
原创 VUE热更新内存溢出的解决办法
开发项目有一段时间了，随着项目越来越大，打包的时间也相应的变长了，打包时的内存也增多了。这时候产生了一个问题，在发布项目的时候，会出现类似如下错误的提示。<--- JS stacktrace --->==== JS stack trace ========================================= 0: ExitFrame [pc: 329...
2019-07-03 15:57:14
7833
6
原创 口算平方根
本文口算平方根的前提：这个数的平方根是个两位整数。 有一次我的同事在旁边念叨5476的平方根是多少，他还在打开电脑计算器的时候，我就已经告诉他是74了，他突然觉得很不可思议。我说低调，基本操作。其实让我来算的话，我也不一定能算的出来，得益于初中时老师教的一些小技巧，接下来就和大家分享一下如何口算平方根。首先我们先把0~9的平方写下来，一会要用。1 1 2 4 ...
2018-12-18 10:51:55
1450
原创 Vue-Quill-Editor回显不显示空格的处理办法
我自己在用VUE做一个博客网站，查了一下好多人都在用Vue-Quill-Editor，于是我也把这个插件加入到我的程序里，可是后来却出现了个问题，如图：简单的代码如下：<template> <div> <div class="container"> <quill-editor ref="myTe...
2018-12-16 00:57:38
11184
25
原创 Python爬虫：爬取一部自己喜欢的小说
这里不多介绍Python和爬虫，话不多说，直接开整。我们首先从最简单的爬虫开始学习，我知道的一个小说网站——笔趣阁（http://www.biquw.com），无须登录，无须进行header验证，而且响应返回的是标准的HTML页面，可以说是对新手非常友好了。博主建议大家，爬取网站本身就不算什么合法的行为，所以至少，给你的每次请求加上一个时间间隔，不要让人家的服务器挂掉。本文写于2018-1...
2018-12-14 15:39:14
1956
3
原创 java用junit测试service层方法的工具类
常规的写法：可以直接在junit测试类上写注解import org.junit.Test;import org.junit.runner.RunWith;import org.springframework.test.context.ContextConfiguration;import org.springframework.test.context.junit4.SpringJUnit4...
2018-07-16 14:31:24
5684
原创 VUE+ElementUI重写默认上传方式
下面是elementUI官网的demo<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list=...
2018-06-12 12:25:24
4048
原创 java反射遍历实体的所有属性名称和值
import java.lang.reflect.Field; import java.lang.reflect.Method; // model换成需要遍历的实体 // 获取实体类的所有属性，返回Field数组 Field[] field = model.getClass().getDeclaredFields(); ...
2018-05-29 09:56:37
5328
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人