- 博客(35)
- 收藏
- 关注
RSS订阅原创 ubuntu安装nvm
上有提到两种安装方式，一种是直接 curl | wget 命令安装，一种是把源码下载到本地，手动安装，直接命令安装很省事，但是要求有代理，否则下载不了。在 virtualbox 虚拟机上运行的 ubuntu （22.04.3）里安装 nvm （Node Version Manager）这篇文章主要讲讲手动安装。
2023-11-21 17:39:25
761
原创 小程序如何使用阿里 iconfont
需求需要在小程序中使用字体图标解决方案步骤概述在 iconfont 平台创建一个项目，然后添加一些需要的图标进项目中将字体图标下载到本地，然后想办法把 woff 文件转换为 base64 格式的文件在小程序中引入并且使用过程详解在 iconfont 平台创建一个项目，然后添加一些需要的图标进项目中 将字体图标下载到本地（这里我选择的图标字体类型为 font class）。然后把 woff 文件转换为 base64 格式的文件。这里是利用了一个在线转换的网站 Online @fo
2022-04-08 11:32:43
519
原创 postcss-px-to-viewport 在服务端部署时失效
问题：Nuxt 搭建的移动 web 项目，本地开发时 postcss-px-to-viewport 单位转换功能正常，发布到测试环境服务器时失效。环境：本地：node：14.7.0npm：6.14.7cnpm：6.1.1postcss：自动安装postcss-px-to-viewport：1.1.1（自动安装最新版）服务器：node：14.15.5npm：6.14.13cnpm：6.1.1postcss：自动安装postcss-px-to-viewport：1.1.1（自动安装最
2021-11-30 11:00:40
2745
原创 服务端渲染简介
服务端渲染简介什么是服务端渲染在网页程序中， 渲染 指的是根据用户的请求，向用户呈现一个包含指定信息的、界面友好的、美观、易于阅读的网页。其本质就是向浏览器传递一段包含特定信息的 HTML 文本，然后由 浏览器解析 HTML，生成 UI 界面，呈现给用户。服务端渲染 ，就是指在服务端处理用户请求，根据请求内容，查询数据，然后结合 HTML 模板，生成包含指定信息的 HTML 文本，返回给浏览器端，再由浏览器解析 HTML ，展示页面内容。客户端渲染 VS 服务端渲染二者本质的区别：是在哪完成了
2021-07-06 09:21:57
2480
原创 HTML 编码规范
HTML 编码规范下面有相当一部分内容引用 bootstrap 编码规范，有兴趣可以看看编码风格HTML 文件使用无 BOM 的 UTF-8 编码标签不要大写，即便是 doctype 标签。用 4 个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。嵌套元素应当缩进一次（即两个空格）。对于属性的定义，永远全部使用双引号，绝不要使用单引号。不要在自闭合（self-closing）元素的尾部添加斜线 — HTML5 规范 中明确说明斜线是可忽略的。不要省略可选的
2020-11-12 17:17:12
373
原创 CSS 编码规范
CSS 编码规范下面有相当一部分内容引用 bootstrap 编码规范，有兴趣可以看看normalize/reset请记住，使用 normalize/reset 的初衷是为了统一所有浏览器内元素的初始表现代码风格：基本风格用 4 个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应
2020-11-12 16:15:16
638
原创 推荐的 JS 代码规范，以及 ESLlint 配置及其说明
#JS 代码规范必须遵守的规则强制 “for” 循环中更新子句的计数器朝着正确的方向移动"for-direction": 2错误示范：for (var i = 0; i < 10; i--) {}for (var i = 10; i >= 0; i++) {}禁止使用异步函数作为 Promise executor"no-async-promise-executor": 2错误示范：const result = new Promise(async (resolve
2020-11-10 17:15:44
948
原创 推荐的 Vue 代码规范，以及 ESLlint 配置及其说明
#Vue 代码规范必须遵守的规范事件名必须以中划线命名'vue/custom-event-name-casing': 'error'示例<template> <!-- ✓ GOOD --> <button @click="$emit('my-event')" /> <!-- ✗ BAD --> <button @click="$emit('myEvent')" /></template><sc
2020-11-10 17:13:30
5313
原创 推荐的 JS 代码风格，以及 ESLlint 配置及其说明
#JS 代码风格强制在括号内使用空格"array-bracket-spacing": [1, "always"]禁止或强制在代码块中开括号前和闭括号后有空格"block-spacing": [1, "always"]示例：// BADfunction foo() {return true;}if (foo) { bar = 0;}function baz() {let i = 0; return i;}// GOODfunction foo() { return
2020-11-10 17:11:56
257
原创 JS 编码最佳实践，以及 ESLlint 配置及其说明
#JS 编码最佳实践强制数组方法的回调函数中有 return 语句，该规则只检查需要有返回值的那些方法，包括 form、 every、 filter、 find、 findIndex、 map、 reduce、 reduceRight、 some、 sort"array-callback-return": 1不推荐的做法：var indexMap = myArray.reduce(function(memo, item, index) { memo[item] = index;}, {
2020-11-10 17:10:34
650
原创 vscode 中全局配置 eslint
首先需要全局安装一些插件插件版本用途eslint^7.12.1核心插件eslint-config-airbnb^18.2.0依赖插件eslint-config-airbnb-base^14.2.0依赖插件，看日志，说找不到才装babel-eslint^10.1.0es6 转换插件eslint-plugin-html^6.1.0html 文件拓展eslint-plugin-vue^7.1.0vue 文件的拓展@typescri
2020-10-30 18:12:30
3868
1
原创 webpack+模板引擎生成多个静态HTML
需求：编译 sass，打包，压缩编译、打包、压缩ES6语法的 js处理其他资源，image 文件，字体文件等将模板转换成 html 文件html 文件自动引入静态资源，转换路径开发模式热更新开发模式接口代理...
2020-06-02 17:32:53
1819
原创 webpack4 使用模板生成 html 文件
虽然实际需求肯定不会只做这件事情，但是这篇文章只讲如何把模板文件转换为 html 文件，其他的内容，请移步：编译 sass，压缩，抽离为单独的文件编译、压缩 ES6 语法的 js，抽离公共文件处理其他资源，image 文件，字体文件等把模板转换成 html 需要两个东西，一个是模板加载器，一个是 html 生成器，我的项目里使用的是腾讯的 art-template 模板，用到的插件如下：插件版本用途art-template^4.13.2模板核心插件art-tem
2020-05-29 17:45:54
861
原创 webpack4 处理静态资源
需要处理的静态资源：图片字体json 文件视频音频图片处压缩图片压缩需要使用第三方插件，这里我使用 image-webpack-loader 来做图片的压缩处理，实现方式并不复杂，只需要在原来的 file-loader 或者 url-loader 下面加一个处理器即可，下面直接上配置代码：{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'url-loader',
2020-05-28 18:32:16
1744
原创 webacpk4 打包 js
构建目标：es6 转义代码合并抽离公共代码代码压缩需要用到的插件@babel/core 核心插件@babel/preset-env 转换高级语法/特性到es5或者以下的语法@babel/runtime 提取公共的包@babel/plugin-transform-runtime 自动引用公共函数babel-loader 模块加载器uglifyjs-webpack-plugin 代码压缩创建一个 babel 的配置文件 .babelrc，内容如下：{ "presets"
2020-05-11 15:11:00
193
原创 webpack4 打包 css
构建目标：编译 sass自动处理浏览器兼容抽离成独立文件代码去重压缩代码需要用到的插件：css-loader 样式加载器sass 编译 sass 需要的库，这个比 node-sass 安装似乎快一点sass-loader sass 加载器postcss-loader 样式处理器autoprefixer 自动前缀mini-css-extract-plugin 抽离样式为单独的文件optimize-css-assets-webpack-plugin 去重和压缩cssnano 去
2020-05-11 12:00:01
346
原创 vue ssr 如何移除 window.__INITIAL_STATE__ 注入
阅读本文前，假设你已经完整的阅读过 vue ssr 的文档，知道如何搭建一个 vue ssr 的项目了。如题，提出这个需求，多半是 SEO 大佬那边说这个东西影响收录。官方文档上虽然有这么句话：在 2.5.0+ 版本中，嵌入式 script 也可以在生产模式 (production mode) 下自行移除。但是实际上，虽然调试控制台上确实没有了相应的 script 标签，但是查看源码的时...
2020-05-07 21:26:16
4351
4
原创 apache 开启路径重写的配置
1、启用 LoadModule rewrite_module modules/mod_rewrite.so （去掉前面的 # 号）2、 找到这段代码<Directory /> Options FollowSymLinks AllowOverride None </Directory>修改为<Directory /> Options Follow...
2019-03-21 14:14:39
1198
原创 spring data jpa 查询自定义字段，转换为自定义实体
目标：查询数据库中的字段，然后转换成 JSON 格式的对象，返回前台。背景：首先建立 entity 映射数据库（非专业 java 不知道这怎么说）@Entity@Table(name = "user")public class User { @Id @GeneratedValue(strategy = GenerationType.AUTO) private Long i
2017-07-14 10:17:09
71411
9
原创 vue-cli 手脚架搭建 vue 环境报错 [email protected] install: `node install.js` Exit status 1
最近在学习 vue 这个框架，使用官方推荐的手脚架搭建环境时一直报错，错误信息如下： [email protected] install: `node install.js` Exit status 1 Failed at the [email protected] install script 'node install.js'. Make sur
2016-09-28 22:46:37
18838
1
原创 利用画布绘制一个函数图像（简易版）
写这个东西其实是因为最近在学习 JS 动画原理。虽然CSS3的普及，让我们在 web 端可以更轻易的做出一些相当不错的动画效果，但是复杂动画依旧需要 JS 去实现。写一个简单的动画，只需要一些 web 编程基础和一点思路，但是写一些稍微复杂的动画，就会需要一些数学知识，为了更好的理解函数图像，我就这么耿直的自己画了。原理很简单，就是在计算出X为各个值的时候，Y的值，然后画到
2016-09-19 16:48:01
2381
原创 IE 下 SELECT 小箭头乱码
最近项目中，出现了一个比较奇葩的问题，就是在 IE 浏览器下，select 标签自带的小箭头乱码了显示成一个乱七八糟的字符。如图：首先问题说明：不是前端的事！不是前端的事！不是前端的事！但是对于领导和客户而言，页面不正常就是前端的事，跑不了。所以，解决它！这个问题原因是操作系统中的字符文件丢失，然后浏览器无法解码了。解决方案： 找字体修复工具，360啥的，自己研究下。
2016-08-22 17:06:09
5907
原创 浏览器定位
刚接触前端，刚知道 HTML5 的时候，我一直以为 浏览器定位的 API 是 HTML5 标准下的东西，直到后来才知道，有些东西并不是 HTML5 定义的玩意。比如说：1、SVG2、浏览器定位3、webSocket....暂时就记得这仨。好了不废话，继续讨论浏览器定位，嗯，其实，浏览器定位是比较废柴的，定位精确度啥的，只能呵呵，不过在移动端精确度相对好很多。想想其实也
2016-04-19 11:23:09
1116
原创 file 选择图片后预览
图片上传预览是比较常见的需求，以前的做法，是在旁边隐藏一个 标签，然后给 file 标签加个事件，当用户选择文件之后，获得文件物理路径（文件绝对路径），然后赋值给 标签的 src 属性。但是现代浏览器中，出于安全考虑，file 标签已经限制 js 获得文件的绝对路径（以及其他的一些访问本地文件的权限）
2016-04-19 11:06:28
4252
原创 移动端适配方案
这是在网上搜索良久，找到的当前比较合适的适配方案。原理是通过动态计算 ＲＥＭ 基值，来动态调整网页尺寸。写这篇博客纯粹是为了自己学习理解移动端适配，现将代码附上：/** * 移动端适配，根据屏幕宽度与屏幕 dpr 动态写入 html 的 font-size ( rem 基准值) * 尽量让这段代码在页面最前面执行 */(function(win) { var opt =
2016-04-19 10:35:22
555
原创 浏览器 CSS 属性检测
网页特效的基本，就是利用 ＪＳ 动态设置 ＣＳＳ我们开发网页的时候，一般比较有情怀的公司都只要求兼容到 ＩＥ９ 以上，虽然 ＩＥ９ 以上已经开始支持 ＣＳＳ３，但是它并不是完全兼容，有些属性需要加前缀。如果ＪＳ动态设置的时候，也和我们平常写 ＣＳＳ 一样，所有前缀来一遍，先不说效率问题，烦都烦死了。为了解决这个问题，我写了一个用来检测浏览器样式属性的方法，代码如下：/**
2016-04-19 10:26:22
446
原创 兼容低版本浏览器的对象转字符串
这是最基本的用递归的方式进行对象转字符串，是我能想到的最简单的做法。不过这个做法存在一些不足：1、层次结构深的话，递归执行效率不高。2、深层递归有可能会导致内存溢出。奈何本人数据结构稀烂，递归转非递归算法现在还没整明白，所以暂时先凑合着用，应当继续学习学习。以下是我的代码：/** * 对象转字符串 */function objToString(obj) {
2016-04-19 10:12:47
399
原创 关闭事件冒泡
//导入按钮关闭冒泡事件$("触发元素").click(function(event) { if (event && event.stopPropagation) { event.stopPropagation(); } else { window.event.cancelBubble = true; } $('#impor
2015-09-18 15:59:15
446
原创 客户端浏览器缓存Js或者css文件问题
一个页面导入外部JS文件，如果修改了这个JS，浏览器不清除缓存的话可能会一直读取缓存中的JS，这时候要解决问题最好是加载的时候加一个版本号，就是访问JS的时候URL带参数比如说：不带参数的写法带参数的写法每次版本号改变了，浏览器在缓存中找不到匹配的URL，就会从新从服务器下载了开发者知道清缓存，但是用户是不知道的
2015-09-18 13:59:32
517
转载 z-index无效，无论设置多大都被其他的元素覆盖
z-index问题 .test-div{ border:1px blue solid; width:300px; min-height:100px; position:relative; -z-index:0; font-size:18px; font-family:microsoft yahe;
2015-09-18 13:55:23
26095
6
转载 js实现图片旋转
首先还是抱歉忘了原博主谁，不过好东西一定要分享 // 兼容性的旋转,基本上是利用HTML5的canvas实现的，如果是一个相册的预览， // 则应该在上下一张的点击事件中删除canvas元素，否则只能旋转一张图片 // 这里有个问题需要处理，就是如果图片设置了行内样式的width和height时， // 旋转后不能显示整张照片,还有就是 function
2015-09-18 13:49:19
1626
原创 跨域触发事件（子页面用js触发父页面元素的事件）
一般情况下在一个页面通过js代码触发一个元素绑定的事件的方法： $('#doc').trigger('事件名，比如click'); 或者是： $('#doc').click(); 但是在一个内嵌框架中要调父窗口的点击事件的时候，应该写成： parent.$('#settingUser',parent.doucment).trigger(
2015-09-18 13:31:47
985
原创 垂直显示文本，并且文字靠底端
固定标题栏 .position-relative{ position:relative;}.position-absolute{ position:absolute; top:10px; left:50px;}.big-div{ border:1px blue solid; padding:1
2015-09-18 13:26:03
1274
转载 canvas 图片旋转
首先声明的是：这是转载的文章，之前不玩博客，所以就只是复制了下来，忘了原博主谁了，抱歉。不过好东西肯定是要分享的1. 最常见的在canvas上画图的方法是使用Image对象。所支持的来源图片格式依赖于浏览器的支持，然而，一些典型的图片格式(png，jpg，gif等)基本上都没有问题。2. 2在下面的所有例子中，图片源将会使用这张256×256尺寸的图片。
2015-09-18 13:04:20
793
转载 基础的JavaScript编码规范
/* * 前言 * 这个文档摘自Nicbolas C Zakas（担任过雅虎首席前端工程师） 著作O`REILLY，下面是一些摘要 * 这个文档讲了一些很基本的编写JavaScript 代码的规范，很基础，但是很重要 * 良好的代码格式可以让代码结构和逻辑看起来更清晰，更美观，也更利于维护，尤其是维护问题。除非 * 写完一段代码你以后都不用再看它了（但这基本是不可能的），请一定让自己
2015-09-18 12:56:24
363
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人