05 2022 档案
摘要:import React from 'react' import axios from 'axios' //留白 import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile' import Nav1 from '../../assets/
阅读全文
摘要:1实现结构和样式 2实现城市选择 搜索 地图找房页面的路由跳转 import React from 'react' import axios from 'axios' //留白 import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
阅读全文
摘要:根据当前地理位置,获取当前所在城市的房源信息 H5中的地理位置api 获取地理位置api 地理位置通过nevigater.geolocation获得
阅读全文
摘要:1H5的地理位置只能获取经纬度信息 2实际开发过程中使用高德地图api或者百度地图api实现 3通过api可以实现页面的使用
阅读全文
摘要:1注册百度账号 2点击创建应用 3获取到密钥
阅读全文
摘要:1使用步骤 1映入百度地图中的api文件 2在index.css中设置全局样式 创建Map组件 配置路由 并在map组件中 创建地图容器元素 并设置样式 import React from 'react' // 导入样式 import './index.scss' export default cl
阅读全文
摘要:获取顶部导航城市信息 1打开百度地图api文档 2通过ip定位获取当前城市名称 3调用我们服务器的接口 换取项目中的城市信息 import React from 'react' import axios from 'axios' //留白 import { Carousel, Flex, Grid,
阅读全文
摘要:1打开ant design moblie导航栏的文档 2从文档中拷贝示例代码进入页面开始学习 import React from 'react' //导入navBar组件 import { NavBar, Icon } from 'antd-mobile' import "./index.scss"
阅读全文
摘要:业务分析:切换城市 查看该城市下的房源信息 功能 顶部导航栏 城市列表展示 使用索引快速切换城市 点击城市名称切换城市 react-virtual长列表转换
阅读全文
摘要:1获取步骤 import React from 'react' import axios from "axios" //导入axios //导入navBar组件 import { NavBar, Icon } from 'antd-mobile' import "./index.scss" clas
阅读全文
摘要:1页面加载时 根据接口获取列表数据 2分析当前数据格式以及改功能需要的数据格式 3渲染数据 import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from
阅读全文
摘要:import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from 'antd-mobile' import './index.scss' // 数据格式化的方
阅读全文
摘要:1可视区域渲染(react-virtualized) 2适用于一次性展示大量的数据
阅读全文
摘要:1让list组件占满屏幕 2导入AutoSizer组件 3通过render-props模式 获取到AutoSizer组件暴露的width和height属性 4设置List组件的width和height属性 5设置城市根元素高度100% 让组件占满整个页面 6调整样式 不要出现全局滚动条 import
阅读全文
摘要:1如何获取到定位城市的信息 2获取定位城市的代码 封装成函数 直接调用改方法就行 3判断localstorage是否有这个城市 4如果没有就 通过首页中获取定位城市的代码获取 存储到本地中 返回该城市数据 // 1如何获取到定位城市的信息 // 2获取定位城市的代码 封装成函数 直接调用改方法就行
阅读全文
摘要:1常见的长列表优化方案 常见于移动端 2原理:每次渲染一部分 渲染的数据即将滚动完 在渲染下面的数据 3优点 每次渲染一部分数据 速度快 4数据量打的时候 页面上存在大量dom节点 占用树村过多 5使用场景 数据量不打的情况下 具体看页面的复杂程度
阅读全文
摘要:1安装react-virtualized 2在项目中导入样式组件 3利用list组件完成 import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from '
阅读全文
摘要:1将当前定位城市添加到cityList中 2将当前定位城市的索引添加到cityIndex中 async getCityList() { const res = await axios.get('http://localhost:8080/area/city?level=1') console.log
阅读全文
摘要:import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from 'antd-mobile' import './index.scss' import { g
阅读全文
摘要:import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from 'antd-mobile' import './index.scss' import { g
阅读全文
摘要:1封装renderCityIndex方法 用来渲染城市列表 2在方法中 获取到索引数组cityIndex 遍历cityIndex 渲染索引列表 3将缩影hot替换为热 4在state中状态添加状态avtiveIndex 5判断高亮条件 import React from 'react' import
阅读全文
摘要:1给城市列表项绑定点击事件 2判断是不是北上广深数据 3有房源数据 存到本地缓存中 4没有则返回无房源数据 import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon
阅读全文
摘要:1目录的总结 2页面的跳转组件 3封装了一些函数
阅读全文
摘要:使用页面渲染城市列表 1讲获取到的citylist和cityindex为组件的状态数据 2修改list组件的rowCount为index的索引 3将rowRender函数 添加到组件中 以便在函数中获取到状态数据citylist和cityindex 4修改list组件的rowRender组件方法 5
阅读全文
摘要:1给list组件添加onrowaRendered配置项 用于获取当前列表渲染的项目信息 2通过参数satrtIndex获取到 起始索引页 3判断索引列是否相同 import React from 'react' import axios from 'axios' //导入axios //导入navB
阅读全文
摘要:1打开ant-moblie组件库的carousel 2选择基本 点击显示远吗 3开始拷贝代码 import React from "react"; //留白 import { Carousel } from 'antd-mobile'; class Index extends React.Compo
阅读全文
摘要:1安装axios yarn add axios 2在index组件中引入axios 3在state中加入swiper数据 4进行数据处理 5在函数中调用方法 6渲染轮播图 import React from "react"; import axios from "axios" //留白 import
阅读全文
摘要:import React from "react"; import axios from "axios" //留白 import { Carousel,Flex } from 'antd-mobile'; import Nav1 from '../../assets/images/nav-1.png
阅读全文
摘要:import React from "react"; import axios from "axios" //留白 import { Carousel,Flex } from 'antd-mobile'; import Nav1 from '../../assets/images/nav-1.png
阅读全文
摘要:第一个 数据加载完成加载一个true import React from "react"; import axios from "axios" //留白 import { Carousel,Flex } from 'antd-mobile'; import Nav1 from '../../asse
阅读全文
摘要:路由切换页面高亮的问题 import React from 'react' import { TabBar } from 'antd-mobile' import {BrowserRouter as Router,Route, Link} from "react-router-dom" import
阅读全文
摘要:1打开脚手架的文档 添加sass样式 2安装sass yarn add node-sass 3创建后缀名称为scss或者sass的文件 4引入文件 渲染文件 .nav{ padding: 10px; img{ width: 48px; } .am-flexbox-item{ text-align:
阅读全文
摘要:1根据当前地理位置展示不同小组信息 2根据后台接口找到找房数据 3前端只负责渲染 数据获取 1在state中获取数据 2根据文档获取数据 import React from 'react' import axios from 'axios' //留白 import { Carousel, Flex
阅读全文
摘要:import React from 'react' import axios from 'axios' //留白 import { Carousel, Flex,Grid} from 'antd-mobile' import Nav1 from '../../assets/images/nav-1.
阅读全文
摘要:import React from 'react' import axios from 'axios' //留白 import { Carousel, Flex,Grid} from 'antd-mobile' import Nav1 from '../../assets/images/nav-1.
阅读全文
摘要:切换到版本2 1打开ant-moblie文档 2安装组件库 3在根部导入要使用的组件 4渲染组件 5在index.js中导入组件样式 import React from "react"; import {Button} from "antd-mobile" function App() { retu
阅读全文
摘要:步骤:安装路由 1yarn add react-router-dom 2导入路由文件Router/router/link 3在pages文件中创建Home/index。js和cotyList/index。两个页面 4使用Router配置首页和城市选择页面 import React from "rea
阅读全文
摘要:外观和样式调整 步骤: 1修改页面标题:在index.html中修改 2基础样式调整:在index.css中调整 index.css html,body{ height: 100%; font-family: "Microsoft YaHei"; color: #333; background-co
阅读全文
摘要:1有tabbar的页面(首页 找房 资讯 我的) 2无tabbar的页面 城市选择(简单 不需要额外处理) 本文只贴出部分代码 需要全代码关注微信公众号前端小歌谣
阅读全文
摘要:嵌套路由:路由里面继续包括路由 home组件表示父组件的内容 news组件表示子路由的内容 本文只贴出部分代码 需要全代码关注微信公众号前端小歌谣 news/index.js import React from "react"; import News from "../News"; import
阅读全文
摘要:1基本使用 页面底部的导航菜单 核心代码拷贝到home中 分析并调整代码 让其在项目中正常运行 import React from 'react' import { TabBar } from 'antd-mobile' //导入路由 class Home extends React.Compone
阅读全文
摘要:1删除前面页面路由的样式 2修改tabbar菜单项文字标题 3修改tabbar菜单文字标题颜色 4使用字体图标 修改tabber菜单的图标 5修改tabbar菜单项的图标大小 6调整tabbar菜单的位置 让其固定在最底部 import React from 'react' import { Tab
阅读全文
摘要:1根据tabbar组件文档设置不渲染内容部分(只保存菜单项 不显示内容) 2给tabber.item绑定事件 3再点击事件中调用history.push()实现路由切换 4创建tabbar组件菜单项对应的三个组件 并在home组件中配置路由信息 <TabBar.item> 5给菜单提供selecte
阅读全文
摘要:tabBar.item import React from 'react' import { TabBar } from 'antd-mobile' import {BrowserRouter as Router,Route, Link} from "react-router-dom" import
阅读全文
摘要:1首页的路由进行处理 2配合默认路由 跳转到/home 3Redirect组件实现路由重定向 to跳转到要跳转的路由 import React from "react"; import {Button} from "antd-mobile" import {BrowserRouter as Rout
阅读全文
摘要:封装成子组件 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
阅读全文
摘要:我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 . 前言 最好的种树是十年前 其次是现在 面试题什么是纯组件(react)
阅读全文
摘要:纯组件内部的对比是shallow compare 对于值类型来说 比较两个值是否相同 引用数据类型 是判断引用数据类型是否相同
阅读全文
摘要:React更新视图的思想是 只要state变化就能重新渲染视图 特点:思路特别清晰 理想状态 部分更新 只更新有变化的地方
阅读全文
摘要:1工作角度:应用第二 原理第二 2原理有助于更好理解React的自身运行机制 3setState()异步更新数据 4父组件更新导致子组件更新 纯组件提升性能 5思路清晰简单为前提,虚拟dom和diff保证效率 6虚拟dom->state+jsx 7虚拟dom的真正价值从来不是性能
阅读全文
摘要:现代的前端应用大多都是spa 单页应用程序 也就是只有一个HTML页面的应用程序 应为他的用户体验更好 对服务器的压力更小 前端路由 从一个视图导航到另一个视图 前端路由是一套映射规则 是url和组件的对应关系 使用React路由简单来说 就是配置路径和组件(配对)
阅读全文
摘要:如果出现报错先降低npm的版本 //导入react import React from 'react' import ReactDOM from 'react-dom' import {BrowserRouter as Router,Route,Link} from "react-router-do
阅读全文
摘要:Route组件:包裹整个应用 一个react应用只能执行一次 两种常见Router:hashRouter和BrowerRouter hashRouter hash算法完成 link组件:用于指定导航链接 //to属性:浏览器地址栏中的pathName <link to="/first"></firs
阅读全文
摘要:路由的执行过程 1点击link组件 修改了浏览器地址中的url 2react路由监听到地址栏url的变化 3react路由内部遍历所有Route组件 使用路由规则path域pathname进行匹配 4挡路由规则能够匹配地址栏中pathname的时候 就开始展示组件的内容 //导入react impo
阅读全文
摘要:编程是导航 通过js代码实现页面跳转 hisTory是react路由提供的 用于获取浏览器历史记录的相关信息 push(path)跳转到某个页面,参数path表示要跳转的路径 go可以前进或者返回到一个页面 //导入react import React from 'react' import Rea
阅读全文
摘要:默认路由 :进入页面要展示的路由 /就是默认路由 <Route path="/"> //导入react import React from 'react' import ReactDOM from 'react-dom' import {BrowserRouter as Router,Route,L
阅读全文
摘要:当Link组件的to属性值为/login时候 为什么默认路由也能匹配成功
阅读全文
摘要:1默认路由在任何情况下都能展示 我们希望不是所有的都能展示
阅读全文
摘要:1能够初始化项目 2能够使用antd-mobile组件库 能够完成项目整体布局 能够完成首页轮播图 能够使用百度api完成定位功能 能够使用react-virtualized完成城市选择功能
阅读全文
摘要:1项目介绍 项目是一个在线租房项目 实现用户租房的一个需求 核心业务 在线租房 房源信息展示等业务 react核心库 react react-dom react-router-dom 脚手架:create-react-app 数据请求 axios ui组件库:antd-moblie 百度地图api
阅读全文
摘要:数据库的部署和导入 php中study创建数据库
阅读全文
摘要:1.2项目搭建 初始化项目 1初始化项目:npx create-react-app hkzf-moblie 2启动项目 npm start
阅读全文
摘要:如果组件中的部分功能相似或者相同,该如何处理 1处理相似的函数 2复用state 操作state的方法 3render props HOc 4两种方式不是新的api 根据编码技巧 演化为某种模式
阅读全文
摘要:1思路:将要复用的state和操作state的方法封装到一个组件中 如何拿到该组件复用的state 在使用组件时,添加一个值为函数的props 通过函数参数来获取 <Mouse render={{mouse}=>{}}
阅读全文
摘要:使用步骤 创建Mouse组件,在组件中提供复用状态逻辑代码(1:状态 2操作状态的方法) 2将要复用的状态作为props.render(state)方法的参数 暴露到组件外部 //导入react import React from 'react' import ReactDOM from 'reac
阅读全文
摘要://导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:
阅读全文
摘要:注意:并不是该模式render Props就必须使用名为render的props,实际上可以使用任意名称 props 把props是一个函数并且告诉组件渲染什么内容的技术叫做render props模式 推荐 使用children代替render属性 //导入react import React f
阅读全文
摘要:1render props添加props校验 2组件卸载时候解除事件的一个绑定
阅读全文
摘要:1目的:实现状态逻辑复用 2采用包装装饰模式 手机 :获取保护功能 手机壳:提供保护功能 高阶组件就相当于手机壳 通过包装组件 增强组件功能 高阶组件是一个函数 接受要包装的组件 返回增强后的组件
阅读全文
摘要:使用步骤 1创建一个函数 名称约定以with开头 2制定函数参数 参数应该以大写字母开头(作为要渲染的组件) 3在函数内部创建一个类组件 提供复用的状态逻辑代码 并返回 4在该组件中 渲染参数组件 同事将状态通过props传递给参数组件 //导入react import React from 're
阅读全文
摘要:react通过displayNameshiyong 设置displayName控制区分不同的组件 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定
阅读全文
摘要:问题:props丢失 原因:高阶组件没有往下传递props 解决WrappedComponent,将state和this.props一起传递给组件
阅读全文
摘要:1组件通讯是构建react应用不可少的一环 2props的灵活性和组件更加强大 3状态提升是react组件的常用模式 4组件生命周期有助于组件的运行过程 5钩子函数让开发者在特定的时机执行的拱门呢个 6render props模式和高阶组件都可以实现组件状态逻辑复用
阅读全文
摘要:能够知道setState()更新数据是异步的 能够知道jsx语法的转换过程 能够说出React组件的更新机制 能够对组件进行性能优化 能够说出虚拟dom和diif算法
阅读全文
摘要:1.1setState是异步更新数据的 //多次调用setstate只执行一次 this.state={count:1} this.setstate({ count:this.state.count+1 }) console.log(this.state.count)//1 //导入react im
阅读全文
摘要:1.2推荐语法 this.setState((sate,props)=>{ }) 参数state:表示最新的state 参数props:表示最新的props //导入react import React from 'react' import ReactDOM from 'react-dom' //
阅读全文
摘要:在状态更新后执行某个操作 setState(update,[callback]) //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继
阅读全文
摘要:jsx是createElement的语法糖 jsx语法是被@babel/preset-react编译为createElement()方法 React元素 是一个对象 用来描述你希望看到的内容
阅读全文
摘要:setState的两个作用 1修改state 2更新组件 父组件重新渲染的时候 也会重新更新子组件 但只会渲染当前组件子树
阅读全文
摘要:减轻state 只存储更组件渲染相关的数据(count/列表数据/loading等) 注意:不用做渲染的数据不要放在state中 比如定时器id等 对于这种需要在多个方法用到的数据 应该放在this中 //导入react import React from 'react' import ReactD
阅读全文
摘要:组件更新机制:父组件更新也会引起子组件也被更新 这种思路很清晰 子组件没有任何变化的时候也会重新渲染 解决方式 使用shouldComponentUpdate(nextProps,nextState) nextProps最新的props nextState最新的状态 shouldComponentU
阅读全文
摘要://导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:
阅读全文
摘要:children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约
阅读全文
摘要:对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-types 3组件名.propTypes={}添加规则 //导入react import React fr
阅读全文
摘要:1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react import React from 'react' import ReactDOM from 'r
阅读全文
摘要:1给props设置默认值 //导入react import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2
阅读全文
摘要:6.1组件的生命周期概述 组件的生命周期有助于理解组件的运行方式 完成更复杂 的组件功能 分析组件错误原因等 组件的生命周期 组件从创建到挂载到卸载 生命周期的每个阶段伴随着一些方法调用 这些方法就是生命周期的钩子函数
阅读全文
摘要:1每个阶段的执行时机 2每个阶段钩子函数的执行顺序 3每个阶段狗子函数的作用 6.2生命周期的三个极端 执行时机 执行顺序 construtor()->render()->componentDidMount //导入react import React from 'react' import Rea
阅读全文
摘要://导入react import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react
阅读全文
摘要://导入react import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react
阅读全文
摘要:执行时机 //导入react import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承
阅读全文
摘要:app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provider和comsumer消费两个组件 const {Provider,Consumer}=React
阅读全文
摘要:1查看网卡ip addr 2cd /etc/sysconfig/network-scripts Ls查看 3mv ifcfg-eno16777736 ifcfg-eth0重命名,然后编辑 最后一行加入IPADDR=192.168.30.136 NETMASK=255.255.255.0 HWADDR
阅读全文
摘要:1最近自己搭建的公司服务端转化视频不可以,我想应该是ffmpeg的问题,头痛 准备这两个源码包 2安装,先解压 ffmpeg-4.1.4.tar.bz2 yasm-1.3.0.tar.gz 3先安装yasm-1.3.0.tar.gz 解压tar -xvf yasm-1.3.0.tar.gz Cd y
阅读全文
摘要:1问题描述报错 Connection closed by foreign host. Disconnected from remote host(yaoGS) at 155513. 2登入虚拟机 在linux系统操作中,经常需要连接其他的主机,连接其他主机的服务是openssh-server,它的功
阅读全文
摘要:LNMP模式 后续继续更新,先搭建nginx 安装环境gcc gcc-c++ 2 下载源码包解压 配置第一个报错 安装openssl openssl-devel yum -y install openssl openssl-devel Make报错 解决 tar -zxvf pcre-8.37.ta
阅读全文
摘要:2.1查看现有JDK #rpm -qa|grep jdk (如果有其他版本的JDK建议卸载) 卸载其他版本的JDK命令 #yum –y remove java-1.6.0 #yum –y remov java* 重新安装(安装需要的JDK版本) #chmod 755 jdk-6u45-linux-x
阅读全文
摘要:总是忘记,每次都要查文档,背背背 方法1: 用SET PASSWORD命令 首先登录MySQL。 格式:mysql> set password for 用户名@localhost = password(‘新密码’); 例子:mysql> set password for root@localhost
阅读全文
摘要:centos mysql5.6.27 1编译安装 先进入到文件放置的路径下 创建一个个文件 #mkdir–p /data/mysql/mysql #mkdir–p /data/mysql/mysqldat 2创建用户和用户组 groupadd mysql useradd -r -g mysql my
阅读全文
摘要:Linux MBR分区、挂载操作步骤,逻辑卷扩容操作 服务器开机之后,能自动识别出硬盘,但是硬盘不能够存储数据,必须对硬盘进行分区、格式化、挂载后才能使用;linux主分区和拓展分区总数不能超过4个,拓展分区最多只能有一个;利用fdisk -l命令可以查询到磁盘信息,再fdisk /dev/sda进
阅读全文
摘要:Linux经典面试题,看看你会几题? 1. 在Linux系统中,以 文件 方式访问设备 。 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统。 3. Linux文件系统中每个文件用 i节点 来标识。 4. 全部磁盘块由四个部分组成,分别为引导块 、专用块 、 i节点表
阅读全文
摘要:Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错。我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短小但却功能强大。我将我了解到的命令列举一下,仅供大家参考: 系统信息 arch 显示机器的处理器架构
阅读全文
摘要:1承接上个博客说的,咱们继续扩展 Cd /usr/local/apache2/conf /usr/local/apache2/conf/extra扩展文件 Vi httpd-vhosts.conf <VirtualHost *:80> ServerAdmin 13279137@qq.com Doco
阅读全文
摘要:1安装apache yum install httpd httpd-devel -y 2开启服务器 systemctl start httpd.service 3开机自启 systemctl enable httpd.service 4关闭防火墙 5端口访问 6修改vi /etc/httpd/con
阅读全文
摘要:1安装vsftpd 2备份配置文件 3修改配置文件 vi /etc/vsftpd/vsftpd.conf anonymous_enable=NO #允许匿名用户访问为了安全选择关闭 local_enable=YES # 允许本地用户登录 write_enable=YES # 是否允许写入 local
阅读全文
摘要:准备两台centos7虚拟机 192.168.30.133 192.168.30.129 2.192.168.30.1(服务端), 3查看rpc服务是否启动 4测试安装是否成功 5修改配置文件vi/etc/exports /data 192.168.1.0/24(rw,async) 6启动服务 sy
阅读全文
摘要:LVM是逻辑卷管理(Logical Volume Manager)的简称,它是建立在物理存储设备之上的一个抽象层,允许你生成逻辑存储卷,与直接使用物理存储在管理上相比,提供了更好灵活性。 LVM将存储虚拟化,使用逻辑卷,你不会受限于物理磁盘的大小,另外,与硬件相关的存储设置被其隐藏,你可以不用停止应
阅读全文
摘要:1检查防火墙和selinux(关闭) 关闭防火墙和selinux,这边不多说 2检查DHCP状态 3安装DHCP软件包 4把系统默认的样例复制 5修改配置文件 option domain-name “example.org”; --DNS域名 option domain-name-servers n
阅读全文
摘要:1查看服务器、客户端操作系统版本 2查看服务器是否安装ntp 3如果没有安装 4安装完成后重新查看服务器是否安装ntp 5查看ntp服务器状态 6修改配置文件 注释 #server 0.centos.pool.ntp.org iburst #server 1.centos.pool.ntp.org
阅读全文
摘要:1数据库文件放到opt下面 2赋予权限775 3运行脚本 4运行成功 5数据库操作 密码修改并刷新 权限修改,允许外部设备访问 6工具连接 7附录 1、显示当前数据库服务器中的数据库列表: mysql> SHOW DATABASES; 2、建立数据库: mysql> CREATE DATABASE
阅读全文
摘要:1查看是否安装samba服务 2如果为空则没有安装,安装显示安装完成即成功 3查看samba状态 4查看配置文件的位置 5配置文件备份,直接传输到本地备份 6修改配置文件 Path共享目录位置 Valid users 可以查看的用户 Browseable可以查看共享文件夹的目录,而不是全名称 7测试
阅读全文
摘要:获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从
阅读全文
摘要:发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组
阅读全文
摘要:边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 //
阅读全文
摘要:1能够使用props接收数据 2能够使用父子组件之间的通讯 3能够实现兄弟组件之间的通讯 4能够给组件添加props校验 5能够说出生命周期常用的钩子函数 6能够知道高阶组件的作用 组件通讯介绍 组件的props 组件通讯的三种方式 context props深入 组件的生命周期 render-pr
阅读全文
摘要:组件是独立且封闭的单元 ,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能中拆分成为多个组件,以更好的完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通,这就是组件通讯
阅读全文
摘要:组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props接受数据 函数组件 //导入react import React from 'react' impo
阅读全文
摘要:特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获取到props //导入react import React from 'react' import
阅读全文
摘要:1父组件提供要传递的state数据 2给子组件标签添加属性 值为state中的数据 3子组件通过props获取父组件传递的数据 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件
阅读全文
摘要:思路:利用回调函数 父组件提供回调 子组件调用 将要传递的数据作为回调函数的参数 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继
阅读全文
摘要:共享状态提升到最近的公共父组件中 由公共父组件管理这个状态 状态提升 提供共享状态或者操作状态的方法 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 //
阅读全文
摘要:1安装lnmp模式 2安装awstats 2# tar xf awstats-6.5.tar.gz 解压下载到/root下的压缩包 mkdir /var/lib/awstats chmod 755 /usr/local/awstats #cp -R awstats-6.5/ /usr/local/a
阅读全文
摘要:首先看下报错代码: Cannot find /usr/local/tomcat1/bin/setclasspath.sh This file is needed to run this program 这个可能是没有在 /etc/profile 中配置环境,这是第一种可能;如果是这种情况的话,可以这
阅读全文
摘要:Centos7.3防火墙配置 1、查看firewall服务状态 systemctl status firewalld 2、查看firewall的状态 firewall-cmd --state 3、开启、重启、关闭、firewalld.service服务 开启 service firewalld st
阅读全文
摘要:1首先这是基于lnmp模式进行的 2yum安装 yum -y install httpd mysql mysql-server php php-mysql php-json php-pdo 3lib库 yum -y install cairo-devel libxml2-devel pango pa
阅读全文
摘要:LAMP(linux、apache、mysql、php),是四个套件的合成,简单讲就是要把php运行在linux上,需要依赖apache和mysql数据库。 1 准备好一个linux系统(centos7) 确保selinux、firewall已经关闭 systemctl stop firewalld
阅读全文
摘要:1 cacti运行环境准备 cacti需要php+apache+mysql+snmp+RRDTool,以及cacti本身。cacti本体是用php开发的网站,通过snmp对远端设备信息进行采集。apache+mysql+php在以前已经做过了 这里只对剩余的部分进行安装。 2 安装snmp yum
阅读全文
摘要:1本人用的是apache+mysql+php 2下载zabbix软件包,官网下载 https://sourceforge.net/projects/zabbix/files/ZABBIX Latest Stable/2.2.23/zabbix-2.2.23.tar.gz/download 上传到 v
阅读全文
摘要:第一步:复制,解压 将准备好的tomcat压缩包复制到你准备安装的目录,我的tomcat压缩包名字是tomcat.tar.gz,我的安 装目录是 /usr/java/tomcat 第二步:解压tomcat [root@aliServer tomcat]# tar -xvf tomcat.tar.gz
阅读全文
摘要:1 iptables默认系统自带 setup 2重启防火墙 /etc/init.d/iptables restart 3接受端口 Vi /etc/sysconfig/iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 22 -j
阅读全文
摘要:首先这次网络故障是断电引起的 我给大家画个模型 三层的为八口交换机 一层的为五口打印机 笔记本代表两台无线打印机 首先八口的连接了公司采购电脑一台,业务电脑一台,其他电脑三台 第二个五口交换的连接财务电脑两台 最后一个五口交换机连接两台无线打印机,其他电脑一台 红圈电脑 青色打印机 紫色交换机 大八
阅读全文
摘要:1react组件介绍 组件是react中的一等公民 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点 可复用性 独立 可组合
阅读全文
摘要:class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.compone
阅读全文
摘要:1推荐使用class的实例方法 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用
阅读全文
摘要:7.1受控组件 HTML中的表单元素是可输入的 也就是有自己的可变状态 react中的可变状态通常保存在state中 并且只能通过setState方法来修改 <input type="text" value={this.state.text}/>
阅读全文
摘要:步骤 1state中加个状态 2给表单绑定一个chang事件 改变表单的值 设置state //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类
阅读全文
摘要:实例 1文本框 富文本框下拉框 2复选框 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从
阅读全文
摘要:使用一个事件处理多个元素 1给表单元素添加name属性 名称域state相同 2根据表单元素获取对应值 3在唱歌事件处理程序中通过[name]修改对应的state //导入react import React from 'react' import ReactDOM from 'react-dom'
阅读全文
摘要:1组件的两种创建方式:函数组件和类组件 2无状态函数组件 负责静态结构展示 3有状态组件 负责更新ui 让页面动起来 4绑定事件注意this指向问题 5使用受控组件创建表单 6完全利用js语言的能够力创建组件
阅读全文
摘要:实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字
阅读全文
摘要:1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父
阅读全文
摘要:渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承reac
阅读全文
摘要:1昨天需要在服务器上新建一个仓库,解决方法是把已有的仓库拷贝出来,库删除在放进去 2然后今天想看看有没有命令的方法 find / -name project 首先查看一下项目的位置 3创建仓库 svnadmin create /mnt/raid1/huge/project/test 4cd test
阅读全文
摘要:3.1上传以下两个rpm包到服务器上 MySQL-server-5.6.27-1.el6.x86_64.rpm MySQL-client-5.6.27-1.el6.x86_64.rpm 3.2卸载一个旧的mysql-libs包: rpm -e mysql-libs-5.1.73-3.el6_5.x8
阅读全文
摘要:linux 中mysql数据库定时备份并删除前一分钟的所有数据 #!/bin/bash #mysqldump -uroot -ppassword01! imaginebase > /home/backup/imaginebase_KaTeX parse error: Expected 'EOF',
阅读全文
摘要:1准备两台服务器 一台是192.168.118.128 一台是192.168.118.129 2主服务器配置 192.168.118.128 修改my.cnf文件 server-id=1 log-bin=mysql-bin #启动MySQL二进制日志系统, binlog-do-db=ourneedd
阅读全文
摘要:1登录 admin admin 2点击devices localhost 3进入配置保存 4保存 http服务要启动哦 5一步步做 6graph tree 7执行/usr/bin/php /var/www/html/cacti/poller.php 8如果时间设置错误去php.ini里面修改时间 Y
阅读全文
摘要:1l先准备一个脚本 #!/bin/sh #./etc/profile export JAVA_HOME=/usr/java/jdk1.6.0_45 sh /home/tomcat-bingchuang/bin/shutdown.sh sleep 60s sh /home/tomcat-bingchu
阅读全文
摘要:1在linux上面创建一个文件夹,并且进行备份 cd /home mkdir backup cd backup 2创建一个脚本 Vi imaginebase.sh #!/bin/bash mysqldump -uroot -ppassword01! imaginebase > /home/backu
阅读全文
摘要:centos mysql5.6.27 1编译安装 先进入到文件放置的路径下 创建一个个文件 #mkdir–p /data/mysql/mysql #mkdir–p /data/mysql/mysqldat 2创建用户和用户组 groupadd mysql useradd -r -g mysql my
阅读全文
摘要:1)操作系统 cat /etc/issue CentOS release 6.6 (Final) Kernel \r on an \m cat /proc/version Linux version 2.6.32-504.el6.x86_64 (mockbuild@c6b9.bsys.dev.cen
阅读全文
摘要:1借助ref 使用原生dom方式获取表单元素值 2ref的作用 获取dom或者组件 使用步骤 1调用React.createRef()方法创建一个ref对象 2将创建好的ref对象添加到文本框中 3通过ref对象获取文本框的值 //导入react import React from 'react'
阅读全文
摘要:嵌入js表达式 数据存储在js中 语法{javascript表达式} 注意语法中是单大括号 不是双大括号 //导入react import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创建react元素 const na
阅读全文
摘要:注意点 单大括号中可以使用任意的表达式 jsx自身也是js表达式 注意:js中的对是一个例外 写在style样式中 //导入react import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创建react元素 con
阅读全文
摘要:jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创
阅读全文
摘要:如果要渲染一组数组 应该使用数组的map方法 注意:渲染列表时候添加key属性 key属性的值要保持唯一 原则:map()遍历谁 就给谁添加key属性 尽量避免索引号作为key //导入react import React from "react" import ReactDOM from "rea
阅读全文
摘要:1行内样式-style <h1 style={{color:"red",backgroundColor:"skyblue"}}> jsx的样式处理 </h1> 2类名 className(推荐) <h1 className="title"></h1> //导入react import React f
阅读全文
摘要:JSX 1jsx是react的核心内容 2jsx是在js代码中写HTML结构,是react中声明式的提现 3使用jsx配合嵌入的js表达式,条件渲染,列表渲染,可以描述任意ui结构 4推荐使用calssName的方式给jsx添加样式 5react完全利用js自身能力编写ui 而不是造轮子增强HTML
阅读全文
摘要:1.4注意点 1React元素的属性名使用驼峰式命名法 2特殊属性名 class-className for->htmlFor 3没有子节点可以用单标签表示 4使用小括号包裹jsx const div=(<h1>geyao</h1>)
阅读全文
摘要:1能够使用函数创建组件 2能够使用class创建组件 3能够给react元素绑定事件 4能够使用state和setstate 5能够处理事件中的this指向问题 6能够使用受控组件处理表单
阅读全文
摘要:1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使用函数创建组件 1渲染函数组件:用函数名作为组件标签名 2组件标签可以是单标签也可以是多标签 //导
阅读全文
摘要:2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必须提供render方法 约定4:render方法必须有返回值 //导入react import Re
阅读全文
摘要:2.3抽离为单独组件 组件作为一个单独的个体,一般把每个组件放在单独的js中文件中 1创建hello.js 2在hello.js中导入React 3创建组件(函数或者类) hello.js子组件 //导入react import React from "react" //创建组件 class Hel
阅读全文
摘要:3.1事件绑定 React事件绑定语法和DOM事件语法相似 语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}} //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 impor
阅读全文
摘要:3.2事件对象 可以通过事件处理程序的参数 React中的事件对象叫做:合成事件(对象) 合成事件:兼容所有浏览器 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 import Hello fro
阅读全文
摘要:函数组件又叫做无状态组件 类组件叫做有状态组件 状态state即数据 函数组件没有自己的状态 值负责数据的展示 类组件有自己的状态 负责更新UI 让页面“”动”起来
阅读全文
摘要:5.1state的基本使用 状态:数据 是组件内部的私有数据 只能再组件内部使用 state的值是对象 表示一个组件中可以有多个数据 获取数据 this.state //导入react import React from 'react' import ReactDOM from 'react-dom
阅读全文
摘要:状态是改变的 语法:this.setstate 千万不要直接改变this.setState setState 修改state 更新ui 数据驱动视图 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件
阅读全文
摘要:从jsx中抽离过多js逻辑代码 会显得非常混乱 推荐:将逻辑抽离到单独的方法中 保证jsx结构清晰 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约
阅读全文
摘要:1箭头函数 利用箭头函数自身不绑定this的特点 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component
阅读全文
摘要:事件this指向bind 利用ES5中bind方法 将事件处理程序中的this和组件实例绑定在一起 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约
阅读全文
摘要:1上次说过了mysql的主从配置 tar zxf keepalived-1.2.7.tar.gz cd keepalived-1.2.7 yum install gcc gcc-c++ yum install kernel-devel -y 2报错 configure: error: Popt li
阅读全文
摘要:1能够知道什么是jsx 2能够使用jsx创建react元素 3能够在jsx使用javascript表达式 4能够使用jsx的条件渲染和列表渲染 5能够给jsx添加样式 jsx的基本使用 jsx中使用javascript表达式 jsx的条件渲染 jsx的列表渲染 jsx的样式处理
阅读全文
摘要:1.1createElement()的问题 1繁琐不简洁 2不直观 无法一眼看出所描述的结构 3不优雅 用户体验不爽 React.createElement("div", {classsName:"shopping-list"}, React.createElement("h1",null,"sho
阅读全文
摘要:为什么脚手架中可以使用jsx语法 1jsx不是标准的ECMAScript ,他是ECMAScript的语法扩展 2需要使用babel编译处理后 才能在浏览器环境中使用 3create-react-app脚手架已经有该配置 无需手动配置 4编译jsx包为@babel/preset-react
阅读全文
摘要:3.3在脚手架中使用React //第一步导入react import React from "React" import ReactDOM from "react-dom" //第二步创建react元素 const title = React.createElement('h1',null,"he
阅读全文
摘要:3.2使用react脚手架初始化 npx命令介绍 npm v5.2.0引入的一条命令 目的:提升包内提供的命令行工具的使用体验 原先:先安装脚手架包 再使用这个包中提供的命令 现在无需安装脚手架包 就可以直接使用这个包提供的命令 补充说明 1推荐使用:npx create-react-app my-
阅读全文
摘要:React总结 1react是构建用户组件的javascript库 2使用react是,推荐使用脚手架方式 3初始化项目命令:npx create-react-app my-app 4启动项目命令:yarn start(npm start) 5react.createElement()方法创建rea
阅读全文
摘要:3.1react脚手架意义 1脚手架是开发现代web应用的必备 2充分利用webpack babel eslint等工具进行使用 3零配置 4关注业务即可 3.2使用react脚手架初始化项目 1初始化项目 命令:npx create-react-app my-app 2启动项目 cd my-app
阅读全文
摘要:2.2方法说明 React.createElement //第二步创建react元素 //参数1:元素名称 //参数2:元素属性 //参数3:元素的子节点 //创建一个h1和p const title=React.createElement('h1',null,"Hello geyao", Reac
阅读全文
摘要:2.1React的安装 安装命令:npm i react react-dom react 包是核心,提供创建元素,组件等功能 react-dom包提供DOM相关功能等 2.2React的使用 1引入react和react-dom两个js文件 <!-- 第一步 引入模块 --> <script src
阅读全文
摘要:1.1什么是react React是一个用于构建用户界面的javascript库 用户界面:HTML页面 React主要用来HTML 或者沟通构建web应用 如果从MVC的角度来看 react仅仅是从视图层 也就是只负责试图的渲染 而并非提供了完整的M和C的功能 React起源于FaceBook的内
阅读全文
摘要:学习目标 能够说出React是什么 掌握react的特点 掌握react的基本使用 能够使用react脚手架 学习目录 react概述 react基本使用 react脚手架
阅读全文