- 博客(50)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue+node(express)+mysql部署阿里云服务器
一、购买服务器1 、进入阿里云官网，选择服务器ECS，我买的是学生的，当然你要是学生，可以通过身份购买学生专用优惠服务器，9.5一个月2、接下来会有个密码设置，这个密码会从始至终会用到哦3、购买成功后，实例就创建成功了，也就会有自己的服务器了4、在控制台中可以查看自己的实例，里面会有你所买的服务器的ip地址，且显示运行中，到此，就可以开始部署准备工作了二、下载安装putty和X...
2019-06-21 16:17:46
3406
2
原创 前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）微信JS-SDK1.前期准备前端代码撰写微信JS-SDK前端需要实现一个功能，如录音，拍照，分享，地理位置等，前端想要实现这些功能的调用，必须要通过调用JS-SDK的方式来实现，那么如何使用呢，本文进行简单的介绍（新手第一次开发总结，不对的地方望大家指正）1.前期准备因为是第一次开发，看了很多文档，包括官方文档，看了很多遍，仍然...
2018-09-27 13:44:54
4394
1
原创 quillEditor 配置图片element自定义上传，包含粘贴图片和工具栏上传图片
本文主要关注粘贴图片上传，因为点击工具栏可以增加触发事件addHandler直接上代码：标签部分：<el-upload :action="photoUploadUrl" :show-file-list="false" :on-success="handleQuillImgSuccess" with-credentials accept="image/gif, image/jpeg, image/jpg, image/bmp, image/png".
2021-07-15 11:07:27
810
1
原创 前端利用qrcode设置二维码预览
一、文件引入标签引入<script src="qrcode.js"></script>npm引入cnpm install --save qrcodejs2二、使用方法DOM结构<div id="qrcode" ref="QRcode"></div>原生使用// 设置参数方式var qrcode = new QRCode('qrcode', { text: 'www.baidu.com', // 二维码地址，根据需要
2020-10-31 17:37:30
1422
原创 js计算检验字符串的字节或字符长度
计算字符长度：/*** @pamam val 字符串* @pamam num 字符串限制长度，比如：两个汉字，传4，两个字母，传2* @return isShort 为true表示小于传入数据，为false表示大于所传数据num* @return index 表示如果大于所传长度，是从字符串哪个索引开始的*/getByteLen(val = "", num) { var len = 0 var index = 0 if (!val) return {isShort: true} f.
2020-10-31 16:45:55
1342
原创 结合async await，动态设置Promise.all()
为了演示动态设置promise，这里模拟一个需求：有一组用户列表，前端需要通过用户列表的用户id去获取用户岗位，获取到岗位id后再通过该id去获取岗位状态，具体逻辑看以下代码：// 模拟接口定义// 获取用户列表信息，包括id，nameconst getIdApi = function() { return new Promise(function(resove, reject) { const data = [{id: '001', name: '001'}, {id: '
2020-10-31 16:19:38
1821
原创 echarts 数据堆叠柱状图情况下设置圆角问题
前言众所周知，echarts是前端最受欢迎的一个可视化图标库，几乎满足了前端构建图表的大部分需求，但是使用框架最大的问题可能就是框架的可扩展性，自定义性。不过主流框架也都很好的解决了这些问题，现在就echarts的柱状图数据堆叠怎么给最上面的数据设置圆角进行说明属性说明首先我们来看下正常情况下设置圆角：这是官方示例，代码如下：看下效果：属性stack官方说明：示例代码：...
2020-03-31 10:42:59
5747
3
原创 前端markdown解析器marked的使用与在ie中的兼容问题
最近在vue项目中遇到解析markdown格式文本的需求首先看一下接口返回的数据类型：是md格式的文本渲染有很多方式，我用的是 marked 插件，也是基于markdown-it，是一款比较受欢迎的解析器在vue中如何使用？为了使解析后的code样式能够高亮，我们结合highlight.js实现此效果首先 npm install --save-dev marked highlig...
2020-01-16 15:27:19
1490
3
原创 代码优化之if-else
前言当项目中有越来越多的 if else的时候，不免会有些头痛，一个接着一个，一层嵌套一层，十分影响代码可读性和代码维护。为了解决这个问题，在这里以购买订单状态为例举例优化过程刚开始拿到需求的时候，可能会写出以下的代码： // 获取状态 let status = getStatus() if (status === 'waiting') { console.log('等待支付...
2020-01-09 13:22:47
298
原创 vue自定义日历，vue分时间段展示价格日历
需求最近遇到一个需求，根据不同时间段展示不同价格的日历：点击详情，后台返回时间段与时间段对应的价格，前端负责相关展示后台返回数据类型：前端展示效果：了解开始前我们先了解下获取日期的几个必要的知识点现在是12月，通过getMonth()获得的就是11，获取其它时间节点即是对应的数据获取指定日期的第一天和最后一天，知道上面的获取月份，现在我们想要获取4月份的第一天和最后一天：...
2019-12-30 11:19:34
2533
3
转载 hexo-prism-plus 无法正确加载，代码高亮不起作用
具体来说是在3.8.0的hexo下无法正确地加载hexo-prism-plus，debug了很久没有结果，特地发邮件向你请教。我在安装了hexo 3.8.0 、hexo-prism-plus 1.1.0后，通过 hexo server --debug 命令启动服务，控制台可以看到插件已经被加载，除此之外没有任何报错信息。打开网页，博客文章中代码部分并没有被高亮，打开开发者工具查看HTML元素，...
2019-12-14 11:13:01
1828
1
转载 网易云音乐mp3外链、真实地址下载方法
一个网易音乐外链地址长期有效，很简单的方法：第一步打开网易云音乐，随便找到一首歌，播放，复制网址的ID，例如：杨钰莹的心雨，网址是：http://music.163.com/#/song?id=317151很明显，ID是317151那么，这首歌的真实地址就是：http://music.163.com/song/media/outer/url?id=317151.mp3这个地址不会失效...
2019-12-14 10:04:30
2117
原创 前端多角色权限页面（同浏览器同时登录）权限互串解决
问题说明由于不同角色权限不同，显示的界面也就不同（功能与主题等），同浏览器同时登录不同角色会出现角色互串的问题，以下分析与解决均为同浏览器所在环境分析1、登录逻辑用户输入登录信息，点击登录向服务端发起请求，服务端根据前端发送的登录信息返回成功或失败，成功返回token字段与用户角色，token字段为加密字段，表明用户身份信息，并携带过期时间，供前端后续请求接口调用，前端通过判断用户角色展...
2019-12-11 12:23:15
5266
原创 vue实现自定义步骤条
首先看一下实现的效果：来看看实现过程：公共插件<!-- Step.vue --><template> <div class="stepOut"> <ul> <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index...
2019-11-19 17:26:01
8958
3
原创 vue 下载pdf文件
首先安装依赖npm install html2canvas jspdf --save封装方法：// pdfMethod.jsimport html2canvas from 'html2canvas'import JsPDF from 'jspdf'const generateResume = (el, name) => { html2canvas(el).then(canv...
2019-11-19 17:02:42
6838
原创 设置transform导致弹窗字体模糊问题
说明项目中，设置弹出框居中的时候遇到字体变模糊的情况，查阅资料后发现是transform的问题，下面具体看看：原因项目中弹出框的样式居中是这样写的：.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}比如盒子的宽度为300px，高度为401.5px...
2019-11-19 15:16:03
1476
原创 vue支付密码插件实现（可解决浏览器记住密码行为）
浏览器自动填充和记住密码行为是前端遇到最为头疼的问题之一，浏览器只要检查到password input框，就会匹配离他最近的text input框，autocomplete属性虽能解决自动填充的问题，但是也是支持有限，不能解决浏览器记住密码行为和提示密码行为要解决这种问题，可以从password input框入手，只要改变 input框的类型为text就可以解决此问题第一种：设置样式设置...
2019-11-11 11:44:56
816
原创 element联级选择器（获取省市地区）后台动态获取
如何根据后台接口数据动态展示联级选择器，本文章以获取省市地区为例进行说明通过点击省地区动态获取市地区首先，看一下element联级选择器长啥样：<el-cascader :options="options" v-model="value" clearable></el-cascader><script> export default { ...
2019-11-04 10:35:38
3729
原创 js 常见字符串检验规则封装总结
1、检验手机号 // 检验手机号 function checkPhones (val) { let number = /^[1][3,4,5,6,9,7,8][0-9]{9}$/ if (!number.test(val)) { return true } else { return false } ...
2019-10-25 14:52:18
457
原创 js检查字符串字节长度
Blob对象有size属性，返回字节长度，看官方说明要获得字符串的字节长度，看下Blob函数首先要说明的是 js 中的DOMString通过Blob函数会被编译成UTF-8来看下实现例子：...
2019-10-25 10:33:20
819
原创 字体图标在ie兼容问题（element低版本icon）（图标在ie浏览器不显示）
在项目开发过程中，项目用到的是element组件，版本号是2.4.7，遇到了图标字体在ie浏览器不显示的问题，这是在同事电脑出现的bug，我电脑同样是ie，11版本和10版本都没有问题，但是在同事电脑哪个版本都显示不出来，纠结了半天看到ie里报的错误是这样的CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。在网上搜都是千篇一律的...
2019-10-18 19:10:49
5644
原创 浏览器表单默认填充行为之autocomplete属性
浏览器默认填充是前端很常见的一个问题，无论是注册页还是数据表单页，只要包含地址或是密码框就会调起浏览器的自动填充行为，其实autocomplete属性就可以解决大部分这些问题，只要在input标签里写上这个属性对应的功能名称即可，对应关系如下：off: 用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。on: 浏览器可以根据用户先前的填表情况对此字段自动填值。n...
2019-10-16 12:31:32
884
原创 DNS解析过程
首先通过域名在本地浏览器缓存寻找对应ip；找不到则通过寻找本地操作系统缓存，即host文件，找对应ip；再找不到则操作系统发送此域名到LocalDNS，LocalDNS通过本地互联网连接解析服务DNS进行解析，完成后缓存；如果还没有则到root server服务器请求解析，root server返回一个服务器， LocalDNS再去这个服务器发送请求，返回Name Server（域名服务器...
2019-10-08 10:23:14
135
原创 浏览器请求头中的referrer与Origin（请求出现abort或返回forbidden）
referrer：通过window.location.href获取地址附加到referrer中，以防止盗链接，防止恶意请求Origin：有referrer功能，针对跨域操作，标准浏览器只要是跨域就会携带此请求头字段，如果后台允许此字段的地址，则正常请求，如果不允许，浏览器就会abort，不产生事件，就好像没有请求过，network也看不到...
2019-10-08 10:19:32
813
原创 预请求触发的几种方式
使用了PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH方法人为设置了非规定内的其他首部字段，参考上面简单请求的安全字段集合，还要特别注意Content-Type的类型XMLHttpRequestUpload 对象注册了任何事件监听器请求中使用了ReadableStream对象...
2019-10-08 10:16:43
666
原创 位运算 让js更简洁
废话不说，直接看例子，来看看它的好处用 “|” 取整let num=1.5num=num|0; // 1用 “>>” 取半let num=4;num=num>>1; // 2用 “<<” 加倍let num=2;num=num<<1; / / 4用 “^” 两值交换let a=1;let b=2;a^=b;b^=...
2019-10-08 10:06:06
77
原创 前端解决宽度设置百分比和边框后样式超出的问题
项目中经常会遇到一类问题：就是设置宽度百分比后再加border边框出现边框溢出显示不出的问题原因很简单，就是宽度已经是百分百了，再设边框，实际内容就是百分百再加上边框的宽度，肯定就溢出了这个问题很好解决，一个属性就搞定：calcdiv { width: calc(~"100% - 2px"); border: 1px solid #eee;}注意： 以上代码即可实现，但是必...
2019-09-30 11:59:53
2087
原创 怎样优雅的更改element中的样式
相信大家在写vue项目的时候大多都会用到element组件，这样修改组件自带默认样式也就成了前端工程师的主要任务之一了，这篇文章就怎样修改element中的默认ui样式进行说明以input输入框为例无论要修改哪种样式，都要先熟知或查看element自带的修改样式方式，如果element本身就自带了修改样式的属性，直接用即可，大部分标签也支持利用class命名更改标签样式，本文主要对没有提...
2019-09-30 11:31:52
7435
1
原创 vue根据后台字段动态显示图片
说明之前搜了很多，有通过把每个图片展示通过状态控制显示的有通过require每个图片通过状态控制显示的要是数量少还好说，数量多了这种方法肯定是要放弃的本事例就以银行图标显示为例，根据后台返回银行类型字段显示本地对应银行图标具体实现1、首先在模板写上图片标签，当然只写一个动态的就足够了<img :src="imgSrc" alt="银行图标">2、创建 js 文件处...
2019-09-30 10:25:37
3001
原创 vue 文件下载
文件下载流程本文章针对于前端基于Blob对象创建文件实现文件下载直奔代码：// 首先创建数据对象const data = {hello: "world"};// 创建Blob并指定mine类型const blob = new Blob([JSON.stringify(data)], {type: "text/plain"});// 文件名命名const fileName = `${...
2019-09-29 10:40:37
5056
原创 element 表格排序之远程排序去除默认排序
element表格提供了三种数据的排序方法：升序排序 ascending降序排序 descending默认排序 null如果是前端本地排序 可设置 sort-doders 属性为 ['ascending', 'descending'] 去除默认排序具体可参考 element文档远程排序即为后端排序，后端可按照前端参数（升序、降序、页码、数量）返回所有数据中的相应数据，看代...
2019-09-09 18:21:48
3964
1
原创 vue中标签自定义属性的使用
在 vue 中，尽量避免对dom的操作，通过对状态的管理实现需要的功能举个例子：vue获取dom元素可以使用 ref 要想获得自定义属性，可以通过设置 ref 实现<span data-num="21" ref="dataNum" @click="getData">55</span>getData:function () { console.log(thi...
2019-08-23 18:12:29
18223
原创 前端请求接口 token登录验证
在登录组件登录函数methods: { userLogin () { this.axios({ method: 'post', url: 'userLogin', data: this.loginData }).then(res => { console.log('登录成功') // 登录成功存储用户信息到本地存储，用户信息包含tok...
2019-08-13 10:52:46
10850
原创 正则表达式中的前瞻,后顾,负前瞻,负后顾
// 前瞻：exp1(?=exp2) 查找exp2前面的exp1// 后顾：(?<=exp2)exp1 查找exp2后面的exp1// 负前瞻：exp1(?!exp2) 查找后面不是exp2的exp1// 负后顾：(?<!exp2)exp1 查找前面不是exp2的exp1举个例子："2019年".replace(/(?<=\d+)年/, "year") //...
2019-08-09 14:21:32
509
原创 element 日期选择器 date-picker 设置默认时间（当月1号到当前日期）
element 日期选择器结构，两个日期选择器定义开始和结束 <el-date-picker v-model="startTime" type="date" :editable="false" prefix-icon="el-icon-caret-bottom" value-format="yyyy-MM-dd" :clearable='...
2019-08-02 17:21:38
25245
5
原创 vue中分割线的实现
项目中，需要实现分割线的效果，如图：奈何 element 中的分割线用起来报错，无奈只好自己写，很简单，先说下原理：给一个高为1像素的盒子，盒子宽度根据要求设定，再设置盒子颜色，排列方式为相对定位，盒子里设置文字给左右padding，并进行绝对定位到中间即可实现看代码：<div class="tableTitle"><span class="midText"&...
2019-08-02 15:02:32
31190
1
原创 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)错误
只需要使用mysql -u root -h 127.0.0.1 -p输入密码即可进入mysql命令行
2019-07-01 11:14:29
95
原创 在vue项目中使用svg，并能根据需要修改svg大小颜色等样式
1、介绍考虑到一部分人还在用vue-cli 2.x，故本教程既包含2.x版本，也包含3.x版本2、安装依赖npm install --save-dev svg-sprite-loader3、把svg文件放入项目中如图所示：我把svg文件放入到了assets目录下的icons目录里面了4.1、vue-cli 2.x 配置在webpack.base.conf.js中配置允许svg依...
2019-06-26 17:39:38
24501
14
原创 部署中常用命令集合
进入mysql配置窗口：mysql -uroot -ppassword查看当前目录：pwd启动node服务： pm2 start test.js --name app 起名为app重启服务：pm2 restart server.js停止所有服务：pm2 stop all通过id查看服务：pm2 show id查看服务列表：pm2 list在mysql中查看数据库：show datab...
2019-06-25 17:25:13
130
原创 js中的闭包
闭包函数会形成私有作用域，保护里面的变量不受外界的污染，但函数可访问它上一级作用域的变量，从而外界可通过闭包的方式拿到函数里的变量，如：函数A返回函数B，函数B引用了函数A的变量，函数B就称为闭包闭包应用在ajax请求成功回调，事件绑定回调方法等题目for ( var i=1; i<=5; i++) { setTimeout( function timer() { cons...
2019-06-25 17:09:47
287
js中正则的特殊元字符总结
2018-05-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人