- 博客(202)
- 收藏
- 关注
RSS订阅
原创 web前端进阶教程目录
web前端的学习的入门并不难，但是在学习和应用的过程中，你会发现各种新知识和新技术层出不穷，似乎没有止境，本教程从体系化的角度去设计，希望从高处着眼，用生活化的角度去理解。
2019-02-21 11:05:23
2739
1
原创 首次使用WordPress建站的经验分享（一）
之前用过几种内容管理系统（CMS）如：dedeCMS、phpCMS、aspCMS，主要是为了前端独立建站，达到预期的效果，还是需要一定的代码基础的，至少要有HTML、Css、Jquery基础。据说WordPress 是全球最流行的内容管理系统CMS，从现在开始记录一下使用WordPress 独立建站的步骤。
2025-02-24 19:10:34
873
原创 二次封装axios解决异步通信痛点
为了方便扩展，和增加配置的灵活性，这里将通过封装一个类来实现axios的二次封装,要实现的功能包括：1. 为请求传入自定义的配置，控制单次请求的不同行为3. 在响应拦截器中对业务逻辑进行处理，根据业务约定的成功数据结构，返回业务数据4. 对响应错误进行处理，配置显示对话框或消息形式的错误提示5. 显示全局的loading6. 在路由守卫中可以取消未完成的请求7. 给get请求加入时间戳，避免缓存8. 取消重复的请求9. 给请求携带token10. token过期时，根据配置决定退出登录或挂
2025-02-13 21:55:36
939
原创 Vue3数据响应式原理
当数据变化时，引用数据的函数（副作用函数）自动重新执行。即数据触发了函数的响应，如：视图渲染中使用了某数据，数据改变后，视图跟着自动更新。触发者：数据响应者：函数。
2025-01-19 20:05:57
786
4
原创 NVM管理多个 Nodejs 版本
在前端开发过程中，常常需要切换不同版本的 NodeJS 运行环境，NVM (Node Version Manager) 是一个用于管理多个 Node.js 版本的工具。在nvm的 nodejs 安装路径 D:\Programs\nodejs 新建两个文件夹命名为 “node_global” 和 “node_cache”。6 、创建"node_global" 和 “node_cache”两个文件夹进行全局安装的时候安装对应的库到这两个文件。3、 nvm install 版本号 安装指定的版本的nodejs。
2025-01-16 14:37:04
433
原创 前端命令npm 、 cnpm、 pnpm、yarn 、 npx、nvm的区别
大名鼎鼎的npm(Node Package Manager)是随同NodeJS一起安装的包管理工具，NPM本身也是Node.js的一个模块。yarn 、 cnpm 、 npx 、 pnpm都是基于npm的包管理器，是基于npm包管理器的一些变种。解决了早期npm的一些缺点，例如下载速度慢，不能离线下载等。nvm是Node.js版本管理器。
2023-08-23 10:57:11
919
原创 网页打印与导出word实现在A4纸上相同效果
在工作中遇到这样一个需求，客户要求： 1、实现在浏览器中打印和导出到word中，要求浏览器打印出来的效果和word中打印的效果基本一致。假设word中取边距为上下2.54cm，左右3.18cm，即向下边距1英寸，左右边距约1.25英寸，按96pdi计算，上下边距96px,左右边距约为120px。通过以上计算后可得A4纸96dpi下的分辨率约为793.7px×1122.5px，向下取整为宽793像素和高1122像素，这是我们在制作网页的时候需要的像素。浏览器打印机和导出word支持的样式,由于网页。
2023-02-28 20:51:22
3853
原创 vue3.2单文件组件 ＜script setup＞ 语法糖常用写法
是在单文件组件中使用组合式 API 的编译时语法糖,使用时，任何在其中声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。
2022-11-15 14:38:08
988
原创 TypeScript起步
TypeScript 由微软开发的编程语言，是JavaScript的一个超集，是添加了类型系统的 JavaScript可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。在学习TypeScript之前，请保证先熟悉了JS基础、ES6和NPM的简单实用。一、全局安装typescriptnpm install -g typescript安装完成后就可以使用 tsc命令来执行 TypeScript 的代码// 查看版本号tsc -v通常使用 .ts 作
2022-09-26 13:16:01
606
原创 TypeScript的数据类型基础
在使用 TypeScript 的基本类型无法完全描述我们正在使用的数据结构时，或者为了方便复用，可以声明自定义类型。TypeScript中定义类型的两种方式：接口（Interfaces）、类型别名（type alias）
2022-09-13 17:29:06
736
原创 vs code开发Vue2项目的配置参考
安装ESLint + Prettier项目根目录下存在文件ESLint的配置文件.eslintrc.jsmodule.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended", ], parserOptions: { parser:
2022-05-17 15:26:56
1148
原创 Vue2项目中配置ESLint和Prettier
ESLint是js代码的质量检查工具，同时也具备一定的代码风格的格式化能力。Prettier是一个代码风格的约束工具，Prettier能约束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代码风格。由于ESLint定义了一些js的代码格式化的约束，导致其与Prettier存在一些冲突。如：ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号；ESLint默认强制使用单引号，Prettier默认使用双引号；ESLint.
2022-05-17 14:37:25
11378
1
原创 VS Code快捷键
常用快捷键显示所有命令： Ctrl+shift+P或F1,弹出命令行转到文件： Ctrl+P开始调试：F5切换终端：Ctrl + `查找替换查找: Ctrl+F查找替换: Ctrl+H在文件中查找：Ctrl+shift+F在文件中查找替换：Ctrl+shift+H编辑器与窗口管理新建文件: Ctrl+N文件之间切换: Ctrl+Tab打开一个新的VS Code编辑器: Ctrl+Shift+N关闭当前窗口: Ctrl+W关闭当前的VS Code编辑器:
2022-05-17 13:36:12
358
原创 Node.js环境安装与配置
Node.js环境安装Node.js 就是运行在服务端的 JavaScript，Node.js默认安装目录为 “C:\Program Files\nodejs”,这里修改为"D:\nodejs"最新版本：https://nodejs.org/en/ 或者 http://nodejs.cn/能够下载到最新版的node指定版本：https://nodejs.org/dist/ ,https://npm.taobao.org/mirrors/node/可以下载指定版本的nodeNode.js的卸载方法
2022-03-07 10:10:18
426
原创 vue3中slot插槽的使用
slot又称插槽,通常用于父子组件之间，用于父组件向子组件`传递模板内容`，在子组件中可以设定可以放置插槽的名称和要传递给父组件的子组件数据，在父组件中向子组件通过指令声明插槽和接收子组件传递的数据。
2022-02-21 13:04:39
8470
原创 async-validator详细用法
sync-validator是一个表单的异步验证的第三方库。传入验证规则对象，可以新建一个验证器对象。验证器对象的`validate`方法用于验证数据是否符合验证规则。
2022-01-30 09:20:39
37607
原创 深入Vue的computed属性
Vue模板的表达式语法仅支持单个表达式，用于简单运算；对于复杂的逻辑计算应当使用计算属性computed。computed可以依赖（计算）props、data、vuex的数据，即可以声明了一个计算属性，令其响应props/data/vuex的数据变化，返回一个经过某种计算的结果。
2021-09-23 17:01:08
5177
原创 在Vue中自定义指令
指令在定义的时候，名称前面不需要加 v- 前缀，在调用的时候，需要在指令名称前加上 v- 前缀来进行调用。自定义指令的注册分为全局自定义指令和局部指令。
2021-08-27 10:21:26
409
原创 前端实现WebSocket即时通讯
要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。HTTP 协议无法做到服务器主动向客户端推送信息，2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话，即：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。WebSocket 协议的底层协议也是TCP协议WebSocket 协议的标识符为ws,加密后为wssWebSocket 协议没有同源限制，即WebSocke
2021-07-19 09:44:56
9189
1
原创 JS对象属性描述符对象和Object.defineProperty()
JS中Object对象的静态方法getOwnPropertyDescriptor可以返回指定对象的指定属性的描述,该描述是一个对象，称为属性描述符对象。属性描述符是ECMAScript5新增的语法，它就是一个内部对象，用来描述对象的属性的特性。属性和方法说明configurable可配置性，是否可以使用delete删除属性，以及是否可以修改属性描述符的特性，默认值为trueenumerable可枚举性，是否出现在对象的属性枚举中，比如是否可以通过for-in循环返回
2021-07-08 12:20:08
244
1
原创 vue-router的addRoute方法实现权限控制
在项目实践中，往往需要用户登录后由后端返回用户的权限，来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()可以进行动态路由配置，这里需要注意的是vue-router的options属性并不是响应式的，在添加（修改）路由规则后，router.options.routes属性不会改变，目前，如果需要更新router.options.routes，则需要手动更改。
2021-04-28 14:22:19
19554
1
原创 js常用正则表达式
史上最全常用正则表达式大全 很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式 1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d...
2021-04-09 09:44:27
1038
原创 Vue项目（Vue cli3）中的配置文件
package.json定义了项目所需要的各种模块，以及项目的配置信息。全局 CLI 配置文件 vue.config.jsvue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。常用配置项：配置项说明类型默认值更多publicPath设置部署应用包时的基本 URLString‘/’详情outputDir设置项目打包生成的文件的存储目录String‘dist’详情a
2021-04-02 16:14:05
2247
原创 Vue组件（三）-内置组件component、transition、 transition-group、keep-alive、slot
Vue 的内置组件component组件动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。<component :is="currentTabComponent"></component>transition组件为组件的载入和切换提供动画效果transition-group组件作为多个元素/组件的过渡效果keep-alive组件能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件
2021-03-19 10:08:10
1325
原创 Vue组件（五）- 组件的继承mixins、extends、provide、inject
provide和inject是成对出现的,用于父组件向子孙组件传递数据
2021-02-08 09:13:51
1653
原创 Node.js Path模块笔记
Path模块提供了一些用于处理文件路径的小工具，可以通过以下方式引入该模块：const path = require("path")console.log(Object.keys(path))引入后得到一个对象，对象的属性（包含方法）见下图：我用的系统是windows,这里值记录windows系统的执行结果方法path.normalize(path)规范化路径,并解析 ‘…’ 和 ‘.’ 片段。console.log(path.normalize('../data//users.js
2021-02-01 13:48:21
207
转载 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
Jquery 兼容写法jQuery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。$(function(){ $("#box").mousedown(function(event){ c...
2020-10-23 11:03:47
233
原创 JavaScript 调试助手 - console对象
相信对Console对象大家已经不会陌生了，我们常常调用它来调试js代码,在浏览器中按F12调出开发者工具，可以看到Console面板，在js中使用console对象，结果会输出到Console面板，也可以在此面板直接输入js代码，回车后代码就会执行。console对象是宿主对象，IE8及以下浏览器不支持console对象。输出信息log()info()warn()error()table()group()和groupEnd()groupCollapsed()和groupEnd()d
2020-09-09 20:31:11
602
原创 Vue简介和知识体系
Vue是做什么的是用于构建用户界面的渐进式框架是一个轻量级的JavaScript MVVM库，是做到了数据双向绑定的框架。VUe.js的核心思想是数据驱动和组件化渐进式含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。Vue的版本Vue已经有了三个版本，目前最常用的是Vue2Vue的安装在网页中用<script src="https://cdn.jsdelivr.net
2020-09-07 11:42:56
463
原创 Vue中定义模板的几种方法
1、字符串模板Vue实例的模板可以在Vue实例的选项template中定义，属性值的本质是一个字符串，如果组件的template过长难以阅读，可以将模板写在script标签中，或者使用Vue提供的内联模板功能,将组件模板设置在组件之外。<div id="app"></div>new Vue({ el: '#app', data: { message: 'Hello Vue!' }, template:`<p>{{
2020-09-06 11:29:41
1362
原创 前端简单理解MVC、MVP、MVVM框架
一切从前后端分离开始理解MVVM框架要先从前后端分离说起，传统前端先写一个静态页面，写好后，让后端去套模板，前端无法独立调试代码，这样做导致无论前端还是后端对页面的维护都非常困难，用户体验很差。前后端分离是指前端专注于客户端，复杂渲染页面和显示数据；后端专注做数据的操作；前后端通过接口交互，交互方式是前端发送异步请求后端给，后端接受请求返回数据，前端接受数据并使用数据。前后端分离后，前端才开始需要工程化才需要软件设计模式，这就有了MVC 和MVVM框架。MVC 框架MVC 即 Model-View
2020-09-04 10:01:39
992
原创 JS中数组查询的方法indexOf()、lastIndexOf()、includes()、find()、findIndex()、filter()、every()
JS中涉及到数组查询的方法见下表：方法描述参数返回值indexOf()搜索数组中的元素，并返回它所在的位置。要搜索的元素 ，查找的起始位置元素第一次出现的索引lastIndexOf()搜索数组中的元素，并返回它最后出现的位置要搜索的元素 ，查找的起始位置元素最后一次出现的索引includes()判断一个数组是否包含一个指定的值要查找的元素值Booleanfind()返回符合传入测试（函数）条件的数组元素函数,this符合条件的第一个元素的值
2020-09-03 12:02:30
11760
原创 vue.config.js常用配置项
常用配置项：配置项说明类型默认值更多publicPath设置部署应用包时的基本 URLString‘/’详情outputDir设置项目打包生成的文件的存储目录String‘dist’详情assetsDir指定放置打包生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir)String‘’详情indexPath设置生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
2020-08-31 10:02:24
376
原创 VS Code开发Vue项目常用插件
VS Code是免费软件，直接到官网下载安装即可，如果选用这款编辑器，建议花点时间实习一下这款软件，安装必要的插件，会大大提供编码效率。笔者从从前使用webstorm做前端项目，下面记录在项目实践中的一些配置。
2020-08-29 10:40:31
9400
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人