- 博客(82)
- 收藏
- 关注
RSS订阅原创 安装appium，使用命令appium-doctor，提示ANDROID_HOME is not Set解决办法
配置appium环境的时候，按照教程“移动端自动化测试-Windows-Android-Appium环境搭建”，地址为：https://www.cnblogs.com/feng0815/p/8179714.html注意:SDK build-tools/这个工具的安装，可以通过直接安装android stdio(安装好之后自带这些功能)按照这个上面安装appium的教程。我发现在运行appium-doctor的时候提示“ANDROID_HOME is not Set。“网上的很多方式例如：将ANDR
2021-05-20 15:19:33
1887
1
原创 openjdk version “12.0.1“的安装与使用
参考配置地址：https://www.cnblogs.com/90s-ITBoy/p/13388486.html说明，由于改版本比较新，不用再去配置系统的环境变量CLASSPATH里面对应的路径
2021-05-20 14:49:07
584
原创 使用cmd命令创建指定大小文件
1.打开电脑的cmd(windows + R)2.输入命令:fsutil file createnew e:\2GB.txt 21474836483.等待cmd运行完成，即可以在指定盘创建一个指定大小的文件，这里是在E盘中创建一个2G的txt文件备注：2147483648指2GB对应的字节数...
2020-10-12 10:01:50
9828
原创 python处理txt文件
python处理txt文件1.因为遇到需要大量处理相同格式的数据，这里用到python的一个小脚本来处理首先。需要处理的文件大致上是如下格式：可以看出来，这都是一些电话号码，然后里面全部都是以中文的逗号结尾2.使用脚本来实现思路如下：将需要处理的数据放入一个文本文档，将此文本文档放入脚本相同文件夹下。使用python的文件读写操作，将该文本文档以r+方式全部读出。针对拿到的字符串进行替换操作，将句号全部替换为换行符\n，最后写入一个新的文件即可代码如下：f = open("1.txt", "
2020-10-10 13:23:08
5176
2
原创 10.component动态组件
1.当我们在需要用到多个类似功能组件的时候（如导航栏），按照原始的写法会非常麻烦，先看一下原始的写法：这里实现的是点击哪一个页面，该页面相对应的内容也显示出来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>props传值<...
2019-07-16 19:56:33
814
原创 06.render函数
1.render函数，称为渲染函数，render函数接收一个createElement方法作为第一个参数用来创建VNode，当我们在vue中使用此函数时，同个id下的其他的内容都会被render排挤掉，只显示render函数中的内容，如下：<!DOCTYPE html><html lang="en"><head> <meta charset=...
2019-07-12 16:12:32
279
原创 29.登录功能的实现
1.首先我们需要用redux来管理数据，在login目录下新建新建一个store文件夹，在store文件下新建4个文件：index.js,reducer.js,actionTypes.js,actionCreators.js2.在reducer.js文件中，我们定义一个初始的默认值：3.然后我们需要在src根目录下的store的reducer中，添加login下面的store4.在我们浏览...
2019-06-16 16:28:57
192
原创 28.登录页面的布局
1.我们首先在pages目录下新建一个文件login2.然后我们在login中新建一个index.js，里面定义一些初始的代码：import React,{PureComponent} from 'react';import {connect} from 'react-redux';class Login extends PureComponent{ render() { ...
2019-06-14 15:57:26
1331
原创 27.详情页面路由参数的传递
1.当我们点击详情页时，我们希望可以知道此时的id是多少2.我们在home目录下的List文件中，在Link中加上一个id，并且把详情页的item的id加到detail3.在APP中，我们在path路径下加上/：id4.这时候我们点击第一个详情页，可以发现5.在index文件中，我们打印输出一下this.props.match.params.id6.然后我们将this.props.ma...
2019-06-14 11:39:03
270
原创 26.详情页面异步获取数据
1.我们实际开发中，数据都是从后端获取的，并且可以更改数据，我们这里再public文件下新建一个json文件，用来模拟我们实际开发中从后端获取的数据，并且我们通过ajax获取异步请求2.在detail文件中，我们存放数据{ "success":true, "data":{ "title":"一树花开", "content":"<p&g...
2019-06-14 08:43:59
232
原创 25.使用redux对详情页面进行数据管理
1.我们需要使用store进行数据管理，首先我们需要在detail目录下新建四个文件，actionCreatores,actionTypes,index,reducer2.index.js文件中：引入actionCreators和actionTypes并且将其导出import * as actionCreators from './actionCreators';import * as a...
2019-06-13 16:27:49
424
原创 24.详情页面布局
1.我们打开pages目录下的detail进行详情页代码的设计在detail下新建一个文件style.js用来存放detail页面的css样式2.在index中，我们
2019-06-13 15:36:47
499
原创 23.实现详情页面功能跳转
1.我们在list文件中，我们引入模块react-router-dom，实现页面跳转2.使用Link进行跳转操作3.点击简书怎么回到首页我们在header文件下的style中，将a换成div然后我们在header目录下的index文件中，我们使用Link实现跳转3.引入Link4.这时候会有一个报错5.我们需要在APP.js文件中，把Header放在BrowserRouter下面...
2019-06-11 15:40:54
731
原创 22.返回顶部功能的实现
1.我们将返回顶部功能的实现放在home目录下的index,我们在这里定义一个BackTop的元素2.从style中引入;3.在style中对BackTop进行样式定义4.怎么实现我们往下拖页面的时候回到顶部才出现，刚开始在顶部是不出现的1.在reducer中定义一个showScroll,初始为false2.回到我们的Home目录下的index,使用mapState接收showScrol...
2019-06-11 11:13:57
304
原创 21.实现加载更多内容
1.我们将实现加载更多内容放在List这一部分，首先，在list中新定义一个标签LoadMore2.然后我们需要从style文件中引入。3.在style文件中，我们去定义这个元素的样式4.然后效果就出来了5.如何实现点击更多文字，出来更多的推荐文字呢我们首先给LoadMore绑定一个单击响应事件getMoreList然后我们使用mapDispatch派发请求，将getListMor...
2019-06-11 08:18:22
966
原创 20.异步代码拆分优化
actionCreators:import axios from 'axios';import * as actionTypes from './actionTypes';export const getHomeInfo = () => { return (dispatch) => { axios.get('/api/home.json').then((...
2019-06-10 15:24:51
155
原创 19.首页异步数据的获取
1.我们在public文件夹下的api文件夹下新建一个json文件，home.json2.在这里面我们将home页面中的数据存放进来，home.json中的代码{ "success":true, "data":{ "articleList": [{ "id": 1, "title": "男人离不开的，往往是“不好惹”...
2019-06-09 21:50:35
209
原创 18.首页推荐部分代码编写
1.在Recommed文件中，我们定义两个元素RecommedWrapper和RecommedItem,并且从styled文件中将它们引入2.在styled文件中，我们去编写刚刚两个标签的样式
2019-06-09 16:33:54
345
原创 17.首页部分组件的拆分
1.我们在src目录下新建一个文件夹：pages,在pages中新建两个文件夹：Home和Detail然后分别在其内部新建两个index.js文件2.在Home的index中：3.在Detail的index中：4.然后我们在APP中，将home和detail引入5.将Home和Detail作为组件传入路由这样Home和Detail两个部分就实现了拆分，并且不同目录下显示的内容也是不一...
2019-06-09 08:38:19
272
原创 16.如何在react中使用路由功能
1.什么是路由？路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同2.在项目中如何使用路由安装 yarn add react-router-dom重启终端 npm start在App.js中引入路由功能这里实现的是在首页的时候，只显示home，在detail的时候显示detail...
2019-06-06 14:08:03
337
原创 14.换一换中换页旋转功能的实现
1.进入iconfont.cn官方网站。按照步骤引入，然后我们在换一换前面插入：2.此时我们发现旋转图标跑到右下角去了，一个怎么修改呢？在这个后面我们再给它加一个zoom3.把原来的iconfont替换成zoom4.给旋转图标绑定样式,再加一个属性名spin6.怎么在点击换一换的时候，有一个旋转的动画效果呢？先给一些设置的初始值：7.在点击换一换的时候，如何让图标旋转360度？8....
2019-06-05 21:40:40
391
原创 13.热门搜索点击换一换，换页功能的实现
1.我们可以看到，我们现在页面上将从json中获取到的数据全部显示出来，那我们如何做，才能使每次只显示10个？2.首先在reducer的默认数据中，我们定义一个当前页和一个总页数,都默认为1：3.在actionCreators中，我们将从json中获取到的数据分成每10个一页。5.在reducer中，我们接收数据，并将原来的默认的totalPage替换为刚刚action请求的新的数据的页数...
2019-06-05 11:05:41
2748
原创 12.使用ajax获取热门搜索中的推荐数据
1.将数据存放在一个数组中，我们在header文件夹下面的reducer中默认创建一个空数组2.借助redux-thunk完成异步操作打开终端，输入：yaen add redux-thunk重启npm start3 .在src目录下的store的index中，我们需要引入redux-thunk中间件4.回到header目录下的index中，当我们聚焦的时候，我们需要使用getList(...
2019-06-02 11:09:16
230
原创 11.热门搜索样式布局
1.先看一下我们需要完成的东西当我们点击搜索框时，出现热门搜索中这些样式，当不点击时不出现2.首先，我们定义一个方法getListArea，将热门搜索里面的内容样式包含在里面：const getListArea = (show) => { if(show){ return ( <SearchInfo> ...
2019-06-01 17:23:13
329
原创 10.使用redux-immutable统一数据格式
1.安装redux-immutable在终端中输入命令：yarn add redux-immutable重启终端：npm start2.在src目录下的store中的reducer(总的数据）中引入redux-immutable3.回到header目录下的index.js,这时候我们获取focused的格式就统一了，这样state也变成了一个immutable对象...
2019-06-01 14:08:11
506
原创 09.使用immutable.js库来管理store中的数据
1.安装immutable库yarn add immutable然后重启终端npm start2.在header文件夹下面的reducer中，我们引入immutable,并且进行数据设置3.因为将数据设置为不可改变的，所以在header文件夹下面的index中，我们引入reducer数据的方式需要改变原来的方式：修改之后的方式：4.修改reducer中state调用set方...
2019-06-01 13:51:53
127
原创 08.拆分action
1.首先在header–>store下新建文件actionCreators.js2.actionCreators.js是将action的类型拆分出来，代码如下：export const searchFocus = () => ({ type:'search_focus'});export const searchBlur = () => ({ type:...
2019-05-30 22:40:24
308
原创 07.使用Redux DevTools Extension工具以及combineReducers对数据拆分管理
首先Redux DevTools Extension是什么，用来干嘛？Redux DevTools Extension 提供了大部分常用的监听器去配置你的项目，不需要安装任何模块（其实有安装选项）。配置极其简单1.我们只需要在store目录下的index文件中引入：效果：2.根据不同块，将reducer拆分成很多小的reducer.在common–>header下新建一个文...
2019-05-30 17:52:01
213
原创 06.在项目中用react-redux进行应用数据管理
1.首先在终端安装redux和react-reduxyarn add reduxyarn add react-redux安装好之后重启终端npm start2.在src目录下新建一个文件夹store，在store目录下新建两个文件:index.js,reducer.js在index.js中：我们需要引入redux和reducerimport { createStore } f...
2019-05-30 14:53:26
221
原创 05.头部搜索框的动画效果的实现
目的：当我们点击搜索框的时候，搜索框的长度会自动变长，并且放大镜的底色会变深，当我们鼠标离开搜索框的时候，搜索框回到原来的状态1.首先，我们进行一个数据的设定，将focused的默认值设置为false2.当鼠标移入到搜索框聚焦的时候，我们将state中的focused设置为true,离开的时候设置为false,如下，给搜索框绑定聚焦事件：3.我们样式的设置通过className的改变...
2019-05-30 09:53:13
506
转载 04.在react中使用iconfont
解释：iconfont是什么？Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体，可以选择下载到本地，在你的项目中引入这种字体，这样即便没有网络的情况也可以使用图标。如何使用：阅读下面链接https://segmentfault.com/a/1190000016639...
2019-05-30 08:41:00
1013
原创 03.使用styled-components完成Header布局（2）
在index.js的jsx部分加入标签，然后在其头部引用，最后去styled.js中写相关的样式：index.js完整代码：import React, { Component } from 'react';import { HeadrerWrapper, Logo, Nav, NavItem, NavSearch, Addition, ...
2019-05-29 20:58:51
182
原创 02.使用styled-components完成Header布局（1）
1.我们在src目录下新建一个文件夹common,并且在common下再新建一个文件夹Header用于存放整个项目的头部的代码。在header中新建两个文件index.js和style.js，另外需要在src目录下新建一个文件夹statics，用于存放图片2.我们需要在App.js文件中引入头部的组件，如下：3.我们现在就可以在Header文件夹下的文件中来编写头部的代码：index.j...
2019-05-29 16:22:25
320
原创 01.项目目录搭建以及styled-Components和Reser.css的结合使用
首先，我们使用脚手架创建了一个新的项目，这里我们对项目的一些基本文件进行整理，首先将一些不需要的文件删除，删除之后留下一些需要的文件，如下：这里我们将原来的style.css已经重命名为style.js文件。下面安装styled-Components,打开终端，输入命令：yarn add styled-Components,安装完成之后重新启动一下。styled-Componen...
2019-05-29 09:51:22
314
原创 react creact-react-app 构建完项目后,npm start启动失败怎么解决
首先，贴一下我的错误，在使用create-react-app创建一个项目之后，我用vscode打开这个项目，并且在终端输入命令npm start之后，出现报错的情况： jianshu@0.1.0 start C:\Users\23902\Desktop\jianshu> react-scripts startThere might be a problem with the pro...
2019-05-27 21:50:09
9924
4
原创 使用react-redux(1)
在项目中安装react-redux yarn add react-redux因为现在项目中只有一个index.js,所以我们需要在src目录下新建一个TodoList.js文件在index.js中，我们需要引入TodoList.js文件，index.js中代码如下：import React from 'react';import ReactDOM from 'react...
2019-05-27 14:47:49
136
转载 Redux中使用redux-thunk进行ajax请求发送
https://blog.csdn.net/YU_M_K/article/details/81070528
2019-05-25 17:41:30
283
原创 UI组件的优化
因为TodoListUI中只有render一个函数，我们可以进行如下优化，将其写成一个箭头函数的形式，并且传入参数props，并且将之前的this.props替换成propsimport React, { Component } from 'react';import { Input, Button, List } from 'antd';const TodoListUI = (props)...
2019-05-25 09:10:44
120
原创 UI组件和容器组件的拆分
1.首先，以前面的TodoList为例以下是原来的TodoList中的render函数中的内容，我们可以将组件中关于UI渲染页面的封装到一个文件中render() { return ( <div> <div style={{marginTop:'10px',marginLeft:'10px'}}> ...
2019-05-25 08:19:10
634
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人