React網絡請求fetch之post請求

本節介紹下React下fetch的post請求

（1）編寫服務端代碼

/*加載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)
})

　　之后啟動服務器，監聽post請求數據

　　

　　

 

（2）編寫組件模板代碼

　　

 

 　　然后編寫fetch請求，如下所示

　　

 　　完整代碼如下所示

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}/><br/>
                密碼：<input 
                            type="password" name="pwd"
                            onChange={this.handlePwd.bind(this)} 
                            id="pwd" value={this.state.pwd}/><br/>
                <button>登錄</button>
            </form>
        )
    }
}

export default FetchPost

　　此時測試如下

　　

 　　服務端輸出如下所示

　　

 　　此時便可以通過fetch發送post請求，完成交互

　

（3）解決跨域

　　此時雖然可以正常獲取，但是存在跨域問題，所以加下來編寫后台代碼，解決跨域問題

　　

 

 　　此時便可以解決跨域，接下來在前端做出對應處理即可　　

　　

 

 　　完整代碼如下：

/*加載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)
})