黑马React18: 基础Part II

news2024/10/6 10:28:37

黑马React: 基础2

Date: November 16, 2023
Sum: 受控表单绑定、获取DOM、组件通信、useEffect、Hook、优化B站评论

受控表单绑定

受控表单绑定

概念：使用React组件的状态（useState）控制表单的状态

Untitled

  1. 准备一个React状态值
const [value, setValue] = useState('')
  1. 通过value属性绑定状态，通过onChange属性绑定状态同步的函数
<input
	type="text"
	value={value}
	onChange={(e) => setValue(e.target.value)}
/>

Case:

Code:

// 受控绑定表单

import { useState } from "react"

// 1. 声明一个react状态 - useState

// 2. 核心绑定流程
  // 1. 通过value属性绑定 react 状态
  // 2. 绑定 onChange 事件 通过事件参数e拿到输入框最新的值 反向修改到react状态

function App() {
  const [value, setValue] = useState('')
  return (
    <div className="App">
      <input type="text" 
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  )
}

export default App

Res:

Untitled

React中获取DOM

在 React 组件中获取/操作 DOM，需要使用 useRef React Hook钩子函数，分为两步：

  1. 使用useRef创建 ref 对象，并与 JSX 绑定
const inputRef = useRef(null)
<input type="text" ref={inputRef} />
  1. 在DOM可用时，通过 inputRef.current 拿到 DOM 对象
console.log(inputRef.current)

Case:

Code:

import React, { useRef } from "react"
// React中获取DOM

// 1. useRef生成ref对象, 绑定到dom标签身上
// 2. dom可用时, ref.current获取dom对象
  // 渲染完毕之后dom生成之后可用

function App() {
  const inputRef = useRef(null)
  const showDom = () => {
    console.log(inputRef.current)
  }
  return (
    <div className="App">
      <input type="text" ref={inputRef}/>
      <button onClick={ () => showDom() }>获取DOM</button>
    </div>
  )
}

export default App

Res:

Untitled

案例：B站评论—发表评论

B站评论案例 —— 核心功能实现

Untitled

  1. 获取评论内容
  2. 点击发布按钮发布评论

Code:

  1. 获取评论内容
const [content, setContent] = useState('')

...

{/* 评论框 */}
<textarea
  className="reply-box-textarea"
  placeholder="发一条友善的评论"
  ref={inputRef}
  value={content}
  onChange={(e) => setContent(e.target.value)}
/>
  1. 点击发布按钮发布评论
const handlPublish = () => {
  setCommentList([
    ...commentList,
    {
      rpid: uuidV4(), // 随机id
      user: {
        uid: '30009257',
        avatar,
        uname: '黑马前端',
      },
      content: content,
      ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分
      like: 66,
    }
  ])
  // 1. 清空输入框的内容
  setContent('')
  // 2. 重新聚焦  dom(useRef) - focus
  inputRef.current.focus()
}

...

<div className="reply-box-send">
  <div className="send-text" onClick={handlPublish}>发布</div>
</div>

B站评论案例 — id处理和时间处理

Untitled

  1. rpid要求一个唯一的随机数id - uuid
  2. ctime要求以当前时间为标准，生成固定格式 - dayjs

Code:

import { v4 as uuidV4 } from 'uuid'
import dayjs from 'dayjs'

...

{
  rpid: uuidV4(), // 随机id
  user: {
    uid: '30009257',
    avatar,
    uname: '黑马前端',
  },
  content: content,
  ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分
  like: 66,
}

理解：

1-uuid会生成一个随机数

在component中查看：

Untitled

2-日期格式化

dayjs.format() // 具体参考以下文档

Ref:

随机数uuid: https://github.com/uuidjs/uuid

日期dayjs: https://dayjs.gitee.io/zh-CN/

B站评论案例 — 清空内容并重新聚焦

Untitled

  1. 清空内容 - 把控制input框的value状态设置为空串
  2. 重新聚焦 - 拿到input的dom元素，调用focus方法

Code:

const handlPublish = () => {
  setCommentList([
    ...commentList,
    {
      rpid: uuidV4(), // 随机id
      user: {
        uid: '30009257',
        avatar,
        uname: '黑马前端',
      },
      content: content,
      ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式化 月-日 时:分
      like: 66,
    }
  ])
  // 1. 清空输入框的内容
  setContent('')
  // 2. 重新聚焦  dom(useRef) - focus
  inputRef.current.focus()
}

...

{/* 评论框 */}
<textarea
  className="reply-box-textarea"
  placeholder="发一条友善的评论"
  ref={inputRef} // 给评论框绑定个ref标签, 方便获取
  value={content}
  onChange={(e) => setContent(e.target.value)}
/>

组件通信

理解组件通信

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法

Untitled

父传子-基础实现

Untitled

实现步骤:

  1. 父组件传递数据 - 在子组件标签上绑定属性
  2. 子组件接收数据 - 子组件通过props参数接收数据

Case:

Code:

// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接受数据 props的参数

function Son(props) {
  console.log(props);
  return <div>this is Son, {props.name}</div>
}

function App() {
  const name = 'this is app name'
  return (
    <div className="App">
      <Son name={name} />
    </div>
  )
}

export default App

Res:

Untitled

父传子-props说明

  1. props可传递任意的数据

数字、字符串、布尔值、数组、对象、函数、JSX

Untitled

  1. props是只读对象

子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改

父传子 - 特殊的prop children

场景：当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容

Case:

Code:

// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接受数据 props的参数

function Son(props) {
  console.log(props);
  return <div>this is Son, {props.children}</div>
}

function App() {
  return (
    <div>
      <Son>
        <span>this is span</span>
      </Son>
    </div>
  )
}

export default App

Res:

Untitled

父子组件通信-子传父

Untitled

核心思路：在子组件中调用父组件中的函数并传递参数

Untitled

Case:

Code:

// 子传父
// 核心: 在子组件中调用父组件中的函数并传递实参

import { useState } from "react";

function Son({onGetMsg}) {
  // Son组件中的数据
  const sonMsg = 'this is son msg'
  return (
    <div>
      <button onClick={() => onGetMsg(sonMsg)}>sendMsg</button>
    </div>
  )
}

function App() {
  const [msg, setMsg] = useState('')
  const getMsg = (msg) => {
    console.log(msg);
    setMsg(msg)
  }
  return (
    <div>
      Father: { msg }
      <Son onGetMsg={getMsg}/>
    </div>
  )
}

export default App

Res:

Untitled

使用状态提升实现兄弟组件通信

实现流程:

Untitled

实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递

  1. A组件先通过子传父的方式把数据传给父组件App
  2. App拿到数据后通过父传子的方式再传递给B组件

Case:

// 兄弟组件传递

// 1. 通过子传父 A => App ✅
// 2. 通过父传子 App => B 

import { useState } from "react";

function A({ onGetAName }) {
  const name = 'this is A name'
  return (
    <div>
      this is A component: 
      <button onClick={() => onGetAName(name)}>send</button>
    </div>
  )  
}

function B(props) {
  return (
    <div>
      this is B component: {props.name}
    </div>
  )
}

function App() {
  const [name, setName] = useState('')
  const getAName = (name) => {
    setName(name)
  }
  return (
    <div>
      <h1>Father: </h1>
      <A onGetAName={getAName} />
      <B name={name} />
    </div>
  )
}

export default App

Res:

Untitled

使用Context机制跨层级组件通信

图示:

Untitled

实现步骤：

  1. 使用createContext方法创建一个上下文对象Ctx
  2. 在顶层组件（App）中通过 Ctx.Provider 组件提供数据
  3. 在底层组件（B）中通过 useContext 钩子函数获取消费数据

Untitled

Case:
Code:

// Context跨层通信
// App => A => B

// 1. createContext方法创建一个上下文对象

// 2. 在顶层组件 通过Provider组件提供数据
// 3. 在底层组件 通过useContext钩子函数使用数据

import { createContext, useContext } from "react";

const MsgContext = createContext()

function A() {
  return (
    <div>
      this is A component
      < B />
    </div>
  )
}

function B() {
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B component - { msg }
    </div>
  )
}

function App() {
  const msg = 'this is app msg'
  return (
    <div>
      <MsgContext.Provider value={msg}>
        this is App
        <A />
      </MsgContext.Provider>
    </div>
  )
}

export default App

Res:

Untitled

useEffect 的使用

useEffect 的概念理解

useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）,比如发送AJAX请求，更改DOM等等

Untitled

说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于 “只由渲染引起的操作”

useEffect 的基础使用

需求：在组件渲染完毕之后，立刻从服务端获取频道列表数据并显示到页面中

语法：

useEffect(() => {}, [])

参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作

参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次

接口地址：http://geek.itheima.net/v1_0/channels

Case:
Code:

import { useEffect, useState } from "react"

const URL = 'http://geek.itheima.net/v1_0/channels'

function App() {
  // 创建一个状态数据
  const [list, setList] = useState([])
  useEffect(() => {
    // 额外的操作 获取频道列表
    async function getList() {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      // console.log(list);
      setList(jsonRes.data.channels)
    }
    getList()
  }, [])
  
  return (
    <div className="App">
      {/* this is app - { list[0].name } */}
      <ul>
        { list.map(item => {
          return <li key={ item.id }>{ item.name }</li>
        })}
      </ul>
    </div>
  )
}

export default App

Res:

Untitled

useEffect 依赖项参数说明

useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现

依赖项副作用函数执行时机
没有依赖项目数组初始渲染+组件更新时执行
空数组依赖只在初始渲染时执行一次
添加特定依赖项组件初始渲染 + 特性依赖项变化时执行

Case: 1. 没有依赖项

func: 点击按钮, 数字会逐渐加1

Code:

import { useEffect, useState } from "react"

function App() {
  // 1. 没有依赖项 初始 + 组件 更新
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('副作用函数执行了');
  })
  const handleAdd = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
      this is app
      <button onClick={ () => handleAdd() }> {count} </button>
    </div>
  )
}

export default App

Res:

Untitled

Case2: 空数组依赖

Code:

import { useEffect, useState } from "react"

function App() {
  // 1. 没有依赖项 初始 + 组件 更新
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('副作用函数执行了');
  })
  const handleAdd = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
      this is app
      <button onClick={ () => handleAdd() }> {count} </button>
    </div>
  )
}

export default App

Res:

Untitled

Case3: 添加特定依赖项

Code:

import { useEffect, useState } from "react"

function App() {
  // 3. 添加特定依赖项
  // 依赖于 count , 只要count变化, 就执行副作用函数
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('副作用函数执行了');
  }, [count])
  const handleAdd = () => {
    setCount(count + 1)
  }
  return (
    <div className="App">
      this is app
      <button onClick={ () => handleAdd() }> {count} </button>
    </div>
  )
}

export default App

Res:

Untitled

useEffect — 清除副作用

在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用

useEffect(() => {
	// 实现副作用操作逻辑
	return () => {
		// 清除副作用逻辑
		...
	}
}, [])

说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行

需求：在Son组件渲染时开启一个定制器，卸载时清除这个定时器

Case:

func: 点击卸载, 定时器会停止

Code:

import { useEffect, useState } from "react";

function Son() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器执行中...pilipala');
    }, 1000)

    return () => {
      clearInterval(timer)
    }
  }, [])
  return <div>this is son</div>
}

function App() {
  // 通过条件渲染模拟组件卸载
  const [show, setShow] = useState(true)
  return (
    <div>
      { show && <Son />}
      <button onClick={() => setShow(false)}>卸载Son组件</button>
    </div>
  )
}

export default App

Res:

Untitled

自定义Hook实现

自定义Hook函数

概念：自定义Hook是以 use 打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用

Untitled

Case:

func: 切换 显示/隐藏 组件

Code:

// 封装自定义 Hook

// 问题: 布尔切换的逻辑 当前组件耦合在一块时, 不方便复用
// 解决思路: 自定义Hook

import { useState } from "react"

function useToggle() {
  // 可复用逻辑代码
  const [value, setValue] = useState(true)

  const handleToggle = () => {
    setValue(false)
  }
 
  // 哪些状态和回调函数需要在其他组件中使用 return
  return {
    value, 
    handleToggle
  }
}

// 封装自定义hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑 (只要是可复用的逻辑)
// 3. 把组件中用到的状态或者回调returan出去(以对象或者数组)
// 4. 在哪个组件中要用到这个逻辑, 就调用这个自定义hook, 结构出来状态和回调进行使用

function App() {
  const { value, handleToggle } = useToggle()

  return (
    <div className="App">
      { value && <div>this is div</div>}
      <button onClick={() => handleToggle()}>toggle</button>
    </div>
  )
}

export default App

Res:

Untitled

React Hooks使用规则

使用规则:

  1. 只能在组件中或者其他自定义Hook函数中调用

  2. 只能在组件的顶层调用，不能嵌套在 if、for、其他函数中

    理解: 就是Hooks不能有条件地执行, 只能直接在顶部采用const { value, handleToggle } = useToggle() 这种方式, 直接调用

Untitled

案例：优化B站评论案例

优化需求

Untitled

  1. 使用请求接口的方式获取评论列表并渲染
  2. 使用自定义Hook函数封装数据请求的逻辑
  3. 把评论中的每一项抽象成一个独立的组件实现渲染

优化需求-通过接口获取评论列表

  1. 使用 json-server 工具模拟接口服务, 通过 axios 发送接口请求

    json-server是一个快速以.json文件作为数据源模拟接口服务的工具
    axios是一个广泛使用的前端请求库

# -D 指安装到开发时依赖
npm i json-server -D
  1. 使用 useEffect 调用接口获取数据
useEffect(() => {
	// 发送网络请求
	...
}, [])

拓展:

json-server

使用步骤:

1-安装(参考视频)

2-配置 package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "serve": "json-server db.json --port 3004" // 添加 json-server 的端口
},

参考:

json-server: https://github.com/typicode/json-server

优化需求-自定义Hook函数封装数据请求

一般思路：

  1. 编写一个 use 打头的函数
  2. 函数内部编写封装的逻辑
  3. return出去组件中用到的状态和方法
  4. 组件中调用函数解构赋值使用
function useGetList () {
  // 获取接口数据渲染
  const [commentList, setCommentList] = useState([])

  useEffect(() => {
    // 请求数据
    async function getList () {
      // axios请求数据
      const res = await axios.get(' http://localhost:3004/list')
      setCommentList(res.data)
    }
    getList()
  }, [])

  return {
    commentList,
    setCommentList
  }
}

...

const [commetList, setCommetList] = useGetList()

优化需求-封装评论项Item组件

Untitled

抽象原则：App作为“智能组件”负责数据的获取，Item作为“UI组件”负责数据的渲染

// 封装Item组件
function Item ({ item, onDel }) {
  return (
    <div className="reply-item">
      {/* 头像 */}
      <div className="root-reply-avatar">
        <div className="bili-avatar">
          <img
            className="bili-avatar-img"
            alt=""
            src={item.user.avatar}
          />
        </div>
      </div>

      <div className="content-wrap">
        {/* 用户名 */}
        <div className="user-info">
          <div className="user-name">{item.user.uname}</div>
        </div>
        {/* 评论内容 */}
        <div className="root-reply">
          <span className="reply-content">{item.content}</span>
          <div className="reply-info">
            {/* 评论时间 */}
            <span className="reply-time">{item.ctime}</span>
            {/* 评论数量 */}
            <span className="reply-time">点赞数:{item.like}</span>
            {/* 条件：user.id === item.user.id */}
            {user.uid === item.user.uid &&
              <span className="delete-btn" onClick={() => onDel(item.rpid)}>
                删除
              </span>}
          </div>
        </div>
      </div>
    </div>
  )
}

{/* 评论列表 */}
<div className="reply-list">
  {/* 评论项 */}
  {commetList.map(item => <Item key={item.rpid} item={item} onDel={() => handleDel(item.rpid)}/>)}
</div>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1234555.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

安全领航，共筑敏捷开发新时代【云驻共创】

安全领航，共筑敏捷开发新时代【云驻共创】

安全领航&#xff0c;共筑敏捷开发新时代。网络安全形势虽然严峻&#xff0c;但得益于企业安全意识的提升&#xff0c;近两年来遭受网络攻击的网站不断减少&#xff0c;普通网民的个人隐私及其他敏感数据得到了更多的保证。华为云基于自身多年的安全经验研发了可以帮助开发者实…
阅读更多...
前端vite打包工具

前端vite打包工具

文章目录 vite简介特点搭建步骤 vite简介特点 Vite是在推出Vue 3的时候开发的&#xff0c;目前仅支持Vue 3.x&#xff0c;这意味着与Vue 3不兼容的库也不能与Vite一起使用。持热更新&#xff0c;而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。Vite 的…
阅读更多...
湖科大计网：应用层

湖科大计网：应用层

一、应用层概述 交互&#xff0c;实现特定问题&#xff01; 二、客户与服务器模型 一、C/S 客户/服务器方式 服务与被服务的关系。 二、P2P方式 对等方式 P2P方式是对等的&#xff0c;没有固定的服务器。 三、DNS域名系统 DNS&#xff08;Domain Name System&#xff09; 一、域…
阅读更多...
CF 1894A 学习笔记 思维 题意理解分析

CF 1894A 学习笔记 思维 题意理解分析

原题 A. Secret Sport time limit per test 3 seconds memory limit per test 512 megabytes input standard input output standard output Lets consider a game in which two players, A and B, participate. This game is characterized by two positive integer…
阅读更多...
NSSCTF web刷题记录6

NSSCTF web刷题记录6

文章目录 [HZNUCTF 2023 final]eznode[MoeCTF 2021]地狱通讯-改[红明谷CTF 2022] Smarty Calculator方法一 CVE-2021-26120方法二 CVE-2021-29454方法三 写马蚁剑连接 [HZNUCTF 2023 final]eznode 考点&#xff1a;vm2沙箱逃逸、原型链污染 打开题目&#xff0c;提示找找源码 …
阅读更多...
前端环境变量释义

前端环境变量释义

视频教程 彻底搞懂前端环境变量使用和原理&#xff0c;超清楚_哔哩哔哩_bilibili 添加命令行参数 --modexxxxx 新建.env.xxxx文件,其中.env文件会在所有环境下生效 以VITE_开头&#xff0c;字符串无需加双引号 使用import.meta.env.VITE_xxxxx进行调用
阅读更多...
全网最全jmeter接口测试/接口自动化测试看这篇文章就够了：跨线程组传递jmeter变量及cookie的处理

全网最全jmeter接口测试/接口自动化测试看这篇文章就够了：跨线程组传递jmeter变量及cookie的处理

setUp线程组 setUp thread group&#xff1a; 一种特殊类型的线程组&#xff0c;用于在执行常规线程组之前执行一些必要的操作。 在 setup线程组下提到的线程行为与普通线程组完全相同。不同的是执行顺序--- 它会在普通线程组执行之前被触发&#xff1b; 应用场景举例&#xf…
阅读更多...
UE4基础篇十六：自定义 EQS 生成器

UE4基础篇十六：自定义 EQS 生成器

UE4 中的 EQS 带有一组很好的查询项生成器，但在某些情况下，您可能更喜欢根据需要创建生成器。我决定编写自己的生成器，因为我必须编写一个查询来找到查询器周围的最佳位置，但又不能太靠近它。我知道我可以添加一个距离测试来随着距离增加分数，但我什至不想考虑距查询器一定…
阅读更多...
FreeRTOS源码阅读笔记4--semphr.h

FreeRTOS源码阅读笔记4--semphr.h

信号量是特殊的队列--无法存储消息的队列&#xff0c;相关的接口函数声明在semphr.h中&#xff0c;通过宏定义替换队列函数实现。 4.1创建二值信号量xSemaphoreCreateBinary() 4.1.1函数原型 queueQUEUE_TYPE_BINARY_SEMAPHORE&#xff1a;一个宏&#xff0c;表示创建队列的…
阅读更多...
2024湖南师范大学计算机考研分析

2024湖南师范大学计算机考研分析

24计算机考研|上岸指南 湖南师范大学 湖南师范大学创建于1938年&#xff0c;位于历史文化名城长沙&#xff0c;是国家“211工程”重点建设大学、国家“双一流”建设高校、教育部普通高等学校本科教学工作水平评估优秀高校。学校拥有6个“十二五”国家重点学科、21个博士学位授…
阅读更多...
【Python爬虫】8大模块md文档集合从0到scrapy高手，第7篇：selenium 数据提取详解

【Python爬虫】8大模块md文档集合从0到scrapy高手，第7篇：selenium 数据提取详解

本文主要学习一下关于爬虫的相关前置知识和一些理论性的知识&#xff0c;通过本文我们能够知道什么是爬虫&#xff0c;都有那些分类&#xff0c;爬虫能干什么等&#xff0c;同时还会站在爬虫的角度复习一下http协议。 爬虫全套笔记地址&#xff1a; 请移步这里 共 8 章&#x…
阅读更多...
股票池(三)

股票池(三)

3-股票池 文章目录 3-股票池一. 查询股票池支持的类型二. 查询目前股票池对应的股票信息三 查询股票池内距离今天类型最少/最多的股票数据四. 查询股票的池统计信息 一. 查询股票池支持的类型 接口描述: 接口地址:/StockApi/stockPool/listPoolType 请求方式&#xff1a;GET…
阅读更多...
OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色

OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色

专栏目录： OpenLayers实战进阶专栏目录 前言 本章使用OpenLayers根据Feature要素的变量动态渲染不同颜色的三角形。 通过一个WebGL图层生成四种不同颜色的图形要素，适用于WebGL图层需要根据大量点要素区分颜色显示的需求。 更多的WebGL图层使用运算符动态生成样式的内容将会…
阅读更多...
如何搭建测试环境？一文解决你所有疑惑！

如何搭建测试环境？一文解决你所有疑惑！

什么是测试环境 测试环境&#xff0c;指为了完成软件测试工作所必需的计算机硬件、软件、网络设备、历史数据的总称&#xff0c;简而言之&#xff0c;测试环境硬件软件网络数据准备测试工具。 硬件&#xff1a;指测试必需的服务器、客户端、网络连接等辅助设备。 软件&#…
阅读更多...
5年经验之谈 —— 性能测试如何定位分析性能瓶颈？

5年经验之谈 —— 性能测试如何定位分析性能瓶颈？

你好&#xff0c;我是小牛&#xff0c;目前在一家准一线互联网大厂做测试开发工程师。 对于一般公司普通测试工程师来说&#xff0c;可能性能测试做的并不是很复杂&#xff0c;可能只是编写下脚本&#xff0c;做个压测&#xff0c;然后输出报告结果&#xff0c;瓶颈分析和调优…
阅读更多...
SQL基础理论篇（八）：视图

SQL基础理论篇（八）：视图

文章目录 简介创建视图修改视图删除视图总结参考文献 简介 视图&#xff0c;即VIEW&#xff0c;是SQL中的一个重要概念&#xff0c;它其实是一种虚拟表(非实体数据表&#xff0c;本身不存储数据)。 视图类似于编程中的函数&#xff0c;也可以理解成是一个访问数据的接口。 从…
阅读更多...
STM32通用定时器产生PWM信号

STM32通用定时器产生PWM信号

STM32通用定时器产生PWM信号 PWM信号stm32定时器PWM生成模式PWM配置基本步骤PWM周期计算CubeMX配置代码展现 本期内容我将展示使用STM32通用定时器产生PWM信号&#xff0c;这里以定时器3通道3为例 PWM信号 如果还不懂的话&#xff0c;可以看看 &#xff1a; “蓝桥杯单片机学习…
阅读更多...
使用sonar对webgoat进行静态扫描

使用sonar对webgoat进行静态扫描

安装sonar并配置 docker安装sonarqube&#xff0c;sonarQube静态代码扫描 - Joson6350 - 博客园 (cnblogs.com) 对webgoat进行sonar扫描 扫描结果 bugs Change this condition so that it does not always evaluate to "false" 意思是这里的else if语句不会执行…
阅读更多...
基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示两行常规字符应用

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示两行常规字符应用

基于基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示两行常规字符应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD1602简单介绍通过液晶显…
阅读更多...
【算法之路】高精度算法（实现加减乘除）

【算法之路】高精度算法（实现加减乘除）

目录 一、高精度概念 二、高精度算法的实现 1、高精度加法&#xff08;大整数相加&#xff09; 2、高精度减法&#xff08;大整数减法&#xff09; 3、高精度乘法&#xff08;大整数*小整数&#xff09; 4、高精度除法&#xff08;大整数/小整数&#xff09; 一、高精度概…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023