2019年05月_养只猫

原创 node爬虫（牛刀小试）

新建一个js文件引入相关的插件superagent、cheerio、superagent-charset。通过cheerio可以使用jq获取dom的方法来处理请求到的爬虫数据const koaRequest = require('koa2-request') //koa封装的请求第三方接口的方法const cheerio = require('cheer...

2019-05-27 23:09:54 142

原创 vue使用echarts（数据可视化）

安装npm install echarts --save按需引入并在.vue文件中使用<template> <div class='echart'> <div>echarts</div> <div id="myEchart"></div> </div...

2019-05-26 20:25:23 921 2

原创高德地图sdk的使用之路线规划

在之前的vue-amap的使用中发现了一些不足的地方，就是不支持路线规划，因此另寻它法最终找到了高德地图sdk的方式（当然了如果能直接vue-amap实现功能的话还是觉得vue-amap比较方便）index.html中引入高德地图sdk的cdn<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4...

2019-05-25 22:37:48 1145 3

原创 vue高德地图TypeError: v.w.uh is not a constructor错误

这是由于地图实例是异步加载的当.vue文件开始加载地图的时候地图还没完成初始化而获取不到地图实例造成的。错误代码main.js（初始化地图）import Vue from 'vue'import VueAMap from 'vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '3b576d3486dc84a...

2019-05-25 21:41:57 6450 17

原创 vue使用高德地图组件

安装npm install vue-amap引入使用和配置（记得先去申请一个高德地图的账号）import VueAMap from 'vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '3b576d3486dc84adc303919ebc399dba', plugin: ['AMap.Aut...

2019-05-25 20:55:08 1948

原创 vue-cli3.0设置页面icon图标

最近做的一个项目中在用vue-cli3.0创建项目的时候不小心选择了pwa这一个插件，碰到了不能设置网页图标的问题。在最新的vue-cli3.0直接在index.html中设置icon是不行的，需要在vue.config.js中设置一个pwa属性。pwa: { iconPaths: { favicon32: './plug_jchLogo.png', fav...

2019-05-25 11:20:00 10893 6

今天学习了简书上的一个单页面应用seo优化的方法。前后端分离之后，前端各大框架展露头角完美的开发体验也带来了一些问题比如seo，单页面应用相比之前的php，jsp的服务端渲染方式来说是一大不足。为了让我们的项目能让更多的人看到对于seo的优化显得非常的重要。下面是引用了一位简书博主的方法。在打包项目的时候将每个vue文件打包成单独的静态文件https://www.jianshu.com/p/...

2019-05-23 17:03:28 1210

原创 vue监听vuex的store值的变化

直接上代码 computed: { getStoreItem () { return this.$store.state.test } }, watch: { getStoreItem () { console.log(this.$store.state.test,'asfas fas fas') ...

2019-05-20 19:38:41 8645 3

原创 js的深拷贝和浅拷贝

最近在面试碰到了不少自己不懂的东西这里记下来，在写代码之前要先了解一下js的数据类型分为基本类型（字符串）的值和引用类型的值（数组，对象）基本类型当我们let a = 1，b = a，b = 3的时候a和b是完全独立的，这时候的b不是指向内存中的a而是新建一块内存b引用类型当我们像上述的方法改变b的内容的时候a的内容也会改变，因为b的引用指针是指向内存中的a直接上代码<scri...

2019-05-20 19:14:33 87 2

原创 react-router-dom之异步加载路由

这篇文章跟https://blog.csdn.net/qq_40816649/article/details/90172681衔接在一个spa单页面应用中如果项目较小的话异步组件可能影响不大，但是如果是一个大的react单页面项目如果没有使用异步组件，页面会在第一次加载的时候加载所有项目中所有的组件严重影响页面的加载速度，异步组件可以让路由跳转到对应的路由上才去加载对应的react文件，这样页...

2019-05-13 15:15:08 3833 2

原创 react-router-dom路由入门

react的路由和vue个人感觉有很大的不同，感觉vue-router比react-router-dom简单，react-router-dom比较绕。安装npm install react-router-dom --save入口文件中做如下配置；其中react-redux是状态管理。import {BrowserRouter,Route} from 'react-router-do...

2019-05-13 14:50:45 743

原创 create-react-app脚手架使用scss

使用create-react-app安装完项目之后。执行npm install sass-loader node-sass --save-dev安装sass这两个相关的插件。写一个scss文件直接在组件中引入scss文件将工程跑起来然后查看页面好了愉快的写样式吧！！！注意：网上的一些教程都要去node_modules中找react-scripe中的文件进行配置。...

2019-05-09 15:32:02 1576

原创 react-redux的使用

react-redux是之前的博客说过的redux的封装插件，使redux能完美的运用到react中。安装npm install --save react-redux引入在index.js入口文件中引入并改写index.js调用react-redux的Provider作为标签使用并绑定store属性。store属性即为之前博客已经提过的全局数据https://blog.csdn.net...

2019-05-09 14:15:57 144 2

原创 redux的使用以及redux devtools调试工具

redux和vuex一样是用于管理全局共享数据的工具。调试工具工欲善其事必先利其器，打开谷歌浏览器点击这三个点->更多工具->扩展程序点开这个打开chrome网上商店搜索Redux DevTools并安装。出现下面这个图标说明安装成功了接下来看一下目录结构吧src目录下的Store文件就是用来管理共享数据的脚本文件夹。actionTyp...

2019-05-08 17:05:33 7275 2

原创 React Transition Group官方过渡动画的使用

react官方提供了React Transition Group这个动画框架供开发者使用。https://reactcommunity.org/react-transition-group/安装npm install react-transition-group --save引入import {CSSTransition,TransitionGroup} from 'react...

2019-05-07 17:44:31 461

原创 react生命周期函数

和vue一样react也有在某一个时刻会对应执行的生命周期函数。这里我将react的生命周期分为三大部分初始化生命周期compionentWillMount（组件即将被挂载到页面前执行）render（组件渲染）componentDidMount（组件挂载到页面上时执行）props和state更新生命周期componentWillReceiveProps（props独有的pro...

2019-05-07 14:48:37 146 1

原创 react的ref获取dom元素

刚开始学习react，也不知道是运气好还是运气不好，一开始挑了vue作为主要的框架vue的操作还是算比较简单的在三大框架中（拿来即用）。而react相对来说会比较复杂一点涉及到的js原理性的东西也比较多包括es6等等。从vue到react会感觉有很多东西感觉比较新没有见过比如每个事件要bind(this)将定义的react对象绑定到事件上，不然默认this是指向点击的元素而获取不到constr...

2019-05-07 11:58:26 6544 1

qq_40816649的博客