政务网站建设及管理,搜启网站建设,十大免费分销系统,网站建设 seo优化目录#xff1a;
脚手架配置代理_方法一 server1.js开启服务器server1:App.js解决跨域问题#xff1a;脚手架配置代理_方法二 server2.js开启服务器server2第一步#xff1a;创建代理配置文件编写setupProxy.js配置具体代理规则#xff1a;App.js运行结果
脚手架配置代理_方法一 server1.js开启服务器server1:App.js解决跨域问题脚手架配置代理_方法二 server2.js开启服务器server2第一步创建代理配置文件编写setupProxy.js配置具体代理规则App.js运行结果说明github用户搜索案例 github搜索案例_静态组件github搜索案例_axios发送请求github搜索案例_展示数据github搜索案例_完成案例消息订阅与发布_pubsubfetch发送请求 1.脚手架配置代理_方法一
server1.js
const express require(express)
const app express()app.use((request,response,next){console.log(有人请求服务器1了);console.log(请求来自于,request.get(Host));console.log(请求的地址,request.url);next()
})app.get(/students,(request,response){const students [{id:001,name:tom,age:18},{id:002,name:jerry,age:19},{id:003,name:tony,age:120},]response.send(students)
})app.listen(5000,(err){if(!err) console.log(服务器1启动成功了,请求学生信息地址为http://localhost:5000/students);
})开启服务器server1: App.js
import React, {Component} from react;
import axios from axios;class App extends Component {getStudentData () {axios.get(http://localhost:5000/students).then(response {console.log(成功了, response.data);},error {console.log(失败了, error);})}render() {return (divbutton onClick{this.getStudentData}点我获取学生数据/button/div);}
}export default App;
解决跨域问题
package.json
{name: 20231003,version: 0.1.0,private: true,dependencies: {testing-library/jest-dom: ^5.17.0,testing-library/react: ^13.4.0,testing-library/user-event: ^13.5.0,axios: ^1.5.1,nanoid: ^5.0.1,prop-types: ^15.8.1,react: ^18.2.0,react-dom: ^18.2.0,react-scripts: 5.0.1,web-vitals: ^2.1.4},scripts: {start: react-scripts start,build: react-scripts build,test: react-scripts test,eject: react-scripts eject},eslintConfig: {extends: [react-app,react-app/jest]},browserslist: {production: [0.2%,not dead,not op_mini all],development: [last 1 chrome version,last 1 firefox version,last 1 safari version],proxy: http://localhost:5000}
}使用方法一遇到了bug,去stackoverflow解决一下能解决但是有更好的方法方法一不在继续了.node.js - Invalid options object. Dev Server has been initialized using an options object that does not match the API schema - Stack Overflow
2.脚手架配置代理_方法二
server2.js
const express require(express)
const app express()app.use((request,response,next){console.log(有人请求服务器2了);next()
})app.get(/cars,(request,response){const cars [{id:001,name:奔驰,price:199},{id:002,name:马自达,price:109},{id:003,name:捷达,price:120},]response.send(cars)
})app.listen(5001,(err){if(!err) console.log(服务器2启动成功了,请求汽车信息地址为http://localhost:5001/cars);
})开启服务器server2 访问端口 第一步创建代理配置文件 在src下创建配置文件src/setupProxy.js 编写setupProxy.js配置具体代理规则
这个适合低版本 const proxy require(http-proxy-middleware) module.exports function(app) { app.use( proxy(/api1, { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: http://localhost:5000, //配置转发目标地址(能返回数据的服务器地址) changeOrigin: true, //控制服务器接收到的请求头中host字段的值 /* changeOrigin设置为true时服务器收到的请求头中的host为localhost:5000 changeOrigin设置为false时服务器收到的请求头中的host为localhost:3000 changeOrigin默认值为false但我们一般将changeOrigin值设为true */ pathRewrite: {^/api1: } //去除请求前缀保证交给后台服务器的是正常请求地址(必须配置) }), proxy(/api2, { target: http://localhost:5001, changeOrigin: true, pathRewrite: {^/api2: } }) ) } 我使用的node是v18.18.0 //react 18版本写法
const {createProxyMiddleware} require(http-proxy-middleware)module.exports function (app) {app.use(createProxyMiddleware(/api1, {target: http://localhost:5000,changeOrigin: true,pathRewrite: {^/api1: }}),createProxyMiddleware(/api2, {target: http://localhost:5001,changeOrigin: true,pathRewrite: {^/api2: }}),)
}App.js
import React, {Component} from react;
import axios from axios;class App extends Component {getStudentData () {axios.get(http://localhost:3000/api1/students).then(response {console.log(成功了, response.data);},error {console.log(失败了, error);})}getCarData () {axios.get(http://localhost:3000/api2/cars).then(response {console.log(成功了, response.data);},error {console.log(失败了, error);})}render() {return (divbutton onClick{this.getStudentData}点我获取学生数据/buttonbutton onClick{this.getCarData}点我获取汽车数据/button/div);}
}export default App; 运行结果 说明 优点可以配置多个代理可以灵活的控制请求是否走代理。 缺点配置繁琐前端请求资源时必须加前缀。 3.github用户搜索案例
github搜索案例_静态组件
App.js
import React, {Component} from react;
import Search from ./components/Search/Search
import List from ./components/List/List;class App extends Component {render() {return (divdiv classNamecontainerSearch/SearchList/List/div/div);}
}export default App;
index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;const root ReactDOM.createRoot(document.getElementById(root));
root.render(App/); List.jsx
import React, {Component} from react;
import ./List.cssclass List extends Component {render() {return (divdiv classNamerowdiv classNamecarda relnoreferrer hrefhttps://github.com/reactjs target_blankimg althead_protrait srchttps://avatars.githubusercontent.com/u/6412038?v3 style{{width:100px}}//ap classNamecard-textreactjs/p/div/div/div);}
}export default List; List.css
.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card img {margin-bottom: .75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}Search.jsx
import React, {Component} from react;class Search extends Component {render() {return (divsection classNamejumbotronh3 classNamejumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search/nbsp;buttonSearch/button/div/section/div);}
}export default Search;
运行结果 github搜索案例_axios发送请求
demo.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script typetext/javascriptlet obj {a: {b: {c: 1}}}let obj2 {a: {b: 1}}console.log(obj.a.b.c)const {a: {b: {c}}} objconsole.log(c)const {a: {b: data}} obj2console.log(data)
/script
/body
/html
server.js
const express require(express)
const axios require(axios)
const app express()/*请求地址 http://localhost:3000/search/users?qaa后台路由key /search/usersvalue function () {}
*/
app.get(/search/users, function (req, res) {const {q} req.queryaxios({url: https://api.github.com/search/users,params: {q}}).then(response {res.json(response.data)})
})app.get(/search/users2, function (req, res) {res.json({items: [{login: yyx990803,html_url: https://github.com/yyx990803,avatar_url:https://avatars3.githubusercontent.com/u/499550?s460ude41ec9325e8a92e281b96a1514a0fd1cd81ad4av4,id: 1,},{login: ruanyf,html_url: https://github.com/ruanyf,avatar_url: https://avatars2.githubusercontent.com/u/905434?s460v4,id: 2,},{login: yyx9908032,html_url: https://github.com/yyx990803,avatar_url:https://avatars3.githubusercontent.com/u/499550?s460ude41ec9325e8a92e281b96a1514a0fd1cd81ad4av4,id: 3,},{login: ruanyf2,html_url: https://github.com/ruanyf,avatar_url: https://avatars2.githubusercontent.com/u/905434?s460v4,id: 4,},{login: yyx9908033,html_url: https://github.com/yyx990803,avatar_url:https://avatars3.githubusercontent.com/u/499550?s460ude41ec9325e8a92e281b96a1514a0fd1cd81ad4av4,id: 5,},{login: ruanyf3,html_url: https://github.com/ruanyf,avatar_url: https://avatars2.githubusercontent.com/u/905434?s460v4,id: 6,},{login: yyx9908034,html_url: https://github.com/yyx990803,avatar_url:https://avatars3.githubusercontent.com/u/499550?s460ude41ec9325e8a92e281b96a1514a0fd1cd81ad4av4,id: 7,},{login: ruanyf4,html_url: https://github.com/ruanyf,avatar_url: https://avatars2.githubusercontent.com/u/905434?s460v4,id: 8,},{login: yyx9908035,html_url: https://github.com/yyx990803,avatar_url:https://avatars3.githubusercontent.com/u/499550?s460ude41ec9325e8a92e281b96a1514a0fd1cd81ad4av4,id: 9,},],});
});app.listen(5000, localhost, (err) {if (!err){console.log(服务器启动成功)console.log(请求github真实数据请访问http://localhost:5000/search/users)console.log(请求本地模拟数据请访问http://localhost:5000/search/users2)} else console.log(err);
})启动服务器
node .\server.jsApp.js
import React, {Component} from react;
import Search from ./components/Search/Search
import List from ./components/List/List;class App extends Component {render() {return (divdiv classNamecontainerSearch/SearchList/List/div/div);}
}export default App;
index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;const root ReactDOM.createRoot(document.getElementById(root));
root.render(App/);
List.jsx
import React, {Component} from react;
import ./List.cssclass List extends Component {render() {return (divdiv classNamerowdiv classNamecarda relnoreferrer hrefhttps://github.com/reactjs target_blankimg althead_protrait srchttps://avatars.githubusercontent.com/u/6412038?v3 style{{width:100px}}//ap classNamecard-textreactjs/p/div/div/div);}
}export default List;
List.css
.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card img {margin-bottom: .75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}Search.jsx
import React, {Component} from react;
import axios from axios;class Search extends Component {search () {//连续结构重命名const {keyWordElement: {value: keyWord}} thisaxios.get(http://localhost:3000/api1/search/users2?q${keyWord}).then(response {console.log(成功了, response.data);},error {console.log(失败了, error);})}render() {return (divsection classNamejumbotronh3 classNamejumbotron-heading搜索github用户/h3divinput ref{c this.keyWordElement c} typetext placeholder输入关键词点击搜索/nbsp;button onClick{this.search}搜索/button/div/section/div);}
}export default Search; setupProxy.js
//react 18版本写法
const {createProxyMiddleware} require(http-proxy-middleware)module.exports function (app) {app.use(createProxyMiddleware(/api1, {target: http://localhost:5000,changeOrigin: true,pathRewrite: {^/api1: }}),)
}运行结果 github搜索案例_展示数据
App.js
import React, {Component} from react;
import Search from ./components/Search/Search
import List from ./components/List/List;class App extends Component {state {users: []}saveUsers (users) {this.setState({users})}render() {const {users} this.statereturn (divdiv classNamecontainerSearch saveUsers{this.saveUsers}/SearchList users{users}/List/div/div);}
}export default App;
List.jsx
import React, {Component} from react;
import ./List.cssclass List extends Component {render() {return (divdiv classNamerow{this.props.users.map((userObj) {return (div classNamecard key{userObj.id}a relnoreferrer href{userObj.html_url} target_blankimg althead_protraitsrc{userObj.avatar_url}style{{width: 100px}}//ap classNamecard-text{userObj.login}/p/div)})}/div/div);}
}export default List; Search.jsx
import React, {Component} from react;
import axios from axios;class Search extends Component {search () {//连续结构重命名const {keyWordElement: {value: keyWord}} thisaxios.get(http://localhost:3000/api1/search/users2?q${keyWord}).then(response {console.log(成功了, response.data.items);this.props.saveUsers(response.data.items)},error {console.log(失败了, error);})}render() {return (divsection classNamejumbotronh3 classNamejumbotron-heading搜索github用户/h3divinput ref{c this.keyWordElement c} typetext placeholder输入关键词点击搜索/nbsp;button onClick{this.search}搜索/button/div/section/div);}
}export default Search;
运行结果 github搜索案例_完成案例
App.js
import React, {Component} from react;
import Search from ./components/Search/Search
import List from ./components/List/List;class App extends Component {state {users: [], isFirst: true, isLoading: false, err: }saveUsers (users) {this.setState({users})}updateAppState (stateObj) {this.setState(stateObj)}render() {const {users} this.statereturn (divdiv classNamecontainerSearch updateAppState{this.updateAppState}/SearchList {...this.state}/List/div/div);}
}export default App;
Search.jsx
import React, {Component} from react;
import axios from axios;class Search extends Component {search () {//连续结构重命名const {keyWordElement: {value: keyWord}} thisconsole.log(keyWord)this.props.updateAppState({isFirst: false, isLoading: true})axios.get(http://localhost:3000/api1/search/users2?q${keyWord}).then(response {console.log(成功了, response.data.items);this.props.updateAppState({isLoading: false, users: response.data.items})},error {console.log(失败了, error);this.props.updateAppState({isLoading: false, err: error.message})})}render() {return (divsection classNamejumbotronh3 classNamejumbotron-heading搜索github用户/h3divinput ref{c this.keyWordElement c} typetext placeholder输入关键词点击搜索/nbsp;button onClick{this.search}搜索/button/div/section/div);}
}export default Search;
List.jsx
import React, {Component} from react;
import ./List.cssclass List extends Component {render() {const {users, isFirst, isLoading, err} this.propsreturn (divdiv classNamerow{isFirst ? h2欢迎使用,输入关键字然后点击搜索/h2 :isLoading ? h2加载中.../h2 :err ? h2 style{{color: red}}{err}/h2 :users.map((userObj) {return (div classNamecard key{userObj.id}a relnoreferrer href{userObj.html_url} target_blankimg althead_protraitsrc{userObj.avatar_url}style{{width: 100px}}//ap classNamecard-text{userObj.login}/p/div)})}/div/div);}
}export default List; setProxy.js
//react 18版本写法
const {createProxyMiddleware} require(http-proxy-middleware)module.exports function (app) {app.use(createProxyMiddleware(/api1, {target: http://localhost:5000,changeOrigin: true,pathRewrite: {^/api1: }}),)
}index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;const root ReactDOM.createRoot(document.getElementById(root));
root.render(App/);
运行结果 4.消息订阅与发布_pubsub
App.js
import React, {Component} from react;
import Search from ./components/Search/Search
import List from ./components/List/List;class App extends Component {render() {return (divdiv classNamecontainerSearch/SearchList/List/div/div);}
}export default App;
List.jsx
import React, {Component} from react;
import ./List.css
import PubSub from pubsub-jsclass List extends Component {state {users: [], isFirst: true, isLoading: false, err: }componentDidMount() {this.token PubSub.subscribe(atguigu, (_, stateObj) {console.log(stateObj);this.setState(stateObj);})}componentWillUnmount() {PubSub.unsubscribe(this.token)}render() {const {users, isFirst, isLoading, err} this.statereturn (divdiv classNamerow{isFirst ? h2欢迎使用,输入关键字然后点击搜索/h2 :isLoading ? h2加载中.../h2 :err ? h2 style{{color: red}}{err}/h2 :users.map((userObj) {return (div classNamecard key{userObj.id}a relnoreferrer href{userObj.html_url} target_blankimg althead_protraitsrc{userObj.avatar_url}style{{width: 100px}}//ap classNamecard-text{userObj.login}/p/div)})}/div/div);}
}export default List; Search.jsx
import React, {Component} from react;
import axios from axios;
import PubSub from pubsub-js;class Search extends Component {search () {//连续结构重命名const {keyWordElement: {value: keyWord}} thisconsole.log(keyWord)// this.props.updateAppState({isFirst: false, isLoading: true})PubSub.publish(atguigu, {isFirst: false, isLoading: true})axios.get(http://localhost:3000/api1/search/users2?q${keyWord}).then(response {console.log(成功了, response.data.items);// this.props.updateAppState({isLoading: false, users: response.data.items})PubSub.publish(atguigu, {isLoading: false, users: response.data.items})},error {console.log(失败了, error);// this.props.updateAppState({isLoading: false, err: error.message})PubSub.publish(atguigu, {isLoading: false, err: error.message})})}render() {return (divsection classNamejumbotronh3 classNamejumbotron-heading搜索github用户/h3divinput ref{c this.keyWordElement c} typetext placeholder输入关键词点击搜索/nbsp;button onClick{this.search}搜索/button/div/section/div);}
}export default Search;
setupProxy.js
//react 18版本写法
const {createProxyMiddleware} require(http-proxy-middleware)module.exports function (app) {app.use(createProxyMiddleware(/api1, {target: http://localhost:5000,changeOrigin: true,pathRewrite: {^/api1: }}))
}
运行结果 5.fetch发送请求
Search.jsx
import React, {Component} from react;
import axios from axios;
import PubSub from pubsub-js;class Search extends Component {search async () {//连续结构重命名const {keyWordElement: {value: keyWord}} thisPubSub.publish(atguigu, {isFirst: false, isLoading: true})try {const response await fetch(http://localhost:3000/api1/search/users2?q${keyWord})const data await response.json()console.log(data)PubSub.publish(atguigu, {isLoading: false, users: data.items})} catch (error) {console.log(请求出错, error)PubSub.publish(atguigu, {isLoading: false, err: error.message})}}render() {return (divsection classNamejumbotronh3 classNamejumbotron-heading搜索github用户/h3divinput ref{c this.keyWordElement c} typetext placeholder输入关键词点击搜索/nbsp;button onClick{this.search}搜索/button/div/section/div);}
}export default Search;
ajax,fetch,xhr,axios,jquery之间的关系 运行结果
