![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端爬坑之路
文章平均质量分 55
蜉蝣&一粟
像风走了八千里,一路奔波了无痕迹。
展开
-
20行原生JS代码手写ElementUI表格组件
今天给大家分享一下如何用原生JS封装一个基础版的ElementUI表格组件。原创 2023-01-10 22:31:24 · 2730 阅读 · 0 评论 -
Vue3.0之.vue文件出现红色波浪线
在我们使用Vue3.0构建项目之后我们会发现.vue文件中出现了红色波浪线的检测提示问题。这里是因为我们用的Vetur插件的template模板检测没有对Vue3.0做兼容,所以需要我们手动去关掉template模板检测。找到VSCode的设置里面的Vetur中的template,取消选中即可解决红色波浪线报错问题。...原创 2021-08-25 16:17:47 · 8326 阅读 · 1 评论 -
无法访问EChasrts官网的问题之电脑dns解析问题
今天是建党100周年,普天同庆,而我,也遇到了一个百年难遇的问题。 问题的起因来源于我访问不了ECharts官网,访问后的界面是这样的: 起初我以为是echarts官网挂掉了,然后我让朋友访问,朋友那边显示的好好的。于是我以为是我的谷歌浏览器版本没升级,我又去升级了浏览器的版本,然而依旧无果。于是去换了火狐浏览器访问,然而并没有什么卵用。 离谱的是,等我多次刷新后,竟然显示让我登录,这不是SVN的登录提示框吗? 我怀疑...原创 2021-07-01 17:08:25 · 8602 阅读 · 26 评论 -
关于React中事件处理的问题之bind(this)和ES6中的class渊源
对于新手学习React中事件处理这一章节,大多数会在使用bind(this)绑定this这个操作上深感疑惑。最近被问到这个问题,感觉没有通俗易懂的语言能够讲清楚这个知识点。于是去React官网上看了一下官网的解释和网上一些其他的说法之后,感觉能把初学者整跑路。 所以自己就来这里记录一下了,希望对于初学者来说有帮助。这里我们先来看一个简单的案例,案例里我们定义了一个有状态组件Hello,在这个组件里我们定义了一个updateInfo方法。要想使用this.updateInfo...原创 2021-06-30 17:36:17 · 251 阅读 · 0 评论 -
SourceTree3.*版本在win10环境跳过登录注册
SourceTree3.3.6版本跳过登录注册使用SourceTree下载地址:https://www.sourcetreeapp.com/,根据自己的系统下载对应的软件下载完之后双击sourceTree.exe应用程序会出现这个界面,要我们登录Bitbuckket,这个是可以跳过的。下面来讲怎么跳过登录第一步:在电脑地址栏输入%LocalAppData%\Atlassian\Sour...原创 2020-01-03 21:17:04 · 2118 阅读 · 6 评论 -
Win10系统安装webpack、vue等报错:无法加载文件 C:\Users\17542\AppData\Roaming\npm\vue.ps1,因为 在此系统上禁止运行脚本。
Win10系统安装webpack、vue等报错:无法加载文件 C:\Users\17542\AppData\Roaming\npm\vue.ps1,因为 在此系统上禁止运行脚本。出现的问题:安装完webpack、vue-cli、cnpm等之后,在命令行下运行报错:无法加载文件 C:\Users\17542\AppData\Roaming\npm\vue.ps1,因为 在此系统上禁止运行脚本。...原创 2019-12-08 20:57:33 · 592 阅读 · 0 评论 -
前端使用bat文件提高生产力解放双手
本篇简单讲述一下bat文件在前端开发中的简单应用当我们运行一个项目的时候的,需要打开项目的文件夹,打开cmd,或者是打开cmd之后cd到项目所在的位置,然后输入npm run dev 或者是npm start等运行项目的命令,这些操作我们每天都在做,运行项目以及打包项目。都是些重复性并且没有什么技术含量的工作。当我只有一个两个项目的时候这些操作并不那么费事,但当我有5、6个项目甚至更多需要运行...原创 2019-11-23 11:49:12 · 762 阅读 · 0 评论 -
MongoDB的安装
本篇讲述MongoDB安装步骤以及注意事项装mongodb装半天死活装不上,看了看自己以前的博客和笔记里面,也没有详细的记录,这次就来写一写。首先下载MongoDB,下载地址:MongoD下载地址,根据自己电脑对应需要的版本去下载,这里面有很多版本。我这里下载的是这个版本的,根据自己的电脑配置进行选择下载就好了下载完毕双击进行安装,在安装过程中,通过点击 “Custom(自定义)” ...原创 2019-11-23 10:37:00 · 206 阅读 · 0 评论 -
浅谈Web安全--XSS攻击
XSS攻击主要是利用JS和DOM。1.了解XSS的定义:2.理解XSS的原理3.理解XSS的攻击方式:反射性和存储型反射性:发出请求时,XSS代码出现在URL中,作为输入提交到服务器端,服务器端解析后响应,XSS代码随响应内容一起传回给浏览器,最后浏览器解析执行XSS代码,这个过程像一次反射,故叫反射性XSS。盗取cookie,获取敏感信息,破坏正常页面结构并插入恶意内容,flash(不...原创 2019-10-30 11:53:02 · 404 阅读 · 0 评论 -
在ElementUI的表格中使用Switch,给出提示框再改变值
本篇讲述在Vue项目中使用Switch开关改变状态值之前给出弹窗提示项目中需求:在表格中给每项加一个状态控制按钮,点击按钮给出提示框询问用户是否确定更改状态,用户确定之后再改变Switch的开关值。HTML <el-table-column label="操作" min-width="170" align="center"> <temp...原创 2019-10-28 15:19:03 · 5919 阅读 · 0 评论 -
在Express框架中用Node.js开发图形验证码
本篇讲述使用Node.js开发图形验证码一般项目中的登录注册功能,甚至一些敏感操作都需要获取短信验证码。而短信服务一般都是第三方的,需要收费。找了几家,聚合数据的初次注册免费送5条短信。不想影响项目功能的后续使用,这里就用自己使用node.js生成的图形验证码进行替代。网上很多的解决办法是使用谷歌的recaptcha,但使用这个插件需要安装了C++模块才行,我的电脑没有安装,因此选择了svg-...原创 2019-10-25 11:00:17 · 804 阅读 · 0 评论 -
Node.js封装MongoDB数据库增删改查的操作方法
本篇讲述在Express框架中用Node.js封装MongoDB数据库增删改查的操作方法在项目中需要频繁的对数据库进行增删改查的操作,把对mongodb数据库的操作方法进行封装将会减少很多代码量,以下的封装的方法代码:const MongoClient = require('mongodb').MongoClient;const url = "mongodb://localhost:2701...原创 2019-10-23 16:44:01 · 122 阅读 · 0 评论 -
在Express框架中对MongoDB数据库的增删改查操作方法的封装
本篇讲述在Express框架中进行对MondoDB数据库增删改查的DAO封装继上篇博客,直接在config.js文件中对mongodb数据库的操作方法进行封装const MongoClient = require('mongodb').MongoClient;const url = "mongodb://localhost:27017";const dbName = "myTest";...原创 2019-10-23 16:26:16 · 476 阅读 · 0 评论 -
Express框架中使用Node.js连接MongoDB数据库
本篇讲述在Express框架中使用Node.js连接MongoDB数据库安装mongodb:npm i mongodb在项目中新建一个文件config.js// 引入MongoDBconst MongoClient = require('mongodb').MongoClient;// Connection URLconst url = "mongodb://localhost:2...原创 2019-10-23 15:21:18 · 695 阅读 · 0 评论 -
Express框架入门
本篇讲述express框架入门安装express-generator(可以快速创建一个应用框架):npm install express-generator -g创建一个express项目:在命令行输入express --view=(模板名称) 项目名称我这里使用的是ejs模板,port是我的项目名称,其支持的模板有:ejs|hbs|hjs|jade|pug|twig|vash,根据自己的...原创 2019-10-23 11:27:33 · 359 阅读 · 0 评论 -
vue权限管理和使用addRoutes动态加载路由
本篇讲述关于vue项目中权限管理和addRoutes动态加载路由问题项目中需要新增一个根据不同角色,设置不同权限,根据具体权限访问不同菜单的功能。首先分析项目需求:需要有不同的角色,角色拥有不同的权限根据权限访问菜单,那么路由需要进行动态的添加那么路由初始化时应该是只有那些不需要权限就访问的页面,比如登录注册这种。再来思考如何实现功能,方案大致有两种:4. 一是静态注册好所有的路...原创 2019-04-20 14:19:17 · 5491 阅读 · 8 评论 -
微信小程序和微信公众号关联
本篇讲述讲把微信小程序关联到微信公众号上,使其能在微信公众号中直接进入小程序首先,我们的微信小程序要是已经发布好的,如果不知道怎么发布小程序,可以看我的上一篇文章。下面将小程序关联到微信公众号上去。使用微信公众号账号登录微信公众平台进入自定义菜单,在自定义菜单右侧填写小程序相应的信息之后,保存并发布新菜单即可。此时访问自己的微信公众号就会多出来一个自定义的微信小程序子菜单,点击即可直接...原创 2019-08-22 10:31:55 · 1211 阅读 · 0 评论 -
微信小程序云开发之云数据库
本篇讲述微信小程序云开发中的云数据库云开发提供了一个JSON数据库(文档型数据库),提供2GB免费存储空间,这个JSON数据库不同于传统的关系型数据库。传统的关系型数据库像我们的excel表格一样,是有行有列的,每一列表示一个字段,每一行表示一个数据。而在文档型数据库当中,一个数据库可以包含多个集合。文档型数据库中的集合相当于关系型数据库中的表,文档型数据库当中的每条数据我们可以将其称之为...原创 2019-08-27 10:52:00 · 7157 阅读 · 0 评论 -
微信小程序中开通云开发
本篇讲述在微信小程序中使用云开发微信小程序云开发提供云函数、云数据库、云存储三大基础能力。使得我们开发者可以将小程序的部署和运营环节交给腾讯云去处理,我们不需要在运维和管理上面投入太多时间。云开发的云函数使用的是node.js,对于前端开发者来讲是很友好的,并且云开发的云数据库使用的是MongoDB数据库。云开发使用无服务(Serverless)的模式进行开发,有利于我们更专注业务逻辑,这样...原创 2019-08-26 17:48:59 · 8571 阅读 · 0 评论 -
微信小程序云开发之云函数的调用
本篇讲述微信小程序云开发之云函数的调用下面是小程序云函数的根文件夹如果我们想要查看当前开发云函数的使用情况,直接在我们的云开发控制台进行查看即可新建云函数:鼠标右键点击cloudfunctions|test点击新建Node.js云函数此时在本地就会创建一个新的云函数,也会在线上创建一个新的云函数,并且会显示上传的结果。打开云开发即可查看刚刚新建的云函数在新建的云函数的ind...原创 2019-08-27 17:56:59 · 7626 阅读 · 0 评论 -
vue路由报错
今天遇到了一个从没有遇到过的问题,点击菜单时,控制台一直在报错。报错内容如下:Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”};重新下载一下vue-router的包即可,npm i vue-router@3.0-S即可...原创 2019-08-29 13:44:04 · 340 阅读 · 0 评论 -
webpack打包出错问题总结
webpack打包出错问题总结这里记录一下第一次遇到的错误信息,后续遇到其他问题一一总结。clean-webpack-plugin的3.0版本打包报错如下出现以上报错信息是由于代码书写错误,错误代码如下:将这两行代码更改为如下写法即解决报错问题:...原创 2019-08-29 14:53:31 · 604 阅读 · 0 评论 -
微信小程序引入第三方组件库Vant Weapp
本篇讲述微信小程序引入第三方组件库Vant Weapp在引入第三方组件库之前鼠标右键点击miniprogram文件夹,打开终端打开终端之后执行npm init 命令,执行这个命令是目的是在miniprogram文件夹中初始化package.json文件,执行完毕之后就会在miniprogram生成一个初始的package.json文件。根据 Vant Weapp文档在终端执行npm i...原创 2019-09-05 15:21:35 · 960 阅读 · 1 评论 -
微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)
微信小程序之使用canvas给微信头像加小红旗情境:新中国成立70周年,普天同庆。昨天看到朋友圈中被刷屏的@官方微信 给自己的头像加小红旗。服务器被卡爆,很多朋友说换头像不成功。任务:打算自己写一个小程序实现这个换小红旗的功能。行动:于是去看了一眼给头像加小红旗的入口页面,看了下里面的功能。结果:自己写了一个小程序并实现了加小红旗的功能,与官方的不完全一致,功能点是差不多的。实现效果如下...原创 2019-09-25 17:10:50 · 3008 阅读 · 14 评论 -
隐藏canvas画布以及canvas无法使用网络资源进行绘画
本篇讲述如何隐藏canvas,以及如何解决canvas无法使用网络资源进行绘画的问题在我上一篇的博客中,使用小程序实现了给微信头像加小红旗的功能,这里来说一下我在写这个功能时踩的坑。首先是我使用了微信小程序存储的用户头像链接进行绘画时,会报错,说找不到资源。这是只需要用小程序自带的getImageInfo讲资源进行一下转换一下即可。 wx.getImageInfo({ sr...原创 2019-09-25 17:35:56 · 1945 阅读 · 0 评论 -
个人开发者微信小程序发布流程
本篇讲述个人微信小程序的发布流程要开发微信小程序首先需要有一个微信小程序账号,和开发者工具。这里就不详细说明了。微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html根据自己的系统选择对应的版本安装即可。申请账号入口和登录入口都在这里:https://mp.weixin.qq.co...原创 2019-08-22 10:14:54 · 11149 阅读 · 0 评论 -
前端开发者使用Chrome浏览器开发用到的插件
本篇记录我使用谷歌浏览器开发过程中觉得比较好用的插件注意:使用这些插件的前提条件是谷歌浏览器要翻墙1.Vue.js devtools,使用Vue框架进行开发时用到的插件,安装完成进行vue项目调控会看到控制台有Vue这个选项。与此类框架类似的插件还有React和Angular的,自行在应用商店安装使用即可,安装以及使用方法与Vue.js devtools一致,在此不再赘述。2.平时我们浏览...原创 2019-08-15 16:00:28 · 1293 阅读 · 0 评论 -
vue项目中使用ElemetUI的Upload组件的http-request方法同时上传多个文件并提交表单数据
本篇讲述使用ElementUI中的Upload组件的http-request方法进行多个文件上传的同时提交表单数据上篇博客使用的是Upload携带额外参数的方法进行文件上传的同时提交表单数据,那种方法仅适用于单个文件上传的时候携带表单数据。而开发过程中一般会有多个文件上传的需求,用Upload携带额外参数,使用其自带的this.$refs.upload.submit()事件进行上传会发送多个请...原创 2019-07-22 17:13:51 · 6250 阅读 · 2 评论 -
vue中使用ECharts制作双柱形图堆叠进度条效果
本篇讲述双柱状图堆叠展示的背景效果这里主要实现如下效果:这里主要实现了阴影和圆角柱状图以及隐藏X轴的效果,项目需求如此,便依此进行图表的自定义,下面直接贴代码,代码中会有实现目前效果的注释。首先,要确保项目中下载并且引入了echarts// 在HTML中放置一个容器<div id="myChart1"></div>第二步:在data中定义图表配置项(可以在函...原创 2019-05-09 10:28:13 · 4236 阅读 · 0 评论 -
vue使用ECharts制作圆角柱状图
先展示圆角柱状图形的效果图表中加入了右边框,关于右边框的加入,利用的是双Y轴实现的,想了解的可以看上一篇博客的代码进行操作,本篇讲述柱状图的圆角设置。主要是修改series中的配置,利用barBorderRadius属性进行圆角设置series : [ { name:'使用时长', ...原创 2019-05-09 10:01:30 · 2624 阅读 · 0 评论 -
vue项目中使用ECharts柱状图并利用双Y轴给柱状图添加右边框
本篇讲述在vue项目中使用ECharts柱状图,并利用双Y轴给图表添加右边框应项目要求,UI给的设计图给图表右边添加了右边框,而echarts中大多是无右边框,或是全部加上纵轴线,显示为网格样式,因此在这想到用双Y轴实现需求。首先确保项目中已经安装echarts并且已经引入HTML中放置一个容器即可:<div id="myChart"></div>在data中定...原创 2019-05-09 09:49:58 · 4516 阅读 · 0 评论 -
富文本编辑器mavon-editor文章回显
继上篇安装使用mavon-editor,本篇讲述文章回显问题使用富文本编辑器就是为了实现发布帮助文档和公告新闻类的编辑功能,文章编辑完毕自然要在页面中展示出来。文章的排版和样式自然要同在编辑器中的一样美观。然而在回显的过程中直接使用后台返回的HTML代码显示时发现和在编辑器中预览时的样式不一致于是乎查找资料后发现需要加上样式才行1.首先引入<link href="https://cd...原创 2019-04-20 11:12:24 · 4634 阅读 · 21 评论 -
express和mongodb初步使用,以及在express项目中获取JSON数据并存储到数据库中
关于express和mongodb初步使用这里就不多说什么了,直接写步骤一、安装mongodb二、配置环境变量三、安装完成后创建数据目录data/db,数据目录放在根目录下(C:\或者D:)等.四、打开命令行输入mongod --dbpath c:\data\db五、重新打开一个命令行窗口mongo.exe,在这个命令行里可以列出所有数据库:show dbs使用某个数据库:use 数...原创 2019-04-24 11:29:10 · 1104 阅读 · 0 评论 -
express框架使用axios进行post请求跨域问题,以及返回的数据是undefined的问题
在express框架中使用axios的post方法出现报错,报跨域问题先想要解决这个问题需要自己定义请求头,并且在vue中使用qs重新实例化一个axios,这个项目使用vue做前端框架,使用express写后台接口。首先在express的app.js文件里设置携带请求头信息var app = express();app.use("*",function(req, res, next) ...原创 2019-04-24 10:53:55 · 3704 阅读 · 0 评论 -
express框架ejs模板引用以及bootstrap和jquery
本篇讲述如何在express框架中引用ejs模板以及bootstrap和jquery首先把下载的bootstrap和jquery分别复制到public文件夹中。分别在views文件夹下建立几个公共文件:在公共页面中引用需要的css和js5.写一些公共的样式,比如头部和底部6.保存完后可以直接在任意一个ejs模板中引用需要的内容这样,就可以在需要的页面使用bootstrap...原创 2019-04-24 10:45:44 · 2930 阅读 · 0 评论 -
关于express框架自动刷新问题
关于express框架的安装和项目搭建这里就不记录了,官网的内容很详尽,按照步骤进行搭建即可,这里讲述一下express框架搭建完毕后运行项目所产生的不能自动刷新的问题。写过express项目的会发现在项目中改动页面内容需要ctrl+s两次后再npm start才能实现页面刷新,此时可以使用gulp-nodemon和browser-syncnpm i gulpnpm i --save gu...原创 2019-04-24 10:31:41 · 1852 阅读 · 2 评论 -
vue项目使用ECharts的中国地图,设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置。效果图如下:实现上图效果步骤如下:确保项目中下载了echarts,然后在main.js中引用echartsimport echarts from 'echarts'import 'echarts/map/js/china'Vue.prototype.$echarts = echarts在组件中放...原创 2019-05-10 11:15:18 · 16618 阅读 · 14 评论 -
echarts中给图表X轴和Y轴加单位,以及让柱形图靠两边显示
项目中需要给图表x轴加单位,这里只给出给X轴加单位的关键代码,其他的代码和步骤可以从这篇博客获取[vue使用ECharts制作圆角柱状图](https://blog.csdn.net/RJN0814/article/details/90020981) xAxis : [ { ...原创 2019-05-10 13:41:51 · 23961 阅读 · 3 评论 -
ECharts图表X轴或者Y轴单位内容显示不全
现在出现的问题是X轴单位内容显示不全主要代码如下:xAxis中的name为“时长(min)”,但上图只显示了“时” grid: { left: '3%', right: '0', bottom: '3%', ...原创 2019-05-10 13:54:28 · 10238 阅读 · 0 评论 -
vue封装分页组件Pagination优化版
本篇继上篇封装分页组件进行了优化上篇中每引用一次组件就要重复写一次改变分页页数handleCurrentChange和每页显示条数的方法handleSizeChange这两个方法,甚觉麻烦,因此进行了个小优化,将获取表格数据的方法传给分页子组件,使用callback进行数据重新渲染的调用。废话不多说,直接贴代码了,以下是分页组件中的代码<template> <div&g...原创 2019-07-26 11:41:03 · 364 阅读 · 0 评论