项目-react-移动端
viceen
这个作者很懒,什么都没留下…
展开
-
打包优化(五)——脚手架中配置反向代理解决跨域问题
打包优化——脚手架中配置反向代理解决跨域问题脚手架中配置反向代理解决跨域问题1 安装:yarn add http-proxy-middleware2 在 src 中创建文件:setupProxy.js3 配置反向代理:const proxy = require('http-proxy-middleware')module.exports = function(app) { // /api 表示代理路径 // target 表示目标服务器的地址 app.use( prox原创 2021-06-01 03:45:40 · 178 阅读 · 0 评论 -
打包优化(四)——分析项目打包体积-source-map-explorer
打包优化——分析项目打包体积-source-map-explorerReact.js 优化性能文档。react-virtualized 只加载用到的组件(文档)脚手架配置代理解决跨域问题文档。lodash:只加载 debounce// 全部导入:import _ from 'lodash'// 单独导入一个:import debounce from 'lodash/debounce'react-virtualized:import List from 'rea原创 2021-06-01 03:43:35 · 984 阅读 · 0 评论 -
打包优化(三)——修改脚手架配置说明 & antd-mobile 按需加载 & 基于路由的代码分割(按需加载)
打包优化——修改脚手架配置说明 & antd-mobile 按需加载 & 基于路由的代码分割(按需加载)修改脚手架配置说明create-react-app 中隐藏了 webpack 的配置,隐藏在 react-scripts 包中。 修改脚手架的 webpack 配置有两种方式:运行命令 npm run eject 释放 webpack 配置(注意:不可逆操作)通过第三方包重写 webpack 配置(比如:react-app-rewired 等)yarn add rea原创 2021-06-01 03:42:44 · 576 阅读 · 0 评论 -
打包优化(二)——打包配置文件处理- .env.development开发文件和 .env.production生产文件
打包优化——项目打包配置文件处理- .env.development开发文件和 .env.production生产文件① 打开 create-react-app 脚手架文档中的部署。② 在根目录创建 .env.production 文件,配置生产环境的接口基础路径。 (开发阶段,创建.env.development文件)③ 在项目根目录中,打开终端。④ 输入命令:yarn build,进行项目打包,生成 build 文件夹(打包好的项目内容)。⑤ 将 build 目录中的文件内容,部署到服务器中即原创 2021-06-01 02:30:12 · 3220 阅读 · 0 评论 -
打包优化(一)——脚手架项目默认命令 & 自己node+express实现服务器
项目打包优化——脚手架项目默认命令 & 自己node+express实现服务器脚手架项目默认命令 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },start 开发环境build 项目构建执行 yarn run b原创 2021-06-01 02:26:27 · 793 阅读 · 2 评论 -
地图找房(七)02——列表找房筛选条件下拉列表动画
地图找房——列表找房筛选条件下拉列表动画实现遮罩层动画① 创建方法 renderMask 来渲染遮罩层 div。② 修改渲染遮罩层的逻辑,保证 Spring 组件一直都被渲染(Spring 组件都被销毁了,就无法实现动画效果)。③ 修改 to 属性的值,在遮罩层隐藏时为 0,在遮罩层展示时为 1。④ 在 render-props 的函数内部,判断 props.opacity 是否等于 0。⑤ 如果等于 0,就返回 null(不渲染遮罩层),解决遮罩层遮挡页面导致顶部导航失效问题。⑥ 如果不原创 2021-05-31 01:11:16 · 181 阅读 · 0 评论 -
地图找房(七)01——动画控制-three.js-d3-echarts & react-spring动画组件的基本使用
动画控制——three.js-d3-echarts & react-spring动画组件的基本使用关于动画基于JavaScript的动画基于css的动画数据可视化:数据报表canvas 画布 (flash)svgwebgl(three.js/d3/echarts)react-springreact-spring-githubSpring组件介绍作用:实现动画效果,能从状态A 变到 状态B.from 属性是可选的,仅在组件第一次被渲染的时候生效。t原创 2021-05-31 01:10:27 · 435 阅读 · 1 评论 -
地图找房(六)——房源列表标签样式处理
地图找房——房源列表标签样式处理/* 标签相关样式 */.tag { display: inline-block; font-size: 12px; border-radius: 3px; padding: 4px 5px; margin-right: 5px; line-height: 12px;}.tag1 { color: #39becd; background: #e1f5f8;}.tag2 { color: #3fc28c; background原创 2021-05-31 00:06:53 · 217 阅读 · 0 评论 -
地图找房(五)02——地图移动时隐藏列表
地图找房——地图移动时隐藏列表地图绑定移动事件必须在map.panBy调用之后再进行事件绑定,否则panBy的调用会触发movestart事件// 控制地图的移动map.panBy(x, y)// 给地图绑定移动事件map.addEventListener('movestart', () => { this.setState({ // 隐藏房源列表 loaded: false })})// 绑定地图移动的事件let eventHandle = ()原创 2021-05-31 00:05:57 · 270 阅读 · 0 评论 -
地图找房(五)01——移动小区到地图中心
地图找房——移动小区到地图中心计算点击覆盖物移动的距离// 点击位置坐标const { clientX, clientY } = e.changedTouches[0]// 移动距离const x = (window.innerHeight - 330) / 2 - clientXconst y = window.innerWidth / 2 - clientY控制地图的移动x,y参数表示地图移动的距离map.panBy(x, y)居中处理效果...原创 2021-05-31 00:04:50 · 192 阅读 · 1 评论 -
地图找房(四)02——小区房源列表展示和隐藏 & 小区房源列表数据填充 & 接口数据-图片地址的基准路径
地图找房——小区房源列表展示和隐藏 & 小区房源列表数据填充 & 接口数据-图片地址的基准路径小区房源列表展示和隐藏通过状态控制列表显示和隐藏constructor (props) { super(props) this.state = { loaded: false }}this.setState({ // 获取数据并显示房源列表 loaded: true})房屋列表小区房源列表数据填充列表整体模板<div clas原创 2021-05-31 00:02:55 · 213 阅读 · 0 评论 -
地图找房(四)01——创建小区覆盖物&房源列表展示& git stash保存现场& git stash pop恢复现场
地图找房——创建小区覆盖物 & 小区房源列表展示 & git stash命令保存现场 & git stash pop 命令恢复现场创建小区覆盖物获取小区覆盖物数据填充小区覆盖物drawSecondOverLay = async (id, map, point) => { // 绘制二级覆盖物 let res = await API.get('area/map', { params: { id } }) // 先清除一级覆原创 2021-05-30 20:16:51 · 283 阅读 · 0 评论 -
地图找房(三)——创建区镇(区和街道)覆盖物
地图找房——创建区镇(区和街道)覆盖物创建区镇覆盖物覆盖物绑定事件注意addEventListener方法并不是原生js提供的事件绑定方法,而是地图专门封装的一个方法事件函数不可以使用async函数对象类型的精确判断:Object.prototype.toString(obj) // 给覆盖物绑定事件函数label.addEventListener('click', () => { })放大地图map.centerAndZoom(point, 13)清空地图覆原创 2021-05-30 20:15:27 · 124 阅读 · 0 评论 -
地图找房(二)03——百度地图-批量绘制多个覆盖物 & 加载提示效果
地图找房——百度地图-批量绘制多个覆盖物 & 加载提示效果批量绘制多个覆盖物单个覆盖物逻辑drawSingleDot = (dotInfo) => { // 设置地图的覆盖物 let { longitude, latitude } = dotInfo.coord let point = new window.BMap.Point(longitude, latitude) let opts = { // 指定文本标注所在的地理位置 position:原创 2021-05-30 15:25:29 · 634 阅读 · 0 评论 -
地图找房(二)02——获取地图接口数据 & 添加提示Toast.loading(‘正在加载...‘, 0)
地图找房——获取地图接口数据 & 添加提示Toast.loading(‘正在加载…’, 0)获取地图接口数据引入组件import { NavBar, Icon, Toast } from 'antd-mobile'加载数据loadData = async () => { // 添加提示 Toast.loading('正在加载...', 0) // 加载地图数据 let city = await getCurrentCity() let res = aw原创 2021-05-30 15:24:27 · 345 阅读 · 0 评论 -
地图找房(二)01——百度地图-添加覆盖物基本用法
地图找房——百度地图-添加覆盖物基本用法地图添加覆盖物基本用法地址:https://lbsyun.baidu.com/jsdemo.htm#eAddLabel// 设置地图的覆盖物let opts = { // 指定文本标注所在的地理位置 position: point, // 设置文本偏移量 offset: new window.BMap.Size(-30, -30) }// 创建文本标注对象let label = new window.BMap.Lab原创 2021-05-30 15:23:36 · 343 阅读 · 0 评论 -
地图找房(一)——业务分析 & 百度地图基本用法 & 页面跳转写法
地图找房——业务分析 & 百度地图基本用法 & 页面跳转写法地图找房业务分析点击地图找房图表跳转到地图找房页面该页面会呈现出房源的聚合效果点击聚合按钮,会打开二级区域点击二级区域,会进入相应的三级区域点击三级区域的方形图标,打开对应的房源列表点击列表的条目,跳转到房源的详情页面地图示例百度地图基本用法 // 跳转到地图找房页面this.props.history.push('/map')根据地理定位显示地图中心地址:https://lbsyun.bai原创 2021-05-30 15:22:34 · 429 阅读 · 0 评论 -
发布房源(四)——房源列表处理-完整实例代码
房源列表处理——完整实例代码处理图片的路径处理相关链接的跳转首页->去出租菜单我的->我的出租相关的回退链接实例-房源列表管理import React, { Component } from 'react'import { NavBar, Icon } from 'antd-mobile'import { Link } from 'react-router-dom'import API from '../../utils/api.js'import House原创 2021-05-30 00:39:27 · 418 阅读 · 0 评论 -
发布房源(三)04——提交表单-状态码是 200 & 发布成功-跳转到已发布房源页面 & headers请求头写法
发布房源——提交表单-状态码是 200 & 发布成功-跳转到已发布房源页面 & headers请求头写法提交表单在 addHouse 方法中,从 state 里面获取到所有房屋数据。使用 API 调用发布房源接口,传递所有房屋数据。根据接口返回值中的状态码,判断是否发布成功。如果状态码是 200,表示发布成功,就提示:发布成功,并跳转到已发布房源页面。否则,就提示:服务器偷懒了,请稍后再试~。addHouse = async () => { const {原创 2021-05-30 00:38:06 · 244 阅读 · 0 评论 -
发布房源(三)03——配置ImagePicker-图片上传 & 请求图片路径-headers请求头的写法
发布房源——配置ImagePicker-图片上传 & 请求图片路径-headers请求头的写法配置ImagePicker-图片上传地址:https://mobile.ant.design/components/image-picker-cn/给 ImagePicker 组件添加 onChange 配置项。通过 onChange 的参数,获取到上传的图片,并存储到状态 tempSlides 中。handleImage = (files, type, index) => { //原创 2021-05-30 00:36:52 · 969 阅读 · 0 评论 -
发布房源(三)02——获取表单数据- onSelect 处理方法 & 打印表单数据
发布房源——获取表单数据- onSelect 处理方法 & 打印表单数据获取表单数据分析InputItem、TextareaItem、Picker 组件,都使用 onChange 配置项,来获取当前值。处理方式:封装一个事件处理程序 getValue 来统一获取三种组件的值。步骤创建方法 getValue 作为三个组件的事件处理程序。该方法接收两个参数:1 name 当前状态名 2 value 当前输入值或选中值。分别给 InputItem / TextareaItem原创 2021-05-29 06:23:35 · 351 阅读 · 0 评论 -
发布房源(三)01——进入发布房源组件-history.replace() 方法跳转页面-有缓存数据
发布房源——进入发布房源组件-history.replace() 方法跳转页面-有缓存数据进入发布房源组件点击某条搜索结果,进入发布房源组件,同时携带数据给搜索列表项添加单击事件。在事件处理程序中,调用 history.replace() 方法跳转到发布房源页面。将被点击的小区信息作为数据一起传递过去。在发布房源页面,判断 history.loaction.state 是否为空。如果为空,不做任何处理。如果不为空,则将小区信息存储到发布房源页面的状态中。renderTips =原创 2021-05-29 06:22:30 · 706 阅读 · 0 评论 -
发布房源(二)——地址搜索列表 & 搜索列表-async请求接口写法
发布房源——地址搜索列表 & 搜索列表-async请求接口写法地址搜索列表搜索栏布局列表布局接口调用handleValue = (value) => { this.setState({ searchTxt: value.trim() });}<SearchBar placeholder="请输入小区或地址" value={searchTxt} onSubmit={this.getKeyList} onChange={this.handleV原创 2021-05-29 06:21:18 · 133 阅读 · 0 评论 -
发布房源(一)——相关组件路由配置 & SearchBar组件
发布房源——相关组件路由配置 & SearchBar组件相关组件路由配置配置路由,登录成功后,进入到发布房源的组件Login -> 登录成功后,进入到发布房源/rent/add配置准备好的三个组件Rent房源列表RentAdd发布房源RentSearch搜索发布的房源所在的小区<AuthCheck exact path='/rent' component={Rent}/><AuthCheck path='/rent/add' componen原创 2021-05-29 06:19:55 · 164 阅读 · 0 评论 -
收藏房源(二)——实现收藏-判断是否登录 & 未登录跳转登录页 & 已登录进行收藏操作
收藏房源(二)——实现收藏-判断是否登录 & 未登录跳转登录页 & 已登录进行收藏操作房源详情页面点击收藏按钮进行收藏给收藏按钮绑定单击事件,创建方法 handleFavorite 作为事件处理程序。判断是否登录。如果未登录,则使用 Modal.alert 提示用户是否去登录。如果点击取消,则不做任何操作。如果点击去登录,就跳转到登录页面根据 isFavorite 判断,当前房源是否收藏如果未收藏,就调用添加收藏接口,添加收藏。如果已收藏,就调用删除收藏接口,删除收藏。原创 2021-05-29 02:59:15 · 609 阅读 · 0 评论 -
收藏房源(一)——根据状态码status判断当前房源是否已经收藏过
收藏房源(一)——根据状态码status判断当前房源是否已经收藏过是否已收藏判断进入HouseDetail 检查房源是否收藏过在 state 中添加状态:isFavorite (表示是否收藏) ,默认值为 false。创建方法 checkFavorite,在进入房源详情页面时调用该方法。先判断是否已经登录。如果未登录,直接 return,不再检查是否收藏。如果已登录,从路由参数中,获取到当前房屋id。使用 API 调用接口,查询该房源是否收藏。如果返回状态码为 200 ,就更新 isF原创 2021-05-29 02:58:08 · 252 阅读 · 0 评论 -
我的(四)04-axios拦截器与路由权限验证之间是什么关系
axios拦截器与路由权限验证之间是什么关系路由权限拦截用户的操作行为,如果已经登录允许访问相关组件,否则跳转到登录页如果组件显示时,需要获取接口数据,也必须添加token请求头,才有权限获取接口数据,那么可以通过axios的拦截器统一添加接口请求时携带的token...原创 2021-05-29 02:57:21 · 148 阅读 · 0 评论 -
我的(四)03-引用路径——封装的接口请求 & 封装的路由权限控制
引用路径——封装的接口请求 & 封装的路由权限控制src/App.jsimport React from 'react';import './App.css';import 'antd-mobile/dist/antd-mobile.css';import './assets/fonts/iconfont.css'// import { Button } from 'antd-mobile'// 导入路由相关组件import { BrowserRouter, Route, Swit原创 2021-05-29 02:55:23 · 132 阅读 · 0 评论 -
我的(四)02-路由权限控制——封装通用组件实现路由权限过滤-验证能否实现页面的登录访问控制
路由权限控制——封装通用组件实现路由权限过滤-验证能否实现页面的登录访问控制封装 AuthRoute 鉴权路由组件在 components 目录中创建 AuthRoute/index.js 文件。创建组件 AuthRoute 并导出。在 AuthRoute 组件中返回 Route 组件(在 Route - 基础上做了一层包装,用于实现自定义功能)。给 Route 组件,添加 render 方法,指定该组件要渲染的内容(类似于 component 属性)。在 render 方法中,调用 isA原创 2021-05-29 02:54:57 · 491 阅读 · 0 评论 -
我的(四)01-接口的访问控制—— 封装通用的接口调用方法-控制token的传递
接口的访问控制—— 封装通用的接口调用方法-控制token的传递设置axios拦截器,筛选需要设置headers的请求处理添加请求拦截器。获取到当前请求的接口路径(url)。判断接口路径,是否是以 user 开头,并且不是登录或注册接口(只给需要的接口添加请求头)。如果是,就添加请求头 authorization。// 请求拦截器,统一添加接口的请求头axios.interceptors.request.use((config) => { let url = config.原创 2021-05-29 02:54:21 · 469 阅读 · 0 评论 -
我的(三)-退出功能——调用退出接口 & 移除本地token
退出功能——调用退出接口 & 移除本地token点击按钮,退出登录给退出按钮绑定单击事件,创建方法 logout 作为事件处理程序。导入 Modal 对话框组件(文档)。在方法中,拷贝 Modal 组件文档中确认对话框的示例代码。修改对话框的文字提示。在退出按钮的事件处理程序中,先调用退出接口(让服务端退出),再移除本地token(本地退出)。将登陆状态 isLogin 设置为 false。清空用户状态对象。 handleLogout = async () =>原创 2021-05-27 23:55:00 · 1842 阅读 · 0 评论 -
我的(二)-获取用户数据并填充页面——没有登录-回登录页 & 已登录-发送请求
获取用户数据并填充页面——没有登录-回登录页 & 已登录-发送请求根据是否有token,发送请求获取用户信息进行展示在 state 中添加两个状态:Info(用户信息)。导入token相关操作方法 token。创建方法 loadData,用来获取个人资料。判断用户是否登录。如果没有登录,则不发送请求,渲染未登录信息。如果已登录,就根据接口发送请求,获取用户个人资料。渲染个人资料数数据 loadData = async () => { if (!token原创 2021-05-27 23:52:28 · 169 阅读 · 0 评论 -
我的(一)——页面基本布局 & 封装和查看token操作模块
我的——页面基本布局 & 封装和查看token操作模块页面基本布局页面基本布局分析相关功能保存登录用户token房屋详情中的收藏按钮个人中心里面的已收藏按钮个人中心->去登录按钮收藏房屋详情封装token操作模块将token操作封装到单独模块中方便使用const TOKEN = 'mytoken'export const token = { // 获取token数据 getToken: () => { return sessionS原创 2021-05-27 23:49:20 · 359 阅读 · 0 评论 -
登录(四)-高阶组件—— 本质上就是一个函数 & 用于向输入的组件中注入一些props参数
高阶组件—— 本质上就是一个函数 & 用于向输入的组件中注入一些props参数高阶组件:本质上就是一个函数(该函数的参数是一个组件,返回值是另一个组件)高阶组件一般用于向输入的组件中注入一些props高阶组件基本用法function withComponent (InputComponent) { let uname = '张三'; let foo = (param) => { console.log(param) } return class extend原创 2021-05-27 23:48:00 · 132 阅读 · 0 评论 -
登录(三)03-cookiesessiontoken的优缺点
cookie/session/token的优缺点http协议是无状态的但是随着技术的发展,我们有了维持状态的需求为了维持状态,就诞生了cookiecookie的缺点:1、有安全隐患;数据存储量有限(4k)为了弥补cookie的缺陷,就诞生了sessionsession的数据是存储在服务器的,所有就解决了安全问题服务器存储空间相对比较大缺点:不方便服务器的横向扩展为了解决session的问题,就诞生了token用户第一次登陆服务器时,服务器会给该用户生成一个唯一的token原创 2021-05-27 23:46:24 · 349 阅读 · 0 评论 -
登录(三)02-登录表单验证——实例-yup方式 & 表单验证流程
登录表单验证——实例-yup方式 & 表单验证流程安装:yarn add yup ,导入 Yup。在 withFormik 中添加配置项 validationSchema,使用 Yup 添加表单校验规则。在 Login 组件中,通过 props 获取到 errors(错误信息)和 touched(是否访问过,注意:需要给表单 元素添加 handleBlur 处理失焦点事件才生效!)。在表单元素中通过这两个对象展示表单校验错误信息render() { const {原创 2021-05-27 23:45:56 · 1587 阅读 · 0 评论 -
登录(三)01-表单验证-介绍——antd-mobile & formik & yup
登录-表单验证-介绍——antd-mobile & formik & yup登录-表单验证-介绍表单提交前,需要先进行表单验证,验证通过后再提交表单antd-mobile 组件库的方式。(需要 InputItem 文本输入组件) -> rc-form使用更通用的 formik 或https://github.com/formium/formik,React 中专门用来进行表单处理和表单校验的库通过Formik组件名去使用通过withFormik()这个HOC去使原创 2021-05-27 23:44:29 · 913 阅读 · 0 评论 -
登录(二)账号和密码——token值:保存-window.localStorage.setItem(‘token‘, token)&查看-sessionStorage.getItem(‘token‘)
基本功能——账号和密码 & 登录成功后——保存token值-window.localStorage.setItem(‘token’, body.token) & 查看token值-sessionStorage.getItem(‘mytoken’)添加状态:username(账号) 和 password(密码)使用受控组件方式获取表单元素值(value+onChange)给 form 表单添加 onSubmit。创建方法 handleSubmit,实现表单提交。在方法中,通过原创 2021-05-26 00:17:13 · 2868 阅读 · 0 评论 -
登录(一)点击收藏按钮-跳转到登录页-this.props.history.push(‘login‘) & 基本布局
登录——点击收藏按钮-跳转到登录页-this.props.history.push(’/login’) & 基本布局跳转到登录页点击详情页面中的收藏,跳转到登录页import { Modal } from 'antd-mobile'let alert = Modal.alerthandleFavorite = () => { // 实现收藏功能 alert('提示', '登录后才能收藏房源,是否去登录?', [ { text: '取消' }, {原创 2021-05-26 00:08:17 · 1176 阅读 · 0 评论 -
房源详情——基本结构 & 地图上面添加覆盖物
房源详情——基本结构 & 地图上面添加覆盖物业务分析详情页面基本业务功能分析基本布局在找房列表页面中,点击每条房源,进入到房源详情页面02-其他资源/find和/HousePackagedetail 房源详情HpusePackage详情中的房屋配套(冰箱,电视,沙发等把房屋详情中的HousePackage组件进行解释HousePackage/ -> HOUSE_PACKAGE -> 所有配套的内容<HousePackage list原创 2021-05-26 00:04:28 · 118 阅读 · 0 评论