苍海一声呵呵呵-CSDN博客

原创前端缓存看这一篇就够了

前端缓存看这一篇就够了缓存是什么缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。为什么要缓存（缓存的优点）缓解服务器压力（不用每次去请求资源）提升性能，提高访问速度（打开本地资源速度当然比请求回来再打开要快得多）减少网络 IO 消耗，减少带宽消耗通过网络获取内容既速度缓慢又开销巨大如果是较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏...

2020-03-19 09:55:44 6482

原创手把手教你使用vuex

vuex什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以理解为我们项目中需要共享的一些数据，我们把它集中管理起来的容器。把这些数据称为状态。比如一个用户的用户名，性别，权限级别等等。是否一定要用vuex如果我们不是一个中大型的单页面应用的话，没有那么多的状态需要共享的话就不需要用。对于小项目我们可以只用简单的状态管理：创建：simpleStore.js...

2019-11-21 00:07:49 3040 3

eslint 的配置与使用格式rules: { "规则名": [规则值, 规则配置]}规则值"off"或者0 //关闭规则"warn"或者1 //在打开的规则作为警告（不影响退出代码）"error"或者2 //把规则作为一个错误（退出代码触发时为1）.eslinrc.js 配置官方参考module.exports = { root: true, // 设置当前目录为根目录，停止在父级目录中寻找eslint配置 env: { node: tru

2020-06-22 14:50:33 977

原创 webpack基本配置

webpack基本配置写于2018-10-23，基于webpack 4.22.0写的demo项目文件放在github上安装npm install -g webpack 全局安装搭建项目在项目文件夹创建package.json文件，里面包括当前项目的基本信息，依赖模块，自定义的脚本任务等。使用npm init命令可以自动创建这个package.json文件。本项目...

2019-11-29 11:09:09 235

原创 Cookie、 LocalStorage 与 SessionStorage区别与用法

Cookie、 LocalStorage 与 SessionStorage区别与用法特性CookieLocalStoragesessionStorage生命期一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下（同一窗口或标签页）有效，关闭页面或浏览器后被清除大小4K左右一般为5MB...

2019-11-16 17:34:00 504

原创 js-cookie 轻量级cookie处理库

js-cookie 轻量级cookie处理库安装npm install js-cookie --save// 或yarn install js-cookie使用// 引入import Cookies from 'js-cookie'创建// 创建整个网站上有效的cookieCookies.set('name', 'value');// 创建有效期为7天的cookie，该c...

2019-11-16 17:28:16 1876

原创 yarn 包管理需知

yarn 包管理需知yarn 的优点：极其快速，Yarn会缓存它下载的每个包，所以无需重复下载，且并行安装，所以更快速。特别安全，Yarn会在每个安装包被执行前校验其完整性。超级可靠，Yarn使用格式详尽而又简洁的yarn.lock文件和确定性算法来安装依赖，能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上yarn 安装安装npm install ...

2019-11-14 00:28:47 300

原创解决sourcetree频繁输入密码的方法

解决sourcetree频繁输入密码的方法在sourthTree界面打开终端在终端输入 git config --global credential.helper store执行完这条命令后，点击拉取一下，这时候会要求输入密码，之后再执行就不用了...

2019-11-14 00:27:29 1788

原创 mac nginx安装、配置及使用

mac nginx安装、配置及使用安装打开终端安装Homebrew（Homebrew是一款Mac OS平台下的软件包管理工具）ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"安装nginxbrew install nginx检查nign...

2019-11-14 00:25:44 267

原创 Gitlab导入项目（包含所有git信息）

Gitlab导入项目（包含所有git信息）点击新建项目选择导入将目标项目的git地址（需为HTTPS的）填入，并在中间加上 username（你的用户名）:password（你的密码）@...

2019-11-14 00:22:33 6143

原创安装Sublim，解决插件不能安装及插件推荐

安装Sublim，解决插件不能安装及插件推荐下载Sublim3官方地址安装插件快捷键：cmd+shift+p，输入PC或者通过点击选择install Package这时候会下载安装Package Control包，有了这个包才能下载其他插件。但基本都会报这个错误：原因：Setting-Default文件里的配置："channels": [ "https://packa...

2019-11-14 00:17:47 196

原创 node、npm 的安装及使用

node、npm 的安装及使用node 安装官网下载安装（推荐）使用nvm来安装管理node查看已经安装的全局模块npm ls -g --depth=0npm 的使用淘宝镜像的配置修改下载仓库为淘宝镜像 npm config set registry http://registry.npm.taobao.org/如果需要修改回来npm conf...

2019-11-14 00:06:54 141

原创本地创建一个node服务

本地创建一个node服务安装node.js在项目目录下新建server.jsvar http = require('http')var fs = require('fs')// 引入文件读取模块var url = require('url')http.createServer(function(request, res) { // 解析请求，包括文件名 var pat...

2019-11-14 00:04:28 479

原创程序员Mac使用指南

程序员Mac使用指南常用命令显示隐藏文件夹cmd+shift+.查看本机ipifconfig查看文件路径pwd截图cmd+shift+5前端必备软件编辑器vscodewebstormsublime谷歌浏览器sourcetree文档编辑器mweb印象笔记VPNtunnelblickFTP客户...

2019-11-13 23:56:05 572

原创 VS Code插件

VSCode插件Auto Close Tag自动添加HTML / XML关闭标签（必备）Auto Rename Tag自动重命名配对的HTML / XML标签(必备)Beautify格式化javascript，JSON，CSS，Sass，和HTMLBracket Pair Colorizer颜色识别匹配括号css peek能够查看CSS I...

2019-11-13 23:53:27 273

原创 git常用操作

git常用操作master回滚当我们不小心将未上线的代码合到master，或者上线出问题需要回滚代码的操作：git log获取提交历史，找到需要回退到哪次提交的commitIdgit reset --hard commitId将本地回退到指定版本git push origin HEAD --force强制远程回滚到该指定版本如果发现自己有权限，但是回滚不了，有可能对maste...

2019-11-13 23:50:31 137

原创 mac安装，使用nvm

mac安装，使用nvmnvm是node版本管理工具安装官方不推荐使用 homebrew 来安装，会有问题正确安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash版本可能会有变动，依官网为准安装完成后关闭终端，重新打开终端输入 nvm 验证一下是否安装成功，当出现“Node...

2019-11-13 23:46:31 201

原创搭建vue后台系统

搭建vue后台系统使用Vue cli创建项目Vue CLI版本：v3.2.3初始化项目vue create demo选择模板（选择手动配置）default (默认配置)Manually select features (手动配置)选择配置选择：Router，Vuex，CSS Pre-processors，Linter是否使用路由的 history 模式选择：...

2019-11-13 21:12:06 268

原创 eslint验证

eslint验证使用：yarn lint或npm run linteslint自动修复yarn lint --fix格式rules: { "规则名": [规则值, 规则配置]}规则值"off"或者0 //关闭规则"warn"或者1 //在打开的规则作为警告（不影响退出代码）"error"或者2 //把规则作为一个错误（退出代码触发时为1）.esl...

2019-11-13 21:01:19 490

原创 vue cli3项目添加githook，代码提交前eslint验证

vue cli3项目添加githook，代码提交前eslint验证在package.json 的 gitHooks 字段中定义："gitHooks": { "pre-commit": "lint-staged"}安装lint-staged：yarn add lint-staged --dev配置前端文件过滤的工具Lint-staged："lint-staged": { ...

2019-11-13 20:57:54 3072 1

原创 axios使用

axios使用文档安装yarn add axios基本配置{ // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // 默认是 get // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `...

2019-11-13 20:48:26 346

原创前端 mock 数据

前端 mock 数据Easy Mock由于easy mock线上服务基本打不开的情况，所以有能力的还是做一下本地部署(参考)在easymock创建一个项目，并将项目的 Base URL 配置到axios的 baseURL，easymock不需要解决跨域的问题。Yapi公司内部的话也可以做一下内网部署用法和easymock差不多，将yapi内项目的mock地址配置到axios的baseU...

2019-11-13 20:41:23 835

原创用JS获取response header响应头

用JS获取response header响应头利用XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头let req = new XMLHttpRequest();req.open('GET', document.location, false);req.send(null);let headers = req.getAllResponseH...

2019-11-13 17:21:24 19534 1

原创 JSON.parse()与JSON.stringify()

JSON.parse()与JSON.stringify()JSON.parse(JSON.stringify(data))的作用与注意点深拷贝一个json对象，可以用来去除值不具有JSON 表示形式（数字、字符串、逻辑值、数组、对象、null）的属性，也就是说像undefined和function这样的属性值。注意点如果data里面有时间对象，使用JSON.parse(JSON....

2019-11-13 17:18:14 295

原创 JS字符串与json对象的转化

JS字符串与json对象的转化js字符串转化为json对象（参考）3种方法：var json = JSON.parse(str);var json = eval("(" + str + “)”);var json = (new Function("return " + str))();使用JSON.parse()转化的坑：字符串的数据格式字符串str = ‘{“...

2019-11-13 16:37:29 189

原创 apply的一些其他巧妙用法

apply的一些其他巧妙用法Math.max 可以实现得到数组中最大的一项因为Math.max不支持Math.max([param1,param2])也就是数组，但是它支持Math.max(param1,param2…)，所以可以根据apply的特点来解决 var max=Math.max.apply(null,array)，这样就轻易的可以得到一个数组中的最大项（apply会将一个数组...

2019-11-13 16:28:39 169

原创 Base64编码解码

Base64编码解码base64解码浏览器中:var decodedData = window.atob(encodedData);浏览器或js Worker线程中var decodedData = self.atob(encodedData);base64编码浏览器中:var encodedData = window.btoa(stringToEncode...

2019-11-13 16:23:16 91

原创拷贝一个对象

拷贝一个对象浅拷贝：共用同一内存地址,你改值我也变譬如常用的对象赋值操作深拷贝：深拷贝即创建新的内存地址保存值(2个值互不影响)JSON.parse(JSON.stringify(obj))深拷贝一个对象只能处理Number、String、Array等能够被json表示的数据结构的对象，函数不行。Object.assign与{ …obj }深拷贝对象的属性值为简单类型...

2019-11-13 16:17:28 157

原创 CSS实现单行文本、多行文本溢出显示省略号

CSS实现单行文本、多行文本溢出显示省略号单行文本我们都知道要让文本溢出显示省略号是要用 text-overflow: ellipsis 这个属性的，当然还要配合其他的几个必要属性：实现方式：width: 100px; // 限制宽度，限定最多展示多少字数overflow: hidden; // 超出部分隐藏text-overflow: ellipsis; // 隐藏部分...

2019-11-13 16:08:58 200

原创浏览器表单默认填充样式修改

浏览器表单默认填充样式修改表单默认样式Chrome 会自动为 input 增加如下样式：这个样式的优先级也比较高. 无法通过 important 覆盖background-color: rgb(232, 240, 254) !important;background-image: none !important;color: rgb(0, 0, 0) !important;解决方...

2019-11-13 16:05:56 323

原创 vue项目上线后，刷新页面出现404

vue项目上线后，刷新页面出现404原因在vue项目中使用了history模式实现路由跳转export default new Router({ mode: 'history',})history模式是H5新增的api，改模式下主要有两个方法在起作用（pushState与replaceState），这两个方法都可以使得浏览器路径改变，但不刷新页面，浏览器不会去加载相应的页面，也不会...

2019-11-10 23:27:05 1273

原创用axios获取后端返回的自定义的响应头

用axios获取后端返回的自定义的响应头前端获取respose headers只需要在拦截器里直接打印返回的response即可，里面就有header：axios.interceptors.response.use(function (response) { console.log(response); return response;}, function (error) ...

2019-11-10 23:24:10 10592

原创请求传参时encodeURIComponent将空数组转换为空

请求传参时encodeURIComponent将空数组转换为空问题描述：后台需要接受一个空数组[]作为参数，前端请求前将字段值设置为[]，但是发送请求后，参数转化为空了前端请求前赋值为空数组：this.voucher.userAccounts = []参数打印出来：发送请求后：造成的原因：在前端axios对请求参数做了转换： // 请求参数转换transformRequ...

2019-11-10 23:21:32 1018

原创前端自定义request header传给服务端

前端自定义request header传给服务端前端ajax添加自定义canary属性：beforeSend : function(request) {　　request.setRequestHeader("canary", canary);}前端axios配置：axios.create({ ... // 请求头部信息 headers: { '...

2019-11-10 23:13:47 6597

原创 Cannot assign to read only property 'exports' of object 报错

Cannot assign to read only property ‘exports’ of object '#< Object>'报错原因：在 webpack 中不允许混用 import 和 module.exports有时候我们vue的项目，每个页面会有这样的目录结构：会有一个index.js文件用来导出该页面：这里面就会有 module.exports，当我们用w...

2019-11-10 21:56:31 1177

原创 Vue CLI 3.x通过配置chainWebpack将favicon图标打包进指定文件夹内

Vue CLI 3.x通过配置chainWebpack将favicon图标打包进指定文件夹内需求：线上要求将所有前端静态资源部署到cdn上，打包后的dist目录要求项目名称套时间戳，将所有静态资源放时间戳文件夹内，运维上线时，只取时间戳文件夹上线。方法：创建cdn地址配置文件public-path.jsconst publicPath = 'https://cdn.test.com...

2019-11-08 15:01:30 2566

原创 vue路由按需加载

vue路由按需加载按需加载就是只有我们访问这个路由时才会加载这个js为什么要按需加载按照普通的加载方式：router.js...import Login from '@/views/login'import Welcome from '@/views/welcome'export default new Router({ routes: [ { ...

2019-11-08 14:34:16 178

转载 router-view 的key属性

router-view 的key属性不设置 router-view 的 key 属性由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据相...

2019-11-08 14:27:16 3944

原创 vue-cli 3.0之跨域请求devServer proxy代理配置

vue-cli 3.0之跨域请求devServer proxy代理配置当我们的前端服务和后端服务不同源即协议不同，端口不同，域名不同时，就会出现跨域的问题。通过配置devServer.proxy就可以解决跨域的问题。基本配置：// 将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000module.exports = { devServer: ...

2019-11-08 14:19:43 3732

原创多张Echart图表根据浏览器大小自适应

业务需求：一个页面内有多张图表，需要自适应定义用字符串拼接起来的变量名的变量//有多个图表时，需要给每个图表定义一个单独的名字，以便于接下来每个图表自适应调用var name = 'pieChart_' + index; //生成函数名，index为变量window[name] = echarts.init(document.getElementById('id'));windo...

2018-08-27 22:55:09 1143

解决sublime不能下载插件Package Control报错

空空如也