- 博客(48)
- 收藏
- 关注
RSS订阅原创 性能优化 | el-table中内嵌大量el-input控件导致渲染卡顿的问题
elementui中，el-table嵌入大量el-input的优化思路
2024-05-06 18:14:11
1784
1
原创 Vue | 带有左右点击按钮可控制滑动的列表
效果功能点大概有如下两个功能点：列表横向排列点击左右两个按钮可以左右移动每个item（附加动画）思路列表横向排列可以使用flex布局解决，主要逻辑在左右滑动的控制上面。在样式上来看，左右滑动其实可以看成：改变position为relative时属性left值。具体分析如下：如上图，蓝色为外层div，红色为内层div。内层div装有列表的各项item，所以它的宽度可能会大于外层div的宽度。外层div采用定宽，同时设置overflow: hidden，使内层div突出的部分隐藏起来
2022-04-03 23:59:50
8840
4
原创 i18n初实践
公司的项目应用了国际化，让项目可以进行语言的切换。研究了一下，实际上是用vue-i18n来实现多语言切换，从而实现国际化的需求。第一次接触国际化，简单记录一下。1.安装依赖npm install vue-i18n也可以通过脚本引入：<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js">&
2022-01-09 18:20:30
886
原创 在nodejs中实现token机制
token实际是一种身份验证机制，用来防御CSRF攻击。大致的流程是这样的：用户输入账号密码，前端进行加密处理后传给后端。后端进行验证。如果验证通过，后端返回一个token作为用户的身份认证令牌给前端。前端将token存储起来，使用cookie或者localstorage都可以。每次进行请求，都将token放在Header中，后端获取到token之后进行验证：如果token过期，后端返回401错误。如果token没有过期，执行后续操作。下面通过node来实践一下token的机制。如何创建一个
2021-09-18 22:05:32
3533
原创 CSS元素垂直水平居中实现及其原理
CSS实现元素水平垂直居中的方式有多种，在这里分析一下这些实现方式的原理，做一个简单的总结。1.利用position:absolute完成居中布局。原理：在css中，当元素设置了position:absolute，元素在视图中的水平定位满足如下约束：left + margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right + right = 包含块元素的宽
2021-09-13 22:58:28
395
1
原创 手写一个简易版的mini-webpack
在写一个mini-webpack之前，需要先了解一个概念：AST。AST（abstract syntax tree）抽象语法树抽象语法树：在计算机科学中，抽象语法树，或者成为语法树，是源代码语法结构中的一种抽象表示。它以树状的形式表现编程语言的语法结构。树上的每个节点都表示源代码中的每个结构。个人理解就是：AST抽象语法树根据JavaScript代码解析得到，JavaScript代码中的各个部分都可以在AST中表示出来。AST的形成了反映出各部分代码之间的关系。手写Webpack的核心思想我们可
2021-09-10 01:14:29
160
1
原创 做完公司测评之后，我做了这样一件事...
最近开始准备面试，在做一些公司的测评时，看到页面上的一种拖拽选项框。为了加深对HTML5拖拽事件的理解，打算自己实现一个出来。基本实现内容大概是这样的，将左边的内容拖拽到右边，使其符合自己的个人情况。啪的一下，很快啊，把静态页面写好了：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
2021-08-29 17:32:32
155
原创 JS继承常见的几种方式
原型链继承原型继承很简单，就是将子类的原型挂在到父类对象上。// 一个父类function Father(){ this.name = "xhc", this.age = 21, this.hobbies = [] // 引用类型属性}// 父类原型上的属性/方法Father.prototype.getAge = function(){ console.log(this.age)}// 一个子类function Child(){}Child.prototype = n
2021-08-14 20:21:52
107
原创 笔记 | webpack学习笔记
学习准备nodejs 10以上Webpack 4.26版本以上基本Nodejs只是和npm指令熟悉ES6语法第一章 webpack简介1.1 webpack是什么？webpack是前端资源构建工具，一个静态模块打包器。将前端一系列需要构建的工具整合到一个东西上面，比如对less文件的预处理、es语法的处理等其他。webpack打包过程：先从入口文件index.js开始。将每一个依赖都记录好，形成一个依赖关系树状图。根据依赖关系图形成一个chunk代码块。对代码块进行各项处
2021-07-19 21:02:52
200
转载 vue-cli中，proxyTable跨域中的pathRewrite怎么用
文章转载自：https://www.cnblogs.com/hanguidong/p/9460495.html问：proxyTable 里面的pathRewrite里面的‘^/iclient’:'' 什么意思？答：用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地.'/iclient': {}, 就是告诉node, 我接口只要是’/iclient’开头的才用代理.所以你的接口就
2021-07-12 23:39:58
385
原创 笔记 | Nginx入门学习
Nginx学习笔记一、nginx的基本概念1.什么是nginx高性能的HTTP和反向代理的web服务器，同时提供IMAP/POP3/SMTP服务。占用内存少，并发能力强。nginx专为性能开发，实现上非常注重效率。nginx作为HTTP服务器，有下面的基本特性：索引静态文件、索引文件以及自动索引；打开文件描述符缓冲。无缓存的反向代理加速，简单的负载均衡和容错。具有模块化的结构。支持SSL和TLSSNI。nginx可以在服务器不暂停的情况下对功能进行升级。2.反向代理正向代理
2021-07-12 23:04:13
108
3
原创 Vue | 原生audio样式不好看，自己写一个简易的音乐播放控件，实现播放暂停可拖动
最近遇到一个需求，需要写一个简单的音频控件：往控件传入音频url实现播放、暂停、允许拖动、显示时间等功能，由于原生audio标签样式不太好看，所以决定自己写一个。效果如下：思路把这个需求分成几个部分：左边的播放暂停按钮、右边上面的文字显示、下面的进度条。可以把audio作为原始控件（但不在页面中显示），用自己写的控件来控制audio标签的行为动作。1.暂停、播放按钮控制audio的play()与pause()。2.进度条，这里可以用range来实现，修改range的样式来达到上图的效果，通过on
2021-05-19 00:12:29
3605
10
原创 解决element中，select标签高度设置变小之后，右边小箭头错位对不齐的问题
如下图，复现一下问题：解决方法：修改el-input__icon的height属性，同时将借助相对定位完成位置移动。.el-input__icon{ height: 44px; position: relative; top: -6px;}问题解决。
2021-05-07 18:21:50
2104
2
原创 CSS手写一个时间轴组件(Vue)
效果分析每一个时间轴块为一个整体，如下图：将这个整体分为几部分：左边小圆点node、左边时间线line、右边title、右边内容content。这样一来，可以将这个整体分成左右两部分。左边部分的小圆点可以用一个div元素设置border-radis:50%来实现，下面的线实际上是一个空div增加了边框是属性。右边部分从上往下书写就好。左边的两个部分可以用position:relative进行定位。为了让组件可以跟随content的内容变化而变化，不设置height属性，直接默认auto就好
2021-04-11 17:57:58
1062
原创 flex弹性布局绘制常见的圣杯布局
今天复习了一遍flex弹性布局，手写了一个圣杯布局，做做笔记。关键点：1.body的最小高度为浏览器的百分百高度，即100vh。2.flex布局的flex-direction更改主轴方向，justify-content设置主轴排列方式。3.flex:1可以很容易得到一个元素剩余宽度/高度的百分百。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
2021-03-17 20:04:41
187
原创 关于修改ant-design-vue组件样式的问题
今天写代码的时候遇到要覆盖ant-design-vue组件的样式问题，做个笔记。如下有个html结构，应用了antdv的一些相关组件。<div class="middle"> <a-menu v-model="current" mode="horizontal"> <a-menu-item key="releaseTask" @click="changeTag('hall-index')"> <rout
2021-03-13 00:04:25
2488
原创 一种常见的整体布局
一种常见整体布局布局如下：<div class="console"> <Top /> <div class="main"> <Left style="border-right: 1px solid #eee"/> <router-view class="router-view" /> </div> </div>其中，console为整体视图，Top为顶部栏组件，main为
2021-03-12 23:52:12
184
原创 顶部栏样式1：左侧对齐，右侧贴边，同时缩放出现不换行
最近做项目遇到一个小问题，需要做以下顶部栏需求：这里利用flex布局实现上面的需求。整体思路：最上方logo和中间的板块看成一个整体，设置display为flex，称为板块1。右边的板块称为板块2。板块1与板块2设置flex，同时两端对齐。html代码：<div class="top"> <div class="quick"> // logo跟middle整体构成板块1 <div class="logo">
2021-03-12 23:38:51
259
原创 浏览器的渲染过程
浏览器解析HTML生成DOM Tree(Parse HTML)浏览器解析CSS生成 CSSOM (CSS Object Model) TreeJavaScript通过DOM API和CSSOM API 来操作DOM Tree 和 CSS Rule Tree，浏览器将DOM Tree和 CSSOM Tree合成渲染树布局（layout）：根据生成的Render Tree，进行回流，以计算每个节点的几何信息（位置、大小、字体样式等等）绘制：根据渲染树和回流得到的几何信息，得到每个节点的绝对像素展示..
2021-02-27 21:23:37
77
原创 Vue前后分离项目，前端解决跨域问题（分本地开发环境以及服务器环境）
Vue前后分离项目，前端解决跨域问题（分本地开发环境以及服务器环境）对于前后分离的项目来说，产生浏览器跨域问题简直是家常便饭。自己跟小伙伴写的一个小项目，也时常产生跨域问题，以往都是叫后端的伙伴解决。最近尝试从前端解决跨域问题，直到现在才解决，在这里总结一下解决的方案。本文分本地开发解决跨域以及服务器解决跨域。本地开发解决跨域问题开发的过程中，可以使用vuecli3的devServer–proxy进行代理解决跨域问题。（vuecli2也有相同的配置方法。）在项目的目录中创建vue.config.j
2021-02-11 02:00:49
2056
转载 nodejs服务后台持续运行三种方法
本文转载自：https://www.cnblogs.com/hiit/p/11922348.html一、利用 foreverforever是一个nodejs守护进程，完全由命令行操控。forever会监控nodejs服务，并在服务挂掉后进行重启。1、安装 forevernpm install forever -g2、启动服务service forever start3、使用 forever 启动 js 文件forever start index.js4、停止 js 文件forever s
2021-02-02 17:13:35
726
原创 服务器中用docker安装nginx镜像同时部署vue项目
由于项目需要部署到服务器上面，这两天捣鼓了一下docker和nginx，给我最大的感觉对linux更加熟练了…（之前完全没有接触过linux）。期间真的踩了很多坑，在这里吐槽一下…然后简单描述一下怎么利用docker安装nginx部署vue项目。1.登录服务器，同时安装docker。docker安装我用了简单粗暴的一键安装：curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun可以参考菜鸟教程，上面的安装都很详细，这里一
2021-02-01 16:41:31
445
原创 教程 | win7环境下MySQL详细安装过程
昨晚进行MySQL安装，中途出现了一系列大大小小的问题，期间去相关论坛找解决方案，但一直都不行。后来看到一个视频教程，安装一路畅通，做点笔记。视频链接：https://www.bilibili.com/video/BV1Jt4y197UT?from=search&seid=1360616709481158782准备工作1.首先到官网https://www.mysql.com/找到适合自己电脑的MySQL版本进行下载。选择MySQL Community(GPL) Downloads。选择
2021-01-25 11:17:29
5512
2
原创 flex布局常用属性
flex布局flex布局是一种相对简单，但实现效率高的布局。相比于传统布局，flex布局有高度自适应、操作方便、布局极为简单的特点。一般会使用在移动端以及不考虑兼容性的网页端上面。传统布局和flex布局的区别：传统布局：兼容性好、布局繁琐、局限性，不能在移动端很好的布局。flex布局：高度自适应、操作方便、布局极为简单、移动端应用很广泛、PC端浏览器支持情况比较差、IE 11或者更低的版本，不支持或者仅仅部分支持。flex布局原理flex布局：flexible Box的缩写，意为弹性布局，任何一
2020-12-27 01:02:41
1067
2
原创 vue插槽 | 对于插槽的使用与理解（slot、slot-scope、v-slot）
在父组件引用子组件，子组件中间的内容一般不会显示，需要借用插槽来将其中的内容传递给子组件，然后渲染出来。说白了，插槽的作用就是：将【父组件中调用的子组件标签中间的内容】传给子组件，进行渲染显示。插槽分为：匿名插槽、具名插槽、作用域插槽。匿名插槽、具名插槽：两者区别在于，需要传递给子组件的内容有没有定义slot标签，简单来说就是：<div>我是一个匿名插槽</div><div slot=“good”>这里是一个具名插槽</div>一般会将需要传
2020-11-24 20:50:24
434
原创 笔记 | webpack的更多用法
下面记录一下关于webpack的几个更多的使用方法。(1)对于module.exports={ mode:'development',}在ES6中的写法是：export default{...}导入的时候是：import ... from 'id'(2)对于前一篇文章所述，每当我们修改原来的js文件之后，总是需要使用 npm run dev来对main.js进行更新，显然是很繁琐的事情。对于这个问题，可以有下面的解决方法。在终端输入指令，安装webpack-dev-serve
2020-09-13 22:23:12
96
原创 webpack结合VScode的基本使用方法
先打开vscode，打开项目文件夹，同时打开终端。输入代码npm init -y进行初始化。初始化完成后，会出现一个叫package.json文件，里面有相关配置信息。因为这是一个前端项目，所以需要创建一个src文件夹，同时创建相关的html、css、JavaScript文件。并写入自己的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
2020-09-13 21:10:16
1627
1
原创 小经验 | 解决关于使用了position:relative后的高度或者宽度的调整问题
今天写代码的时候发现，某一个元素设置了height属性为默认的auto，但高度不在自己预期之中。如下图，最底部多了很大一片空白。将相关的元素设置border属性（用于调试），但一直找不到是哪里的问题。直到用谷歌调试一下，发现这个东西。感觉这一个元素的高度刚好就是下面多出来的高度。后来我才忽然想起，原来右边的元素（表格）定义了position:relative属性。position：relative–相对于本来的位置进行定位，同时不脱离文档流。所以，中间的box高度实际上应该是左边元素高度+右边
2020-09-13 00:25:17
7162
1
原创 笔记 | ECMAscript6 基本语法
ECMAscript 6 基本语法1.变量var（1）可以重复声明（2）无法限制修改（3）没有块级作用域let（变量）（1）不能重复声明（2）变量-可以重复修改（3）有块级作用域const（常量）（1）不能重复声明（2）常量-不能重复修改（3）有块级作用域解释一下块级作用域：使用var和function定义的变量a和方法test可以在大括号外边被访问，而使用let和const定义的变量和常量无法在大括号外面被访问。{ var a = 1; let b = 2;
2020-09-09 22:23:50
171
原创 demo | vue写一个记事本，实现新增、删除、统计、清空等功能。
最近再学Vue.js，跟着视频做了个简单的记事本，整理了一下笔记。写一个简易记事本，内容包括新增、删除、统计、清空、隐藏。分析如下：新增：首先需要一个数组来存储新增的数据：textArr。使用v-model设置和获取用户的输入，绑定的数据会和表单元素的值相关联。即：text。使用v-on同时使用回车事件（@keyup.enter）触发函数新增元素。使用v-for将添加的内容逐一显示出来。<input type="text" v-model="text" @keyup.enter="add
2020-08-21 14:26:03
773
转载 css3 transition动画基础
原文链接：http://www.cnblogs.com/xs-yqz/p/4395818.htmltransition是css3中新添加的特性，在W3C标准中是这样描述的：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”一、transition语法：transition:[<transition-property>||<transit
2020-07-27 17:12:47
312
原创 demo | 用HTML和CSS写一个简单的菜单栏块
大致思路是这样的：两个空白是为了让p标签在div标签中能够垂直居中（属于比较笨的方法）。HTML和CSS代码如下：<html> <head> <meta charset="utf-8"> </head> <style> div.outer{width: 175px;text-align: center;} a{text-decoration: none;}
2020-07-26 03:19:41
324
原创 用JavaScript实现瀑布流布局的效果（附源码）
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。——摘自百度百科“瀑布流”制作瀑布流布局，首先需要准备几张图片，将其放置在html页面中。<head> <meta charset="utf-8"> <title>瀑布流练习</title> <link rel="stylesheet" type="text/css" hr
2020-07-24 16:53:22
671
原创 JavaScript事件、事件对象
JavaScript 使我们有bai能力创建动态页面。事件是可以被 JavaScript 侦测到zhi的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。JavaScript里的事件有很多， 主要分为两种：一种是由人触发的，比如鼠标单击、双击、移动鼠标、在输入框输入文本等等都会触发这类事件， Javascript通过监视这些事件，可以知道用户在网页里干什么，好做出不同的交互反馈。第二种是由浏
2020-07-23 17:18:22
163
原创 JavaScript BOM对象模型
BOM即 浏览器对象模型(Browser Object Model)浏览器对象包括Window(窗口)Navigator(浏览器)Screen (客户端屏幕)History(访问历史)Location(浏览器地址)1.Window对象（1）获取文档显示区域的高度和宽度。一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。通过window对象可以获取文档显示区域的高度和宽度。通过调用innerWidth和innerHeight获取。（注意，不能加括号！！不是一个
2020-07-23 17:00:15
105
原创 JavaScript面向对象
1.面向对象的概念（1）一切事物皆对象。（2）对象具有封装和继承特性。（3）信息隐藏。2.基本面向对象<html> <head> <meta charset="utf-8"> <title>面向对象</title> </head> <script> // 字面式的对象声明 var person={ nam
2020-07-23 16:46:56
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人