1只小菜鸟-优快云博客

原创记录一次react项目--实现自动路由的动能

前言：每一次新建页面时都要去router新建路由麻烦的很，所以写了一套自动话路由，虽然对于复杂应用还不够成熟，但是对于没有过多动态路由的项目来说足够了；有不足处欢迎指出；没有多余的解释，直接看代码就好了，看效果可以在拉一下git， yarn install 之后 yarn start test 看一下效果git地址：https://github.com/vpi5/webpack...

2020-04-16 09:43:38 586

原创记录一次create-react-app框架优化--动态改变配置文件

前言：在前端负责应用开发的日常中，会经常性变更项目访问地址以及请求地址，那么如果每一次都去手动更改会显得代码不够智能化，那么基于以上的需求呢，自研了一套 react 开发动态变更项目配置，不多说直接看代码，本文最后会贴出 git 地址；效果说明：当执行 yarn start dev 时那么就启动开发环境的配置；当执行 yarn build test 时那么就打包测试环境 ...

2020-04-16 09:35:07 522

原创 create-react-app在src目录之外导入限制

error：Relative imports outside of src/ are not supported.问题地址：https://m.imooc.com/wenda/detail/582417产生问题的原因：webpack.config.js中配置了 new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),导致限制开...

2020-04-15 15:01:12 2433 3

原创 webpack4添加打包/启动进度条

webpack4添加打包/启动进度条npm install webpackbar || yarn add webpackbar在 webpack.config.js 中添加：首先，引用 webpackbar 插件const WebpackBar = require('webpackbar');然后查找 module.exports 中 return 中的一级 plugins 变量 ...

2020-04-15 13:36:48 5900 3

原创 antd日期选择框中文（国际化）设置

使用antd这个UI组件确实很好用，但是他属于面向国际的，所以在一些特定的组件需要使用国际化文字上的转变；可以看到提示的文字都是英文，包括鼠标停留事件也是英文的，那么在你的代码中这么写就可以了import React from 'react';import {DatePicker } from 'antd';//引入国际化设置（中文）import locale from 'antd/l...

2019-03-14 11:22:01 10816

原创 VMwar 安装 Linux（CentOS7 - 64位）系统

1、新建虚拟机2、添加 CentOS ISO镜像文件3、分配磁盘4、自定义硬件信息5、分配好硬件信息关闭6、点击完成7、进入下图页面，点击开启虚拟机8、出现任何界面按回车键（抱歉忘了截图了！！）9、进入以下页面找到简体中文选项10、点击继续进入下图（时间什么的自己校准昂）11、点击选择安装的系统盘（我是选的自动分区，看自己喽）...

2019-02-25 17:09:41 286

原创 localStorage和sessionStorage数据缓存机制（H5新特性）

localStorage和sessionStorage 只兼容至IE8；所缓存的这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁；使用起来非常的简单不多说看code！if(!window.sessionStorage){ alert('您的浏览器不支持H5缓存数据特性！'); }else { let session = win...

2019-02-25 09:59:35 870

原创 react项目使用 switch ... case ... 语句

不多说，应该都懂什么意思，看code：但是不得不说 switch 是个好东西，比 if else 好用的多，但是一定要记住，react是必须要返回的，如果没有返回null也是可以的，否则一定会报错。import React from 'react';import './index.less';export default class Life extends React.Compone...

2019-01-24 11:23:28 7070 1

原创 render方法中map循环添加点击事件失效，解决办法

react项目工程避免不了在render方法中进行一些js事件，我在做项目的时候也遇到了一些小小的问题；render方法中map循环数据，返回jsx语法时 onClick事件失效，这是一个this指向问题，做一下this转义即可；看code：import React from 'react';export default class Life extends React.Componen...

2019-01-24 11:03:53 3095

原创 css文字两端对齐 text-align: justify;

实现这个效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ wi

2019-01-23 12:45:57 461

原创 react集成antdUI组件按需加载定制主题色

安装 antd UI组件执行以下代码：//安装 antdyarn add antd//安装UI组件css样式yarn add babel-plugin-import在wabpack.config.js中替换以下代码//修改less模块，添加antd less-loader 解析{ test: /\.less$/, use: ...

2019-01-23 11:39:14 1521 3

原创暴露webpack.config文件并修改自己项目需要的样子

很多人都在问yarn是什么，如果你知道npm是什么那我能告诉你yarn是跟npm/cnpm一样的包管理工具，只是它比npm更加优秀，更加稳定。暴露webpack.config文件，依次执行以下代码：//暴露package.json中的script中的eject文件yarn eject//命令行会问你：这是一个单向操作，确认操作后不可逆转/返回。y//但是会报错：原因是没有提交代码，...

2019-01-23 11:00:16 2899

原创 react全家桶项目从零搭建

现在一般大家都知道像这种MV*、MVC、MVVM框架都不能缺少强大的nodeJS，本项目依赖nodeJS、npm/cnpm、yarn管理项目，依次执行以下代码：//安装create-react-app脚手架cnpm install -g create-react-app//查看脚手架版本号 => 确认是否安装成功create-react-app --version//创建一个新的项...

2019-01-23 10:39:37 701

转载关于Antd 时间选择组件文字转换为中文（国际化设置）

Ant Design 官方的文档好像没更新，反正是用起来没配成功，官方的文档和代码也是互相矛盾，我来介绍下我是怎么做国际化的。Antd 的国际化依赖于 yahoo/react-intl。在看这篇文章之前，建议大家看看 antd/antd-mobile 国际化方案。这篇文章并不是一个 Start Guidelines。文件目录如下src/locales 里面放国际化相关资源l10n.con...

2019-01-18 15:16:29 13137 1

原创项目踩坑记录ajax使用post方法向后台传Form Data的方法

其实ajax默认就是一个From Data类型的参数包，但是有些时候代码的一些结构会改变你的默认数据包，但是后台还是需要From Data类型，那么你就应该手动对参数进行包装，包装From Data类型如下：注：自己手动创建的From Data的表单域。let fm = new FormData(); //fm.append(属性:属性值); fm.append('id', id)...

2019-01-03 15:27:52 5896

原创项目踩坑，antd截取upload上传的图片file对象，存储在state中。

在项目中有项需求就是上传图片，但是跟后台约定的是上传file对象的同时post传值type和position的值，antd官方提供的案例是通过action:'接口链接’参数直接上传到接口中，所以我们需要截取一下file对象并存储到state中，在点击按钮的时候上传file、position和type的值。下面的详解：1、首先在andt官网中复制好想要的上传组件案例；2、通过beforeUpl...

2019-01-03 11:36:35 13027 1

原创使用react-amap高德提供的接口简单化实现地图

本篇文章主要介绍的是在React工程中使用react-amap组件来写一个地图，地图上加一个点标记；注意：目前的本人发现在使用react-amap会对 umi 搭建的工程有所影响，建议使用原生高德api（document.ejs【可以看我的上一篇博客，我有详细的写过怎么使用】）来自己手动做个地图可控组件，虽然稍微有点麻烦，但是毕竟项目上线这个方法比较安全。下面看一下我的组件是怎么写的吧...

2018-12-27 16:12:04 4653 4

原创 React工程写一个HTML富文本编辑器，顺带上传图片功能。基于react-draft-wysiwyg、draftjs、antd使用

公司项目要求要写一个富文本编辑器，好像之前一直都没有写过这个稀奇古怪的东西。不多说看方法！使用npm安装：react-draft-wysiwyg、draftjs-to-html、antd；安装好了之后，我的组件是这样写的；ps:{react-draft-wysiwyg : 是开元的，GitHub地址： https://github.com/jpuri/react-draft-wysi...

2018-12-27 09:55:33 3610 2

原创 React工程使用渲染高德地图（原生）、引用document.ejs模板、高德地图3D热力图。

首先呢，先说下document.ejs，它是一个HTML模板库，在React中的主要作用是引用一些npm包不存在，而恰巧你又需要使用的库或插件。接下来说一下使用高德地图原生API在React中使用，先看一下我的document.ejs的配置 ps:密钥用自己的哦，我就不贴出来了。[申请高德地图密钥](https://lbs.amap.com/api/android-sdk/gu...

2018-12-27 09:27:20 4166 2

原创继上篇文章写到JQuery写的横向滚动公告后，在对接后台数据时发生一些小问题。

继上篇文章写到JQuery写的横向滚动公告后，在对接后台数据时发生一些小问题。在调取到后台返回的数据后，marquee函数不在UpData更新text的Width，这个问题不大，实际上只需要在componentDidUpdate时将textWidth指向到this上即可，在marquee函数中将this转义为self即可，不多说直接上代码。import React from "react";i...

2018-12-25 10:07:49 218

原创使用jQuery写一个网站通知公告横向滚动（注：react组件）

前一篇文章写了用纯css3的方法写一个网站上的公告横向滚动；本篇文章使用jQuery的方法写一个动态横向滚动公告；ps:本jQuery写在React组件中了；由于React用的时间较短，有代码上的不规范或者不简洁的地方请见谅~附上代码~~import React from "react";import * as styles from './notice.less';import {...

2018-12-17 16:00:13 1368

原创纯css打造网站通知滚动样式，循环轮播。

下图为我们要做成的样式；不多说直接上代码！//css样式.box { width: 300px; margin: 0 auto; border: 1px solid #ff6700; overflow: hidden;}.animate { padding-left:...

2018-12-17 09:47:17 3068 1

原创数组排序大法！arr.sort((x, y)=>{returen x.value - y.value})

let arr = [{name:‘张三’, value:200},{name:‘李四’, value:50},{name:‘王五’, value:100},];console.log(arr.sort( (x,y) => Number(y.value) - Number(x.value) ) );

2018-12-11 15:28:10 1694

原创 React基于ES6语法糖判断数据存放在哪个数组中。

/* name:'李小小'， time:'2018-11-22', type:'React <---> demo'*/import React from 'react';let inArray = function (item,array) { if(!array || array.length === 0) return false; f...

2018-11-22 11:41:19 733

原创 React工程中使用echarts-gl进行制图踩坑记录；注：npm拒绝了echarts-gl的安装

报错原因：文件夹名称与npm安装的框架名称相冲突，导致报错，并非node或npm版本问题。最后总结一句话：不够成熟的程序猿写demo的时候都喜欢用练习的框架名作为本次demo工程的名字这真的是个不好的习惯，希望大家以我为戒，千万不要在这么干了，图上将package.json中name的值替换掉即可；...

2018-11-19 11:57:42 2988 1

原创 es6 对Object数组进行指定属性的值进行排序，升序降序 ==> JS

对JS中常见的数据进行排序，不需要在通过循环进行单个的排除，节省了很多代码逻辑量==> 在 compare(prpertyName)函数中可以在加入 type 的属性，方便在函数中进行判断需要输出升序降序，在js原生中我没有添加，我会在以下附上 js 原生的代码和 React 组件的代码，不多说直接上代码。==> 小弟刚刚接触没多久，可能逻辑上比较复杂，大拿们勿喷！...

2018-11-06 11:41:48 18991 2