- 博客(32)
- 收藏
- 关注
RSS订阅原创 前端性能优化
使用打包工具对代码进行打包压缩；引入css时采用link标签，并放入头部，使其与文档一起加载，减少页面卡顿时间；尽量减少dom结构的重排和重绘；使用css雪碧图，减少网络请求；对不同分辨率的屏幕采用不同分辨率的图片，防止图片过大导致加载缓慢；使用懒加载，看不到的内容等需要时再进行加载；能用css解决的问题不要用js解决，如动画、溢出省略号等；编码时采用性能高的书写方式，如：将合并样式分开来书写，效率更高；重复的样式可以合并；减少优先级低的css选择器；需要渲染动画时强制打开GPU加速：
2023-03-17 17:26:26
2909
原创 Linux 日志自动分割神器 —— logrotate
我们在Linux服务器上部署服务时，会生成很多日志，如果请求量大的话，日志文件会变得很大，不方便我们定位问题。Linux为我们提供了日志分隔的服务，可用于java、node.js、nginx等服务器的日志分隔及定期清理。
2023-03-15 11:35:38
1600
原创 Nuxt 采坑
在.vue文件外使用Vue或者this对象报错问题当我们配置axios时，会在util创建一个全局文件request.js，在这里如果想进行Store，router跳转之类的操作，需要我们用到Vue对象，在.vue的文件里我们可以直接使用this，但是在这里的this并不指向Vue对象，而是undefined，如下：console.log('外部this', this) // undefined// request interceptorrequest.interceptors.request.us
2022-05-05 11:39:57
584
原创 NGINX 日志log 格式定义(format) & 筛选记录(map)
一、 NGINX日志格式自定义（format）再http配置中添加log_format，这里需要注意的点：如果要在http中引入其他文件的配置，其他文件中若需要使用nginx.conf中的log_format，# /nginx/conf/nginx.confworker_processes 2;error_log logs/error.log info;events { worker_connections 1024;}http { log_format
2021-12-27 16:38:05
3751
原创 服务端渲染
目录基本概念基本概念SSR （server side render）服务端渲染，是指由服务侧（server side）完成页面的DOM结构拼接，然后发送到浏览器，为其绑定状态与事件，成为完全可交互页面的过程。CSR（client side render）客户端渲染，是指由客户端（client side）JS完成页面和数据的拼接，生成DOM结构再交由浏览器渲染成页面的过程。SPA（single page application）单页面应用，指只有一张WEB页面的应用，也就是说在导航切换的过程中页面不
2021-06-02 16:40:42
6876
5
原创 git 随记
git 换源# 查看git当前源git remote -v # 删除当前源git remote remove origin# 添加新源git remote add origin http://github.com.....git查看配置# 查看系统配置git config --system --list# 查看全局配置git config --global --list# 查看当前仓库配置git config --local --list问题解决push时出现 “unabl
2021-05-07 11:14:39
89
原创 前端性能监控及优化方案
前言互联网发展到今日，用户体验成为网站优劣评判的重要指标，用户不再停留在“能用即可”的阶段，而开始追求“更快，更美”。前端是最贴近于用户侧，所以前端性能优化就显得尤为重要。本文将介绍衡量前端性能的一些指标，并提出对应的优化方案，希望能对开发者有所帮助。Apdex指数在介绍指标之前，我们先了解一下Apdex指数（Application Performance Index，应用性能指数），它是用户对应用性能满意度的一个量化值，分布在0-1之间：0 - 没有满意用户1 - 所有用户都满意0.7 是
2021-04-28 18:17:58
1838
3
原创 lucky-canvas（大转盘）使用文档
文章目录大转盘 LuckyWheel 使用文档安装引用使用参数背景 - blocks关于绘制背景关于背景图奖品 - prizes关于设置奖品关于奖品文字换行关于配置图片抽奖按钮 - buttons关于配置按钮关于按钮文字换行默认配置 - defaultConfig关于奖品区域的缝隙关于转盘的偏移角度关于旋转速度默认样式 - defaultStyle回调 & 方法大转盘 LuckyWheel 使用文档安装npm install luck-cmft --save引用import { Luck
2021-04-12 16:30:20
16295
3
原创 来试试npm 私服（Verdaccio安装、启动、发布、下载、配置，兼容IE处理、pm2启动）
介绍Verdaccio 是一个 Node.js创建的轻量的私有npm仓库安装启动发布下载配置Q&A下载包超时或404修改配置文件不生效发布的包不能兼容IE
2020-11-19 17:36:24
5612
1
原创 前端安全问题及防范
XSS攻击XSS(Cross-Site Scripting,跨站脚本)，是比较常见的安全漏洞问题，其主要的攻击方式是通过表单或者页面url参数来注入一些可执行的代码，页面中用到这些字段的地方，如果没有经过处理，就会把他们当做代码来执行，从而造成安全事故。根据攻击的影响范围，我们可以分为三类：DOM型、反射型、存储型，下面分别介绍这三种攻击方式。DOM型DOM型攻击指的是在前端页面中，直接通过url解析参数的攻击方式，不经过后台接口处理。用node起了一个web服务，用来测试，源码地址: https:
2020-11-16 13:06:04
2714
原创 JavaScript 异步详解
一些概念单线程&非阻塞I/OJavaScript语言本身是单线程的。什么是单线程？可以理解为一次只能执行一个任务，所有的任务在执行开始前排成一个队列，等待顺序执行为什么是单线程？如果JS有是多线程的，一个线程在某个DOM节点上添加内容，同时另一个线程删除了这个节点，那浏览器以谁为准？所以为了避免复杂性，JavaScript从诞生起就是单线程的非阻塞I/O：I/O即Input/Output，非阻塞和阻塞的区别就在于在系统接收输入到输出期间，能不能接收其他的输入这里举一个例子：
2020-08-06 11:32:52
504
原创 Webstorm那些事 之 识别vue项目@根路径符号
问题描述相信大家在开发过程中一定碰到过vue项目中识别不了@符号（代表项目根路径），就像下面这个图一样：代码下方一直有webstorm的提示波浪线，Module is not found 或者 Module is not install，使用Ctrl + 鼠标左键 也点不进去，很是头大问题解决安装 @vue/cli-servicenpm install @vue/cli-service --save-dev在项目根目录下创建 webstorm.config.js，并将下面内容粘贴进去'
2020-06-15 11:25:08
5110
2
原创 Webstorm那些事 之 调试（Debug）前端代码
对于程序员来说，代码的Debug是必不可少的。而在调试前端代码的时候很少用，都是在浏览器控制台看代码的console来观察变量值，单使用浏览器调试代码的缺点：不能快速定位到我们编辑器相应代码的地方代码里边会出现很多console.log()，浏览器的控制台一不小心就会变得很乱如果需要打断点，还需要从控制台的sources中寻找到js文件进行断点调试，有些脚手架的项目没有开启source-map，sources中的代码都是压缩的，没有办法找到我们的代码进行断点调试下面为大家安利一个Webstorm
2020-06-04 15:22:08
19108
15
原创 Linux 常用命令
命令笔记查看端口进程情况（ | 后边的参数可以不加，显示全部）netstat -tunlp |grep 端口号-t (tcp) 仅显示tcp相关选项-u (udp)仅显示udp相关选项-n 拒绝显示别名，能显示数字的全部转化为数字-l 仅列出在Listen(监听)的服务状态-p 显示建立相关链接的程序名查找文件或文件夹，要查找的内容需要模糊匹配用*find / 目录 -name *文件或文件夹名*查看linux系统或者内核版本查看当前操作系统版本信息 cat /pr
2020-05-19 16:48:09
393
原创 vue 项目 使用 nprogress - 页面加载进度条
安装npm install --save nprogress在路由钩子函数中使用及配置import NProgress from 'nprogress'import router from '@/router' // vue-cli 生成出来的router函数// 进度条配置NProgress.configure({ showSpinner: false, // 关闭loading动画 trickle: false, // 关闭进度条步进 minimum: 0.1, // 最小百
2020-05-19 10:11:49
337
原创 浅析vue-cli2和vue-cli4
目录安装及版本切换项目初始化目录结构对比安装及版本切换查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli3vue --version如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装安装2.0版本:npm install -g vue-cli安装3.0版本：npm install -g @vue/cli版本切换，即卸载当前版本，安装另外的版本从2.0升级到3.0：npm uninstall -g vue-clinpm i
2020-05-11 16:04:39
3527
原创 国密算法sm2、sm3和sm4的js版 及 IE兼容处理
目录安装sm2获取密钥对加密解密签名验签获取椭圆曲线点sm3sm4加密解密小程序使用安装npm install --save sm-cryptosm2获取密钥对执行以下代码就可以拿到密钥对，拿到公钥私钥后，就可以把公钥放到前端进行加密处理，秘钥放到后台进行解密操作后台如果是java版本的话可以用这一套代码 https://codeload.github.com/xjfme/SM2_S...
2020-05-06 15:02:44
18198
17
原创 Taro/TraoUI框架使用过程中的一些坑
使用TaroUI组件 @import样式不好使 / 不能够覆盖样式问题Textarea 组件层级穿透问题
2019-10-12 11:04:56
7866
原创 使用vue-cli(v2.9)构建项目，并安装使用 less 和 postcss-px2rem（移动端开发px转rem）
目录1、使用vue-cli初始化项目一些准备工作全局安装cnpm或者配置npm镜像全局安装webpack, vue-cli初始化项目2、使用less3、使用 postcss-px2rem 让px自动转化为rem4、日常采坑使用less后对于css中background-image的url引用问题5、总结1、使用vue-cli初始化项目一些准备工作全局安装cnpm或者配置npm镜像1、全局安...
2019-07-17 11:39:26
963
原创 less 学习小结
1、变量/* 语法： @key:value; */@color: #fff;.div{ color : @color;}2、样式嵌套+伪类(用&符实现).div1{ width: 300px; height: 30px; display: flex; display: -webkit-flex; background:...
2018-12-21 19:52:14
249
原创 公众号H5开发调用微信 js-sdk 的那些事
需求如果你在开发微信H5页面，并且需要调用微信的js接口，特意总结了一下调用的过程步骤 一，绑定安全域名登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”注意： 1. 需要从公众号管理平台中下载校验凭证txt文本内容，然后上传至填写域名或路径指向的web服务器（或虚拟主机）的目录（若填写域名，将文件放置在域名根目录下，例如 wx.qq.com/MP...
2018-10-31 14:42:06
4772
2
原创 使用webpack搭建简单的vue+element-ui项目，并实现模块按需加载
本文讲述一下在vue项目中搭建element-ui框架，并实现模块的按需加载。 准备工作：在此之前，需要大家搭建一个简单的vue+webpack项目，本文讲述的操作是基于这个项目的，所以，需要大家准备一下，具体操作步骤请参考本人上一篇博客( https://blog.csdn.net/crazy_jialin/article/details/80422964 )。第一步：安装elem...
2018-05-24 15:30:31
7998
原创 基于webpack搭建的vue2项目目录结构概述
在上一篇博客，我们通过webpack+vue-cli搭建了一个简单的vue2开发项目，走过的都知道，一个命令创建了好多文件和文件夹，一脸懵，这里，为大家简单介绍一下项目的目录结构，首先，来看整体项目目录结构的截图： 先从最外层走起（根目录文件）： 1. babelrc：作为项目babel的配置文件（Babel 是一个 JavaScript 编译器，作为我们项目对js的编译），可以将我们项目e...
2018-05-24 13:10:12
4362
2
原创 使用vue-cli搭建简单的vue+webpack热更新项目
近年来，前端的发展速度惊人的快，要想跟上前端的进军速度，每时每刻都要学习。各种框架开发是相当流行，今天，带大家使用vue-cli搭建简单的vue+webpack热更新项目。准备工作：你的电脑要安装node（自带npm），这一点就不多说了,作为前端必备，哈哈。第一步：使用npm全局安装webpack和vue-cli（如果安装速度慢，可以使用cnpm淘宝镜像安装,直接百度就有）$ npm ...
2018-05-23 17:17:07
10113
2
原创 前台使用ajax上传图片，后台 node.js 使用 formidable 进行图片接受并存于服务器静态文件夹中
相信现在很多小伙伴在使用node来搭建后台，那么前后台对接少不了的就是图片的上传，下面我将通过这篇文章来对图片上传问题进行详细的介绍：本项目源码已经上传GitHub，https://github.com/crazyJiaLin/node-img-upload-demo首先，我们需要一些准备：通过node+express搭建后台服务器，并配置静态资源文件路径，具体配置方式网上有很多种解...
2018-03-24 23:26:48
2903
2
原创 node.js 中通过连接池连接mysql
首先来看一下什么是数据库的连接池（来自百度百科）：数据库连接池负责分配、管理和释放数据库连接，它允许应用程序重复使用一个现有的数据库连接，而不是再重新建立一个；释放空闲时间超过最大空闲时间的数据库连接来避免因为没有释放数据库连接而引起的数据库连接遗漏。这项技术能明显提高对数据库操作的性能。 接着，我们来看node.js 怎么实现数据库的连接池，这里，用mysql为例；第一步，npm安...
2018-03-24 09:14:57
6207
4
原创 使用原生js获取的节点样式不能作为判断条件，封装获取节点样式方法
当我们再做一些节点的事件绑定的时候，往往会用到if判断来控制节点的样式改变，所以，人们很容易的想到了如下方式：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>获取节点样式</title> <style> .div1{
2017-10-25 20:06:52
713
原创 使用node连接mySQL，封装自定义模块供外部调用
当我们使用node.js写网站的时候，难免会有一些操作让我们连接数据库，并对数据库经行操作，但是每次都需要对数据库进行连接与断开连接，所以，我写下这篇文章，将连接数据库的操作封装到一个模块中，然后简化外部调用的代码。废话不多说，直接看node.js怎么连接mysql：1、使用npm安装MySQL模块：$ npm install mysql -S2、在你需要对数据库进行操作的地方引入模块...
2017-09-20 17:00:45
5107
4
原创 针对transform中的几种值的先后顺序
一般的，对于css一些变量的属性值是没有顺序的，但是如今碰到了transform，对他设置一些值的时候就需要注意一下了，这顺序可不是随便定义的，如果控制不好，结果预期很可能让你大吃一惊，以下是我在学习的时候遇到的一些典型例子，在此分享给大家：1、 translate和scale: HTML代码： <div class="wrapper"> <...
2017-09-13 19:37:49
3979
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人