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)
})

 

   

 

posted @ 2020-02-27 21:43  剑仙6  阅读(...)  评论(...编辑  收藏
欢迎访问个人网站www.qingchun.在线