- 博客(107)
- 收藏
- 关注
RSS订阅原创 Typescript基础学习记录
文章目录TypeScript 基础基础类型循环函数数组元组联合类型接口类断言TypeScript 基础这里是我首次接触 TypeScript 的学习笔记。基础类型这里需要注意的是 null 和 undefined 是所有基础类型的子集，这意味着，你可以像这样赋值：let varA:number = 1234;varA = undefined;但是不能反过来，将 1234 赋值给本是 undefined 的 varA在 typescript 中新出现的一种基础数据类型，never，是其他类型
2021-01-12 23:48:52
255
原创 利用vscode插件 coderunner 编译运行 typescript，当输出有中文的时候，出现乱码
公司最近开始使用 ts 了（小公司，也就最新的项目开始涉及），所以我开始学习typescript。在使用typescript的时候，出现了一个问题，就是利用 coder runner 运行 ts 文件的时候，会出现中文报错，显示为乱码的问题，在这里提出一个方法：file -> preference -> setting -> Extension -> Run Code configuration，将其中的 Run in Terminal 选中即可。原因我猜测大概是output
2020-12-19 21:54:48
4534
2
原创 图片横向瀑布流
目前到了一家新的公司做前端开发，遇到了一个需求，这个需求是做如下的一个瀑布流，瀑布流的样式类似于百度图片的瀑布流：这个是目前已经完成的瀑布流，现在将瀑布流的核心代码贴出，本人的能力有限，代码写得比较丑陋，请见谅。算法我们先去百度图片查看一下，发现，其中的每一行的图片图片的高度相同，但是每行与每行的图片高度有些微的差别：这说明，百度的算法是，一行定高，而不同行之间不定高，于此同时，查看每一行的数量，可以发现：数量从5-8个不等，那么算法很容易可以推理出来：举个栗子，如果是三个话：移
2020-12-18 00:17:54
393
原创 面试某家公司的初级前端工程师的面试题
CSS 不熟悉，加上之前并不是 React 工程师（上一家公司使用的是 Jquery），答得比较差，根据记忆记录下了以下面试题，希望以后不要再答错。React 部分react 在更新 state 的时候，为什么会使用 setState() 方法？因为直接修改 state 并不会导致组件的更新。如果想要使组件在状态修改后立刻发生更新，就需要使用 setState() 方法。另一个方面，setState() 方法也提供了一些组件内部优化性能的方式。setState() 是异步的，react 内部
2020-11-17 18:41:34
394
原创 打字机打字，退格效果
需求由于不满上一家公司不思进取的前端技术栈，从上一家公司离职。目前多了不少时间，想着是否可以将之前废弃的个人博客拾起来，就准备重构自己的个人博客。首先碰到的一个问题是，我想实现一个打字机效果，但是又可以自动退格，打印下一个单词的效果。网上只有打印出来字体的效果，但是没有退格，所以，使用一段时间，自己写了一个。技术技术上使用的是原生的 js(ES6) 以及 React。代码废话不多说，直接上代码：/** * 一个用来模拟线程睡眠的方法 * @param {Number} time 睡眠时间
2020-11-09 19:33:57
419
原创 之前公司的转正题目之一：合并单元格
公司的转正题目之一这个是公司的转正题目之一，毕业后的第一家公司，因不满公司使用的技术落后（并且后续项目的vue也准备停止），已经离开了，啥公司不说了，这个是当时转正题目之一：编写一个html文件，运行时显示一个9行9列的表格，表格中可输入数值 点击合并按钮，将相邻数值一样的单元格合并,优先行合并。代码废话不多说，直接上代码，大体的逻辑是将列和行分别装入两个容器中，使用两个变量记录相同内容单元格的数量以及每列（行）最后一个单元格的位置，然后利用这两个变量进行单元格合并操作（这里并没有直接将 td 从
2020-11-09 13:26:23
210
原创 react-router-dom hooks 部分翻译
react-router-dom hooks翻译HooksuseHistoryuseLocationuseParamsuseRouteMatch随着 react-router-dom v5.0 的发布，react-router-dom 跟随 react 的版本更新，发布了react-router-dom hooks 一众组件。react-router-dom 的作用主要是当使用者在使用 react hooks 有相应的配套的 react-router-dom hooks 可以使用，简化操作步骤。Hook
2020-06-16 17:32:32
999
原创 Spring Security5 学习7 - 防IP攻击
Spring Security5（7）防IP攻击有些时候我们需要防止一些非法的ip攻击，比如持续不断的试验密码，不断地给服务器添加压力，这个时候就需要有一种机制，在一定时间能封锁一个IP地址，或者封锁该账号，使之不能验证登陆，这样可以保证系统的安全。我们采用之前自定义认证的项目防止IP攻击。首先，我们需要创建一个service，这个service用来记录每个ip地址登陆的次数：packag...
2020-04-13 15:56:24
287
原创 Spring Security5 学习6 - IP白名单
Spring Security5（6）IP白名单有些时候，为了方便放行，比如我们将应用程序部署在阿里云上，我们需要允许外网的所有人都可访问该ip地址，我们就可以通过 spring security 的 IP 白名单来进行操作。spring security 的 IP 白名单非常强大，细到限制一个软件的端口都可以做到。首先，依然是创建一个springboot应用程序。应用以下依赖：sprin...
2020-04-13 14:24:51
1714
原创 Spring Security5 学习5 - 自定义认证
Spring Security5（5）自定义认证有时候我们需要从数据库拿出加密后的密码并将其与用户输入的用户名和密码进行比较，来认证是否为合法用户，这里就需要用到 spring security5 的自定义认证。使用 idea 创建一个 springboot 工程，并添加以下的依赖：首先，依然是继承 WebSecurityConfigurerAdapter 重写其中的 configure ...
2020-04-13 12:54:22
680
原创 Spring Security5 学习4 - 授权
Spring Security5（4）授权在 Spring Security 中，一般有两种授权方式，分别是hasAuthoriryhasRole一个是指明URL需要特定的权限才能访问，一个是指明URL需要特定的用户才能访问。两者都可以用于权限的限定，区别是粒度的大小。我们来看下面的例子。首先，使用 idea 创建一个 spring boot 工程，勾选下列功能：spring ...
2020-04-11 17:24:26
324
原创 Spring Security5 学习3 - 实现多个登陆页面
Spring Security5（3）实现多个登陆页面在一个网页应用中，我们经常需要做到不同的用户有不同的登录页面，以及登陆之后展示不同的页面；不同的用户之间不能访问互相访问网址等等。这里就需要 Spring Security 来实现多个登陆页面。这里首先使用 idea 创建一个新的 Spring Boot 应用，在功能选择菜单，我们选择：spring securitythymeleaf...
2020-04-10 20:33:20
3843
2
原创 Spring Security5 学习2 - 自定义登陆登出页面
Spring Security（2）自定义登陆和登出页面以下是需要的依赖：<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ...
2020-04-10 11:32:31
344
原创 Spring Security5 学习1 - 入门案例
Spring Security5 学习1 - 入门案例如何使用 Spring Security5，这里有一个非常小的案例：首先，打开 idea -> 创建 spring boot 项目 -> 勾选 spring security，spring mvc，thymeleaf -> 导入相应的依赖。<?xml version="1.0" encoding="UTF-8"?&...
2020-04-09 15:14:54
247
原创 Vuex 学习6 - 核心概念Module
Module**教程来自Vuex官网：https://vuex.vuejs.org/zh/guide/modules.html和技术胖https://www.jspang.com/**教程模块组一般不用再项目较小的情况由于使用单一状态数，医用的所有状态都会几种到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store ...
2020-04-09 14:54:28
163
原创 Vuex 学习5 - 核心概念Action
Action教程来自 Vuex 官网：https://vuex.vuejs.org/zh/guide/actions.html在 mutation 中混合异步调用会使的你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们区分这两个概念。在 Vuex 中， mutation 都是同步事务。任何状态更新都必须在提...
2020-04-08 16:20:54
174
原创 Vuex 学习4 - 核心概念Mutation
文章目录Mutation提交载荷（Payload）对象风格的提交方式Mutation 需要遵循 Vue 的响应规则使用常量替代 Mutation 事件类型Mutation 必须是同步函数在组件中提交 Mutation例子以及结果Mutation教程来自 Vuex 官网：https://vuex.vuejs.org/zh/guide/mutations.html更改 Vuex 的 store...
2020-04-08 11:04:56
324
原创 Vuex 学习3 - 核心概念Getter
Getter教程来自vuex官网教程：https://vuex.vuejs.org/zh/guide/getters.html有时候我们需要从 store 中派生出一些状态，例如对列表进行过滤并计数：computed: { doneTodosCount() { return this.$store.state.todos.filter(todo => todo....
2020-04-08 11:03:09
149
原创 Vue 学习2 - 核心概念State
本文教程来自官网：https://vuex.vuejs.org/zh/State单一状态树Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。这次它便作为一个 “唯一数据源” 而存在。这也意味着，每个应用仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地获取整个当前应用的快照。在 Vue 组件中获得 Vuex 状态...
2020-04-07 20:01:15
296
原创 Vuex 学习1 - 开始
开始每一个 Vuex 应用的核心就是 store （仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象由以下两个不同点：Vuex 的状态存储是响应式的。当 Vuex 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会得到高效更新。你不能直接改变 store 中的状态。改变 store...
2020-04-07 12:40:31
113
原创 编程式路由
编程式路由除了使用 <router-link> 来创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。router.push(location, onComplete?, onAbort?)注意，在 vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL...
2020-04-06 20:42:38
447
原创 路由中的钩子函数
路由中的钩子函数课程来自 https://www.jspang.com这里首先明确一下，什么是钩子函数。钩子的概念源自于 windows 的消息处理机制，通过设置钩子，应用程序可以对所有的消息时间进行拦截，然后执行钩子函数，对消息进行想要的处理方式。比如，vue.js 中的生命周期函数。所以，作为 vue.js 的重要组成部分之一，vue-router 中也同样设置了钩子函数。路由的钩...
2020-04-06 20:20:14
711
原创 HTML5 History 模式以及404页面的处理
HTML5 History 模式以及404页面的处理课程来自 https://www.jspang.comvue-router 默认使用 Hash 模式——使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ydDx0PM-1586168468603)(D:\Docum...
2020-04-06 18:28:22
800
原创 alias 的使用
alias 的使用课程来自 https://www.jspang.comalias，以为别名，实际上就是给一个路由加上另一个url，当你使用这个url时，依然可以跳转到同一个组件。我们来看这样的一个例子：在路由配置文件 router.js 中：import Vue from 'vue';import Router from 'vue-router';import Hello from...
2020-04-06 17:00:11
460
原创 vue-router 的重定向
vue-router 的重定向课程来自 https://www.jspang.comreact-router-dom，想要重定向到自己想要的页面，比如<Router> <Route path="/" exact> {isLoggin ? <Redirect to="/dashboard" /></Redirec>: <Publ...
2020-04-06 16:40:23
670
原创 利用 url 传递参数
利用 url 传递参数官方推荐是使用 name 属性来传递参数。url 地址也可以用来传递参数，这是常识，在前端编程中，也经常使用，以下是 Vue.js 如何使用 url 来进行参数的传递。使用 url 传递，自然需要在 url 上进行更改，首先将 App.vue 中的 <router-link> 标签中的 to 属性进行修改。<template> <di...
2020-04-06 16:10:43
3777
原创 单页面多路由区域操作
单页面多路由区域操作教程来自jspang：https://www.jspang.com/在实际的开发中，经常有这样的需求，在一个单页面上，我们需要多个路由区域，根据不同的路由地址来在不同的区域展示不同的组件，这就是 单页面多路由。<template> <div id="app"> <img alt="Vue logo" src="./assets/l...
2020-04-06 11:41:53
781
1
原创 vue-router 使用 name 传递参数
vue-router 使用 name 传递参数在 vue-router 中，有一个特殊的属性，为 name: { path: '/', name: 'Hello', component: Hello, },这里的 name 属性可以用过来传递参数，我们来看这样的一个例子：首先是 Hi 组...
2020-04-05 17:34:26
2110
原创 vue-router 学习2 子路由
vue-router 嵌套路由实际生活中的应用界面，通常由多层的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。我们来看这样的一个例子：我们首先创建两个新的组件，当做嵌套路由中的组件，Hi1.vue:<template> <div> &l...
2020-04-05 16:31:09
201
原创 在vue-cli创建的项目中导入vue-router
在vue-cli创建的项目中导入vue-router首先，安装 v-router：yarn add vue-router或者npm install vue-router -S然后，在 src 文件下创建 router.js 文件，在其中导入 vue，vue-router，以及需要根据不同 url 地址显示的组件：import Vue from 'vue';import Route...
2020-04-05 11:24:48
2221
原创 向 Vue 项目中导入 element-ui 发生 Cannot find module 'babel-preset-es2015' 的错误
向 Vue 项目中导入 element-ui 发生 Cannot find module ‘babel-preset-es2015’ 的错误这个错误的意思就是，不能从你的项目依赖中发现 `babel-preset-es2015’ 的错误。如果按照 element-ui 官网的依赖的导入配置，我一开始是可以进行项目的正常编译和运行的，后来就爆出了这个错误，以下是解决方法。首先，那幢 babel...
2020-04-05 11:14:06
12924
3
原创 extends 和 mixins
extends 和 mixinsextends1. 介绍官网的声明是：extends 允许声明扩展另一个组件（可以是一个简单的选项对象或构造函数），而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。2. 如何使用extends 是 Vue 实例内部的一个选项，可以用来在没有使用 Vue.extend 的情况下，扩展另一个组件：<htm...
2020-04-03 22:08:17
271
原创 Vue 的内置组件- component
Vue 的内置组件 - component一、学习的原因一开始学习 Vue.js 的时候，经常将用于表示组件内容的 components 选项写成 component，然后导致发生错误，有一段时间才能检查出来，所以，这次将 component 这个内置组件弄出来单独作一个学习，依次为戒。二、什么是 component 内置组件官方解释为：渲染一个“元组件”为动态组件。依 is 的值，来决定...
2020-04-03 18:23:27
825
原创 Vue 部分指令详解
部分Vue指令解释1. v-show 和 v-if什么是 v-ifv-if 指令，用于条件性渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。来看下面的例子：<template> <div> <h1 v-if="visible">你能看见我吗？</h1> </div>&...
2020-04-02 19:59:04
193
原创 插槽详解
插槽详解插槽详解1. 什么是插槽2. 如何使用3. 后备内容4. 具名插槽5. 作用域插槽6. 动态插槽名7. 具名插槽的缩写8. 其他示例插槽详解在 2.6.0 版本之后，slot 以及 slot-scope 由 v-slot 统一替代，但依然未被移除。1. 什么是插槽插槽是 vue.js 开发员人根据从 Web Components 规范草案中获取的灵感，设计的一套 API，这套 AP...
2020-04-01 16:44:25
1921
原创 个人博客项目部署的过程和遇到的坑
个人博客项目部署的过程和遇到的坑首先插一嘴，我的个人博客项目使用的技术栈是：前端React.jsNext.js后端egg.jsmysql 数据库该项目会放在我的GitHub上面。1. 阿里云服务器1.1 购置阿里云服务器想要部署自己的博客，那么首先，必须购置一台属于自己的服务区，这里感谢阿里爸爸在疫情期间送给广大苦逼大学狗的半年的服务器（现在活动应该结束了，后...
2020-03-23 15:39:59
438
原创 java基础-JVM类加载的机制
文章目录类加载的过程深入类加载器内容大纲1. 类加载器1.1 java.class.ClassLoader 类介绍2. 类加载器的层次结构（树状结构）2.1 类加载器的代理模式3. 自定义类加载器4. 线程上下文类加载器5. TOMCAT 服务器的类加载器机制5.1 OSGI 原理介绍类加载的过程为什么要了解类加载全过程？有助于了解JVM运行过程更深入了解java动态性，（热部署、动...
2019-12-03 19:13:44
268
原创 Java基础-字节码操作
文章目录JAVA字节码操作1. 常见的字节码操作类库1.1 JAVAssist库的API详解1.2 JAVAssist库的简单实用1.3 Javassist API详解JAVA字节码操作Java动态性的两种常见实现方式：字节码操作反射运行时操作字节码可以让我们实现如下功能：动态生成新的类动态改变某个类的结构（添加、删除、修改 新的属性、方法）优势：比反射开销...
2019-12-03 19:11:50
257
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人