前端开发-陈善强

原创 地图加阴影效果

解决方法：使用echarts的geo属性实现阴影效果 geo:{ map:xxx,//地图类型 aspectScale:.75,//这个参数用于 scale 地图的长宽比 zoom:1.2,//当前视角的缩放比例 roam:false,//是否开启鼠标缩放和平移漫游 itemStyle:{ normal:{ areaColor:'#fff',//地图区域的颜色 shadowColor:'#0ebc66',//阴影颜色 borderWidth:0,.

原创 Axios常用API

1、GET：查询数据 1.1、通过URL传递参数 //前端 axios.get('/path?id=123').then(function(ret){ //ret是对象 console.log(ret.data) }) //服务器 app.get('/path',(req,res)=...

原创 Git常用命令

Git常用命令

原创 el-checkbox复选框，单次点击选中框，取消失败

页面初次渲染，回显复选框，并且可取消/选中。

原创 多个el-checkbox-group复选框组 选项互斥

【代码】多个el-checkbox-group复选框组 选项互斥。

原创 js 占位符在console.log中的应用

js 占位符砸console.log中的应用

原创 Echarts地图添加柱状图解决方案

在使用echarts做地图时，遇到了在地图上添加叠加柱状图的需求，当时遇到不少问题，为了有同样需求而无从下手的前端开发人员，能够高效完成开发，特此分享自己的一点经验。

原创 Vue history路由模式 apache配置上线（亲测可用）

vue的路由默认是hash模式，默认打包一般不会有什么问题，不过hash模式由于url会带有一个#，不美观，而且在微信分享，授权登录等都会有一些坑，所以history模式也会有一些应用场景，新手往往会碰到history模式打包后页面一片空白的情况，而且没有资源加载错误的报错信息。

原创 js 计算两个日期之间的不同天数

有时候我们需要计算两个日期之间的天数，一行代码就可以搞定。计算两个日期之间的不同天数。

原创 el-table固定列（fixed）和动态列出现混乱

el-table固定列（fixed）和动态列出现混乱

原创 Error: args must be an array of arguments

vue项目运行时出现Error: args must be an array of arguments报错

原创 echarts地图添加图片

需求：地图的各区域添加图标解决方案： 通过散点图与地图的结合，为地图添加上图片；option: { geo: [ { map: 'xx省',//要显示地图的地区名 roam: false, zlevel: 1, zoom: 1.2, label: { normal: { ...

原创 el-table自定义排序

table表格的数据需要根据某列，进行升序/降序的操作sortable  el-table列属性，控制对应列是否可以排序，如果设置’custom’,则代表用户希望远程排序，需要监听table的sort-change事件<template> <el-table :data="tableData" @sort-change="sortChange" :default-sort="{ prop: 'age', order:.

原创 Failed to load resource: the server responded with a status of 404 (Not Found) [object%20Module]

在vue项目中，通过webpack的reslove配置路径别名，出现图片加载失败问题。webpack配置静态资源目录路径别名module.exports={ ..., //配置省略文件路径的后缀名 resolve: { // 使用的扩展名 alias: { '@static': resolve('static') } }}图片引用<div> <img src="~@static/images/error..

原创 清除浮动

代码如下<style> .box { border: 1px solid #ccc; background: pink; } .red, .green, .blue { float: left; width: 100px; height: 100px; } .red { background: red; } .green { background: green; } .blue { background: blue; }</style><body&g

原创 文字溢出尾部显示省略号

单行文本溢出盒子的宽度设置为固定宽度100px；white-space设置为nowrap，文字不可换行overflow设置为hidden，内容将被剪裁以适合填充框。 不提供滚动条。text-overflow设置为ellipsis，用省略号来表示被截断的文本，这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。.single-line{ width:100px; white-space:nowrap; overf

原创 Css属性书写顺序

建议遵循以下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / padding / border / background文本属性：color / font / text-decoration /...

原创 前端性能优化

1、你如何对网页的文件和资源进行优化？文件合并：（目的是减少http请求）：web性能优化最佳实践中最重要的一件是减少HTTP请求，它也是YSLow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URL以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaSc...

原创 dom事件

1、DOMO级事件书写方式οnclick=fn onclick onmousemove一个事件仅能定义一个事件处理函数不同的浏览器实现上不同，事件处理函数在冒泡阶段触发2、DOM2级事件书写语法：document.addEventListner（‘click’，fn，false）一个事件可以定义多个事件处理函数事件处理函数可以定义在哪个阶段触发，第三个参数：false或者不...

原创 http 缓存控制

http缓存能够帮助服务器提高并发性能，很多资源不需要重复请求直接从浏览器中拿缓存http 缓存分类 ：强缓存通过 expires 和 cache-control控制协商缓存通过 last-Modify 和E-tag控制补充：为什么有expires，有需要cache-control因为expires 有个服务器和浏览器时间不同步的问题expires是绝对事件 ...

原创 XSS、CSRF 以及如何防范

在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式。XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者...

原创 浏览器多页签通讯实现

实现多页通讯主要有利用浏览器数据存储方式和服务器方式。浏览器数据存储的方式主要用本地存储方式解决。即调用 localStorage、Cookie等本地存储方式。服务器方式主要使用websocket技术使多页签都监听服务器推送事件来获得其他页签发送的数据。浏览器存储：第一种——调用localStorage在一个标签页里面使用 localStorage.setItem(key,value)添...

原创 fetch vs axios

fetch是一个底层的api浏览器原生支持的，axios是一个封装好的框架axios支持浏览器和nodejs发请求，前后端发请求。支持promise语法。支持自动解析json。支持中断请求。支持拦截请求。支持请求进度检测。支持客户端防止csrf。总结：封装性比较好fetch优点浏览器级别原生支持的api原生支持promise api语法简洁 符合es标准规范...

原创 js 函数参数传递

基本类型的参数是值传递，把值传递过来，跟那个变量没有关系；应用类型的参数时地址传递，传递的是这个变量指向的数据let a = 1;let b = [1,2,3];let c = {x:1};function f1(a,b,c){ a = 2; b.push(4); c = {y:2} console.log(a,b,c)//此时有作用域，执行结果是2、[1,2,3,4]、{y...

原创 cookie、token、storage

cookie是http协议无状态这个背景下解决用户身份标示的解决方案（浏览器下具有cookie）token是解决API认证使用的，token不但能在浏览器中使用，小程序、app都能使用（token可以跨平台）cookie和token的存储介质：cookie是浏览器，token一般借助storage存放存储大小，cookie：4kb， storage 5M-10M作用范围：cookie-针...

原创 web Socket和Socket.IO框架

HTTP:http协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如ajax）。但是，但是反过来确实不可能的：服务器发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端，只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递...

原创 app.vue里引用了header和footer,然后某些页面，不想有header组件如何处理

解决方案目前有这样两种：思路1就是做条件渲染，因为判断会多次执行所以使用v-show。思路2不如前者，因为在mounted之后再隐藏，或许会有视觉抖动...

原创 ajax 瀑布流

代码:var lock = true://函数节流//窗口卷动监听$(window).scroll(function(){ var scrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); var documentHeight = $(document).height(); if(documen...

原创 rpx单位的换算的过程

1、官方指定基于iphone6进行的2倍设计稿，在这样的设计稿上，分成750份（1份是1rem）对应到实际屏幕上，1份是0.5px。【真机上的1px=设计稿中的2个像素】2、把屏幕分成750份，1份是1rpx，由于iphone6是一种2倍屏幕，屏幕大小是375,1rpx=0.5px。【真机上1px = 2rpx】3、最终的对应关系，1rpx = 0.5px = 设计稿中的1个像素。所以设计...

原创 H5中是怎么做适配的？

原创 Css中伪类和伪元素的区别

伪类:hover :active :link :visited :focus等这些是伪类选择器（css样式表 类）这种并不是真正的样式类，是在用户某些操作下来呈现的样式，称之为伪类。伪元素::before ::after等这些会在dom结构中插入节点，生成一个dom元素，但是这些dom元素又不存在于dom结构中，不能够像其他dom元素进行操作，所以称之为伪元素。::before ::afte...

原创 处理GET、POST请求参数 （express）

GET请求：的参数在URL中，在原生Node中，需要使用url模块来识别参数字符串。在Express中，不需要使用url模块了。可以直接使用req.query对象。POST请求：在express中不能直接获得，必须使用body-parser模块。使用后，将可以用req.body得到参数。但是如果表单中含有文件上传，那么还是需要使用formidable模块。...

原创 小程序启动流程

原创 项目上线相关配置

1. 通过node创建web服务器创建node项目，并安装express，通过express快速创建web服务器，将打包生成的dist文件夹托管为静态资源即可，关键代码如下：const express = require('express')//创建web服务器const app = express()//托管静态资源app.use(express.static('./dist'))...

转载 Element-UI 的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。基于命令行方式手动安装安装依赖包 npm i element-ui –S导入 Element-UI 相关资源在入口文件main.js中，写入如下代码： // 导入组件库 import ElementUI from 'element-ui'; // 导入组件相关样式 i...

原创 通过ajax提交form表单数据的几种方式

一、FormData方法作用:模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件使用在原生ajax中的使用<form id="form"> <input type="text" name="username" /> <input type="password" ...

原创 Element-UI 的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官网地址为： http://element-cn.eleme.io/#/zh-CN1、基于命令行方式手动安装安装依赖包 npm i element-ui –S导入 Element-UI 相关资源 // 导入组件库 import ElementUI from 'element-ui...

原创 webpack

1、作用webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等的强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。2、在项目中安装与配置运行 npm i...

原创 ES6模块化的基本用法

1、默认导出与导入默认导出语法 exports default 默认导出的成员默认导入语法 import 接收名称 from ‘模块标识符’注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！a.js文件-代码如下let a = 10let c = 20let d = 30function show() { console.log('1111...

原创 node项目配置babel方法

babel是将高级、有兼容性的js，转换为低级、无兼容性的js的语法转换工具1、第一步npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node2、第二步npm install --save @babel/polyfill3、第三步在项目根目录创建文件babel.config.js4、...