自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小楠子的博客

像风走了八千里,一路奔波了无痕迹。

  • 博客(58)
  • 资源 (1)
  • 收藏
  • 关注

原创 20行原生JS代码手写ElementUI表格组件

今天给大家分享一下如何用原生JS封装一个基础版的ElementUI表格组件。

2023-01-10 22:31:24 2764

原创 Nginx部署Vue项目相关问题

Vue项目使用nginx发布,刷新404,请求405

2022-01-20 15:58:15 3829

原创 Vue3.0之.vue文件出现红色波浪线

在我们使用Vue3.0构建项目之后我们会发现.vue文件中出现了红色波浪线的检测提示问题。这里是因为我们用的Vetur插件的template模板检测没有对Vue3.0做兼容,所以需要我们手动去关掉template模板检测。找到VSCode的设置里面的Vetur中的template,取消选中即可解决红色波浪线报错问题。...

2021-08-25 16:17:47 8380 1

原创 无法访问EChasrts官网的问题之电脑dns解析问题

今天是建党100周年,普天同庆,而我,也遇到了一个百年难遇的问题。 问题的起因来源于我访问不了ECharts官网,访问后的界面是这样的: 起初我以为是echarts官网挂掉了,然后我让朋友访问,朋友那边显示的好好的。于是我以为是我的谷歌浏览器版本没升级,我又去升级了浏览器的版本,然而依旧无果。于是去换了火狐浏览器访问,然而并没有什么卵用。 离谱的是,等我多次刷新后,竟然显示让我登录,这不是SVN的登录提示框吗? 我怀疑...

2021-07-01 17:08:25 8616 26

原创 关于React中事件处理的问题之bind(this)和ES6中的class渊源

对于新手学习React中事件处理这一章节,大多数会在使用bind(this)绑定this这个操作上深感疑惑。最近被问到这个问题,感觉没有通俗易懂的语言能够讲清楚这个知识点。于是去React官网上看了一下官网的解释和网上一些其他的说法之后,感觉能把初学者整跑路。 所以自己就来这里记录一下了,希望对于初学者来说有帮助。这里我们先来看一个简单的案例,案例里我们定义了一个有状态组件Hello,在这个组件里我们定义了一个updateInfo方法。要想使用this.updateInfo...

2021-06-30 17:36:17 268

原创 SourceTree3.*版本在win10环境跳过登录注册

SourceTree3.3.6版本跳过登录注册使用SourceTree下载地址:https://www.sourcetreeapp.com/,根据自己的系统下载对应的软件下载完之后双击sourceTree.exe应用程序会出现这个界面,要我们登录Bitbuckket,这个是可以跳过的。下面来讲怎么跳过登录第一步:在电脑地址栏输入%LocalAppData%\Atlassian\Sour...

2020-01-03 21:17:04 2127 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 602

原创 Vue框架中对ECharts图表进行自定义绘制和拖拽

Vue框架中对ECharts图表进行自定义绘制和拖拽的实现项目需要实现自定义图表X轴和Y轴以及自己绘制图表的功能,并且可以手动拖动修改图表中线条走势。实现的效果如下:实现以上效果,HTML代码如下:<template> <div class="ddosData"> <el-form :inline="true" :model="echartsFor...

2019-12-04 17:34:01 5503

原创 前端使用bat文件提高生产力解放双手

本篇简单讲述一下bat文件在前端开发中的简单应用当我们运行一个项目的时候的,需要打开项目的文件夹,打开cmd,或者是打开cmd之后cd到项目所在的位置,然后输入npm run dev 或者是npm start等运行项目的命令,这些操作我们每天都在做,运行项目以及打包项目。都是些重复性并且没有什么技术含量的工作。当我只有一个两个项目的时候这些操作并不那么费事,但当我有5、6个项目甚至更多需要运行...

2019-11-23 11:49:12 789

原创 MongoDB的安装

本篇讲述MongoDB安装步骤以及注意事项装mongodb装半天死活装不上,看了看自己以前的博客和笔记里面,也没有详细的记录,这次就来写一写。首先下载MongoDB,下载地址:MongoD下载地址,根据自己电脑对应需要的版本去下载,这里面有很多版本。我这里下载的是这个版本的,根据自己的电脑配置进行选择下载就好了下载完毕双击进行安装,在安装过程中,通过点击 “Custom(自定义)” ...

2019-11-23 10:37:00 219

原创 浅谈Web安全--XSS攻击

XSS攻击主要是利用JS和DOM。1.了解XSS的定义:2.理解XSS的原理3.理解XSS的攻击方式:反射性和存储型反射性:发出请求时,XSS代码出现在URL中,作为输入提交到服务器端,服务器端解析后响应,XSS代码随响应内容一起传回给浏览器,最后浏览器解析执行XSS代码,这个过程像一次反射,故叫反射性XSS。盗取cookie,获取敏感信息,破坏正常页面结构并插入恶意内容,flash(不...

2019-10-30 11:53:02 422

原创 在ElementUI的表格中使用Switch,给出提示框再改变值

本篇讲述在Vue项目中使用Switch开关改变状态值之前给出弹窗提示项目中需求:在表格中给每项加一个状态控制按钮,点击按钮给出提示框询问用户是否确定更改状态,用户确定之后再改变Switch的开关值。HTML <el-table-column label="操作" min-width="170" align="center"> <temp...

2019-10-28 15:19:03 5958

原创 在Express框架中用Node.js开发图形验证码

本篇讲述使用Node.js开发图形验证码一般项目中的登录注册功能,甚至一些敏感操作都需要获取短信验证码。而短信服务一般都是第三方的,需要收费。找了几家,聚合数据的初次注册免费送5条短信。不想影响项目功能的后续使用,这里就用自己使用node.js生成的图形验证码进行替代。网上很多的解决办法是使用谷歌的recaptcha,但使用这个插件需要安装了C++模块才行,我的电脑没有安装,因此选择了svg-...

2019-10-25 11:00:17 826

原创 Node.js封装MongoDB数据库增删改查的操作方法

本篇讲述在Express框架中用Node.js封装MongoDB数据库增删改查的操作方法在项目中需要频繁的对数据库进行增删改查的操作,把对mongodb数据库的操作方法进行封装将会减少很多代码量,以下的封装的方法代码:const MongoClient = require('mongodb').MongoClient;const url = "mongodb://localhost:2701...

2019-10-23 16:44:01 132

原创 在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 482

原创 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 706

原创 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 368

原创 隐藏canvas画布以及canvas无法使用网络资源进行绘画

本篇讲述如何隐藏canvas,以及如何解决canvas无法使用网络资源进行绘画的问题在我上一篇的博客中,使用小程序实现了给微信头像加小红旗的功能,这里来说一下我在写这个功能时踩的坑。首先是我使用了微信小程序存储的用户头像链接进行绘画时,会报错,说找不到资源。这是只需要用小程序自带的getImageInfo讲资源进行一下转换一下即可。 wx.getImageInfo({ sr...

2019-09-25 17:35:56 1973

原创 微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)

微信小程序之使用canvas给微信头像加小红旗情境:新中国成立70周年,普天同庆。昨天看到朋友圈中被刷屏的@官方微信 给自己的头像加小红旗。服务器被卡爆,很多朋友说换头像不成功。任务:打算自己写一个小程序实现这个换小红旗的功能。行动:于是去看了一眼给头像加小红旗的入口页面,看了下里面的功能。结果:自己写了一个小程序并实现了加小红旗的功能,与官方的不完全一致,功能点是差不多的。实现效果如下...

2019-09-25 17:10:50 3022 14

原创 微信小程序引入第三方组件库Vant Weapp

本篇讲述微信小程序引入第三方组件库Vant Weapp在引入第三方组件库之前鼠标右键点击miniprogram文件夹,打开终端打开终端之后执行npm init 命令,执行这个命令是目的是在miniprogram文件夹中初始化package.json文件,执行完毕之后就会在miniprogram生成一个初始的package.json文件。根据 Vant Weapp文档在终端执行npm i...

2019-09-05 15:21:35 974 1

原创 webpack打包出错问题总结

webpack打包出错问题总结这里记录一下第一次遇到的错误信息,后续遇到其他问题一一总结。clean-webpack-plugin的3.0版本打包报错如下出现以上报错信息是由于代码书写错误,错误代码如下:将这两行代码更改为如下写法即解决报错问题:...

2019-08-29 14:53:31 621

原创 vue路由报错

今天遇到了一个从没有遇到过的问题,点击菜单时,控制台一直在报错。报错内容如下:Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”};重新下载一下vue-router的包即可,npm i vue-router@3.0-S即可...

2019-08-29 13:44:04 360

原创 微信小程序云开发之云函数的调用

本篇讲述微信小程序云开发之云函数的调用下面是小程序云函数的根文件夹如果我们想要查看当前开发云函数的使用情况,直接在我们的云开发控制台进行查看即可新建云函数:鼠标右键点击cloudfunctions|test点击新建Node.js云函数此时在本地就会创建一个新的云函数,也会在线上创建一个新的云函数,并且会显示上传的结果。打开云开发即可查看刚刚新建的云函数在新建的云函数的ind...

2019-08-27 17:56:59 7698

原创 微信小程序云开发之云数据库

本篇讲述微信小程序云开发中的云数据库云开发提供了一个JSON数据库(文档型数据库),提供2GB免费存储空间,这个JSON数据库不同于传统的关系型数据库。传统的关系型数据库像我们的excel表格一样,是有行有列的,每一列表示一个字段,每一行表示一个数据。而在文档型数据库当中,一个数据库可以包含多个集合。文档型数据库中的集合相当于关系型数据库中的表,文档型数据库当中的每条数据我们可以将其称之为...

2019-08-27 10:52:00 7194

原创 微信小程序中开通云开发

本篇讲述在微信小程序中使用云开发微信小程序云开发提供云函数、云数据库、云存储三大基础能力。使得我们开发者可以将小程序的部署和运营环节交给腾讯云去处理,我们不需要在运维和管理上面投入太多时间。云开发的云函数使用的是node.js,对于前端开发者来讲是很友好的,并且云开发的云数据库使用的是MongoDB数据库。云开发使用无服务(Serverless)的模式进行开发,有利于我们更专注业务逻辑,这样...

2019-08-26 17:48:59 8591

原创 微信小程序和微信公众号关联

本篇讲述讲把微信小程序关联到微信公众号上,使其能在微信公众号中直接进入小程序首先,我们的微信小程序要是已经发布好的,如果不知道怎么发布小程序,可以看我的上一篇文章。下面将小程序关联到微信公众号上去。使用微信公众号账号登录微信公众平台进入自定义菜单,在自定义菜单右侧填写小程序相应的信息之后,保存并发布新菜单即可。此时访问自己的微信公众号就会多出来一个自定义的微信小程序子菜单,点击即可直接...

2019-08-22 10:31:55 1229

原创 个人开发者微信小程序发布流程

本篇讲述个人微信小程序的发布流程要开发微信小程序首先需要有一个微信小程序账号,和开发者工具。这里就不详细说明了。微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html根据自己的系统选择对应的版本安装即可。申请账号入口和登录入口都在这里:https://mp.weixin.qq.co...

2019-08-22 10:14:54 11215

原创 前端开发者使用Chrome浏览器开发用到的插件

本篇记录我使用谷歌浏览器开发过程中觉得比较好用的插件注意:使用这些插件的前提条件是谷歌浏览器要翻墙1.Vue.js devtools,使用Vue框架进行开发时用到的插件,安装完成进行vue项目调控会看到控制台有Vue这个选项。与此类框架类似的插件还有React和Angular的,自行在应用商店安装使用即可,安装以及使用方法与Vue.js devtools一致,在此不再赘述。2.平时我们浏览...

2019-08-15 16:00:28 1314

原创 vue封装分页组件Pagination优化版

本篇继上篇封装分页组件进行了优化上篇中每引用一次组件就要重复写一次改变分页页数handleCurrentChange和每页显示条数的方法handleSizeChange这两个方法,甚觉麻烦,因此进行了个小优化,将获取表格数据的方法传给分页子组件,使用callback进行数据重新渲染的调用。废话不多说,直接贴代码了,以下是分页组件中的代码<template> <div&g...

2019-07-26 11:41:03 383

原创 vue封装分页组件Pagination

本篇讲述在vue项目中封装ElementUI的分页组件Pagination以下是子组件,即分页组件的内容<template> <div> <el-pagination class="pagin" background layout="total, sizes, prev, pager, next, jumper" ...

2019-07-25 17:35:06 1577

原创 vue项目中使用ElemetUI的Upload组件的http-request方法同时上传多个文件并提交表单数据

本篇讲述使用ElementUI中的Upload组件的http-request方法进行多个文件上传的同时提交表单数据上篇博客使用的是Upload携带额外参数的方法进行文件上传的同时提交表单数据,那种方法仅适用于单个文件上传的时候携带表单数据。而开发过程中一般会有多个文件上传的需求,用Upload携带额外参数,使用其自带的this.$refs.upload.submit()事件进行上传会发送多个请...

2019-07-22 17:13:51 6309 2

原创 Vue项目中ElementUI上传文件时携带表单数据进行手动上传

ElementUI的Upload组件携带表单数据进行手动上传项目需求本来是文件单独上传,再提交表单数据,请求两次接口。现在需求有变,要求在触发表单传输事件的同时上传文件,也就是提交表单数据和上传文件同步进行,请求一次接口。起初是准备使用upload组件自带的http-request来自定义事件,覆盖组件的默认上传行为,但那样需要自己重新创建formData对象之类的,感觉很麻烦,所以弃用了。...

2019-07-20 17:46:30 22087 32

原创 vue项目使用百度商桥实现在线聊天功能

首先下载百度商桥,并注册一个账号,然后登陆这个账号。登陆进去之后是这样的界面,找到基础设置点击站点,然后点击新建站点在域名那里输入主机的IP地址,不知道IP的按下Windows+r键,输入cmd,打开cmd输入ipconfig,即可查询主机的IP地址。输入域名点击确定之后即可看到如下图所示此时点击获取代码,然后将代码一键复制将复制的代码放在vue项目中的index.html...

2019-07-17 12:23:44 3032 9

原创 vue项目根据不同的环境配置不同的接口地址

在我们开发的过程中,会根据不同的环境使用不同的接口地址,这时候就需要我们自己根据不同的环境配置不同的接口地址了。相关配置主要在config文件夹下的dev.env.js和prod.env.js两个文件,下面废话不多说直接上代码了。dev.env.js文件中的代码如下'use strict'const merge = require('webpack-merge')const prodE...

2019-07-10 16:55:03 4827

原创 Vue项目关于axios的二次封装service

一、安装axios:npm i axios --save二、在src目录下新建文件service.js三、在service.js文件中写入以下代码import axios from 'axios'// 创建一个拥有通用配置的axios实例,实例中的配置内容根据实际开发需求而定export const service = axios.create({ baseURL: 'http:/...

2019-07-10 10:28:33 2149

原创 点击空白部分触发事件

点击空白部分返回上一页html部分代码需求是点击content以外的部分返回上一页,代码如下: goBack(event) { var cont = $('#content') if (!cont.is(event.target) && cont.has(event.target).length === 0) { this.$router.g...

2019-06-11 10:04:55 2432

原创 vscode自定义设置编辑区背景

1.下载插件background2.打开设置,加入以下代码: "update.enableWindowsBackgroundUpdates": true, "background.customImages": ["C:/Users/Administrator/Pictures/cat.jpeg"],//图片的路径 "background.enabled": true, ...

2019-05-25 13:46:37 2123

原创 react中有状态组件和无状态组件的区别和使用规则

state: 用于改变组件内容状态的值(动态)props: 用于组件通信进行传值无状态组件:其实就是一个函数有状态组件,是一个class类,继承了类的组件是有状态组件,App.js就是一个有状态的组件区别:1.有状态组价是可以使用state的,只有继承了Component的组件才可以拥有state进行一些数据的存储和管理,同时可以拥有props2.但是无状态组件不存在state,只会有...

2019-05-25 10:41:50 1750

原创 react使用++或者--改变state状态值问题和Useless constructor no-useless-constructor

写了一个点击事件,点击一下值加一,但是点击事件如下书写无效,并未改变状态值 add() { this.setState({ likes: this.state.likes++ }) }这里应该如下书写: add() { this.setState({ likes: ++thi...

2019-05-25 10:05:19 1555

原创 Windows系统SVN服务器搭建与使用

下载svn:https://tortoisesvn.net/downloads.zh.html下载svn服务器:https://www.visualsvn.com/server/download/(如若只是用svn更新提交代码可不下载服务器)一、下载好svn后点击鼠标右键会看到如下标识。二、打开svn服务器,新建一个版本库三、点击下一步四、输入仓库名称project(名称自定义输入)...

2019-05-24 15:54:05 22662

Video_2019-09-25_161411.wmv

用微信小程序实现给微信头像加小红旗的功能,界面样式与官方微信不一样,但大致的功能点一致。

2019-09-25

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除