- 博客(113)
- 资源 (8)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 js实现图片懒加载的一个详细方案（引入即可使用）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>懒加载</title> <style> img { width: 600px; height: 450px; } </style> <script src="./lazyLoad.js"></scr
2022-05-28 22:30:07
460
原创 JavaScript类数组与Array.form()
认识类数组有下标和lengthconst obj = { 0: 1, 1: 3, length: 2,}const arr = Array.from(obj)console.log(arr) // [1, 3]相关问题假设给obj一个push方法，并且push一个数会产生什么效果？const obj = { 0: 1, 2: 3, length: 2, push: [].push}obj.push(4)console.log(obj) // { 0:
2022-05-11 22:09:09
454
原创 vue2生命周期
<div id="app"> <div class="demo">{{ msg }}</div></div><script> new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('show') } }, // 此时只有Events和生命周.
2022-04-30 14:02:36
339
原创 Vue2响应式原理浅析
definePropertyObject.defineProperty() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。下面做一个简单的示例： const data = {} let name = '123' Object.defineProperty(data, 'name', { get: function() { return name }, set: function(newValue) { console.log('set')
2022-04-30 14:00:11
230
原创 采用Vue+Node前后端分离的校友信息管理系统（适合毕业设计）
本系统所采用的技术：前端：vue2后端：koa2数据库：mongodb整个系统分为：新闻模块、校友会模块、校友活动模块、招聘信息模块、捐赠模块、个人信息管理模块。以下为相关页面：
2022-04-27 23:11:51
1274
原创 JavaScript中的数据拷贝
数据类型及拷贝方式JavaScript的数据类型分为基本类型和引用类型：基本类型有：numberstringbooleannullundefinedsymbol引用类型有：objectfunctionarray基本数据类型在拷贝的时候会产生新的副本，原值是不会改变的。引用数据类型在普通的赋值拷贝时，拷贝的是引用的地址。let arr = [1, 2, 3]let arr2 = arrarr2[0] = 0console.log(arr) // [0, 2, 3]正
2022-04-27 22:28:49
2134
1
原创 JavaScript原型、原型链、继承
原型prototype与__proto__先简单理解以下几句话：每一个对象都有一个__proto__属性，并且指向它的prototype原型对象每一个构造函数都会有一个prototype原型对象，prototype原型对象里的constructor指向构造函数本身直接看下面代码：function Person(name, age, sex) { this.name = name this.age = age this.sex = sex}// 先打印看看Person是什么// 打印
2022-04-27 22:26:50
1727
原创 JS中的this指向
以下为一个面试题：var obj = { foo: function() { console.log(this) }}var bar = obj.fooobj.foo() // objbar() // windowJavaScript中全局存在一个window对象，所有定义的函数或者变量都会挂载到window对象中，比如:var obj = 1//相当于window对象身上多了一个obj属性window: { obj: 1}所以bar()也可以写成window.
2022-04-27 22:03:50
1462
原创 原生JS+防抖，模拟滚动加载数据
思路：滚动条头部距离顶部的距离加上，滚动套自身的高度等于整个页面的高度滚动条高度（即可视窗口的高度）let clientHeight = document.documentElement.clientHeight滚动条头部距离顶部的高度let scrollTop = document.documentElement.scrollTop整个页面的高度（包括溢出看不见的高度）let scrollHeight = document.documentElement.scrollHeight.
2022-01-05 14:30:11
715
原创 原生js实现图片懒加载
<img data-src="https://pic.imgdb.cn/item/614ed1642ab3f51d91a0da60.jpg" ><img data-src="https://pic.imgdb.cn/item/6184d50c2ab3f51d910e3c4f.jpg" ><img data-src="https://pic.imgdb.cn/item/6184d41a2ab3f51d910cee6f.jpg" ><img data-src="h
2021-12-20 18:00:51
2486
原创 React学习宝典
文章目录1. 第一个React页面2. JSX语法规则3. 组件类别3.1 函数式组件3.2 类式组件4. 状态State4.1 详细版4.2 简写版5. props5.1 基本使用5.2 传递限制5.3 简写方式6. ref使用方式7. 非受控组件8. 受控组件9. 高阶函数的使用9.1 高阶函数9.2 函数的柯里化10. 生命周期10.1 旧的生命周期图10.2 新的生命周期10.3 getSnapshotBeforeUpdate的使用场景11. Diff算法12. 配置代理解决跨域13. 组件之间的通
2021-12-20 11:53:09
544
原创 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
在Vue3中使用<keep-alive></keep-alive>做页面缓存后，检查每个页面是否有根标签，在Vue3中可以不写跟标签，但做缓存的时候要加上。 <router-view v-slot="{ Component }"> <transition> <keep-alive> <div> <component :is="Component" /> <
2021-12-13 17:45:36
2321
原创 leetcode初级算法篇——数组（一）
1.删除排序数组中的重复项给你一个有序数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。判断当前位于后一位是否相等，相等则删除当前位，数组下标-1，从前一位开始再进行比较/** * @param {number[]} nums * @return {number} */var removeDuplicates = function(nums) { for(let i = 0; i < nums.length; i ++) {
2021-11-25 15:36:32
299
原创 vue项目开发总结——任务悬赏平台（前端）
项目简介：该项目实习中的第一个项目，该项目分为用户端、企业端、后台管理端。用户可以在任务大厅接受任务，每完成任务都会获得响应的报酬，用户只能接受一个任务，该任务完成后才能继续下一个任务。任务进行期间，该任务可以被企业取消，若企业取消用户正在完成的任务，则返回5%的奖励给用户。企业可以发布任务，发布任务之前需要上传企业认证凭证给后台管理端，后台管理员审核通过之后企业才可发布任务，企业可以对用户已完成的任务进行确认完成任务和打回重做。一、相关技术vue2scssaxioscookieelem.
2021-11-22 10:56:38
945
原创 koa2配置跨域
npm i koa2-cors --save在app.js中引用const cors = require('koa2-cors')一定要在路由之前使用中间件app.use(cors())
2021-09-21 17:08:57
440
原创 node.js常用模块
目录1.path模块1.1 normalize1.2 join1.3 resolve1.4 extname1.5 basename1.6 dirname1.7 parse1.8 format2.fs模块2.1 readFile2.2 writeFile3.buffer4.events5.http模块5.1 get请求5.2 post请求1.path模块const path = require('path')1.1 normalize将字符串处理成路径const nor = path.normal
2021-09-20 16:51:17
783
原创 Vue中解决https,请求http及跨域问题
在vue.config.js中配置代理服务器module.exports = { devServer: { proxy: { ["/dev-api"]: { target: 'api',//api是后端接口地址 changeOrigin: true, ws: true, pathRewrite: { "^/dev-ap": '' } } } }}设置ax
2021-09-18 11:24:35
11804
1
原创 Vue + Element +Echarts 搭建后台管理系统
效果展示 ## 涉及要点请求接口使用axios,在main.js全局配置，并使用拦截器，引入Nprogress时间加载进度条的效果// 配置axios请求路径axios.defaults.baseURL = ''axios.interceptors.request.use(config => { Nprogress.start() config.headers.Authorization
2021-08-27 09:02:21
925
2
原创 Vue中使用echarts报错，【TypeError: Cannot read property ‘init‘ of undefined】
将以下这行代码替换import echarts from 'echarts'替换代码import * as echarts from 'echarts'使用方式<script>import * as echarts from 'echarts'export default { data () { return {} }, mounted () { const myChart = echarts.init(document.getElementById
2021-08-26 20:15:12
371
原创 Element-UI中el-eascader显示问题
数据多的时候显示效果显示的位置和高度都出现问题只需要给menu和panel加高度就好了.el-cascader-menu { height: 300px;}.el-cascader-panel { height: 300px;}
2021-08-23 15:40:01
302
原创 JavaScript【数据结构与算法】(二) 单向链表
目录链表的优势单向链表的一些基本操作链表操作的封装链表的基本实现1.append2.insert3.get4.indexOf5.update6.removeAt7.remove8.toString完整代码实现个人博客地址：https://tao-yuhan.gitee.io/tyhanblog/链表的优势链表中的元素在内存中不必是连续的空间链表的每一个元素由一个存储元素本身的节点和一个指向下一个元素的引用链表在创建的时候不需要确定大小，大小可以无线延伸下去单向链表的一些基本操作链表得有一
2021-08-20 21:14:58
440
2
原创 vuepress-theme-reco主题相关配置 + gitee pages 部署
我的博客预览：https://tao-yuhan.gitee.io/tyhanblog/
2021-08-20 14:54:04
1351
1
原创 Java基础版贪吃蛇
0.成果展示博客地址：java贪吃蛇1.绘制静态窗口StartGames.javapackage com.tao.snake;import javax.swing.*;public class StartGames { public static void main(String[] args) { //1.绘制静态窗口 JFrame frame = new JFrame("贪吃蛇"); frame.setBounds(200,200,900,700);
2021-08-15 00:36:39
229
原创 Vue3.x基础解析【推荐学完Vue2.x的来了解一下】
目录1.认识Vue32.创建Vue3项目1.1 vue-cli创建1.2 vite创建3.初探Vue33.1 采用TS后入口文件为main.ts3.2 Vue3中html模版可以没有根元素3.3 script4.常用Composition API4.1 setup4.2 setup与ref4.3 reactive4.4 计算属性4.5 监视器4.6 生命周期4.7 自定义hook函数5.其它5.1 shallowReactive 与 shallowRef5.2 readonly 与 shallowReado
2021-08-13 22:19:36
441
原创 Vue3中响应式数据代理原理Proxy
Vue3中使用响应式数据Vue3使用响应式数据需要通过ref与reactive<template> {{ num }} <button @click="Method1">button</button></template><script lang="ts">import { defineComponent, reactive, ref } from "vue";export default defineComponent({
2021-08-13 16:20:41
738
原创 Java基础【稀疏数组】
创建一个11*11的二维数组int[][] array1 = new int[11][11];array1[1][2] = 1;array1[2][3] = 2;System.out.println("原始数组");for(int[] ints : array1) { for(int anInt : ints) { System.out.print(anInt + "\t"); } System.out.println();}打印结果转化为稀疏数组先算出值不为0的
2021-08-11 21:52:17
146
原创 【快速上手TypeScript】基础知识罗列
目录基础预览类型介绍any类型ts中的字面量联合类型unknow类型object类型array类型tuple类型enum类型类型的别名类型断言类型总结编译选项类类的基本使用继承抽象类多态静态类型接口类类型接口对象类型接口函数类型接口属性的封装函数函数的完整写法参数泛型基本泛型多个泛型接口泛型类泛型泛型约束基础预览ts可以声明一个变量的类型，此后该变量只能为该类型let a: number;a = 10;如果声明和变量同时进行，ts自动对变量进行类型声明let a = 10;对函数的参数进行
2021-08-11 17:03:30
187
原创 【Themes for IntelliJ-based IDEs】Idea主题下载
下载地址：https://plugins.jetbrains.com/search?isPaid=false&tags=Theme下载完成后直接将.jar拖入到idea中即可
2021-08-09 22:17:10
1506
1
原创 【Java基础篇】输入两个数实现加减乘除
package com.method;import java.util.Scanner;public class method02 { public static void main(String[] args) { int num1 = 0; int num2 = 0; int result = 0; int type = 0; Scanner scanner = new Scanner(System.in); if (scanner.hasNe
2021-08-09 22:05:27
4194
原创 【微信小程序】音乐播放小程序
效果展示项目总结请求数据的方式采用wx.request(),将其封装称为一个Promise对象export default (url, data={}, method = "GET") => { return new Promise((resolve, reject) => { wx.request({ url: config.host + url, data, method...
2021-08-08 20:56:15
1116
原创 【TypeScript】贪吃蛇小游戏
效果预览项目结构共有Food,GameControl,ScorePanel,Snake四个类食物类//食物类class Food { //食物所对应的元素 element: HTMLElement; constructor() { this.element = document.getElementById('food'); } //获取食物位置的方法 get X() { return this.element.offsetLeft; } ge
2021-08-03 21:51:16
262
1
原创 TypeScript学习总结
目录基础预览类型介绍any类型ts中的字面量联合类型unknow类型object类型array类型tuple类型enum类型类型的别名类型总结编译选项类类的基本使用接口属性的封装泛型基础预览ts可以声明一个变量的类型，此后该变量只能为该类型let a: number;a = 10;如果声明和变量同时进行，ts自动对变量进行类型声明let a = 10;对函数的参数进行类型限制function sum(a: number,b: number) { return a + b;}函数
2021-08-02 13:53:11
440
原创 Vue移动商城项目(首页、详情页、购物车功能、项目部署方式)
项目成果项目演示地址：（腾讯云webify） supermale-5glmkgymb6d057cd-1301795258.ap-shanghai.app.tcloudbase.com项目要点1.在使用VueRouter进行页面跳转的时候，需要合理使用Vue生命周期的两个函数,activated函数与deactivated函数2.Vue中使用better-Scroll的时候，等数据全部渲染完之后要重新调用refresh函数，重新计算内容的高度。3.在使用Vuex时，将所有的操作全部放在act
2021-07-31 23:00:08
2737
原创 ajax实现文件上传
<!-- ajax上传文件 --> <h1>ajax上传文件</h1> <form action="/imgUpload" method="post" enctype="multipart/form-data"> <input type="file" name="imgfile" id="imgInput"> <div id="sBtn">上传</div> &...
2021-07-27 12:51:06
209
原创 Express学习笔记与记录
目录Express安装Express路由1.字符串的路由模式2.类字符串的正则模式3.正则表达式路径4.动态路由5.路线处理程序ejs常用语法GET提交POST提交允许前端跨域请求中间件cookie1.安装2.引入3.设置中间层4.设置cookie5.参数说明6.查看加密的cookie7.加密原理解析8.自定义加密代码session1.安装、引入、设置2.常用配置multer中间件ajax实现文件的上传Express安装官方文档：https://www.expressjs.com.cn/starter/
2021-07-27 12:45:04
656
原创 JavaScript【数据结构与算法】(一) 栈与队列
栈栈结构，栈结构就是在数组的基础上限制一些操作栈的常用方法push(): 添加一个新元素到栈顶pop(): 移除栈顶元素，同时返回被移除的元素peek(): 返回栈顶元素，不对栈做修改isEmpty(): 栈里无元素则返回truesize(): 返回栈的元素个数toString(): 将栈结构的内容以字符形式返回栈的代码实现//f封装栈类function Stack() { //栈的属性 this.items = [] //栈的操作 /
2021-07-25 19:44:29
501
1
原创 Node.js爬取数据并存放在Mysql中
连接数据库node.js连接数据库需要先安装mysql包npm install mysql连接数据库操作const mysql = require('mysql')let options = { host: "localhost", user: "root", password: "123123", port: "3306",//可选 database: "mall"}//创建与数据库连接的对象let con = mysql.createConnection(option
2021-07-24 17:00:23
1050
3
前后端分离的校友信息管理系统（适合用来当作毕业设计）
2022-04-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人