自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原鑫的个人博客

一个前端小菜鸟的进阶历程

  • 博客(71)
  • 收藏
  • 关注

原创 #项目: electron仿客户端QQ简易版

简单讲解electron的起源 — 学习 – 从入门到放弃!仿qq项目地址启动npm installnpm run dev进度:已完成 – 简易登录页,简易聊天页目的:学习electron的开发技术栈:electron + vue全家桶 + elementUi + frozenui学习参考文章:苏南大叔的博客–electron官网–electron-VUE官网e...

2019-07-18 10:03:33 2432

原创 electron 跨域通信

案发现场背景electron 相信大家并不陌生,很多应用都是通过 electron内嵌了一个盒子,生成客户端,这导致electron 和html页面通信极其困难,并且ipcRenderer,ipcMain 和webContents.send并不好用。这时候,骚操作出现了!解决办法在static中写一个js,然后通过ipcRenderer去执行, 而我们的另一端也就是写html的那部分...

2019-05-05 20:27:24 1935

原创 Electron环境搭建

Electron 简介Electron是什么?Electron 是一款用于开发桌面应用的程序,适用于前端开发人员Electorn核心概念Electorn 是基于谷歌内核创建的一个开发工具,可以理解为是一个嵌套谷歌浏览器的盒子。所以,这一设置给前端开发人员带来了便利,也正是因为如此,Electorn分为主进程和渲染进程主进程和渲染进程简单理解渲染进程就是我们前端开发时候的前端...

2019-04-28 16:27:44 438

原创 HTML5原生拖拽/拖放 Drag & Drop实现一个拖拽交换组件

如果不是很了解h5拖拽api的一些特性,请移步->掘金大佬讲h5拖拽的一个帖子由于项目需求,需要实现一个拖拽组件,是一个基于html5实现的一个组件,h5的功能相对来讲已经比较完善了,因为还是在demo阶段,所以目前没有什么定制化功能,只是实现了交换功能目录结构:箭头为我们的组件demo代码:组件源代码<template> <div clas...

2019-04-17 11:19:25 2447 1

原创 react注册事件的时候,为什么要手动用bind改变this

import React, { Component } from 'react';class App extends Component { constructor() { super(); this.aa = 'aaaaa' this.state = { number: 0, xIsNext: true, }; this.ad...

2019-04-16 11:52:29 451

原创 深入浅出设计模式 - 创建型设计模式 - 1.简单工厂模式

引言:最近在学习设计模式,于是仔细研究了一下,决定整理成文章分享出来,对于没有设计模式的小白,再合适不过了,看招吧!盗个图片~ ~ ~~什么是设计模式:我理解的设计模式,就是一种编程的风格和规范,这个概念最早是出现在建筑学中,认为设计风格是一种美学,那我们就把设计模式,当成是编程的美学吧!设计模式分类:创建型设计模式结构型设计模式行为型设计模式技巧型设计模式结构型设计...

2019-04-11 14:25:11 132

原创 vscode中eslint的校验

文中为vue中eslint的校验新版本的vscode和老版本的不同,采用的可视化界面教程:开始->首选项->设置,搜索eslint把代码复制过去,就OK了{ "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "...

2019-04-08 18:20:45 4969

原创 react 文档笔记

react学习1.构造函数中需要手动改变this方法 一:class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 为了在回调中使用 `this`,这个绑定是必不可少的 this.hand...

2019-04-08 10:04:21 207

原创 git记住密码

git记住密码git config --global credential.helper store即使记住密码了,但是第一次还会让你输入一次密码,后续就好了

2019-03-28 18:41:43 195

原创 Yeoman安装和使用详解

Yeoman安装和使用详解转自:https://www.cnblogs.com/weixing/p/6305837.htmlYeomangenerator-react-webpack一 什么是Yeoman  Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化。Yeoman提供generator系统,一个generator是一个插件,在我们在一个完整的项目上使用‘yo’命...

2019-03-18 15:54:09 4968

转载 Tree-Shaking

https://juejin.im/post/5a4dc842518825698e7279a9

2019-03-18 15:33:33 2049

原创 vue滚动加载插件vue-infinite-scroll

GitHub地址:https://github.com/ElemeFE/vue-infinite-scroll安装: npm i vue-infinite-scroll --save使用 &amp;lt;div class=&quot;table__div&quot; v-infinite-scroll=&quot;loadMore&quot; infinite-scroll-disabled=&quot;busy&quot; infi

2019-01-28 15:42:16 2392

原创 JavaScript arguments对象

在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。arguments非常类似Array,但实际上又不是一个Array实例。可以通过如下代码得以证实(当然,实际上,在函数funcArg中,调用arguments是不必要写成funcArg.arguments,直接写arguments即可)。 Array.prototype.testArg = ...

2019-01-23 17:15:09 118

原创 express路由解析

小提示:express 使用了 path-to-regexp 模块实现的路由匹配。req.query: 解析后的 url 中的 querystring,如 ?name=haha,req.query 的值为 {name: ‘haha’}req.params: 解析 url 中的占位符,如 /:name,访问 /haha,req.params 的值为 {name: ‘haha’}req.b...

2019-01-16 16:15:53 913

原创 nodeJs的循环引用

循环引用在平时的开发过程中大家一定碰到过,同样NODE.JS中也会有这个问题,我们做一个测试(1)a.js文件var b = require('../test/b');module.exports.a = 1;console.log('a.js get b:' + b.b);(2)b.js文件var a = require('../test/a');console.log('b....

2019-01-10 15:52:41 1715

原创 node的http模块

http是一个网络传输协议当我们在网络上输入一个域名,首先浏览器会针对域名进行解析,解析成ip地址每一个ip地址都会对应一个远程服务器,服务器会拿到浏览器传来的信息,进行操作,将数据吐给浏览器浏览器进行解析同样node也有这样一个东西!let http = require('http')let server = http.createServer()server.on('erro...

2019-01-09 16:50:45 176

原创 node的文件夹操作

let fs = require('fs')// 新建文件夹fs.mkdir('新建的文件夹', function () {})// 删除文件夹fs.rmdir('新建的文件夹', function () {})// 查看文件信息fs.readdir('./', function (err, file) { // 判断文件还是文件夹 console....

2019-01-08 18:03:43 823

原创 nodeJS读写文件

nodeJS读文件打开文件,然后new一个buffer保存起来,输出fd是打开文件成功的标志let fs = require('fs')fs.open('1.txt', 'r', (err, fd) =&amp;amp;amp;amp;amp;amp;amp;gt; { let file = new Buffer(20) fs.read(fd, file, 0, 20, null, () =&amp;amp;amp;amp;amp;amp;amp;gt;

2019-01-07 17:43:04 2053

原创 node+express+multer+vue+element-ui实现文件上传

实现方式 : ele-ui + express + multer如果你能看到我这篇文章,很荣幸,你一定踩了很多坑,现在node的上传普遍使用multer,这玩意,不同版本使用的方式还不太一样,希望你看完这篇文章,能够在脸上洋溢出幸福的笑容!基于multer 1.41 版本实现的上传系统直接粘代码 &amp;lt;el-form-item label=&quot;文件&quot; label-width=&quot;1...

2018-12-10 18:43:04 3654 3

原创 JS懒加载

当我们打开一个页面时,浏览器就会从上往下读取页面中的标签src中的地址,并且开启线程来进行加载。倘若用户的网速不给力或者此页面中的图片太多时,就会发生每张图片都加载了一点但是都没有加载完成,导致最后没有一个图片能正常显示。一方面让用户的体验非常之差,试问谁会一直耐心的等待着页面的加载?另一方面,加载每个图片都要向服务器发送请求,这会增大服务器的压力。针对这种情况,就需要运用懒加载技术...

2018-12-02 16:00:23 764

原创 webpack4.0+版本练习

webpack安装确保安装 Node.js 的最新版本本地安装(对于大多数项目,官方建议本地安装。这可以使我们在引入破坏式变更的依赖时,更容易分别升级项目)最新的webpack版本是:// 要安装最新版本或特定版本,请运行以下命令之一:npm install --save-dev webpacknpm install --save-dev webpack@&lt;vers...

2018-11-28 08:05:41 759

原创 vue双向数据绑定的实现

总所周知,侦测一个对象变化的方法,常用的两种是Object.defineProperty,和es6的proxy,下面就基于Object.defineProperty实现简单的双向绑定其实vue主要是通过Object.defineProperty实现的,至于vue3.0会不会重写就不得而知,这也是为什么对象的新增属性不好检测的原因!&lt;!DOCTYPE html&gt;&lt;html...

2018-11-22 12:00:24 746

原创 vue 钩子函数 使用async await

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;vue 钩子函数 使用async await&lt;/title&gt; &lt;/head&gt; &lt;body&gt

2018-11-21 19:15:56 2451

原创 git 基于某个分支创建分支

1、拷贝源代码git clone git@git地址cd 项目目录2、根据已有分支创建新的分支git checkout -b yourbranchname origin/oldbranchname3、推送到gitgit push origin yourbranchname...

2018-11-19 19:10:15 12816

原创 vue diff算法 patch

1、diff比较算法图示:diff比较只会在同层级进行, 不会跨层级比较。代码示例&lt;!-- 之前 --&gt;&lt;div&gt; &lt;!-- 层级1 --&gt; &lt;p&gt; &lt;!-- 层级2 --&gt; &lt;b&gt; aoy &lt;/b&gt; &lt;!-- 层级3 --&amp

2018-11-19 17:25:00 733

原创 vuex常见用法

/** * vuex for VisPanel */import Vue from 'vue'import Vuex from 'vuex'import * as types from './type'import store from '@/store'Vue.use(Vuex);const state = { listLenght: '111'}const mut...

2018-11-16 12:41:00 168

原创 Javascript中的valueOf与toString

Javascript中的valueOf与toString基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下。toString()toString()函数的作用是返回object的字符串表示,JavaScript中object默认的toStrin...

2018-11-13 23:26:14 291

原创 css设置文字不能被选中

通过简单的css设置页面的文字无法被选定。1.html:&lt;div class="select"&gt;我不能被选中复制&lt;/div&gt;2.css:.select{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none...

2018-11-13 15:37:37 256

原创 vue项目开发中使用mixins

mixins的使用个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改1.在assets文件夹下创建一个js文件// 创建一个需要混入的对象 export const mixinTest1 = { created() { this.hello(); }, methods: { he...

2018-11-10 13:38:58 1660

原创 浅谈javascript的Event Loop(事件循环)

浅谈javascript的Event Loop(事件循环)无论是面试还是开发,我们总是有一些疑问你:什么疑问?如:不是说好了JavaScript是单线程么,处理的异步代码?为什么我写的一个ajax请求,但是却先执行的下面的console.log?再或者这样,面试官:小王啊,你知道什么是事件循环么?小王:emm…五分钟后…你这次表现的很优秀,但是和我们单位这个岗位有一些偏差,江湖再...

2018-11-09 11:52:51 364

原创 Token 的作用和原理

Token,就是令牌,最大的特点就是随机性,不可预测。一般黑客或软件无法猜测出来。那么,Token有什么作用?又是什么原理呢?Token一般用在两个地方:1)防止表单重复提交、2)anti csrf攻击(跨站点请求伪造)。一般的做法是请求接口的时候,获取最新的Token,然后在发送请求的时候,把Token传过去。一般是在全局的$ajax或者axios中封装抵挡csrf攻击的方法1)T...

2018-11-08 19:03:30 5827

原创 CSS实现背景图片透明而文字不透明效果的方法

1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px).demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center;}.demo1:before{ background: url(http://csssecrets.io/images/tiger.j...

2018-11-07 16:42:22 6147

原创 原生ajax的封装

手写原生ajax ajax(url, data, method, success) { // 异步对象 let ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码 if (method == 'get') { /...

2018-11-07 15:29:09 183

原创 javascript 怎么把值转换为Boolean类型

Boolean(表达式)!!(表达式)

2018-11-06 19:20:59 1188

原创 javascrip的this指向问题

javascrip的this指向问题总结,永远记住。this指向父级的对象,除了父级的对象什么影响不了(call,apply除外),什么块级作用域,函数作用域,统统没用,只有调用的对象能影响!只有调用的对象能影响!只有调用的对象能影响! 在非严格模式。foo()等于window.foo(),严格模式报错!this永远指向调用它的那个对象,如果是window则this指向window '...

2018-11-06 19:18:56 177

原创 vue-cli中如何引入less

安装less依赖,npm install less less-loader --save第二步:进入到build的webpack.base.conf.js加入如下代码 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", },然后&lt;style lan...

2018-11-06 17:10:16 2463

原创 js深冻结

function deepFreeze (o) { var prop, propKey Object.freeze(o) // 首先冻结第一层对象 for (propKey in o) { prop = o[propKey] if (!o.hasOwnProperty(propKey) || !(typeof prop === "...

2018-11-05 20:25:36 660

原创 vue非父子组件传值之发布订阅模式

vue非父子组件传值之发布订阅模式目前了解的组件传值的几种方式props 再熟悉不过了vuex 也比较常用evenbus发布订阅主要说一下发布订阅Vue.prototype.bus = new Vue();其实优化一下,也可以这样Vue.prototype.$subscribe = subscribeVue.prototype.$publish = publish...

2018-10-31 18:27:55 655

原创 如何用express新建项目!

执行npm i -g express到这里还没完 新版的express还需安装express命令 pm install -g express-generator到这里就安装完nodejs和express 下面创建一个项目 express ejs hello加ejs是创建ejs项目 ejs对于新手要好理解点npm install 完美!...

2018-10-26 16:12:35 346

原创 vue-cli怎么和express搭建项目!

1.其实自动解除vue一来,就一直在想这个问题,问题是:express后台有一个服务是3000端口,然后vue-cli又开启了一个8080端口,那么怎么把他们两个结合在一起呢?要跨域吗?部署到服务器的时候应该运行这个npm run dev的命令吗和npm run build的命令吗???等等一大堆的问题2.原因在于现在太多的前端工具帮我们做了太多,而我们只学会了打命令,而没有搞清楚这些命令...

2018-10-26 16:03:57 3180 1

空空如也

空空如也

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

TA关注的人

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