2021年02月_viceen

原创城市列表（九）-整体处理流程——模块-包-组件库-百度地图平台定位和react-virtualized长列表

城市列表（九）-整体处理流程——模块-包-组件库-百度地图平台定位和react-virtualized长列表城市列表导航栏页面跳转顶部导航栏布局调用后台接口获取城市列表的数据把列表数据进行分组（根据首字母进行划分）关于数组排序拓展：排序对象数组展示城市列表数据当前城市热门城市城市列表长列表组件的基本使用安装依赖包导入相关样式导入List组件控制列表的尺寸：宽度和高度AutoSizer动态计算列表的行高列表行内容的填充

2021-02-25 23:09:14 118

原创城市列表（八）02-精准城市列表定位——高亮索引随页面滚动-List组件onRowsRendered配置项-scrollToRow滚动&点击索引控制列表定位-scrollToAlignment城市置顶

城市列表（八）02-精准城市列表定位——高亮索引跟随页面滚动-List组件onRowsRendered配置项-scrollToRow滚动 & 点击索引控制列表定位-scrollToAlignment城市置顶滚动列表让对应索引高亮List组件onRowsRendered配置项overscanStartIndex: number, // 表示额外渲染行的开始索引overscanStopIndex: number, // 表示额外渲染行的结束索引startIndex:

2021-02-25 23:04:44 472 1

原创城市列表（八）01-右侧字符索引——基本布局 & 高亮索引跟随页面滚动 & 样式-三元表达式 & toUpperCase() 方法将小写字符转换为大写

城市列表（八）01-右侧字符索引——基本布局 & 高亮索引跟随页面滚动 & 样式-三元表达式 & toUpperCase() 方法将小写字符转换为大写右侧字符索引右侧索引布局<li className="city-index-item"> <span className='index-active'> A </span></li>右侧索引样式// 右侧索引.city-index { posit

2021-02-25 22:55:32 186

原创城市列表（七）03-封装通用的获取当前城市名称的方法——src-utils-index.js中Promise封装 & 所在界面引入和调用

城市列表（七）03-封装通用的获取当前城市名称的方法——src-utils-index.js中Promise封装 & 所在界面引入和调用示例let getCurrentCity = () => { return new Promise((resolve, reject) => { let ccity = window.localStorage.getItem('currentCity') // 先判断是否已经获取到了当前城市 if (!ccity) {

2021-02-24 22:22:33 287

原创城市列表（七）02-主页导航栏获取当前城市名称——百度地图地理定位基本用法

城市列表（七）02-主页导航栏获取当前城市名称——百度地图地理定位基本用法主页导航栏获取城市名称获取当前城市名称H5引入的地理定位API基于IP地址进行定位基于WiFi也可以进行定位基于GPS方式进行定位// 获取当前城市getCurrentCity = () => { const position = new window.BMap.LocalCity() position.get((ret) => { let cname = ret.name

2021-02-23 23:20:35 567

原创城市列表（七）01-获取当前定位城市——百度地图基本用法 & react新建页面流程

城市列表（七）01-获取当前定位城市——百度地图基本用法 & react新建页面流程百度地图基本用法百度地图开放平台注册百度地图账号并申请key先注册百度账号，申请地图接口秘钥官网首页->开发文档->JavaScript API->开发指南->账号和获取密钥->注册开发者->创建应用->自定义应用名称-hkzf7980、应用类型-浏览器端、Referer白名单-*（都可访问）->提交复制生成列表中的——访问应用（AK），

2021-02-23 23:02:31 398

原创城市列表（六）04-城市长列表页展示-详细代码

城市列表（六）04-城市长列表页展示-详细代码实例详细界面-src/views/City/index.jsimport React from 'react'import { NavBar, Icon, Toast } from 'antd-mobile'import axios from 'axios'import 'react-virtualized/styles.css'import { List, AutoSizer } from 'react-virtualized'import '

2021-02-23 22:55:39 274

原创城市列表（六）03-控制城市的选中操作——localStorage.setItem(getItem)存/取数据&JSON.stringify-转为JSON字符串&JSON.parse-转为js对象

城市列表（六）03-控制城市的选中操作——localStorage.setItem 存数据 & localStorage.getItem 取数据 & JSON.stringify- 转换为 JSON 字符串 & JSON.parse-转换为js对象切换城市北上广深有数据,点击其他位置,回到默认的当前城市<div key={key} style={style} className="city"> <div className="title">{l

2021-02-22 22:03:21 499 1

原创城市列表（六）02-长列表行高内容填充——跳主页-this.props.history.push(‘home‘) & 轻提示-Toast.loading(‘正在加载‘, 0)和Toast.hide()

城市列表（六）02-长列表内容填充和宽高处理——城市列表的行高是计算所得 & 跳主页-this.props.history.push(’/home’) & 轻提示-Toast.loading(‘正在加载’, 0)和Toast.hide()实际应用src/views/City/index.js//计算行高-------------------------------------calcRowHieght = ({ index }) => { console.log(ind

2021-02-22 21:20:34 153

原创城市列表（六）01-长列表内容处理 & 计算行高 & 列表内容填充-props.children属性值可以是一个函数，且可直接调用

城市列表（六）01-长列表内容处理 & 计算行高 & 列表内容填充-props.children属性值可以是一个函数，且可直接调用列表内容处理<div key={key} style={style} className="city"> <div className="title">A</div> <div className="name">安庆</div></div>.city { .title

2021-02-22 21:12:53 115

原创城市列表（五）02-长列表样式处理——AutoSizer组件-获取父容器的宽和高&屏幕可视区域宽高-document.documentElement.clientWidth（clientHeight）

城市列表（五）02-长列表样式处理——AutoSizer组件-获取父容器的宽度和高度 & 屏幕的可视区域的宽度和高度-document.documentElement.clientWidth（clientHeight）组件网址：https://bvaughn.github.io/react-virtualized/#/components/AutoSizer点击网页右侧-Source，查看详细API通过AutoSizer组件可以获取父容器的宽度和高度<AutoSizer>

2021-02-20 05:57:41 514

原创城市列表（五）01-长列表缓存组件使用——react-virtualized组件-提升列表加载性能 & Array.from（）-新数组 & Array map()-新数组

城市列表（五）01-长列表缓存组件使用——react-virtualized组件-提升列表加载性能 & Array.from（）-新数组 & Array map()-新数组react-virtualized官网：https://bvaughn.github.io/react-virtualized/#/components/Listhttp://www.reactvirtualized.comyarn add react-virtualized import 'react-

2021-02-20 05:52:18 317

原创城市列表（四）-当前城市数据获取——请求写法-await axios(接口，参数)

城市列表（四）-当前城市数据获取——请求写法-await axios(接口，参数)代码 loadData = async () => { // 添加加载提示信息 Toast.loading('正在加载', 0) // 加载城市的列表数据 let data = await axios.get('area/city', { params: { level: 1 } }) // console.log(data);

2021-02-20 04:35:22 382

原创城市列表（三）-热门城市数据获取——更新数据-this.setState({}) & 遍历对象-forEach({})

城市列表（三）-热门城市数据获取——更新数据-this.setState({}) & 遍历对象-forEach({})getCityData = async () => { const res = await axios.get(`http://localhost:8080/area/city`, { params: { level: 1 } }) // a-z的城市 const { cityIndex, citylist } = formatCi

2021-02-20 04:25:09 314

原创城市列表（二）03-根据城市第二个汉字首字母排序——数组排序用法-substr(0, 1)-字符串截取 & charAt(1)-字符串摘取 & charCodeAt(1)-字符的 Unicode 编码

城市列表（二）03-根据城市第二个汉字的首字母进行排序——数组排序的拓展用法-substr(0, 1)-字符串截取 & charAt(1)-字符串摘取 & charCodeAt(1)-字符的 Unicode 编码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head&

2021-02-20 00:07:43 619

原创城市列表（二）02-城市列表数据重构——sort()-数组排序 & substr(0, 1)-字符串截取 & push（）-数组追加

城市列表（二）02-城市列表数据重构——sort()-数组排序 & substr(0, 1)-字符串截取 & push（）-数组追加分析数据结构// 已有数据结构[{label:'北京',value:'',pinyin:'beijing',short:'bj'}]// 所需数据[{label:'北京',value:'AREA|88cff55c-aaa4-e2e0'}]// 设计数据->添加分组标题var cityobj = { 'a':[{label:'安庆',v

2021-02-19 23:33:34 327

原创城市列表（二）01-获取城市列表数据——请求后台数据写法-await axios.get（接口，参数）

城市列表（二）01-获取城市列表数据——请求后台数据写法-await axios.get（接口，参数）接口地址area/city接口参数level: 1参数值1表示一级城市getCities = async () => { const res = await axios.get(`http://localhost:8080/area/city`, { params: { level: 1 } }) this.setState({ cit

2021-02-19 23:29:50 1057

原创城市列表（一）-顶部导航——回退的三种写法-this.props.history.push(‘home‘) & goBack() & go(-1)

城市列表（一）-顶部导航——回退的三种写法-this.props.history.push(’/home’) & goBack() & go(-1)顶部导航使用antd导航组件NavBarhttps://mobile.ant.design/components/nav-bar-cn/Index/index.js<NavBar mode="light" icon={<Icon type="left" />} onLeftClick={() =&g

2021-02-19 23:25:15 722

原创主页（九）-模块——轮播图-菜单分类-租房小组-最新资讯-顶部导航栏

主页（九）-模块——轮播图-菜单分类-租房小组-最新资讯-顶部导航栏实例第一步：界面文件src/views/index/Index.js/* 主页*/import React from 'react'import { Carousel, Flex, WhiteSpace, Grid, NavBar, Icon } from 'antd-mobile'import axios from 'axios'import './Index.scss'// 菜单的路径import nav1 f

2021-02-17 00:27:47 240

原创主页（八）-顶部导航——NavBar 导航栏 & Icon 图标

主页（八）-顶部导航——NavBar 导航栏 & Icon 图标NavBar 导航栏：https://mobile.ant.design/components/nav-bar-cn/Icon 图标：https://mobile.ant.design/components/icon-cn/基本布局<NavBar mode="light" rightContent={[ <Icon key="0" type="search" s

2021-02-17 00:19:01 1523

原创主页（七）-最新资讯——流程：搭建模板-获取数据-模板填充

主页（七）-最新资讯——流程：搭建模板-获取数据-模板填充调用接口loadNews = async () => { // 最新资讯数据加载 let data = await axios.get('home/news') this.setState({ news: data.body })}资讯布局<div className="news"> <h3 className="group-title">最新资讯</h3>

2021-02-17 00:16:17 82

原创主页（六）-租房小组——sass环境-样式是嵌套关系-&代表父级选择器-一动全动 & Grid 宫格-布局

主页（六）-租房小组——sass环境-样式是嵌套关系 & Grid 宫格-布局基本布局-标题布局安装sass环境-样式是嵌套关系yarn add node-sass新建.scss文件<div className="group"> <Flex className="group-title" justify="between"> <h3>租房小组</h3> <span>更多</span>

2021-02-16 22:52:38 140

原创主页（五）-菜单——Flex布局 & WhiteSpace 上下留白

主页（五）-菜单——Flex布局 & WhiteSpace 上下留白Flex布局：https://mobile.ant.design/components/flex-cn/WhiteSpace 上下留白：https://mobile.ant.design/components/white-space-cn/基本布局<div className="nav"> <Flex> <Flex.Item className="menu"> &lt

2021-02-16 22:20:01 422

原创主页（四）-轮播图——Carousel 走马灯组件 & axios-配置请求基准路径和配置响应拦截器

主页（四）-轮播图——Carousel 走马灯组件 & axios-配置请求基准路径和配置响应拦截器Carousel 走马灯组件：https://mobile.ant.design/components/carousel-cn/基本布局配置<Carousel autoplay={this.state.isLoaded} infinite> {this.state.swipers.map(item => ( <a key={item.id}

2021-02-16 21:52:05 408

原创主页（三）-菜单组件文件拆分——views下新建单页面组件引用和开发

主页（三）-菜单组件文件拆分——views下新建单页面组件引用和开发文件目录第一步：views文件夹下新建若干文件1、底部菜单栏-主页文件-home/Home.js，见上2、登录文件-login/Login.jsimport React from 'react'class Login extends React.Component { render () { return ( <div> 登录 </div>

2021-02-16 20:37:05 230

原创主页（二）-底部菜单布局——TabBar 标签栏 & 编程式导航实现顶部内容变化 & 首页重定向-exact & 引入图标文件替换antd-UI自带图标

主页（二）-底部菜单布局——TabBar 标签栏 & 编程式导航实现顶部内容变化 & 首页重定向-exact & 引入图标文件替换antd-UI自带图标底部菜单布局antd菜单布局代码结构分析TabBar 标签栏：https://mobile.ant.design/components/tab-bar-cn/菜单布局需要把默认菜单内容隐藏，因为后续要使用路由的方式进行内容的显示noRenderContent: true隐藏默认内容后的样式处理.

2021-02-16 20:09:16 911

原创主页（一）-菜单与路由配置——全局路由配置-App.js导入相关组件 & 主页子路由配置-src下新建视图文件夹views-其下是单页面组件

菜单与路由配置——全局路由配置-App.js导入相关组件 & 主页子路由配置-src下新建视图文件夹views-其下是单页面组件全局路由配置安装路由依赖包yarn add react-router-dom导入相关组件-App.jsimport { BrowserRouter as Router, Route } from 'react-router-dom'配置全局路由<Router> {/*配置全局路由映射*/} <Switch>

2021-02-16 01:35:20 396 1

原创配置UI组件库——ant-design-mobile & 后台接口环境配置-apache和Navicat & 配置全局样式

配置UI组件库——ant-design-mobile & 后台接口环境配置-apache和Navicat配置UI组件库ant-designant-design-mobileUI组件库使用步骤安装依赖包yarn add antd-mobile先导入组件库样式import 'antd-mobile/dist/antd-mobile.css';使用组件// 按需导入组件import { Button } from 'antd-mobile';funct

2021-02-16 00:31:18 610

原创 react项目-移动端——业务概述和项目初始化

项目业务概述租房业务（移动Web）开发模式：前后端分离后端项目：基于Node.js实现的（express/koa）前端项目：基于React技术栈ReactReact-routeraxiosUI组件库ant-design-mobile第三方功能组件项目开发相关资源介绍素材：相关的图片、字体图标和参考效果图准备组件：提前写好的通用组件，作为参考hkzf_v1.zip 好客租房后台代码hkzf_备用数据库.sql：数据库初始化脚本hkzf-mobile

2021-02-15 23:11:41 301

原创前端路由（七）-编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件

编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件通过js动态控制路由跳转导入withRouterimport { withRouter } from "react-router-dom";导出时使用withRouter包裹组件export default withRouter(Login);被包裹的组件中可以通过props获取his

2021-02-15 20:17:09 598

原创前端路由（六）-动态路由——路由映射的path可以传参进行模糊匹配 & parseInt() 函数可解析一个字符串，并返回一个整数 & filter-返回满足条件的新数组

动态路由——路由映射的path可以传参进行模糊匹配 & parseInt() 函数可解析一个字符串，并返回一个整数 & filter-返回满足条件的新数组路由的路径可以进行模糊匹配路由映射的path可以是模糊匹配<Route path='/users/:id' exact component={UserInfo}/><Route path='/users/:id/books/:bid' component={BookInfo}/><Link

2021-02-15 19:44:09 359

原创前端路由（五）-重定向——Redirect组件必须包裹在Switch组件中 & 根路径 -需添加exact属性-路径进行精确匹配，不会存在包含关系

重定向——Redirect组件必须包裹在Switch组件中 & /-根路径 -需添加exact属性-路径进行精确匹配，不会存在包含关系在JSX中可以直接使用重定向组件实现跳转function Login() { let flag = false; // 如果页面中渲染<Redirect to='/tologin'/> 那么就会重定向到to指定位置 let info = flag? <div>主页信息</div> : <Redirect t

2021-02-15 11:25:43 1247

原创 Echarts与后台交互实现真实数据渲染——express模拟后端接口数据 & fetch-更新部分内容 & data数据-json格式-NetworkResponse中查询

Echarts与后台交互实现真实数据渲染——express模拟后端接口数据 & fetch-更新部分内容 & data数据-json格式-Network/Response中查询实例第一步：在APP.js同层级的component下新建test-echarts.js第二步：在App.js中进行导入import React from "react";import './App.css';import BaseRouter from './component/test-echarts.

2021-02-15 03:17:25 1129

原创 http协议put和patch的区别——put推荐更新全部内容，patch推荐更新部分内容 & fetch发送请求基本用法

http协议put和patch的区别——put推荐更新全部内容，patch推荐更新部分内容 & fetch发送请求基本用法http协议的请求方式：put和patch有什么却别吗get 查询post 添加put（patch）更新put推荐更新全部内容，patch推荐更新部分内容如果更新的资源不存在，put不会创建一个资源；patch推荐创建一个delete

2021-02-15 00:31:13 1815

原创前端路由（四）-Switch组件与exact属性——Switch组件-保证中间的路由映射仅仅匹配一个 & exact属性-精确匹配

Switch组件与exact属性——Switch组件-保证中间的路由映射仅仅匹配一个 & exact属性-精确匹配Switch作用：保证中间的路由映射仅仅匹配一个，如果有多个匹配，以最先匹配的为准如果Route组件没有path，会作为默认显示的组件Route组件中exact属性的作用：路径进行精确匹配，不会存在包含关系（比如：/about 路径不会匹配 / 路径）<Switch> <Route path='/' exact component={Home}/>

2021-02-14 19:16:20 514

原创前端路由（三）-嵌套路由——注意路由跳转和组件嵌套

前端路由（三）-嵌套路由——注意路由跳转和组件嵌套在父路由组件中配置子路由// 父级路由<BrowserRouter> <div> <div>基本路由</div> <ul> <li> <Link to='/home'>主页</Link> </li> </ul> <Route path='/home'

2021-02-14 18:58:49 581 2

原创前端路由（二）-基本路由——使用步骤：安包-引包-配置跳转

前端路由（二）-基本路由——使用步骤：安包-引包-配置跳转React-router官网：https://reacttraining.com/react-router基本使用步骤路由使用的基本步骤安装依赖包npm install react-router-dom -Dyarn add react-router-dom --dev导入相关组件import { BrowserRouter as Router, Route, Link } from "react-router-d

2021-02-14 18:33:58 201 1

原创前端路由（一）——概念 & SPA-页面局部更新 & 前端路由原理-hash 哈希（锚点）变化 & switch()函数-切换执行 & substr() 方法-截取字符串

前端路由（一）——概念 & SPA-页面局部更新 & 前端路由原理-hash 哈希（锚点）变化 & switch()函数-切换执行 & substr() 方法-截取字符串前端路由路由概念如何理解路由？路由器：负责分发消息后端路由（MVC）根据不同的用户请求，响应不同的内容（早期多数都是网页；现在更多的是json数据）前端路由根据不同的用户行为（事件）展示不同的页面效果（组件），组件中需要的数据可能来自于后端，也可能是前端写死的数据

2021-02-14 15:41:37 351 1

原创基于后台接口的图书管理案例-（三）-后台接口文档

基于后台接口的图书管理案例-（三）-后台接口文档基准路径： http://localhost:3000/获取图书列表数据路径：books请求方式：GET请求参数：无响应结果[{ "id": "4", "name": "红楼梦", "date": 2525609975000}, { "name": "三国演义", "date": 2525609975000, "id": 5}, { "name": "水浒传", "date": 252560997500

2021-02-14 02:12:23 285

原创基于后台接口的图书管理案例-（二）-全文详解版

基于后台接口的图书管理案例-（二）-全文详解版在前端mydemo文件夹中第一步：在APP.js同层级的component下新建03-grid.js第二步：在App.js中进行导入App.jsimport React from 'react';import './App.css';import TestBox from './component/03-grid.js'function App () { return ( <div> <TestBox

2021-02-14 02:09:45 368

空空如也

发布文章的题目，从100个字降到30个字了，英文字母多一些就不够用