- 博客(53)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3快速上手
Vue3 快速上手1. Vue3 带来了什么性能的提升打包大小减少41%；初次渲染快55%, 更新渲染快133%；内存减少54%；底层代码原理的改变使用Proxy（ES6）代替 Object.defineProperty 实现数据的响应式重写虚拟DOM的实现和 Tree-Shaking（树摇）更好的支持了 TypeScript新的特性Composition API（组合API）setup配置ref与reactivewatch与watchEffectprovid
2022-05-18 21:28:59
180
原创 vue 项目打印时去掉页眉页脚
vue 项目打印时去掉页眉页脚背景： 项目构建：vue + elementUI 框架；应用场景：在查看简历时，可以点击打印当前简历，为了简洁，然后需去除页眉页脚等无用信息。使用<style media="print" scoped> @page { size: auto; /* auto is the initial value */ margin: 0mm; /* this affects the margin in the printer se
2021-07-12 11:50:27
1050
原创 TypeScript（TS） 入门学习
TypeScript 入门一、TypeScript 介绍？TypeScript (简称 TS) 是 JavaScript 的超集（js 有的 ts 都有，并且为 js 添加了类型系统、接口、枚举等）。ts 相比于 js 的优势：类型化思维方式：使得开发更加严谨，提前发现错误，减少改 bug 的时间；类型系统提高了代码的可读性，并使维护和重构代码更加容易；补充了接口，枚举等开发大型应用时 js 缺失的功能。二、安装解析 TS 的工具包node.js / 浏览器，只认识 js 代码
2020-12-23 16:39:56
353
原创 web 安全问题
web 前端安全问题跨站脚本攻击（XSS攻击）原理：跨站脚本攻击：指的是恶意攻击者往Web页面里插入恶意 html 代码，当用户浏览该页之时，嵌入其中Web里面的 html 代码会被执行，从而达到恶意用户的特殊目的。危害：盗取各类用户帐号，如机器登录帐号、用户网银帐号、各类管理员帐号；控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力；非法转账；控制受害者机器向其它网站发起攻击等。防范：XSS 攻击其核心都是利用了脚本注入，因此我们解决办法其实很简单，不信赖用户输入，对特殊字符
2020-08-20 19:08:53
145
原创 查看连接过的 WIFI 密码
Win + R 打开 cmd 窗口，输入如下指令：netsh wlan show profile name="你连过的WiFi名" key=clear回车后，即可得看到 WIFI 密码：
2020-08-13 19:19:11
176
原创 前端基础面试题
1.html+cssh5 新特性语义化标签：header、footer、section、nav、aside、article、main。。。增强型表单：input 的多个 type（color、date、email、number、tel、url、search、time…）新增表单元素：datalist、Keygen、output新增表单属性：placehoder、require、min、max音频视频：audio、video画布：canvas地理定位拖拽本地存储：localStora
2020-08-10 20:30:38
643
原创 同一分支多人开发时，避免不必要的 commit 操作
同一分支多人开发时，避免不必要的 commit 操作多人在同一分支上开发时，git pull 拉取同事提交的代码，默认会 merge 一次代码，并产生一次提交；然而我们期望的是：能够使得 commit 记录为一条直线，所以我们需要阻止 git pull 默认合并代码的操作。手动执行 rebase 操作。方案一：全局配置，一劳永逸配置一下命令后，当再次 git pull 时，不再执行 merge 操作，而是执行了 rebase 操作。$ git config --global pull.reb
2020-08-08 11:26:11
736
转载 浏览器缓存机制
浏览器缓存机制概述：浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的缓存过程浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：由上图我们可以知道：浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识浏览器每次拿到返回的请求结
2020-07-25 16:34:08
121
原创 使用跳板机上传(下载)包
上传包本地构建打包，压缩得到 .tar.gz 包$ tar -zcvf xxx.tar.gz 文件夹名称 # 例如 tar -zcvf test_aa.tar.gz dist使用跳板机上传包打开 Xshell，连接 xx.xx.xx.xx 服务器（跳板服务器）进入一个文件夹目录，将压缩包拖至窗口内，即上传文件输入命令 ll 查看所有文件( 可以看到自己上传的包即可 )将包发到 10.4.0.11 服务器（目标服务器）上（如下操作）# 发包：scp XXX.tar.gz dev
2020-07-03 16:28:34
1505
原创 whistle请求代理
使用 whistle 请求代理安装$ npm install -g whistle查看帮组$ w2 -h启动服务# 不设置端口默认使用8899$ w2 start -p 8899 启动完成后在chorme下打开 127.0.0.1:8899 可以看到这么一个页面:在这个页面中配置代理信息即可，上述图片中配置的是代理本地文件这个时候可能会出现跨域限制，需要为浏览器配置代理（这里介绍一款浏览器代理插件 SwitchyOmega）安装 Switchy
2020-06-28 20:44:41
1151
原创 发包方法
发包方法：本地构建打包，压缩得到 .tar.gz 包( 在对应打包文件夹同级运行命令 )$ tar -zcvf xxx.tar.gz 文件夹名称 # 例如 tar -zcvf test_aa.tar.gz dist打开终端，输入：scp XXX.tar.gz [email protected]:xxx(文件上传目录的路径)，输入密码（xxxx），完成发包$ scp scp XXX.tar.gz [email protected]:xxx(文件上传目录的路径)# 输入密码 xxxx，发包完
2020-06-28 15:57:57
517
原创 npm run build 时报 cp 不是内部命令错误
在打包项目运行 npm run bulid 时，报 cp 不是内部命令package.json 中 build 脚本如下：在运行 npm run build 时，出现如下错误：引起错误的原因是：windows 系统的黑窗口不支持 cp 命令，解决方案可以使用 git bash 窗口运行 npm run build 即可运行如下：即可...
2020-06-28 15:22:18
4817
原创 node实现接口数据模拟
node 实现接口数据模拟安装 express$ npm install express创建 server.js 文件const express = require('express')// 引入本地数据(也就是接口返回的json数据)const listData = require('./data/llist.json')const loginData = require('./data/login.json')// 创建服务const app = express()/
2020-06-24 17:45:52
414
原创 git 常用命令参考
Git 常用命令参考配置# 查看配置列表git config -l# 查看已设置的用户名git config --global --get user.name# 设置用户名git config --global user.name "xiejiahe"# 查看已设置的邮箱git config --global --get user.email# 设置邮箱git config --global user.email "[email protected]"初始化本地仓库#
2020-06-19 17:42:11
167
原创 json-server 路径改写成路由形式
json-server 数据模拟——路径改写成路由形式目录结构db.json 文件module.exports = { 'posts': require('./data/posts.json'), 'user_login': require('./data/user/login.json'), 'user_logout': require('./data/user/logout.json')}server.js 文件const jsonServer = r
2020-06-18 21:02:43
982
原创 React Hooks 使用
Hooks 是一项新功能提案，可以在不编写类的情况下使用 state（状态）和其他 react 功能使用 hooks 的理由高阶组件为了复用，会导致代码层级复杂类声明的组件中，生命周期复杂，代码编写容易混乱写成函数式组件，是无状态组件；因为需要状态，又得改成 class 组件，开发成本变高hooks 的使用useState() 保存组件状态/* 语法：const [state, setstate] = useState(initState)，可以定义多个状态 state.
2020-05-27 22:38:00
263
原创 Mobx 状态管理
Mobx 介绍Mobx 是一个功能强大，上手非常容易的状态管理工具Mobx 背后的哲学很简单：任何源自应用状态的东西都应该自动地获得Mobx 利用 getter 和 setter 来收集组件的数据依赖关系，从而在数据发生变化时，精确的知道哪些组件需要重绘Mobx 与 redux 的区别Mobx 写法上更偏向于面向对象对数据直接进行修改操作，不需要始终返回一个新的数据并非单一 store，可以有多个 storeredux 默认以 JavaScript 原生对象形式存储数据，而 Mobx
2020-05-26 22:29:08
423
原创 react 中的状态管理
flux 介绍flux 是一种架构思想，专门解决软件的结构问题。它跟 MVC 架构是同一类东西，但是更加简单和清晰。flux 存在多种实现（至少 15 种）Facebook Flux 是用来构建客户端 web 应用的应用架构，它利用单向数据流的方式来组合 react 中的视图组件。它更像一个模式而不是一个正式的框架。reduxredux 是什么redux 是一个 JavaScript 容器，用于进行全局的状态管理redux 可以让你构建一致化的应用，运行于不同环境，并且易于测试red
2020-05-26 22:16:18
288
原创 使用 immutable.js 对引用数据类型进行深拷贝
immutable.js 介绍每次修改一个 immutable 对象时都会创建一个新的不可变的对象，在新的对象上操作并不会影响到原对象的数据深拷贝与浅拷贝let arr = {}，arr2 = arr 这种属于浅拷贝Object.assign() 、 扩展运算符(…) 都只是一级属性复制，比浅拷贝多深拷贝一层而已const obj1 = JSON.parse(JSON.stringify(obj)) 可以实现深拷贝，但是如果属性值中有 undefined 时会丢属性，属性值是数据的引用地址
2020-05-26 14:24:02
389
原创 react 中 使 css 样式局部生效
在 react 中，css 样式默认是全局生效的，想要使样式局部生效可以使用以下方案给 css 文件名加一个 .module.css 后缀，编译后的 css 样式文件就会导出一个对象，为每个选择器起一个随机名字// 文件名假设为 index.module.css.box { width: 50px; height: 50px;}// 在这个文件中设置全局样式:global(.active) { color: red;}import React, { Co.
2020-05-20 22:05:09
3211
原创 react 路由
什么是路由路由是根据不同的 url 地址展示不同的内容或者页面。在 react 中，react-router-dom 包，可以友好的帮我们解决 react components 到 url 之间的同步映射关系。使用路由安装路由$ npm install react-router-dom -S引入路由import React, { Component } from 'react'// 引入路由文件import { HashRouter, // 哈希模式 BrowserR
2020-05-20 21:53:15
184
原创 react 基础
react 官方脚手架 create-react-app 的使用全局安装脚手架$ npm install create-react-app -g创建项目$ create-react-app 项目名称 # 项目名不能是大写字母# OR$ npx create-react-app 项目名称 # 先检测有没有安装脚手架，没有就先本地安装，再创建项目react 介绍react 起源于 Facebook 的内部项目，后发现这套框架好用，在 2013年5月开源了。react 并
2020-05-20 21:47:28
135
原创 mock 数据模拟
mock 数据模拟这里介绍一款非常好用的 json-server 数据模拟服务器全局安装 json-server$ npm install -g json-server创建一个 json 文件，假设文件名为 data.json{ "user": [ {"id": 1, "username": "张三", "password": "abc123"}, {"id": 2, "username": "李四", "password": "abc456"
2020-05-15 08:34:13
269
原创 particles 粒子效果
particles 粒子库使用在 react 中的基础使用，npm 地址安装依赖包$ npm install react-particles-js -S在组件中使用import Particles from 'react-particles-js' class App extends Component{ render(){ return ( <Particles /> ) }}具
2020-05-14 13:05:18
376
1
原创 react 生命周期钩子函数的触发时机
react 生命周期钩子函数老的生命周期初始化阶段// 组件将要被挂载，render 之前最后一次修改状态的机会componentWillMount () {} // 不安全，将被新生命周期替代// 渲染，只能访问 this.props 和 this.state，不允许修改状态和 dom 输出render () {}// 成功 render 并渲染完成真实 dom 之后触发，可以修改 domcomponentDidMount () {}运行中阶段// 子组件将要接收 p
2020-05-12 09:18:49
643
原创 node 操作 mongodb 数据库
mongodb非关系型数据库，又叫 nosql ，使用场景多是解决大规模数据集合多重数据种类官网下载安装即可如果安装文件目录中没有 data 文件夹，手动建一个 data 文件夹，data 下面再建一个 db 文件夹为了可以在任一盘符下都可以启动，最好手动配置一下全局环境变量服务端启动终端中 输入指令 mongod --dbpath 安装路径 (D:\MongDB\bin...
2020-05-05 21:49:38
183
原创 后端路由的使用
后端路由路由：说明你要去的路径。对于前端，就是告诉浏览器应该去哪里；对于后端，可以理解成一个子服务，一个路由就是一个小的服务，处理一个接口使用路由子服务 配置路由，如下：./routers/user.js 文件// 子服务 配置路由// 1.引入 express 模块const express = require('express')// 2.创建路由对象let rout...
2020-05-05 21:34:33
1799
原创 express 基本使用
EXPRESS 的使用介绍：express 是一个第三方模块，是封装了 nodejs 的库，使工作简单化，提高开发效率。搭建 web 服务下载 express 包到项目运行依赖中$ npm i express -S搭建服务// 引入 express 模块const express = require('express')// 创建一个 web 服务const ...
2020-05-05 21:02:44
237
原创 npm、yarn、bower 包管理工具及nrm和nvm的使用
npm 包管理工具安装安装 node 后，会自动携带这个 npm 包管理工具的，不需要我们再去安装常用指令# 安装全局包$ npm install 包名 -g# 卸载全局包$ npm uninstall 包名 -g# 初始化项目，会生成一个 package.json 文件记录项目依赖$ npm init# 下载项目依赖$ npm i 包名 -S # 下...
2020-05-05 15:49:01
348
原创 vant 基本使用
vant 库的基本使用vant 库是一款配合 Vue 使用的移动端 UI 组件库，轻量、高效。项目本地安装 vant$ npm install vant -S在 main.js 文件中引入 vant 库核心模块与它的样式import Vue from 'vue'import Vant from 'vant'import 'vant/lib/index.css'Vu...
2020-05-05 13:00:00
1843
原创 Vue-cli 简单使用
Vue-cli 基础使用介绍现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建 vue 的开发环境。一般情况下我们都会选择使用 webpack 进行项目的构建，在这里我们直接使用 vue 官方提供的，基于 webpack 的脚手架工具进行项目开发。安装全局安装 vue-cli$ npm install -g @vue/cli# 或者$ y...
2020-05-05 11:17:37
153
原创 移动端 rem 布局
移动端 rem 布局viewport 视口宽度 (clientWidth)当浏览器宽度小于 980px 时，视口宽度就是 980px ，当浏览器宽度大于 980px时，视口宽度和浏览器宽度保持一致移动端布局移动端使用 视网膜高清屏（Retina）Retina 屏幕有一个属性叫 dpr(设备像素缩放比) = 物理像素/ 逻辑像素比如 iPhone 6 的宽度 750，这...
2020-05-05 09:36:43
186
原创 elementUI 的基本使用
elementUI 的基本使用项目本地安装 element-ui$ npm install element-ui -S在 main.js 文件中引入 UI 库核心模块与它的样式import Vue from 'vue'import App from './App.vue'// 引入 element-ui 和 它的样式文件import ElementUi from 'ele...
2020-05-05 08:27:37
600
原创 postcss-pxtorem 插件自动转换 rem 单位
px 自动转换 rem 单位安装 postcss-pxtorem 与 lib-flexible$ npm install postcss-pxtorem lib-flexible --save-dev使用 postcss-pxtorem 插件来自动转换代码中的 px 单位为 rem 单位在项目根目录下创建一个 postcss.config.js 文件，书写如下配置modul...
2020-05-04 08:27:10
947
原创 nprogress 进度条 插件的使用
nprogress 进度条 插件npm地址安装$ npm install nprogress --save在 router.js 文件中引入，并使用//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'// 如果不需要转圈配置如下代码，默认是 trueNProgress.confi...
2020-05-04 08:24:12
445
原创 better-scroll滚动插件的基础使用
better-scroll 滚动插件官网地址基础使用 (与 Swiper 用法很像)安装$ npm install better-scroll --save在需要使用的文件中引入import BScroll from 'better-scroll'创建实例（这里是进行真实 dom 操作，注意创建时机）let scroll = new BScroll('.wr...
2020-05-04 08:22:44
292
session vs token 使用特性.md
2020-03-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人