区块链技术博客
www.b2bchain.cn

用nextjs写一个PostMan求职学习资料

本文介绍了用nextjs写一个PostMan求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

nextjs是一个集成前后端的React框架。采用约定成俗的方式调用页面和API。

PostMan的用处是掉用API。用nextjs,可以做一个web版的简易PostMan。

index.tsx:
“`
import { Spin, Card, Select, Input, Button, Tabs, Alert } from ‘antd’
import {ClockCircleOutlined} from “@ant-design/icons”
import { v4 as uuidv4 } from ‘uuid’;
import React, { useEffect, useState } from ‘react’
import Prism from “prismjs”
import “prismjs/themes/prism-tomorrow.css”;
const { Option } = Select;
const { TabPane } = Tabs;
const { TextArea } = Input;

export default function Home() {

const [spinning, setSpinning] = useState(false)

//req
const [method, setMethod] = useState(“GET”)
const [url, setUrl] = useState(“”)
const [json, setJson] = useState(() => JSON)
const [jsonText, setJsonText] = useState(“{}”)
const [headers, setHeaders] = useState([])

const [jsonFormatError, setJsonFormatError] = useState(false)

//res
const [status, setStatus] = useState(“”)
const [time, setTime] = useState(“”)
const [response, setResponse] = useState()
const [responseJSON, setResponseJSON] = useState()

useEffect(() => {

}, []);

const send = async () => {
setJsonFormatError(false)

if (method != "GET") {   try {     JSON.parse(jsonText)     setJson(JSON.parse(jsonText))   } catch (error) {     setJsonFormatError(true)     return false   } }  setSpinning(true)  setTime("") setStatus("") setResponse("") setResponseJSON(null)  const data = {   method,   url,   json,   headers }  const config: any = {   method: "POST",   headers: {     Accept: 'application/json',     'Content-Type': 'application/json',   },   timeout: 3000,   body: JSON.stringify(data) }  const res = await fetch("/api/request", config)  const { status, response, time } = await res.json() setStatus(status) setResponse(response) setTime(time + "ms") try {   const j = JSON.stringify(JSON.parse(response), null, 4)   setResponseJSON(j) } catch (error) {  }  setSpinning(false)

}

return (

{ setUrl(x.target.value) }} placeholder=”URL” />

{ }}>

{jsonFormatError && }

nextjs是一个集成前后端的React框架。采用约定成俗的方式调用页面和API。

PostMan的用处是掉用API。用nextjs,可以做一个web版的简易PostMan。

index.tsx:
“`
import { Spin, Card, Select, Input, Button, Tabs, Alert } from ‘antd’
import {ClockCircleOutlined} from “@ant-design/icons”
import { v4 as uuidv4 } from ‘uuid’;
import React, { useEffect, useState } from ‘react’
import Prism from “prismjs”
import “prismjs/themes/prism-tomorrow.css”;
const { Option } = Select;
const { TabPane } = Tabs;
const { TextArea } = Input;

export default function Home() {

const [spinning, setSpinning] = useState(false)

//req
const [method, setMethod] = useState(“GET”)
const [url, setUrl] = useState(“”)
const [json, setJson] = useState(() => JSON)
const [jsonText, setJsonText] = useState(“{}”)
const [headers, setHeaders] = useState([])

const [jsonFormatError, setJsonFormatError] = useState(false)

//res
const [status, setStatus] = useState(“”)
const [time, setTime] = useState(“”)
const [response, setResponse] = useState()
const [responseJSON, setResponseJSON] = useState()

useEffect(() => {

}, []);

const send = async () => {
setJsonFormatError(false)

if (method != "GET") {   try {     JSON.parse(jsonText)     setJson(JSON.parse(jsonText))   } catch (error) {     setJsonFormatError(true)     return false   } }  setSpinning(true)  setTime("") setStatus("") setResponse("") setResponseJSON(null)  const data = {   method,   url,   json,   headers }  const config: any = {   method: "POST",   headers: {     Accept: 'application/json',     'Content-Type': 'application/json',   },   timeout: 3000,   body: JSON.stringify(data) }  const res = await fetch("/api/request", config)  const { status, response, time } = await res.json() setStatus(status) setResponse(response) setTime(time + "ms") try {   const j = JSON.stringify(JSON.parse(response), null, 4)   setResponseJSON(j) } catch (error) {  }  setSpinning(false)

}

return (

{ setUrl(x.target.value) }} placeholder=”URL” />

{ }}>

{jsonFormatError && }

nextjs是一个集成前后端的React框架。采用约定成俗的方式调用页面和API。

PostMan的用处是掉用API。用nextjs,可以做一个web版的简易PostMan。

index.tsx:
“`
import { Spin, Card, Select, Input, Button, Tabs, Alert } from ‘antd’
import {ClockCircleOutlined} from “@ant-design/icons”
import { v4 as uuidv4 } from ‘uuid’;
import React, { useEffect, useState } from ‘react’
import Prism from “prismjs”
import “prismjs/themes/prism-tomorrow.css”;
const { Option } = Select;
const { TabPane } = Tabs;
const { TextArea } = Input;

export default function Home() {

const [spinning, setSpinning] = useState(false)

//req
const [method, setMethod] = useState(“GET”)
const [url, setUrl] = useState(“”)
const [json, setJson] = useState(() => JSON)
const [jsonText, setJsonText] = useState(“{}”)
const [headers, setHeaders] = useState([])

const [jsonFormatError, setJsonFormatError] = useState(false)

//res
const [status, setStatus] = useState(“”)
const [time, setTime] = useState(“”)
const [response, setResponse] = useState()
const [responseJSON, setResponseJSON] = useState()

useEffect(() => {

}, []);

const send = async () => {
setJsonFormatError(false)

if (method != "GET") {   try {     JSON.parse(jsonText)     setJson(JSON.parse(jsonText))   } catch (error) {     setJsonFormatError(true)     return false   } }  setSpinning(true)  setTime("") setStatus("") setResponse("") setResponseJSON(null)  const data = {   method,   url,   json,   headers }  const config: any = {   method: "POST",   headers: {     Accept: 'application/json',     'Content-Type': 'application/json',   },   timeout: 3000,   body: JSON.stringify(data) }  const res = await fetch("/api/request", config)  const { status, response, time } = await res.json() setStatus(status) setResponse(response) setTime(time + "ms") try {   const j = JSON.stringify(JSON.parse(response), null, 4)   setResponseJSON(j) } catch (error) {  }  setSpinning(false)

}

return (

{ setUrl(x.target.value) }} placeholder=”URL” />

{ }}>

{jsonFormatError && }

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 用nextjs写一个PostMan求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们