![](https://img-blog.csdnimg.cn/20191130193832994.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react项目
碼德浮樂
萬行代碼迷人眼,沒有代碼別賽臉
展开
-
react好租客项目Day11-发布房源模块(js输入框防抖&图片上传)&项目打包&项目优化(按需加载&路由代码分割)
房源发布模块目标如何解决JS 文本输入框防抖(用户输入过快导致请求服务器的压力过大)能够完成搜索模块能够获取发布房源的相关信息能够知道图片上传的流程能够完成图片上传功能能够完成房源发布功能前期准备工作功能获取房源的小区信息,房源图片上传,房源发布等模板改动说明修改首页(Index)去出租链接为: /rent/add修改公共组件NoHouse的children属...原创 2019-11-30 19:25:13 · 1105 阅读 · 2 评论 -
react好租客项目Day10-检测是否登&退出&axios拦截器&鉴权路由&收藏模块
我的页面目标我的页面能够实现判断用户登录状态来显示不同的效果能够实现退出登录功能结构和样式对应的结构样式可以直接拿过来用,我们最主要要实现里面的代码逻辑,文件在 pages/Profile/indexrender() { return ( <div className={styles.root}> {/* 个人信息 */} ...原创 2019-11-30 19:18:26 · 684 阅读 · 0 评论 -
react好租客项目Day09-房屋详情&路由配置&登录功能&formik表单校验
房屋详情模块-准备工作目标看懂模板HouseDetail的结构能够获取到数据,渲染到组件上能够配置通用路由规则,并且获取路由参数模板说明创建房屋详情页面HouseDetail修改NavHeader组件(添加了className和rightContent两个props)创建了HousePackage组件(房屋配套)这些模板已经提供好,可以直接来使用// 添加 classN...原创 2019-11-30 19:12:06 · 726 阅读 · 0 评论 -
react好租客项目Day08-房屋列表滚动&加载更多&吸顶功能&bug定位&react-spring
列表找房模块-房屋列表目标能够使用windowScroller组件解决整个页面无法滚动的问题能够使用InfiniteLoader组件来实现加载更多逻辑使用WindowScroller 跟随页面滚动(★★★)**默认:**List组件只让组件自身出现滚动条,无法让整个页面滚动,也就无法实现标题吸顶功能**解决方式:**使用WindowScroller高阶组件,让List组件跟随页面...原创 2019-11-30 19:07:53 · 467 阅读 · 0 评论 -
react好租客项目Day07-条件筛选功能实现&FilterTitle组件功能实现&房屋列表数据获取
列表找房模块-条件筛选目标能够设置FilterPicker组件为受控组件能够获取选中值,并且设置默认选中值获取选中值(★★★)在FilterPicker组件中,添加状态value(用于获取PickerView组件的选中值) state = { value: null }给PickerView组件添加配置项 onChange,通过参数获取到选中值,并更新状态 ...原创 2019-11-30 19:06:28 · 857 阅读 · 1 评论 -
react好租客项目Day06-axios封装&封装搜索导航栏组件&实现筛选功能
axios优化&环境变量目标能够通过 axios.create() 方法来构建axios实例对象,并且配置baseURL能够知道 .env.development 和 .env.production 两个文件的作用能够配置开发环境变量能够在代码中引入配置的环境变量的值每一次我们请求接口的时候,每一次都需要写相同的baseUrl。例如:http://localhost:808...原创 2019-11-30 19:04:43 · 637 阅读 · 0 评论 -
react好租客项目Day05-根据定位展示对应城市&地图找房模块封装&loading美化
地图找房模块目标完成根据定位展示当前城市能够完成在地图上渲染出文本覆盖物能够对文本覆盖物进行内容和样式修改能够说出地图找房功能的业务逻辑理解地图找房的封装流程,知道每一个方法的作用是什么?能够参照老师代码敲出地图找房的封装代码能够使用Toast的loading效果来对页面进行优化根据定位展示当前城市(★★★)获取当前定位城市使用 地址解析器 解析当前城市坐标调用 ce...原创 2019-11-30 19:02:38 · 528 阅读 · 1 评论 -
react好租客项目Day04-城市列表索引列相关功能&封装NavHeader&CSS IN JS
渲染城市列表目标完成城市索引高亮效果完成点击索引跳转到对应位置能够实现切换城市功能(除了北京,上海,广州,深圳,其他成均无房源信息,需要提示用户)城市索引列表高亮给list组件添加onRowsRendered配置项,用于获取当前列表渲染的行信息,在里面就会有相应信息通过参数 startIndex 获取到 起始行对应的索引号判断 startIndex 和 activeIndex...原创 2019-11-30 18:58:09 · 794 阅读 · 0 评论 -
react好租客项目Day03-城市选择功能&react-virtualized组件使用
城市选择模块目标能够实现顶部导航栏能够获取城市列表数据,热门城市数据,当前定位城市数据,并且对数据进行重新封装知道什么是长列表,以及带来的缺陷说出长列表性能优化的两种方式能够使用 react-virtualized进行城市列表的渲染能够渲染右侧索引列表功能分析切换城市,查看该城市下的房源信息功能顶部导航栏城市列表展示使用索引快速切换城市点击城市名称切换城市...原创 2019-11-30 18:55:50 · 757 阅读 · 0 评论 -
react好租客项目Day02-轮播图&导航栏&百度地图
首页模块目标能够使用Carousel组件完成轮播图功能能够安装axios,并且使用axios进行网络请求能够使用Flex组件完成TabBar功能能够知道轮播图与TabBar出现的bug,并且解决能够安装Sass,编写Sass代码能够使用Grid组件完成租房小组功能能够利用H5 API获取当前的定位信息能够使用百度地图API展示地图页面,获取对应城市信息轮播图(★★★)组件...原创 2019-11-30 18:52:55 · 754 阅读 · 0 评论 -
react好租客项目Day01-项目演示&项目搭建&antd-mobile的TabBar使用
好客租房移动Web - 上目标能够初始化项目能够使用 antd-mobile 组件库能够完成项目整体布局能够理解嵌套路由能够使用antd-mobile提供的TabBar组件能够对TabBar进行定制能够实现首页路由的处理项目介绍好客租房 - 移动 Web 端项目介绍:本项目是一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求核心业务:在线找房(地图、条...原创 2019-11-30 16:51:34 · 1924 阅读 · 1 评论