自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(46)
  • 资源 (1)
  • 收藏
  • 关注

原创 web 安全问题

web 前端安全问题跨站脚本攻击(XSS攻击)原理:跨站脚本攻击:指的是恶意攻击者往Web页面里插入恶意 html 代码,当用户浏览该页之时,嵌入其中Web里面的 html 代码会被执行,从而达到恶意用户的特殊目的。危害:盗取各类用户帐号,如机器登录帐号、用户网银帐号、各类管理员帐号;控制企业数据,包括读取、篡改、添加、删除企业敏感数据的能力;非法转账;控制受害者机器向其它网站发起攻击等。防范:XSS 攻击其核心都是利用了脚本注入,因此我们解决办法其实很简单,不信赖用户输入,对特殊字符

2020-08-20 19:08:53 40

原创 查看连接过的 WIFI 密码

Win + R 打开 cmd 窗口,输入如下指令:netsh wlan show profile name="你连过的WiFi名" key=clear回车后,即可得看到 WIFI 密码:

2020-08-13 19:19:11 41

原创 前端基础面试题

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 416

原创 同一分支多人开发时,避免不必要的 commit 操作

同一分支多人开发时,避免不必要的 commit 操作多人在同一分支上开发时,git pull 拉取同事提交的代码,默认会 merge 一次代码,并产生一次提交;然而我们期望的是:能够使得 commit 记录为一条直线,所以我们需要阻止 git pull 默认合并代码的操作。手动执行 rebase 操作。方案一:全局配置,一劳永逸配置一下命令后,当再次 git pull 时,不再执行 merge 操作,而是执行了 rebase 操作。$ git config --global pull.reb

2020-08-08 11:26:11 66

转载 浏览器缓存机制

浏览器缓存机制概述:浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的缓存过程浏览器与服务器通信的方式为应答模式,即是:浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果,会根据响应报文中HTTP头的缓存标识,决定是否缓存结果,是则将请求结果和缓存标识存入浏览器缓存中,简单的过程如下图:由上图我们可以知道:浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识浏览器每次拿到返回的请求结

2020-07-25 16:34:08 21

原创 使用跳板机上传(下载)包

上传包本地构建打包,压缩得到 .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 285

原创 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 337

原创 发包方法

发包方法:本地构建打包,压缩得到 .tar.gz 包( 在对应打包文件夹同级运行命令 )$ tar -zcvf xxx.tar.gz 文件夹名称 # 例如 tar -zcvf test_aa.tar.gz dist打开终端,输入:scp XXX.tar.gz root@xx.xx.xx.xx:xxx(文件上传目录的路径),输入密码(xxxx),完成发包$ scp scp XXX.tar.gz root@xx.xx.xx.xx:xxx(文件上传目录的路径)# 输入密码 xxxx,发包完

2020-06-28 15:57:57 108

原创 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 411

原创 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 114

原创 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 "example@example.com"初始化本地仓库#

2020-06-19 17:42:11 56

原创 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 158

原创 React Hooks 使用

Hooks 是一项新功能提案,可以在不编写类的情况下使用 state(状态)和其他 react 功能使用 hooks 的理由高阶组件为了复用,会导致代码层级复杂类声明的组件中,生命周期复杂,代码编写容易混乱写成函数式组件,是无状态组件;因为需要状态,又得改成 class 组件,开发成本变高hooks 的使用useState() 保存组件状态/* 语法:const [state, setstate] = useState(initState),可以定义多个状态 state.

2020-05-27 22:38:00 54

原创 Mobx 状态管理

Mobx 介绍Mobx 是一个功能强大,上手非常容易的状态管理工具Mobx 背后的哲学很简单:任何源自应用状态的东西都应该自动地获得Mobx 利用 getter 和 setter 来收集组件的数据依赖关系,从而在数据发生变化时,精确的知道哪些组件需要重绘Mobx 与 redux 的区别Mobx 写法上更偏向于面向对象对数据直接进行修改操作,不需要始终返回一个新的数据并非单一 store,可以有多个 storeredux 默认以 JavaScript 原生对象形式存储数据,而 Mobx

2020-05-26 22:29:08 89

原创 react 中的状态管理

flux 介绍flux 是一种架构思想,专门解决软件的结构问题。它跟 MVC 架构是同一类东西,但是更加简单和清晰。flux 存在多种实现(至少 15 种)Facebook Flux 是用来构建客户端 web 应用的应用架构,它利用单向数据流的方式来组合 react 中的视图组件。它更像一个模式而不是一个正式的框架。reduxredux 是什么redux 是一个 JavaScript 容器,用于进行全局的状态管理redux 可以让你构建一致化的应用,运行于不同环境,并且易于测试red

2020-05-26 22:16:18 64

原创 使用 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 70

原创 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 440

原创 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 71

原创 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 57

原创 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 82

原创 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 84

原创 react 生命周期钩子函数的触发时机

react 生命周期钩子函数老的生命周期初始化阶段// 组件将要被挂载,render 之前最后一次修改状态的机会componentWillMount () {} // 不安全,将被新生命周期替代// 渲染,只能访问 this.props 和 this.state,不允许修改状态和 dom 输出render () {}// 成功 render 并渲染完成真实 dom 之后触发,可以修改 domcomponentDidMount () {}运行中阶段// 子组件将要接收 p

2020-05-12 09:18:49 204

原创 node 操作 mongodb 数据库

mongodb非关系型数据库,又叫 nosql ,使用场景多是解决大规模数据集合多重数据种类官网下载安装即可如果安装文件目录中没有 data 文件夹,手动建一个 data 文件夹,data 下面再建一个 db 文件夹为了可以在任一盘符下都可以启动,最好手动配置一下全局环境变量服务端启动终端中 输入指令 mongod --dbpath 安装路径 (D:\MongDB\bin...

2020-05-05 21:49:38 58

原创 后端路由的使用

后端路由路由:说明你要去的路径。对于前端,就是告诉浏览器应该去哪里;对于后端,可以理解成一个子服务,一个路由就是一个小的服务,处理一个接口使用路由子服务 配置路由,如下:./routers/user.js 文件// 子服务 配置路由// 1.引入 express 模块const express = require('express')// 2.创建路由对象let rout...

2020-05-05 21:34:33 259

原创 express 基本使用

EXPRESS 的使用介绍:express 是一个第三方模块,是封装了 nodejs 的库,使工作简单化,提高开发效率。搭建 web 服务下载 express 包到项目运行依赖中$ npm i express -S搭建服务// 引入 express 模块const express = require('express')// 创建一个 web 服务const ...

2020-05-05 21:02:44 83

原创 npm、yarn、bower 包管理工具的使用

npm 包管理工具安装安装 node 后,会自动携带这个 npm 包管理工具的,不需要我们再去安装常用指令# 安装全局包$ npm install 包名 -g# 卸载全局包$ npm uninstall 包名 -g# 初始化项目,会生成一个 package.json 文件记录项目依赖$ npm init# 下载项目依赖$ npm i 包名 -S # 下...

2020-05-05 15:49:01 72

原创 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 536

原创 Vue-cli 简单使用

Vue-cli 基础使用介绍现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建 vue 的开发环境。一般情况下我们都会选择使用 webpack 进行项目的构建,在这里我们直接使用 vue 官方提供的,基于 webpack 的脚手架工具进行项目开发。安装全局安装 vue-cli$ npm install -g @vue/cli# 或者$ y...

2020-05-05 11:17:37 69

原创 移动端 rem 布局

移动端 rem 布局viewport 视口宽度 (clientWidth)当浏览器宽度小于 980px 时,视口宽度就是 980px ,当浏览器宽度大于 980px时,视口宽度和浏览器宽度保持一致移动端布局移动端使用 视网膜高清屏(Retina)Retina 屏幕有一个属性叫 dpr(设备像素缩放比) = 物理像素/ 逻辑像素比如 iPhone 6 的宽度 750,这...

2020-05-05 09:36:43 63

原创 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 147

原创 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 513

原创 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 87

原创 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 129

原创 vue-lazyload 图片懒加载的使用

vue-lazyload 图片懒加载插件库官网地址基础使用安装$ npm i vue-lazyload -Smain .js 中引入import Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload' // 引入 // 1. 基础使用Vue.use(Vue...

2020-05-04 08:20:32 88

原创 vue 基础

Vue 2.x 学习介绍Vue 是渐进式 JavaScript 框架,用到什么功能,就引入对应功能模块;Vue 是一个 MVVM 的 js 框架,Vue 的核心库只关注视图层,开发者只关注 M-V 的隐射关系。Vue 的特点:使用成本低灵活,生态系统完善,适用于任何规模的项目高效,体积小、优化好、性能好MV 模式 (MVC/MVP/MVVM)*MVC :(Mod...

2020-05-03 21:14:23 60

原创 Vue虚拟DOM

Vue 中 虚拟 dom 介绍虚拟 dom核心思想:对复杂的文档 DOM 结构,提供一种方便的工具,进行最小化地 DOM 操作具体操作:内存中会生成一颗虚拟 dom 树,并将内存中的虚拟 dom 树初始化渲染成真实 dom 树当我们修改了 data 里面的数据时,将之前的虚拟 dom 树结合新的数据,生成一颗新的虚拟 dom 树并将新的虚拟 dom 树和之前的虚拟 dom 树...

2020-05-03 11:34:43 59

原创 node 项目线上环境

腾讯云服务器搭建Node 安装选择安装目录:$ cd /usr/local下载 node 包:$ wget http://npm.taobao.org/mirrors/node/v12.13.1/node-v12.13.1-linux-x64.tar.xz解压xz:$ xz -d node-v12.13.1-linux-x64.tar.xz解压tar$ ta...

2020-05-03 11:13:07 141

原创 Vue 项目线上部署

Vue 项目上线一、Nginx 环境搭建安装 nginx ,按照官网安装即可, 官网连接官网操作如下:$ sudo yum install yum-utils$ vim sudo yum install yum-utils按键盘 i 键插入代码,复制以下代码到文件中[nginx-stable]name=nginx stable repobaseurl=http:/...

2020-04-26 13:14:52 135

原创 Vue Router 飙车前行

Vue Router 学习Vue Router 的作用Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌单页应用:就是用户通过某些操作更改地址栏 url 后,动态的进行不同组件的无刷新切换,用户体验好Vue 中使用 vue-router 插件来开发单页面应用,原理:通过检测地址栏的变化,将对应的路由组件进行切...

2020-04-20 13:13:46 54

原创 vuex 核心知识汇总

vuex 介绍vuex 是什么vue 官方提供的状态管理器,用于处理组件的数据共享问题什么时候需要使用 vuex当多个组件需要共享状态的时候,使用 vuex 能更好的帮助我们管理这些需要共享的状态vuex 仓库(store)的五大核心state :专门存储共享数据的地方getters : 针对现有 state 数据或者其余的 getter 数据做二次计算的数据,可以理解为...

2020-04-18 21:56:23 123

session vs token 使用特性.md

session 与 token 特性,让你更加了解 session 与 token ,更合理的 使用 session 与 token。

2020-03-15

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除