自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端笔记

针对博客文章中的任何疑问、建议,请看官留言,本人看到后会及时回复。

  • 博客(52)
  • 资源 (3)
  • 问答 (1)
  • 收藏
  • 关注

原创 VSC系列 | 自动刷新浏览器——Live Server(插件篇)(十一)

问题描述有时候,项目编辑后不能自动刷新浏览器,那么就需要手动刷新浏览器,这样就非常麻烦。在VSC中如何实时预览页面呢?解决办法1、搜索并安装插件Live Server2、右键点击“Open with Live Server”。此时会开启一个本地服务器。效果图自动刷新...

2020-01-22 10:50:30 3564 9

原创 VSC系列 | 实时预览Markdown——Markdown Preview Enhanced(插件篇)(十)

问题描述在VSC中如何实时编辑或查看.md文件解决办法搜索并安装插件 Markdown Preview Enhanced效果图打开一个.md文件测试看看是可以实时查看效果...

2020-01-17 09:31:31 2290

原创 解决在浏览器打开Axure失败的问题

在预览axure项目时,经常会遇到打开失败的问题,会直接跳转到resources/chrome/chrome.html解决办法:用编辑器打开index.html,注释下面这段话。再打开就可以正常浏览了...

2019-11-07 10:50:08 5716

原创 用vue自己封装一个分页组件

准备知识:全局配置组件(本文不赘述,可自行百度)先来看下效果。非常简单的效果。事件上仅改变页码,无其他。1、新建文件pagination.vue。简单解释下:先写DOM结构和样式,接着是事件。写事件很简单,点击按钮改变页码,并传递页码信息给父级。 传递进来的参数需要接收,并赋值给当前组件。<template> <div class="page-w...

2019-08-20 10:26:22 3624 3

原创 垂直时间线代码

<!DOCTYPE html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2019-07-23 18:15:50 620

原创 stylus系列 | 普通Html页面如何使用stylus语法

stylus介绍stylus是一个css预处理框架。来自node社区,主要用来给node项目进行css预处理支持stylus文件后缀是 .stylstylus安装比如可以在CSS文件夹中,按住shift键+右击,在命令行工具中输入$ npm install -g stylus自动化编译新建example文件夹 新建css文件夹 新建css/styl...

2019-07-14 23:35:28 1816

原创 swiper系列 | 轮播图高度问题

它的轮播图高度,是以最高的图片定轮播图区域的高度。

2019-07-12 14:59:39 5037

原创 swiper系列 | 给分页器修改颜色

先来看下,默认的状态是蓝色:通过CSS,改成绿色:.swiper-pagination-bullet-active { background-color: #52B54B}现在来看下,效果

2019-07-12 14:49:28 10762 5

原创 swiper系列 | 轮播图横向显示异常处理办法

习惯写手机端页面,添加一句*{margin: 0px;padding: 0px};在利用swiper插件写轮播图时,就会出现下面这个情况:后一张轮播图有部分显示异常。调试了很久,才发现是margin: 0px;这句影响的。不添加margin: 0px;又不行,会有边距。原来,解决办法是,在body标签中,添加CSS:<body style="margin: 0">。...

2019-07-12 14:40:32 3263

原创 element-ui | 同步执行请求,后台返回的数据给函数返回值return

公共函数文件util.jsimport { getMenuKey, initButton } from "../api/userMG";//引入自定义接口//定义函数const limitPower = (path) => {//path为函数参数 return new Promise((resolve) => { getMenuKey({//调用第...

2019-07-10 14:23:43 4501

原创 Echart系列 | 绘制世界地图含中国各个省份(地图篇)(一)

步骤一先绘制一张世界地图,这一步为基础工程,代码+效果图附下:world.json链接:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ提取码:oe9w<template> <div class="content"> <!-- 设置容器ID,宽度1920PX,高度1080PX --> ...

2019-07-08 11:41:26 9130 12

原创 element-ui | 第一次表单验证的结果,在第二次表单验证时仍然存在

今天来看个问题:第一次表单验证的结果,在第二次表单验证时仍然存在。怎么解决呢?解决办法:在窗口打开时,对该表单项进行重置,将其值重置为初始值并移除校验结果if (this.$refs.editForm)this.$refs.editForm.resetFields();注意!!!!一定要加if (this.$refs.editForm),因为第一次打开是undefine...

2019-05-15 14:01:29 8017 4

原创 工具 | 推荐一款录屏工具

一款很棒的录屏工具,推荐给大家。详细文章可看这篇文章LICEcap – 灵活好用,GIF 屏幕录制工具。主要是说LICEcap是gif录屏软件,轻量级,使用简单,并且无水印哦~(很多gif录屏软件还需要付费去水印,这点真的非常良心。)安装:下载地址--------------官网下载地址选择window或ios版本下载,文件大小--------------下载后的文件仅228K...

2019-04-02 09:05:03 1568 3

原创 开发小工具合集

产品经理墨刀原型设计与协同工具,缺点:付费

2019-01-14 14:47:24 460

原创 VSC系列 | Visual Studio Code格式化代码的快捷键(九)

On WindowsShift+Alt+F On MacShift+Option+F On UbuntuCtrl+Shift+I

2018-12-24 09:36:19 15774

原创 以前我的笔记本F5键是刷新,现在要Fn+F5才是刷新怎么改回去啊?

按住  Fn + Esc  即可

2018-12-21 18:26:52 12052 2

原创 VSC系列 | 解决误触导致界面放大很多(八)

一次偶然,误触到一个快捷键,界面就变大了。变大的部分包括编辑器的所有内容,就像一张图片,被放大一样,但功能都能使用。搜了很久,才发现是在这儿设置的~(细心的你,一定发现编辑窗口目前是6个文件)还是习惯界面上的文字/图标都小一些,可以看到更多内容。目前已恢复如下:(细心的你,一定发现编辑窗口现在是8个文件)修改配置:这个功能有点类似开车前调主驾驶座位,一次调后,基本就不...

2018-12-10 13:15:04 9592 3

原创 求解 | layui中table重载参数请求传递异常(参数乱码)

有一个按钮,id是search,当点击按钮时,执行点击事件。点击事件为,打印一个字符串和表格重载。问题是:为什么code的名字变成了一个随机的字符串???哪位大神能告知?...

2018-09-25 10:59:21 3180 4

原创 VSC系列 | visual studio code 快捷键官方pdf 可打印,中文版 window(七)

引用了https://blog.csdn.net/crper/article/details/54099319 的翻译自己把官网打印稿中的英文替换了一下,方便打印出来平常使用。官方PDFPSD下载地址JPG下载地址打印一张看下:这个使用率倒是不高,要是有童鞋觉得需要,可以下载看看。...

2018-09-10 10:51:33 3053

原创 使用postman测试上传图片

在Headers部分不要写任何东西, 之前是有Content-Type头信息, 所以上传失败.Body部分文件命名看后台约定.

2018-08-22 14:25:10 10383

原创 postman测试上传文件

输入url:http://127.0.0.1:8081/uploadfile选择post方式选择body选择form-data,text改为file输入key:file ,value:选择文件send即可

2018-08-22 14:00:26 1339 1

原创 获取postman的form-data数据的中间件

记录一下获取postman的form-data数据的中间件var express = require(‘express’); var bodyParser = require(‘body-parser’); var multer = require(‘multer’); var app = express();//for parsing application/json app....

2018-08-22 09:33:53 2291

原创 NodeJS | 模块的概念(二)

Javascript天生的缺点熟悉JS的都知道,我们可以通过var或function定义一个全局访问的变量或函数。但是当有多人协作或大量引入JS文件时,那么变量和函数就很容易重写和覆盖,特别是有很多依赖关系的时候,很容易出错。这是因为Javascript天生就缺少模块管理机制,来隔离JS片段相互影响,因此我们常采用命名空间的方式:将变量和函数限制在某个特定的作用域内。从而保证代码安全执行。...

2018-08-21 09:09:15 151

原创 NodeJS | nodejs中操作mongodb数据库 非接口(六)

新建test.js,输入代码,前提需引入模块mongodb//引入mongodb模块,获得客户端对象var MongoClient = require('mongodb').MongoClient;//连接字符串var url = 'mongodb://localhost:27017/testdb'; //定义函数表达式,用于操作数据库并返回结果var insertData...

2018-08-21 08:42:40 201

原创 NodeJS | node3224错误:useNewUrlParser 警告解决办法(七)

关于警告 DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.的正确解决方法如下...

2018-08-21 08:38:11 8122

原创 NodeJS | 写一个静态的get接口(五)

引入模块express$ npm install express --save新建app.js,输入代码var express=require('express');var app =express(); //设置跨域访问app.all('*', function(req, res, next) {   res.header("Access-Control-Allow-O...

2018-08-20 15:51:10 847

原创 NodeJS | 连接mongodb数据库成功之后报db.collection is not a function错误解决办法(四)

在nodejs操作mongodb显示数据库连接成功之后突然报了db.collection is not a function错误,引起这个错误的原因是nodejs获取数据库表的API写法不对。(正如NodeJS | 入门篇 (一)提到的,不同版本的API,使用规范有差别)。修改方式如下:var MongoClient = require('mongodb').MongoClient;var...

2018-08-20 14:59:58 1072

原创 Mongodb系列 | mongo环境下操作数据库入门篇(三)

进入环境正确安装和配置了mongodb,接下来怎么使用?往下看,我们可以在安装位置bin文件夹下,打开命令行工具,输入下面查看版本号,并进入mongo环境。(然后就可以通过网络上的很多命令语句对数据库进行操作)mongo//查看版本号,并进入mongo环境常用操作命令1、基本操作show dbs 显示所有数据库列表use MENU_DATA 进入某数据库(没有则创建)...

2018-08-20 12:06:51 203

原创 cmd | window如何用管理员身份打开命令行工具(三)

windows 7系统找到“附件/命令提示符”,右键“以管理员身份运行”

2018-08-20 11:31:38 4214

原创 cmd | 常用命令行操作(二)

dir 查询目录结构 cd my-project是转到文件夹 cd ..回到上一级 d:是转到D盘 tree /f 查看对应目录结构

2018-08-20 11:26:56 280

原创 MongoDB系列 | 可能出现的问题:windows下安装MongoDB进度条不动(二)

windows 下安装MongoDB, 在 Installing MongoDB Compass...(this may take a few minutes)一步,会停留很长时间,点击取消可能也会取消不了。解决办法:首先关闭原来的安装程序,打开任务管理器将该应用程序关闭,还需要将进程下所有msiexec.exe关闭。关闭干净,重新安装到这步时,不要勾选install Mago...

2018-08-20 10:58:28 1406

原创 NodeJS | 如何连接mongodb数据库(三)

1、新建app.js文件,输入代码var MongoClient = require('mongodb').MongoClient;//引入mongodbvar url = 'mongodb://localhost:27017/MENU_DATA';//mongodb的数据库地址MongoClient.connect(url, function (err, db) {//连接数据库 ...

2018-08-19 01:09:29 3314 2

原创 mongoDB系列 | windows下安装和配置mongoDB(一)

完成下载安装→配置→请求的服务已经启动下载/安装MongoDB的安装非常简单,除了安装路径可以自己选择之外,其它的步骤一直点下一步就行。不过速度比较慢(有185.87M),请耐心等待~~~(官方下载地址:https://www.mongodb.com/download-center#community)最好改下安装位置到D盘,点“Custom”,然后继续一直下一步配置...

2018-08-16 02:24:59 216

原创 NodeJS | 入门篇 (一)

前言我们都知道javascript现在非常火,javascript之前只能在客户端使用,现在nodejs让javascript可运行在服务器端。也就是说,利用javascript编写原来后台人员做的事。是一个跨时代的转变。了解下nodejs的概念。虽然nodejs有js后缀,却不是js插件,而是JavaScript的运行环境,意外吧!更厉害的是,nodejs运行环境让javascript不...

2018-08-15 13:08:17 391

原创 VSC系列 | 代码快捷输入法(插件篇)(六)

插件:Atom JavaScript Snippet编辑器写console.log()的频率有多高,想必大家最熟悉不过了吧~老老实实的一字字打,也太实在了,VSC里通过插件就可以“log+Tab”,补全console.log()。步骤1:搜索tom JavaScript Snippet,一定要看介绍哦,里面除了【log简写】,还有许多其他常用的~步骤2:安装并重新加载常用简...

2018-08-14 16:45:37 4239

原创 实用工具 | 谷歌JSONP Viewer 插件 方便查看JSON数据

你有没有遇到这样一种情况,后台提供的接口数据是这样的,自己浏览器打开后,分分钟抓狂有没有~为了观看起来结构清晰,我用过编辑器打开,类似将内容拷贝到新建一个.json文件之类的~不过,这样真心巨麻烦~查到一种方式,安装谷歌浏览器插件:JSONP Viewer步骤:下载网址,GitHub上下载,网址:https://github.com/search?utf8=%E2%9C%93&amp;...

2018-08-10 11:55:56 9354 4

原创 修改CSDN博客的用户名

只能修改博客主页的名字,不能修改用户名具体看文章:https://blog.csdn.net/weixin_40817115/article/details/81235305

2018-08-10 11:09:39 400

原创 cmd | Window快速打开指定目录命令行(一)

window 7系统选择目录,SHIFT+右键,选择“在此处打开命令窗口”window 10系统类似的window 10系统,一样是选择目录,SHIFT+右键,选择“在此处打开Powershell窗口”。...

2018-08-10 10:46:47 6306

原创 TypeScript开发环境搭建

1.安装Node.jsnode -v这里不说怎么安装,在命令行中,输入上面,看到版本号,说明已经安装成功。2.安装TypeScript包安装(大概1分钟)npm install typescript -g检查(能看到版本号说明成功)tsc --version3.编写HelloWorld程序(1)进入编辑文件夹使用 npm init -y 初始化项目,生成p...

2018-08-03 10:02:28 461

原创 Echart系列 | echarts折线图左右的空白部分怎么去掉

var echarts_02 = echarts.init(document.getElementById('echarts_02'));echarts_02.setOption({ legend: { left: 'left' }, xAxis: { data: ["引锭杆上行程开关", "引锭杆中行程开关", "引锭杆下行程开关"]...

2018-07-27 14:50:27 14015

echart世界地图的JSON单文件world.json

这一份是世界地图的JSON文件,国家名称为英文,不含中国省份的。该文件比较容易获得,也可以自行查找其他网页。

2019-07-08

visual studio code 快捷键速查表(JPG中文版)

官方英文版的快捷键速查表 直接翻译了快捷键说明,可以方便打印使用。上传JPG版本,可以直接打印

2018-09-10

visual studio code 快捷键速查表(中文版)

官方英文版的快捷键速查表 直接翻译了快捷键说明,可以方便打印使用。上传PSD版本,可以直接打印,也可以自己再次修改

2018-09-10

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

TA关注的人

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