- 博客(40)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）
前言：最近公司项目有个需求，展示河南省各省市区县的地图，并展示相应的数据，看了些资料决定用echarts实现。一、完成之后的效果图点击市的模块显示对应的市，并显示对应市的数据点击区县的模块显示对应的区县，并显示对应区县的数据二、实现方法1、首先要确定已经引入的echart的文件,vue项目和html项目的引入方法不一样，在此不再赘述，童鞋们自行百度。2、把需要用到的json文件放到本地（json文件获取的方法后续我会上传，童鞋们自行下载），在此我放到了static目录下，如下图：3、页
2022-01-07 16:42:53
5848
22
原创 高德地图实时定位显示图标和名字
前言：最近公司项目有个需要展示人员的实时定位和轨迹回放的需求，查阅了一些资料，最后决定用高德地图去实现。一、引入高德地图首先想用高德api需要申请一个自己的key，百度搜索高德api，点击<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=567b2e43d3f921c6df6da0c2b55830be&plugin=AMap.MarkerClusterer,AMap.Dist
2021-12-08 20:58:05
3205
原创 配置vue3.0 + Ant Design Vue
前言：上篇文章记录了如何搭建vue3.0版本的项目，今天来对vue3.0来记录一下如何开配置UI框架Ant Design Vue以及配置的时候所遇到的一些问题首先，先把之前用vue-cli搭建好的vue3.0的项目启动起来（找到文件夹，右键打开命令行窗口，执行命令：npm run serve）出现以上提示就说明项目启动成功，复制网址在浏览器里边打开一、配置UI框架Ant Design Vue（1）首先control c停掉项目运行，然后运行以下指令安装依赖（建议使用cnpm来安装）安装命令：cn
2021-01-06 10:54:10
4827
5
原创 手把手教你vue3.0项目搭建
前言：最近公司想重构一个项目，CTO选择了vue3.0 + ant-design-vue技术栈，正好自己也想尝试一下，试着搭建一下，以后有更好的会及时补充修改注：粗体是命令指令，推荐使用cnpm指令，没有安装淘宝镜像的使用npm（淘宝镜像安装指令：npm install -g cnpm --registry=https://registry.npm.taobao.org）一、vue（3.0）版本的安装1.先要安装node.js（在这里就不演示怎么安装nodejs,前面的博客有教程）官网：https:
2021-01-05 11:07:06
17628
9
原创 【css】你未必知道的CSS冷知识
本篇文章是从其他地方搬砖过来的，我会在末尾声明作者。01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似2.【shape-outside】不要自以为是了。你以为自己是方的，在别人眼里你却是圆的3.【BFC应用】BFC应用之阻止外边距合并（margin collapsing）4.【BFC应用】BFC应用之消除浮动的影响5.【...
2019-12-02 17:26:27
220
原创 【plugins】IE和Chrome间的相互调用
最近我司的业务跟其他的公司业务牵扯，项目的背景都是法院的项目，但是所做的功能和需求不太一样。因为是指定的客户，所以我司的业务是针对 Chrome 做的，其他司的是已经成型的 IE8 的老项目。虽然是合作的关系，但是难免少不了竞争，所以都不愿意做出相应的兼容处理。那么没办法了，只能在 IE8&n...
2019-12-02 17:21:50
883
原创 【css】flex布局语法简述
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + posi...
2019-12-02 17:19:09
208
原创 【vue】浅谈vue-cli2.0的打包优化
今天在修改 config/index.js 中的 build 里面的 assetsPublicPath 时，发现了其下面的 productionSourceMap 和 productionGzip。说句尴尬的话，之前还真没有注意到过这两个属性，现在既然发现了，那就探索下吧。...
2019-12-02 17:17:46
280
原创 【vue】webapp移动端模板
今天突发奇想，想自己搭建一套移动端的模板来方便自己以后写项目的时候不用再花费无用的时间去搭建项目。先说下这套模板的项目配置，主要使用 vw 适配移动端webpack + vue + vue-router + axios + mint-ui + sass + postcss + normalize.css...
2019-12-02 17:12:51
925
原创 vue TDK seo便于搜索引擎爬虫搜索，网站优化排名
最近在做一个商城官网，需要优化网站排名，公司要求做seo，项目架构用的vue SSR服务端渲染，由于vue是但页面应用，所以主要通过对路由的跳转动态切换title和meta里的内容来实现。项目搭建就不多说了，主要是在gitHub上面下载的一个模版，后期会整理好再发一篇文章。一、首先router.js给每个页面组件加上meta属性，然后meta属性里边定义一个title和index(因为tdk数...
2019-09-10 17:37:31
1193
1
原创 【vue】vue路由缓存的几种方式
在我们的日常开发中，有时候会遇到页面的缓存，特别是电商的项目，在商品列表的一些状态都是要缓存下来的。下面就简单介绍几种 vue 路由缓存的几种方式。1、全部缓存<keep-alive> <router-view></router-view></keep-al...
2019-09-10 16:42:41
884
原创 【vue】路由不变的情况下，刷新页面
背景1：在vue写的后台管理项目中，经常会有增、删、改、查的操作，这些操作只是跟用接口跟后台交互下既然用接口交互，那肯定就是axios的异步请求，那么就是说后台数据发生了改变，但是前台的数据并没有实时的更新（每次操作完后台把列表数据重新返给你例外，但是这样的话每次交互的数据量就偏大了）背景2：在使用动态路...
2019-09-10 16:40:20
622
原创 公众号基本的绑定手机号页面（截取code，手机号正则，验证码倒计时）
<template><div id="home"><div class="bind_box"><div class="bindphone"><div class="bind_title"><p>绑定手机号</p></div><div class="phone">...
2019-06-19 10:01:03
1415
原创 vue封装全局filter并统一管理
在前后端分离的项目中，经常会有后台返回的数据需要进过处理才能显示到页面上的场景。使用最多的场景就是日期和时间的处理，后台一般返回的都是时间戳，那么我们就要对时间戳进行处理。下面就拿封装全局的处理日期和时间的 filter 来展示如何 vue 如何封装全局 filter 并统一处理。在 src 目录下新建 filters 目录用来专门存放全局过滤器，如果项目的过滤器过...
2019-06-03 09:47:23
367
原创 从零开始用node.js编写api接口
今天开始准备自己去探索下 node.js 编写接口，让自己朝着全栈逐渐靠近。写此博客，就是为了记录下自己的探索以及实现过程。一、安装首先安装 node.js，下载地址。 下载完成，打开 cmd 输入 node -v，如果显示出了版本号，证明安装成功。二、初始化在磁盘中找个合适的位置，创建一个文件夹用来放项目。 然后在创建的文件夹...
2019-06-03 09:46:28
1239
原创 css3动画实现水波浪效果
无聊写的一个小Demo，方便自己以后使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2019-06-03 09:44:32
3003
原创 使用webpack+vue-cli搭建项目如何区分开发、测试、展示和生产环境？
今天分享下自己使用 webpack + vue-cli 搭建项目的时候，是如何区分开发、测试、展示、生产这四种环境的。我们随便百度怎么区分环境，会有很多种答案。但大多数都是让在 config 文件夹下新建一个 test.env.js 和 pre.env.js，然后再去修改一大堆的配置，显得非常的麻烦。今天给大家...
2019-06-03 09:41:33
746
原创 原生js实现列表间隔滚动
今天公司项目遇到一个需求，要求实时间隔滚动显示区块链信息，实时显示需要跟后台协商交互即可搞定。那么问题就剩下我们拿到数据如何间隔滚动了，用jquery的时候可以直接用插件来搞定。但是从接触vue之后，我就很少使用jquery写项目了，所以自己用原生coding一个，方便自己以后使用。<!DOCTYPE html><html lang="en">...
2019-05-28 14:50:43
391
原创 原生js+canvas绘制图像验证码
为方便自己以后项目中使用，在此留一份原生JS实现的图像验证码代码。export function drawAuthCode(id) { var num = []; var canvas = document.getElementById(id); var canvas_width = canvas.offsetWidth; var canvas_...
2019-05-28 14:49:44
172
原创 前端开发规范文档
方便自己以后项目的使用，整理一套自己的开发规范。一、文件名文件名使用【小写字母】命名方式。 文件名包含多个单词时，使用半角的连接符（-）拼接，如 home-page。 某些说明文件，文件名可以使用大写字母，如 README。二、常量命名常量名使用【大写字母和下划线】命名方式。 常量名的定义方式使用const关键字定义。 常量名包含多个单词时，使用半角的下划...
2019-05-28 14:47:43
98
原创 改变浏览器默认滚动条样式
这个网上很多的教程，我就不多哔哔了，直接贴代码，方便自己和大家使用。可以把下面的代码放到一个css中，然后全局引入就可以了。/* 整个滚动条 */::-webkit-scrollbar { width: 5px; height: 5px;} /* 滚动条有滑块的轨道部分 */::-webkit-scrollbar-track-piece { back...
2019-05-28 14:44:41
341
原创 简单封装axios插件和接口的统一管理
现在很多公司的项目都是前后端分离的项目，那么说到前后端分离，必定会有ajax请求来获得后台的数据。在做jquery项目的时候，我们都会使用它封装好的方法来直接发起ajax请求。在vue项目中，我们使用最多的就是axios这个插件，下面就简单的封装下这个插件并且把接口给统一化管理。一、安装和配置1.在项目根目录下打开终端安装npm install axios -S...
2019-05-28 14:43:21
395
原创 路由不变的情况下，刷新页面
在vue写的后台管理项目中，经常会有增、删、改、查的操作，这些操作只是跟用接口跟后台交互下既然用接口交互，那肯定就是axios的异步请求，那么就是说后台数据发生了改变，但是前台的数据并没有实时的更新（每次操作完后台把列表数据重新返给你例外，但是这样的话每次交互的数据量就偏大了）所以就要想一个办法，让后台执行完操作后，给前台返一个操作结果，然后前台手动刷新页面一开始我...
2019-05-28 14:42:13
2677
原创 前端常用技术插件大全
为了方便自己以后在项目中的使用，在此留链记录。用途 插件名 描述 文档 演示 icon图标 fontawesome 包含了日常用到的所有的图标，还可以设置大小、旋转、和动画 文档地址 - icon图标 iconfont 大众常用的阿里矢量图标库 文档地址 - pc端ui框架 ele...
2019-05-28 14:40:03
260
原创 闭包的特点和用途
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。具体看下面的代码：function f1(){ ...
2019-05-28 14:38:21
185
原创 javascript原生事件句柄、BOM、DOM对象属性方法总结
为方便平时的使用，把 JavaScript 所有原生事件句柄、BOM 对象属性和方法、DOM 对象属性和方法总结到此博客，如有漏缺请留言告知。句柄/属性/方法 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事件句柄 元素获得焦点 onc...
2019-05-28 14:35:42
182
原创 vue移动端适配插件lib-flexible
npm install -g vue-clivue init webpack my-projectcd my-projectnpm run dev配置vue插件 lib-flexible安装插件 lib-flexiblenpm i lib-flexible --save-dev在main.js中引入lib-flexibleimport 'lib-flexible/fle...
2019-03-06 14:33:17
590
原创 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，增加用户体验。当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的距离自己写一些动画来实现，但是当页面的动画元素过多的时候，难免有点繁琐，所以本篇博客介绍使用 WOW.js 和 animate.css 来实现页面滚动加载元素动画二、引入和使用引入和使用分为两种，一种是标签...
2019-02-28 14:21:16
2891
2
原创 调取微信支付
//获取微信支付接口信息 http.post(`${api.api}/config`, { url: location.href.split("#")[0]//截取地址栏地址传到后台 }) .then((res) =>...
2019-02-28 14:00:41
593
原创 关于git的使用及一些简单的命令
一、从Git官网直接下载安装程序，然后按默认选项安装即可。安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！二、注册gitlab/github账号，如果是公司内网地址不需要翻墙，在官网注册需要翻墙三、配置密钥：1.cd ~/.ssh 查看本地是否有密钥2.ssh-keygen -t rsa 自动生成本地密钥3.cat...
2019-02-28 13:59:21
133
原创 【vue】vue-cli里引入jquery和bootstarp
如果不会搭建，请移步：从零搭建一个vue-cli项目二、安装jquery我们都知道 bootstarp 是依赖于 jquery 的，所有要想使用 bootstarp 我们就要先安装 jquery在命令行打开项目根目录，输入：npm install jquery --save-dev安装完成以后修改 build 文件下的 webpack.base.conf.js 文件在&nbsp;mod...
2019-02-28 09:11:13
186
原创 【gulp】用gulp搭建一个前端项目
List item 1.安装node：https://nodejs.org/zh-cn/ 2.安装gulp：npm install gulp -g 3.新建一个文件夹用来存放项目 4.在命令行进入创建的文件夹输入 gulp init即可 5.新建一个gulpfile.js文件配置任务 也可以使用我搭建好的项目模板：https://downloa...
2019-02-27 17:49:08
494
1
原创 【vue】vue组件传值的三种方式
vue的组件传值分为三种方式：父传子、子传父、非父子组件传值引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的三种方式1、父传子子组件的代码：<template> <div ...
2019-02-27 17:42:57
405
原创 【vue】vue路由传参的三种方式
【vue】vue路由传参的三种方式<article class="baidu_pl"> <div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post
2019-02-27 17:40:55
2002
原创 【小程序】保存图片到本地相册
现在就为大家讲解图片保存到本地的方法常见的保存图片触发事件类型：长按图片触发函数保存到本地，点击按钮触发函数保存到本地回调函数代码如下：//获取图片信息wx.getImageInfo({ src: this.data.shareimg, success: function (res) { var path = res.path; //保存图片到本地 wx.saveImag...
2019-02-27 17:37:03
810
原创 【小程序】获取用户信息保存到本地、全局变量
微信小程序升级后，获取 wx.getUserInfo 接口后续将不再出现授权弹窗，所以需要使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。</strong> <a href="https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca...
2019-02-27 17:34:47
3969
原创 【vue】使用Vue-cli搭建项目流程（从零开始）
一、安装node.js去官网下载安装node.jshttps://nodejs.org/en/或者可以去node.js中文网下载http://nodejs.cn/download/安装完成以后通过命令行工具输入 node -v 查看安装的node.js版本命令行工具输入 npm -v 查看安装的npm（包管理工具）版本如果出现类似下面截图中的版本号 证明安装成功二、安装cnp...
2019-02-27 17:31:03
309
原创 【vue】vue的生命周期详解
不多BB先上图可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作,，那么先列出所有的钩子函数，然后我们再进行详解：beforeCreate——创建前created——创建后beforeMount——挂载前mounted——挂载后beforeUpdate——数据发生改变前updated——数据发生改变后beforeDestroy——实...
2019-02-27 17:28:15
161
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人