React网络请求fetch之post请求

给我气够呛 發表於 2020-2-27 21:43:00

本节介绍下React下fetch的post请求
（1）编写服务端代码
<div class="cnblogs_code">
<pre>/*加载express模块*/
var express = require('express')
/*加载path路径处理核心模块*/
var path = require('path')
/*加载body-parser中间件*/
var bodyParser = require('body-parser')
/*创建app应用 => 类似于Node.js原始的http.createServer()*/
var app = express()
/*定义端口号*/
var port = 3888
/*
开放静态资源，开发时建议使用“动态绝对路径”
path核心模块+__driname非模块成员
*/
app.use('/public',express.static(path.join(__dirname,'./public')))
/*配置模板引擎*/
/*1、定义当前应用使用的模板引擎。参数1：模板引擎名称，同时也是模板文件的后缀；参数2：用于解析处理模板内容的“方法”*/
app.engine('html', require('express-art-template'));
/*2、设置模板文件存放目录。参数1：必须是views；参数2：views目录路径*/
app.set('views','./public/views')
/*3、注册模板引擎，将之前定义的模板引擎配置到应用中。
参数1：必须是view engine；参数2：必须是第1步里定义的模板引擎名称即html*/
app.set('view engine','html')
/*body-parser中间件配置*/
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())
app.get('/login',function(req,res){
res.render('login.html')
})
app.post('/login',function(req,res){
console.log(req.body)
})
/*监听端口并启动*/
app.listen(port,function(){
console.log('Server is running at port'+port)
})</pre>
</div>
　　之后启动服务器，监听post请求数据
　　
　　
 
（2）编写组件模板代码
　　<img src="https://img2018.cnblogs.com/i-beta/1291869/202002/1291869-20200228133847216-1153831517.png">
 
 　　然后编写fetch请求，如下所示
　　<img src="https://img2018.cnblogs.com/i-beta/1291869/202002/1291869-20200228133956001-1339039589.png">
 　　完整代码如下所示
<div class="cnblogs_code">
<pre>import React,{Component} from 'react'

class FetchPost extends Component {
constructor(props){
 super(props)
 this.state = {
 username:'',
 pwd:''
 }
}
handleUsername(event){this.setState({username:event.target.value})}
handlePwd(event){this.setState({pwd:event.target.value})}
handleSubmit(event){
 event.preventDefault()
 fetch('http://localhost:3888/login',{
 method:'post',
 headers:{
 'Accept':'application/json,text/plain,*/*',/* 格式限制：json、文本、其他格式 */
 'Content-Type':'application/x-www-form-urlencoded'/* 请求内容类型 */
 },
 body:`username=${this.state.username}&pwd=${this.state.pwd}`
 }).then((response)=>{
 return response.json()
 }).then((data)=>{
 console.log(data)
 }).catch(function(error){
 console.log(error)
 })
}
render(){
 return (
 <form onSubmit={this.handleSubmit.bind(this)}>
 用户名：<input
 type="text" name="username"
 onChange={this.handleUsername.bind(this)}
 id="username" value={this.state.username}/> 
 密码：<input
 type="password" name="pwd"
 onChange={this.handlePwd.bind(this)}
 id="pwd" value={this.state.pwd}/> 
 <button>登录</button>
 </form>
 )
}
}

export default FetchPost</pre>
</div>
　　此时测试如下
　　<img src="https://img2018.cnblogs.com/i-beta/1291869/202002/1291869-20200228134058081-111377839.png">
 　　服务端输出如下所示
　　<img src="https://img2018.cnblogs.com/i-beta/1291869/202002/1291869-20200228134116496-932534890.png">
 　　此时便可以通过fetch发送post请求，完成交互
　
（3）解决跨域
　　此时虽然可以正常获取，但是存在跨域问题，所以加下来编写后台代码，解决跨域问题
　　<img src="https://img2018.cnblogs.com/i-beta/1291869/202002/1291869-20200228152014128-1736691007.png">
 
 　　此时便可以解决跨域，接下来在前端做出对应处理即可　　
　　<img src="https://img2018.cnblogs.com/i-beta/1291869/202002/1291869-20200228152202338-587720765.png">
 
 　　完整代码如下：
<div class="cnblogs_code">
<pre>/*加载express模块*/
var express = require('express')
/*加载path路径处理核心模块*/
var path = require('path')
/*加载body-parser中间件*/
var bodyParser = require('body-parser')
/*创建app应用 => 类似于Node.js原始的http.createServer()*/
var app = express()
/*定义端口号*/
var port = 3888
/*
开放静态资源，开发时建议使用“动态绝对路径”
path核心模块+__driname非模块成员
*/
app.use('/public',express.static(path.join(__dirname,'./public')))
/*配置模板引擎*/
/*1、定义当前应用使用的模板引擎。参数1：模板引擎名称，同时也是模板文件的后缀；参数2：用于解析处理模板内容的“方法”*/
app.engine('html', require('express-art-template'));
/*2、设置模板文件存放目录。参数1：必须是views；参数2：views目录路径*/
app.set('views','./public/views')
/*3、注册模板引擎，将之前定义的模板引擎配置到应用中。
参数1：必须是view engine；参数2：必须是第1步里定义的模板引擎名称即html*/
app.set('view engine','html')
/*body-parser中间件配置*/
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())
app.get('/login',function(req,res){
res.render('login.html')
})
app.post('/login',function(req,res){
console.log(req.body)
if(req.body.username && req.body.pwd){
 // 设置响应头信息
 res.setHeader("Access-Control-Allow-Origin", "*");
 res.setHeader("Cache-Control","no-cache");
 return res.status(200).json({
 code:0,
 message:'登录成功'
 })
}
})
/*监听端口并启动*/
app.listen(port,function(){
console.log('Server is running at port'+port)
})</pre>
</div>
 
 　　
  
来源：https://www.cnblogs.com/fightjianxian/p/12374598.html

頁: [1]

琼殿技术论坛's Archiver

React网络请求fetch之post请求