- 博客(62)
- 收藏
- 关注
RSS订阅
原创 深度剖析React中如何实现系统内外的跳转
1、系统内部的跳转效果：单击"跳转"按钮，可以跳转到系统内指定的页面 第一步：定义routerimport Login_Index from '../components/Login_Index.js';//引入页面 <Route path="/Login_Index " component={Login_Index }/> //path:单纯路径 （1）代码实现...
2018-03-23 10:53:33
2436
原创 React中通过tree组件实现不确定层级的折叠菜单效果
1、实现效果折叠菜单的层级可以不相同、可以无限层级，具体根据读取的数据库数据为依据菜单内容读取数据库获得具体效果如下折叠菜单是否可以继续召开取决于前面是否有可召开图标，如下图所示2、实现原理初始化加载页面并未获取全部层级的数据，只是第一层级如果有子层级则呈现可展开图标，可进一步加载呈现下一层级菜单内容，否则没有是否可继续加载呈现下一层级，原理同上3、代码实现分步解析（1）第一步：依赖组件本效果的实...
2018-03-20 16:13:02
9823
4
原创 React中通过diaplay实现控件按钮的呈现与隐藏
1、实现效果通过单击编辑图标实现页面中对应按钮的呈现与隐藏、效果图如下2、代码实现import React, { Component } from 'react';import '../../../style_css/antd.css';import { Layout,Icon,Row, Col} from 'antd';class Index extends Component { ...
2018-03-16 11:41:01
33467
2
原创 React中通过Echarts实现磁贴的呈现与跳转效果
1、实现效果内容模块通过磁贴效果进行呈现双击对应磁贴模块，可以实现不同的页面跳转效果具体效果截图如下双击“个人信息”跳转到如下页面2、准备工作：安装Echarts组件库 安装代码如下npm install echarts --save3、父子页面结构：为友好实现本效果，采取父子页面结构，即真正的磁贴效果在子页面完成，由父页面调用进行呈现4、父页面：index.jsimport React, { ...
2018-03-16 10:56:05
1098
原创 Windows安装git客户端
1、客户端安装工具如下Git-2.12.2.2-64-bit.exe下载地址：https://gitforwindows.org/，界面如下TortoiseGit-2.4.0.2-64bit.msi下载地址：https://tortoisegit.org/，界面如下Git-2.12.2.2-64-bit.exe：是需要安装的git真正工具TortoiseGit-2.4.0.2-64bit.msi：...
2018-03-13 17:48:37
28896
1
原创 申请百度地图API KEY Anaroid 和ios
1、Android：第一步：注册百度地图开发者账号，进行登录第二步：进入首页，将鼠标光标放在“开发文档”上->选择Android地图SDK第三步：进入“立即使用”第四步：创建应用第五步：应用类型选择：android sdk第六步：Android SDK安全码组成：SHA1+包名。(查看详细配置方法)第七步：申请结果2、ios应用类型：ios sdk（其余具体步骤同android sdk）iO...
2018-03-09 17:00:00
1592
原创 react-native error: Each module has to have a unique path.错误解决
1、Error:The modules'MOOC','android'point to same directory in the file system. Each module has to have a unique path背景介绍：使用android studio编译react-native项目，报错如下2、解决方案：将项目android文件下的 ***.iml 文件删掉，重...
2018-03-08 16:55:29
9638
原创 react-native app:compileDebugJavaWithJavac错误解决
1、错误提示效果如图所示:app:compileDebugJavaWithJavac背景介绍：开发react-native项目，平时使用vs code工具开发通过cmd命令运行项目2、协作编程中如果拉取新代码，运行react-native项目，出现如上错误提示，应该是有其他小伙伴修改了Java代码，用android studio打开项目进行编译后再重新运行项目即可，操作图如下使用android s...
2018-03-08 16:41:42
17826
原创 npm 镜像的设置与查看
1、本教程以淘宝镜像为例：http://npm.taobao.org/2、开发ReactNative项目，搭建环境时通过如下代码将npm设置成淘宝镜像npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global3...
2018-03-07 21:37:42
93444
3
原创 JDK的安装及环境变量配置
1、去官网下载安装包，下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html2、下载结果：此教程以安装jdk-8u161-windows-x64为例3、运行jdk-8u161-windows-x64.exe进行安装友情建议：全程可以选择默认安装，一直下一步直到安装成功（因为jd...
2018-03-07 20:05:17
1258
原创 windows下查看python的版本、安装路径
1、进入cmd命令2、查看python版本：输入python 3、查看python安装路径：where python3、python安装x相关链接：http://blog.csdn.net/zrcj0706/article/details/79446689
2018-03-05 16:18:15
133670
4
原创 Python的安装及环境变量配置
1、去python官网下载安装镜像，地址：https://www.python.org/downloads/2、下载结果如下3、运行python-2.7.14.msi 4、安装过程，直接默认安装，一直单击next，直到安装成功第一步： 第二步：第三步：第四步：第五步：5、（win10）环境变量配置第一步：①此电脑右击→②属性→③高级系统设置→④环境变量...
2018-03-05 15:47:08
35076
13
原创 求解字符串所包含子串的个数
1、子串：串中任意个连续的字符组成的子序列称为该串的子串（连续、连续、连续！重要的事情说三遍）备注：空串属于子串2、串中字符均不相同：n个字符构成的字符串，假设每个字符都不一样，问有多少个子串答案：n(n+1)/2+1友情提示：每个字符均不相同解析：包含1个字符的子串共n个包含2个字符的子串共n-1个包含3个字符的子串共n-2个包含4个字符的子串共n-3个.。。。。。包含n个字符的子串共1个空串1...
2018-03-01 10:38:58
72756
17
原创 Ajax网络请求超时处理-timeout
1、相关链接：http://blog.csdn.net/zrcj0706/article/details/786399802、实现效果当网络请求时间超过2秒，则弹出提示框：提示网络不稳定具体效果如下图所示3、代码如下：代码截图具体代码let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/apiP...
2018-02-27 17:44:02
38538
1
原创 浅析package.json中的devdependencies 和 dependencies
1、dependencies和devDependencies 具体代码如下"name": "webpack-react-express", "version": "0.2.0", "private": true, "dependencies": { "antd": "^2.13.11", "babel-polyfill": "^6.26.0", "base-
2018-01-27 09:43:48
56711
3
原创 浅析JS中表示日期和时间的Date对象
1、Date()构造函数 js语言核心包括Date()构造函数，用来创建表示日期和时间的对象 这些日期对象的方法为日期提供简单的API 日期对象不像数字那样是基本数据类型2、Date()构造函数应用实例 var then =new Date(2018,0,24) //2018年1月24日（月份从0开始） 打印结
2018-01-24 22:22:21
754
原创 js-正则表达式
1.基本语法/正则表达式主体/修饰符(可选)修饰符(可选)2.从字符串中提取数字部分2.1提取一个数字(找到第一个匹配后停止) var str= "abc123de4f5";var reg = /[0-9]/;console.log("result:"+str.match(reg ));结果：result:12.2提取多个数字，增加+（找到第一个匹配后停止）...
2018-01-15 11:24:07
412
原创 React中页面的收缩和展开效果
1、实现效果单击当前页面中指定按钮，实现右侧页面的展开和收缩效果具体效果如下2、左右采用栅格化布局:不了解的小伙伴请参考：https://ant.design/components/grid-cn/3、左右页面栅格化占比通过状态机state实现，初始化设置：左侧页面的栅格化占比为24，右侧页面为0（即达到左侧页面全屏，右侧页面不显示的效果），代码如下 //状态机设置constructor() {...
2018-01-15 10:44:37
17326
1
原创 通过props和state实现React子父组件传参
1.实现效果在index页面（父组件）引入一个子组件，改变index中的状态机state,通过props在子组件响应内容的变化页面操作如下在index页面（父组件）引入一个子组件，改变index中的状态机state,通过props在子组件响应内容的变化页面操作如下单击a按钮 通过props和state实现React子父组件传参 > image2017-11-26
2017-11-26 16:56:06
6182
原创 通过componentWillReceiveProps()实现React左右父子页面的联动效果
1.实现效果：通过单击左侧导航栏（父页面）内容，右侧（子页面）内容联动（呈现对应的导航栏内容），具体页面效果如下单击“几何图形初步”，右侧子页面显示“几何图形初步”单击"定义"，右侧子页面显示"定义"2.父页面Slider.js：单击具体列表导航栏抛出对应contentInformation redux，(通过react的antd组件库中的Tree组
2017-11-26 15:08:15
11195
1
原创 Array()数组操作
1.shift()：从集合中把第一个元素删除，并返回这个元素的值var arr= ["a","b","c","d","e","f"];var result= arr.shift();console.log(arr); //["b","c","d","e","f"] console.log(result);//a 2.unshift()：在集合开头添加一个或更多元素，并返回新的长度
2017-11-24 19:41:26
423
原创 react-router 4.2.0<link>页面跳转-传参与不传参
react-router 4.2.0<link>页面跳转传参，直接传值和变量传值
2017-11-19 21:29:37
1704
原创 vue框架中使用fontAwesome图标
1、第一步：安装fontAwesome图标依赖npm install fontAwesome --save2、第二步：在main.js中引入fontAwesome图标依赖import 'font-awesome/css/font-awesome.css';3、第三步：使用图标 <i class="fa fa-address-book-o" aria-hidden=...
2020-03-10 15:17:48
1167
原创 vue中使用svg类型图标
1、第一步：安装解析svg类型图标的依赖库 npm install svg-sprite-loader --save-dev2、配置vue.config.js文件，代码如下 chainWebpack(config) { // set svg-sprite-loader config.module .rule('svg')...
2020-03-10 14:49:59
5446
5
原创 vue中自定义element-ui组件库的主题颜色
前言：在项目中直接修改element的样式变量，前提是需要使用scss编写，这就需要首先在项目中安装可以解析scss文件格式的插件实现效果：element-ui的初始化主题颜色修改后1、第一步：安装解析scss文件格式的插件sass-loader,node-sassnpm install sass-loader node-sass -dev2、第二步：在src下新建t...
2020-03-10 14:17:36
5492
原创 vue中配置开发环境、测试环境、生产环境
前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。1、根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）2、三个配置文件的配置内容如下：.env.development（开发环境...
2020-03-10 11:35:51
31125
5
原创 vue中配置使用element-ui组件库
1、第一步：使用以下命令安装组件库依赖npm install element-ui --save2、第二步：在main.js文件中配置如下代码import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-c...
2020-03-06 11:32:55
2039
原创 使用vue-cli默认配置新建项目后的打包配置方法
新建vue.config.js文件，并配置publicPath（基本路径,相对路径）和outputDir（打包后输出文件目录）module.exports = { // 基本路径,相对路径 publicPath: "./", // 输出文件目录 outputDir: 'dist',}终端运行 npm run build 即可，在根目录下增加dis...
2020-03-06 11:18:35
1041
1
原创 浅析vue中wavesurfer.js的Minimap插件的使用
前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/1046353571、Minimap插件的使用效果如下图所示2、Minimap插件的使用见如下代码首先import引入插件依赖import Minimap from 'wavesurfer.js/dist/plugin/wa...
2020-03-05 15:09:02
1352
原创 浅析vue中wavesurfer.js的Regions插件的使用
前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/1046353571、Regions插件的使用效果如下图所示2、Regions插件的使用见如下代码首先import引入插件依赖import Regions from 'wavesurfer.js/dist/plugin/wa...
2020-03-05 14:48:45
2667
原创 浅析vue中wavesurfer.js的cursor插件的使用
前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/1046353571、cursor插件的使用效果如下图所示2、cursor插件的使用见如下代码首先import引入插件依赖import CursorPlugin from 'wavesurfer.js/dist/plugin...
2020-03-05 14:39:38
2279
4
原创 浅析vue中wavesurfer.js的Timeline插件的使用
前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/1046353571、Timeline插件的使用效果如下图所示2、Timeline插件的使用见如下代码首先import引入插件依赖import WaveSurfer from 'wavesurfer.js'//wavesur...
2020-03-05 14:26:14
3049
2
原创 浅析wavesurfer.js中的各大监听事件
前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/1046353571、在使用wavesurfer.js插件时，可以设置各种监听事件，比如播放完毕触发什么方法，设置静音时触发什么方法等等，该插件官网有自定义好的各大事件的识别，只需要使用on方法设置监听即可，如下代码：//音频暂停时的监...
2020-03-05 11:21:30
3324
原创 WaveSurfer.js插件中WaveSurfer.create时的参数（options）配置含义
前言：vue框架嵌入使用WaveSurfer.js的方法，详见此文章：https://blog.csdn.net/zrcj0706/article/details/1046353571、WaveSurfer.create时的参数配置如下代码中的注释 this.wavesurfer = WaveSurfer.create({ // 应该在其中绘制波形的CSS选择器或HTM...
2020-03-04 14:15:37
1704
1
原创 Vue中整合使用wavesurfer.js声纹可视化插件
前言：Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件，功能十分强大，在Vue框架中嵌入使用该插件效果图如下：1、第一步：使用以下命令安装wavesurfer.js插件库npm install wavesurfer.js --save2、第二步：在需要使用的页面import导入wavesurfer.js和其中的时间轴timeline...
2020-03-03 17:22:50
9275
8
原创 vue引用本地静态资源（图片、音频、视频）
说明：本文章用于说明引用项目下本地资源（图片、音频、视频）的引用方式，从后台服务器获取的资源并不完全适用1、第一种引用方式：直接在<template>中引用，src中使用相对地址<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <...
2020-03-02 16:19:09
6061
原创 idea中导入maven项目并运行
1、第一步：导入maven项目（1）选中File-New-Project From Existing Sources（2）找到项目所在位置，并选中pom.xml文件，点击“ok”（3）勾选下图标红部分，点击“next”（4）select profiles，一般默认初始化勾选，选择开发环境配置，点击“next”一般我们在做一个正式的项目的时候会分为开发、测试和生产三种...
2020-02-28 16:56:01
31538
2
原创 将项目初始化提交到GitLab上
1、第一步:在GitLab上创建一个空的新项目，教程详见以下链接https://blog.csdn.net/zrcj0706/article/details/1045508512、第二步：如果你电脑上是第一次使用该GitLab链接（非第一次可以不用配置，说明之前已经配置过），需要全局配置用户名和邮箱，代码如下】git config --global user.name “你的用户名”...
2020-02-28 11:08:56
2569
1
原创 如何在GitLab上新建空白项目（Blank project）
1、第一步：点击“New project”新建项目2、第二步：在“Blank project”模块中填写相关信息
2020-02-28 10:26:42
3661
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人