qq_43287934的博客

转载 前端开发学习线路

1、学习线路类前端学习路线1 —（阿里云大学）前端学习路线2 —（黑马程序员）前端学习路线3 —（尚硅谷） —课程大纲前端学习路线4 —（尚学堂） —课程大纲前端学习路线5 —（千峰）—（学习路线图）前端学习路线6 —（极客学院）前端学习路线7 —（谷粒学院）自动化构建工具webpack2、框架视频AngularJS视频React视频微信小程序项目实战mpVue视频教程...

原创 react移动端适配之vw适配 postcss-px-to-viewport插件

react 适配移动端

原创 vue中自定义插件

简述再写插件之前，首先我们要弄清楚什么是插件？插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：添加全局方法或者属性。添加全局资源：指令 / 过滤器 / 过渡等通过全局混入来添加一些组件选项添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 API，同时提供上面提到的一个或多个功能。Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。相信用过vue的伙伴都

原创 vue 3.x项目中使用富文本编辑器 ----------wangeditor

官网wangeditor下载wangeditor插件npm install wangeditor --save在要使用的组件中引入使用<template> <div class="home"> <div id="richText" style="height: 400px;background-color: #fff;" ></div> <button @click="getMsg">获取富文本内容</b

原创 vue 3.x中 非父子组件之间的传值

在vue3.x版本中，非父子组件之间的传值需要借助第三方模块儿mitt来实现下载安装mitt模块儿npm i --save mitt2.创建一个js模块儿(bus.js)// 引入mitt模块儿import mitt from 'mitt'// 创建bus实例const bus=mitt();//导出bus实例export default bus;分别在子组件中导入bus模块儿控制台输出bus实例，发现其是一个对象使用emit属性发送自定义事件，on属性监听自定义

原创 vue项目中使用h5+

创建一个plus.js文件let plusExtends = (fn)=>{ if(window.plus){ fn(); }else{ document.addEventListener('plusready', fn, false) }}export default plusExtends在main.js中引入并挂在到vue原型上；import plusExtends from './plus.js'Vue.prototype.$pl

原创 vue脚手架中使用vantui

1.下载安装vant-ui# Vue 2 项目，安装 Vant 2：npm i vant -S2.自动按需引入组件 (推荐)# 安装插件npm i babel-plugin-import -D// 可以在 babel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true

原创 webpack 打包 html js

1.创建项目安装webpack 依赖新建一个demo文件，cmd进去（首先要安装 Node.js， Node.js 自带了软件包管理器 npm）依次执行，npm init -y,生成package.json文件npm install webpack -g 全局安装webpacknpm install webpack --save-dev 项目中安装成功以后构建如下的文件建构，index.html:one.js:main.js:3.打包html,js。打包html需要使

原创 vue项目中使用H5+

安装muinpm i vue-awesome-mui在main.js 文件中引入import Mui from 'vue-awesome-mui';Vue.use(Mui);需要用到H5Plus 的地方首先需要：methods:{// 扩展API准备完成后要执行的操作 plusReady () { var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview },}created () {//

原创 flex 布局 平均分布又可以换行 一个冬季

display: flex; display: -webkit-flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;

原创 微信小程序引入vant UI

1.在小程序项目根目录上初始化npmnpm init 2.执行官方要求的命令：npm install --production3.启用npm4.执行VantUI提供的安装命令npm i vant-weapp -S --production成功之后显示，并且可以看到多了一个：miniprogram_npm 目录（这里就是安装好的VantUI相关控件）：5.使用VantUI控件，首先进行导入：appjson中添加"usingComponents": { "van-butto

原创 nodejs 操作execl表内容

引入node-xlsx模块儿var xlsx = require('node-xlsx'); var sheets = xlsx.parse('./excle/2.xlsx');//获取到所有sheetsvar sheet2 = xlsx.parse("./excle/3.xls") var exe1 =[] var exe2 =[] 读取execle内容sheets.forEach(function(sheet){ for(var rowId in sheet[

原创 nginx+ssl配置https网络协议

配置https server 443 server { listen 443 ssl; server_name 你的域名; //控制时候访问目录所有文件 root html/regiest; index index.html; ssl_certificate cert/申请的ssl.p...

原创 react中withRouter解决props返回为空

使用withRouterimport { Route, Link, withRouter } from 'react-router-dom'export default withRouter(MovieApp)

原创 使用CSS实现按钮点击波纹效果

<div class="container text-center"> <button class="btn btn-default ripple btn-lg">Button</button> <button class="btn btn-default ripple btn-lg">Button with very...

原创 vue cli3.0使用axios跨域请求

1.下载依赖vue add axios2.根目录下新建vue.config.js 配置跨域代理 proxy: { '/api': { target: 'https://yg.icbcyct.com/',//对应自己的接口 changeOrigin: true, ws:...

原创 vue cli3.0 引入 element ui

1.引入vue add elementHow do you want to import Element? -->选择 Import on demand （关键）Choose the locale you want to load–>选择 zh-CN2.回车后，系统会自动配置引入babel.config.jsmain.jssrc\plugins\element.jsAp...

原创 vue cli3.0 打包并在本地查看时页面空白问题

解决办法：执行下面命令：npm install http-server -g然后在dist文件下执行：http-server直接打开上面的网址访问就可以了。

原创 react axios的跨域请求

react axios的跨域请求1.安装npm install axios2.在package.json下添加“proxy”: {“/app”: {“target”: “http://open.douyucdn.cn”,“changeOrigin”: true}}3新增一个http.js文件import axios from ‘axios’;axios.defaults.ba...

原创 react 打包出现空白页面报错

import { HashRouter as Router, Route } from 'react-router-dom'import createHistory from 'history/createHashHistory'const history = createHistory()<Router history={history}> <...

原创 压缩base64方法

//压缩base64方法 function dealImage(base64, w) { var preview = document.getElementById("uploadimg"); var newImage = new Image(); var quality = 0.6; //压缩系数0-1之间 newImage.src = ba...

原创 Vue: 解决打包后element-ui图标字体不显示的问题

在build/utils.js下找到if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-lo...

原创 react 使用element -ui问题Can't resolve 'react-hot-loader'

请安装react-hot-loader最新版本npm install react-hot-loader@next

原创 移动端rem适配

;(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { v...

原创 Nodejs把接收图片base64格式保存为文件存储到服务器上

app.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data:URL var base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""); var dataBuffer = new ...

原创 JS正则(RegExp对象)判断手机号是否合法(表单验证)

function test(){ // 获取手机号内容 let phone = document.getElementById('phone')//DOM let value = phone.value//文本框值 // 判断手机号是否合法 const flag = /^[1][3,4,5,7,8,9][0-9]{9}$/ if(...

原创 JS时间排序

datas.sort(function (a, b) { return a.recordDate < b.recordDate ? 1 : -1; });

原创 js子页面与父页面之间的通信

子页面 parent.postMessage('12212121','/');父页面window.addEventListener('message', function(event) { //显示数据 console.log(event.data) if(event.data){ alert("发布成功")...

原创 js通过FileReader实现多张图片转换成base64

直接上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...

原创 Js实现input上传图片并显示缩略图

function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.onloadend = fun...

原创 elementui把上传的图片转为base64

使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false"> <el-button size="small" type="p...

原创 前端JS Excel解析导入

需要引入：<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.0/xlsx.core.min.js"></script><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...

原创 js 时间戳转换成几分钟前，几小时前，几天前

直接上代码formatMsgTime (timespan) { var dateTime = new Date(timespan); var year = dateTime.getFullYear(); var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var hour = dateTim...

原创 nodejs 使用cookie 实现登录退出登录

登录成功后将用户信息以cookie得形式存起来 res.cookie("token",user,{ maxAge:24*60*60 });设置有效期退出登录删除cookie

原创 nodejs 发送http请求

var request = require('request');var options = {　　　　　　　method: 'get', url: 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+AppID+'&secret='+AppSecret+'&code=5421s2c12...

原创 vue监听手机物理健

在index.html页面中引入mui.js<script type='text/javascript' src='./static/mui.min.js'></script>添加js代码mui.init({ keyEventBind: { backbutton: true //关闭back按键监听 }});// //首页返回键...

原创 简单得js滚动加载

//滚动加载数据$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == ...

原创 webpack前端自动话构建工具

原创 vue开发App监听 手机物理键

// BBBB.vuemounted(){ // 如果支持 popstate 一般移动端都支持了 if (window.history && window.history.pushState) { // 往历史记录里面添加一条新的当前页面的url history.pushState(null, null, document.URL); // 给 p...

原创 react 创建组件的两种方式的 区别

1. 使用function构造函数创建的组件内部没有state私有数据,只有一个props来 接收外界传递过来的数据;2.使用class关键字创建的组件,内部除了有this.props这个只读属性外还有一个专门用于存放自己私有数据的this.state属性,这个state是可读可写的.3. 使用function创建的组件叫做无状态组件,使用class创建的组件叫做有状态组件4.有状态和无状态...