- 博客(46)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 spring(二) 依赖注入
依赖注入数据类型基本数据类型和String数据类型其他声明过的Bean类型复杂类型/集合类型注入方式构造器函数注入通过spring 提供的配置文件进行构造器函数注入在bean标签之内添加 constructor-arg 标签constructor-arg 标签属性：type：声明注入数据的数据类型，与构造器中声明的传入数据类型一致index：指定注入数据参数的索引，从0开始name：给注入参数进行赋值value：给基本类型和String类型的数据赋值ref：指定其他的bea
2021-11-22 01:29:25
546
原创 spring5实战(一) IOC与实现
IOC控制反转理解创建空白项目导入spring core<dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>5.3.13</version></dependency>普通的方式建dao层，写出接口、和实现类：//UserD
2021-11-21 22:04:35
497
原创 webpack(四) webpack5新特性
总览webpack5 在 2020-10-10 已经正式发布，其优化方向：使用持久化缓存提高构建性能使用更优的算法和默认值改进长期缓存优化 Tree Shaking 和代码生成以改善包大小改善web平台兼容性去除弃用功能另外 webpack5 要求 node的最小的版本为 10.13.0长期缓存开发支持支持崭新web平台特性支持全新Node.js生态特性解析构建优化性能优化未来计划主要优化新特性：1 功能清除1.1 不再为Node.js模块自动引用 Polyf
2021-11-15 01:19:51
1908
原创 webpack(三) 文件指纹和文件压缩
1 文件指纹文件指纹就是资源打包后输出的文件名后缀，主要用于版本管理。当项目发布时，发生修改的文件文件指纹也会发生修改，从而发布改文件，而未修改的文件文件指纹也不会修改，也不会重新发布，直接使用浏览器缓存的文件即可。分类：Hash与整个项目相关，项目当中有文件发生改变，整个项目构建出来的Hash值也会发生改变，与compilation相关Chunkhash和 webpack 打包的 chunk 相关，不同的entry 会传输不同的 chunkhash 值，比如app.js和app.css同属于
2021-11-15 01:19:45
843
原创 毕设开题报告
1 题目：基于web的技术讨论和生活分享社区2 背景：在如今飞速发展的信息时代，互联网的发展势头依然有增无减，给我们的生活也带来了巨大改变。互联网发展的兴盛，许多互联网技术公司开始涌现，同时也吸引了大量的同学学习软件开发技术。但是由于大部分在校同学对于行业中使用的主流技术并不明了清晰，而本站则将打造一个知识分享、技术学习的平台，让互联网技术相对于初学者来说不再是黑盒，同时网站将会支打造两个类型板块，技术讨论和生活分享，目标人群主要是在校大学生。本站技术开发将会倾向于前端优化方面，将会打造出企业级性能
2021-11-13 16:26:48
2381
原创 webpack(二) plugin原理
plugin 概念plugin相比于loader，loader用于转换某种类型的模块，而plugin则是可以执行更加广泛的任务，拥有更强的构建能力，包括：打包优化，资源管理，注入环境变量等。webpack在生命周期运行时，plugin可以监听其广播出来的时间，并通过webpack提供的API执行任务，改变扩展输出结果plugin 构成插件本身的构造函数其原型上定义apply方法一个webpack本身的事件钩子操作webpack内部实例特定数据实现功能后调用webpack提供的回调函数下
2021-11-08 02:27:36
1245
原创 webpack 搭建项目实战（一）
1 初步搭建安装 webpack webpack-cli 包npm i -D webpack webpack-cliwebpack其实已经在不用配置脚本的时候就可以跑起来文件结构：package.json2 webpack配置打包js文件添加 webpack.config.js 文件const path = require('path');module.exports ={ mode: 'development', entry: path.resolve(__dir
2021-10-31 21:45:41
178
原创 package.json 详解笔记
本文以vue中package.json为例介绍一 必须属性1 name项目名称，长度小于214个字符，类型为字符串，不能包括大写字母，不能以 “.”和“_”开头。成功发布在npm社区上时可以用npm view <包名>可查看具体信息，当然也可以检验起名是否重复2 version表示包的版本号，格式为 “主版本号.次版本号.修订号” 主版本号修改是涉及到做了大的功能性改动，修改次版本号是新增了新功能，修改修订号就是修复了一些bug//查看最新版本npm vie
2021-10-31 17:59:44
134
原创 ES6 实用技巧
对象析构赋值用于取值const obj = { a:1, b:2, c:3, d:4, e:5,}const {a,b,c,d,e} = obj;const f = a + d;const g = c + e;还可创建赋值新变量，而不一定时析构默认对象属性名一致的对象const {a:a1} = obj;console.log(a1);// 1扩展运算符用于数组、对象合并ES6之前数组合并一般用concat const c = a.conc
2021-10-25 02:14:09
398
原创 前端安全（二）CSRF
简介CSRF（Cross-site request forgery） 跨站请求伪造，CSRF简单来说就是攻击者以你的身份去伪造恶意请求，比如以你的身份去发送邮件、消息、盗取账户信息甚至购买商品网上转账等原理用户通过浏览器登录信用正常的网站A服务器验证通过后后传回cookie用户在没有登出信用网站情况下访问攻击者的危险网站B网站B会要求访问第三方站点A，并发出请求浏览器根据网站B的请求，并自动带上之前网站A上的cookie，访问服务器服务器由于只根据cookie来判断，判断不出是网站A还是B
2021-10-25 01:45:39
289
原创 前端安全（一）XSS攻击
1 简述XSS，跨站脚本攻击（Cross Site Scripting），为避免和CSS缩写同名，缩写为XSSXSS通常是指攻击者利用网页开发的漏洞，植入恶意的代码指令到网页中并使用户加载并执行，恶意的脚本指令大多为JS，但也可以是Java、VBScript、HTML等。恶意的脚本执行后，攻击者可以获得私密的网页内容、会话和cookie等各种内容，以及获得更高的页面操作权限XSS本质就是恶意的脚本代码和正常的代码混杂在一起，浏览器无法分辨，导致恶意脚本执行2 XSS分类2.1 存储型XSS攻击
2021-10-24 22:56:13
1025
原创 跨域问题解析
1 同源策略同源的定义，两条URL同一协议protocol，同一端口port，同一主机地址host，则两个URL是同源的。浏览器的同源策略是重要的安全机制，主要跨域规避一下重要问题1.1 无同源限制的接口请求...
2021-10-18 08:58:14
60
原创 CSS(二) position属性
一 概述position 属性有五个位置值： static relative fixed absolute stickyposition 定位都是需要通过 top、bottom、left 和 right 属性来定位的，但首先要设置position属性，不同的position属性会产生不同的效果position:static设置静态position属性的元素不会以任何特殊方式定位，会随着正常页面流来进行定位，不会受 top left right bottom 属性的影响position:relati
2021-10-15 14:45:56
83
原创 CSS(一) CSS 选择器
1 简单选择器1.1 元素选择器根据元素名称选择元素div{ color: red;}1.2 id选择器选择 id=“idName” 的HTML元素#idName{ color: red;}1.3 类选择器选择对应类名的元素class = “box”.box{ color: red;}1.4 调用选择器选择页面上所有的选择器，将会影响页面上所有的选择器*{ color:red;}1.5 分组选择器具有相同样式定义的元素，可以使用分组选择器统一声明，使用
2021-10-11 15:57:55
137
原创 JS编程题 数组合并去重排序拍平 对象拷贝合并
1 数组合并去重排序 var a = [1, 2, 5]; var b = [1, 3, 4]; let res = [...a, ...b]; res = res.filter((item, index, res) => { return res.indexOf(item) == index; }) res.sort((a,b)=>{ return a
2021-10-11 01:16:09
165
原创 JS异步解决方案
一 回调函数异步操作的最基本方法是回调函数ajax(urlString, callback){ //回调函数执行前操作 callback()}callback(){ //处理逻辑}但是容易造成回调地狱ajax(url, () => { // 处理逻辑 ajax(url1, () => { // 处理逻辑 ajax(url2, () => { // 处理逻辑 }) })}
2021-10-08 01:04:27
171
原创 客户端渲染 服务端渲染及代码实现
1 定义1.1 客户端渲染在此之前，页面的渲染流程：浏览器请求一个HTML文本渲染进程解析HTML文本 构建DOM树解析HTML的同时，如果遇到内联样式或者样式脚本，则下载构建样式规则，若遇到JavaScript脚本，则会下载并执行渲染进程将DOM树和样式规则两者合并渲染成渲染树渲染进程生成布局树对布局树进行分层，栅格化每一层，得到合成帧将合成帧信息发送到GPU进程显示到界面中此时在执行JS脚本的时候，HTML页面已经开始解析和构建DOM树，JS脚本知识动态改变DOM树结构，这个就是
2021-09-27 00:42:54
272
原创 HTTP缓存
HTTP缓存主要是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端压力，优化前端性能主要分为强制缓存和协商缓存强缓存不发送请求到服务端，直接读取浏览器本地缓存，并且Network中显示的HTTP状态码为200chrome中强缓存分为 Disk Cache 和 Memory Cache，分别存放在硬盘中和内存中，存放位置由浏览器确定与强缓存相关的三个Header属性为 expires Cache-Control pragmaexpiresHTTP 1.0 中控制网页缓存的字段，其值为
2021-09-22 17:27:16
66
原创 防抖和节流
JS中浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress这些事件触发时，会不断调用绑定在事件上的回调函数，极大浪费资源，降低前端性能，即可使用防抖节流来防止上述问题防抖一定时间后再执行，以免多次连续触发，防止抖动防抖场景：登录、发送短信等按钮避免用户点击太快而出现多次请求调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多文本编辑器实时保存，在无操作后一段时间进行保存简单实现代码：function debounc
2021-09-22 14:26:59
54
原创 原型和原型链
构造函数构造函数首字母需要大写，并且会默认返回thisfunction Person(name){ this.name = name; return this; //默认返回，省略}prototype 原型一个对象被其他对象实例继承时，其在原型上定义的属性，通过“继承”，来拥有该对象原型上定义的属性，继承的行为时通过 new 操作符内部实现的并且每一个构造器函数内部都有一个名为prototype的属性，通过这个属性就可以访问到原型proto 隐式原型在引用类型中，隐式原型 __pro
2021-09-22 02:05:26
49
原创 图片懒加载和node中express框架搭建本地服务器
一 搭建本地服务器Node express框架构建简单本地服务器var express = require('express')var path = require('path')var app = express()app.get('/', (req, res)=>{ res.send('Hello world');});app.get('/p1.jpg', function (req, res, next) { res.sendFile(path.join(__d
2021-09-20 21:27:04
198
原创 JavaScript中事件循环(一)
同步任务和异步任务js是单线程语言，但会遇到耗时大的任务，此时会将任务分为两类 同步任务和异步任务执行过程同步任务进入主线程，也可称为同步队列，异步任务，并入Event Table 注册函数异步任务完成后，会进入Event Queue 异步任务队列主线程内任务执行完成后，同步队列为空，才会去读取Event Queue 中的函数，进入主线程执行而这个执行过程会不断循环，这个循环就是Event Loo事件循环setTimeoutsetTimeout(() => { conso
2021-09-13 02:26:50
76
原创 HTTP2新特性
HTTP1.1中存在问题队头阻塞：TCP连接只能发送一个请求，该请求未完成时，后续请求将会被阻塞头部冗余：headers采用文本格式，每次请求会带上cookie、user-agent这些和之前请求完全相同的头部TCP连接数限制：对于同一个域名 ，浏览器最多能建立6~8个，但每个TCP只能请求一次，受限较大HTTP1.1 中解决连接数受限导致的队头阻塞：域名切片 ，将资源放到细分的域名下，但TCP连接本身会有DNS查询 三次握手 慢启动等，会占用额外内存和CPU；同时对于服务器来说过多的连接也
2021-09-12 22:13:30
237
原创 localStorage sessionStorage和cookie对比
主要特点都是由于存储数据 以键值对形式存储cookie : 适合保存较小的数据 如登录信息 用户信息之类的localStrorage: 适合持久化数据sessionStroeage: 适合一次性临时数据存储容量cookie : 译名小甜饼，容量小，4KBlocalStrorage: 4.98M 不同浏览器不同 （safari 2.49M） HTML5引入sessionStroeage: 4.98M 部分浏览器没有限制 HTML5引入生命周期
2021-09-12 20:09:48
102
原创 Vue源码(一) vue初始化和响应式原理
前言Vue三要素:响应式: 监听数据变化,实现方法为双向绑定模板引擎:解析模板渲染:将监听到的数据变化和解析后的HTML进行渲染数据初始化Vue的实例化过程,此处的构造函数传入的参数为一个对象,就是熟悉的optionsnew Vue({ el: "#app", router, store, render: (h) => h(App),});接下来使用 initMixin()方法将 _init() 方法挂在 Vue原型 供实例调用import { initSta
2021-09-06 01:37:19
331
原创 JavaScript Array标准库
Array数组新建方法静态方法实例方法:push()pop()shift()unshift()join()concat()reverse()slice()splice()sort()some() every() ,some()reduce(), reduceRight()数组拷贝：深拷贝slice()concat()扩展运算符数组实例方法返回值数组新建方法新建数组 var a =[1,2]；构造函数：let a = new Array('1')，传入单个数字生成多少个空位，其余类型作为数组的元素
2021-08-30 01:41:03
79
原创 计网知识点集合
基础知识点：重要知识点总结：1、RFC(Request For Comments) ：意思是“请求评议”，包含了关于 Internet 几乎所有的重要的文字资料。2、分组（packet ） ：因特网中传送的数据单元。由首部 header 和数据段组成。分组又称为包，首部可称为包头。3、带宽（bandwidth） ：在计算机网络中，表示在单位时间内从网络中的某一点到另一点所能通过的“最高数据率”。常用来表示网络的通信线路所能传送数据的能力。单位是“比特每秒”，记为 b/s4、计算机通信是计算机中进程
2021-08-23 09:07:50
740
原创 前端知识点集合
面经集合一 JavaScript1 原生DOM操作ES6箭头函数和普通函数的区别：var、let、constpromise二 html三 CSS1 css 选择器及选择器优先级2 伪类和伪元素的区别3 Flex 布局居中4 盒模型5 可继承性四 算法题1 JS求页面中出现最多次数的标签（未检查）五 VueVue-Router导航守卫（路由钩子）v-show 和 v-ifVue双向绑定原理vue-loadvue和react的区别组件通信原理六 计网TCP与UDP的区别url解析过程跨域display:noe
2021-08-23 09:00:27
242
原创 JavaScript 面试手写题
JavaScript 面试编码题1 JS手写ul li 实现点击事件2 判断变量数据类型1 JS手写ul li 实现点击事件 var ul = document.createElement('ul'); document.body.appendChild(ul); for (let i = 0; i < 100; i++) { var li = document.createElement("li");
2021-08-23 08:58:57
130
原创 JavaScript实现排序算法
<script> function randArray(len, min, max) { return Array.from({ length: len }, v => Math.floor(Math.random() * (max - min)) + min); } var arr = randArray(100,0,500);// 小到大 ...
2021-08-16 09:44:18
64
原创 前端知识合集
面经集合一 JavaScript1 原生DOM操作二 html三 CSS1 css 选择器及选择器优先级2 伪类和伪元素的区别3 Flex 布局居中4 盒模型四 算法题1 JS求页面中出现最多次数的标签（未检查）五 Vue1 Vue-Router导航守卫（路由钩子）2 v-show 和 v-if3 Vue双向绑定原理六 HTTPTCP与UDP的区别url解析过程一 JavaScript1 原生DOM操作原生DOM操作documen节点document.createElement(‘div’)
2021-08-16 09:44:04
92
原创 Vue（三）watch 插槽 渲染函数的使用
Vue render函数渲染函数watchmixin渲染函数JS原生DOM操作中Vue第一个参数还可以传组件，在第二参数对象里面放入props<template> <test :foods="foods" tag="ul"></test></template><script>import Test from "./test";export default { components: { Test, }, d
2021-08-08 21:20:25
521
原创 Vue（二） Vuex的基本使用
Vuex一 介绍二 demo结构三 使用stategettermutationAction四 demo实现五 map辅助函数一 介绍Vue中的组件中数据传输主要是通过父子通信来传输数据.,但当项目达到了中大型的规模，组件中的通信逻辑将变得十分复杂，这个时候我们可以通过Vuex来解决，全局存放处理数据Vuex准确的官方定义是一种状态管理模式，集中式存储管理应用的所有组件状态，既是解决不同视图的状态依赖问题，统一进行管理调度二 demo结构Vuex也可以模块化开发使用声明建立一个store
2021-08-08 20:15:30
77
原创 JavaScript/ES6 从this开始理解apply() call() bind()、 class 、箭头函数
一 this 关键字1.1 概念this 简单来说指的是属性或方法或全局的当前对象，始终会返回一个对象。在全局上下文的执行环境中，this的值会指向全局变量，在浏览器中则引用windows对象；在函数上下文的执行环境中，this的取值取决于该函数是如何被调用的。如果它被一个引用对象调用，比如其上层对象，则会指向其上层对象，否则会被设为全局对象或者在严格模式下的undefined。 let obj = { age: 1, func:
2021-08-05 16:43:48
165
原创 Javascript 设计模式（一） 发布-订阅模式
1概述 发布-订阅模式,一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。 即订阅者将自己想要订阅的事件，在调度中心注册，当发布者发布该事件时，调度中心统一处理，触发该事件发送到订阅。类似于订阅自己想要的公众号，当公众号号主发送文章，由微信公众号平台统一调度转发到各个用户。2 实现发布-订阅模式 首先定义调度中心及其缓存列表 on()订阅方法，用于在缓存列表注册订阅者的方法func，event作为区别订阅者想要订阅的事件，避免后期调度混乱。
2021-08-04 17:49:24
67
原创 Javascript(一) 七大数据类型 闭包 深拷贝
1 概述：JavaScript一共七种数据类型，第七种为ES6新增：symbol数值（number）字符串（string）布尔值（boolean）undefinednull对象（object）symbol数值、字符串、布尔值为原始数值类型，对象是合成的数据类型，可以分为：狭义上的对象 Object数组 array函数 function2 null 与undefined2.1 不同点null 与 undefined，其实是js发展过程中的遗留问题，null代表空值，undef
2021-08-01 23:05:13
271
原创 Vue（一） 指令 计算属性 组件
1 简介 Vue中动态绑定值的方法常使用Mustache插值语法进行绑定，而绑定属性和组件间通信传值的时候则使用v-bind命令。 常见的需要动态绑定的属性有- v-bind:src 图片链接- v-bind:herf 网页链接- v-bind:class class绑定 不过我们常用语法糖的形式简写 如:src="\xxx"2 绑定class对象语法用法一：直接通过{}绑定一个类，对象的key前为css属性名称，对象的value可为Boolean值的变量或者具体的属性值。为Boo
2021-07-25 18:54:48
249
原创 CSS 常见布局 水平垂直居中对齐
一 水平居中1 行内元素水平居中行内元素一般是文本，图标等，text-align可以控制其相对于父元素水平居中对齐#parent{ text-align: center;}2 margin 自动水平居中单个块级元素，可以使用margin auto可自动左右对齐，不过要首先设定宽度#son{ width: 100px; /*必须定宽*/ margin: 0 auto;}另外还可以通过设置父子宽度，使用具体的margin绝对定位对齐3 块级改行内块级水平居中多个
2021-07-24 10:09:42
1850
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人