Solicitud de Axios con redux

Solicitud de Axios con redux global

Construcción de plataforma

descomprimir

Abra la línea de comando e instale los paquetes dependientes

asl y

Importación de base de datos

Ajustar la configuración de la base de datos

prueba

http://hostlocal:3001/api/getgoods

dominio cruzado

Definición: se puede consultar en el blog anterior

Principio del token: introducción del proyecto, documentación de la interfaz, uso de JWT

La misma política de origen (Same origin policy) es una convención, que es la función de seguridad central y más básica del navegador. Si falta la misma política de origen, las funciones normales del navegador pueden verse afectadas. Se puede decir que la Web está construida sobre la base de la política del mismo origen, y el navegador es solo una implementación de la política del mismo origen. En esencia, considera que el contenido confiable cargado desde cualquier sitio no es seguro. Cuando los scripts que son dudosos para el navegador se ejecutan en la zona de pruebas, solo se les debe permitir acceder a los recursos del mismo sitio, no a los de otros sitios que pueden ser maliciosos. El llamado mismo origen se refiere a: el mismo nombre de dominio, protocolo y puerto.

Dos dominios cruzados de andamios de reacción: cruce y la solución para cruzar llamadas: se busca programador

problemas entre dominios

método uno

Entre dominios a través de package.json

Método dos

El método 1 ha logrado el cruce de dominios, pero no es lo suficientemente flexible y solo se puede establecer una dirección de cruce de dominios globalmente.

http-proxy-middlewarePuede ser flexible entre dominios con la ayuda de complementos de terceros

npm i http-proxy-middleware -D
npm install --save-dev http-proxy-middleware

Para configurar archivos entre dominios, debe crear un archivo setupProxy.js en el directorio src, con escritura fija

const createProxyMiddleware  = require('http-proxy-middleware');
module.exports = function(app){
        app.use(createProxyMiddleware('/api',{
            target: 'http://127.0.0.1:3001' 
        })       
    )
}

axios

Instalar

npm y axios -S

axios({
    url: "url",
    method: "post",
    headers: {},
    data: {}
}).then(res=>{
​
}).catch(error=>{
​
})

conseguir

axios.get('http://localhost:3001/api/getgoods',{headers:{},params:{}}).then(res=>{
    console.log(res)
}).catch(error=>{
    console.log(error)
})

CORREO

axios.post('http://localhost:3001/api/getgoods',headers:{},data:{}).then(res=>{
    console.log(res)
}).catch(error=>{
    console.log(error)
})
axios.post(url).then(res=>{})

encapsulación

import axios from "axios";
import {Component} from "react";

// axios.defaults.baseURL = "/api"

axios.interceptors.response.use(response=>{
    return response.data
})

Component.prototype.$http = axios

export default axios

buscar

similar a axios

fetch es una API integrada para enviar solicitudes de datos en navegadores avanzados >IE8.0

La capa inferior de fetch se basa en Promise

la búsqueda seguirá estando restringida por la política del mismo origen

CONSEGUIR

var url = '/api/getgoods'
fetch(url).then(
    res=>{
        return res.json()//当前步骤只是接受到了响应对象，不能在这里看到响应数据
    }
).then(
    res=>{
        console.log(res,"++++++++++++++++++++++++++++")
    }
)

fetch es la solicitud de obtención predeterminada, por lo que la parte de configuración del encabezado de la solicitud se puede omitir, y el método de escritura completo es el siguiente

var url = '/api/getgoods'
fetch(url,{
    method: "GET",
    headers: {}
}).then(
    res=>{
        return res.json()//当前步骤只是接受到了响应对象，不能在这里看到响应数据
    }
).then(
    res=>{
        console.log(res,"++++++++++++++++++++++++++++")
    }
)

CORREO

var url = '/api/getgoods'
fetch(url,{
    method: "POST",
    headers: {
        'Content-Type': "application/json"
    },
    body: JSON.stringify({
        username: "root",
        password: "123"
    }),
}).then(
    res=>{
        return res.json()//当前步骤只是接受到了响应对象，不能在这里看到响应数据
    }
).then(
    res=>{
        console.log(res,"++++++++++++++++++++++++++++")
    }
)

encapsulación

código de paquete

export function request(url,method="GET",body={},headers={}){
    const option = {
        method,
        headers: Object.assign({"Content-Type": "application/json"},headers)//合并对象，设置默认头
    }
    if(method === "POST"){
        option.body = JSON.stringify(body)
    }
    return fetch(url,option).then(response=>{
        return response.json()
    })
}

usar

Reaccionar control de datos globales (redux)

Redux es una herramienta de administración de estado de reacción, que nos ayuda a administrar algunos datos que deben compartirse entre los componentes.

descargar

npm i redux -S

estructura basica

import {createStore} from 'redux'
const init_list = [
    {
        id:3,
        name: "张三",
        age: 18
    },
    {
        id:2,
        name: "李四",
        age: 18
    },
    {
        id:1,
        name: "王五",
        age: 18
    }
]
function personList(state = init_list,action){
    switch (action.type){
        case 'insert':
            console.log("这里是插入")
            break
        case 'delete':
            console.log("这里是删除")
            break
        case 'update':
            console.log("这里是修改")
            break
        case 'select':
            console.log("这里是条件查询")   
            break 
        default:
            return state
    }
}
const store = createStore(personList) //创建一个store对象
export default store

guardar objeto

método común

getState 获取store当中的数据
dispatch 传入剧本，调用store封装的函数的指定部分

operación básica

caso completo

Adición, eliminación, modificación y consulta de datos de lista

definir formato

npm i antd -S

controlar

import React, { Component } from 'react'
import store from '../redux'
import { Table, Input } from 'antd';
import '../asserts/css/layout.css'
export default class Layout extends Component {
    state = {
        dataSource: [],
        columns: [
            {
                title: '编号', //表头字段
                dataIndex: 'id', //调用数据对应的字段 table.id
            },
            {
                title: '姓名',
                dataIndex: 'name',

            },
            {
                title: '年龄',
                dataIndex: 'age',

            },
        ]
    }
    UNSAFE_componentWillMount() {
        this.setState({
            dataSource: store.getState()
        });
    }
    render() {
        return (
            <>
                <div class="yangshi">
                    <Input placeholder="Basic usage" />
                    <Table 
                       dataSource={this.state.dataSource} 
                       columns={this.state.columns} 
                    />
                </div>
            </>
        )
    }
}

aumentar

1. El mismo objeto no se puede devolver varias veces. En reduser, no se puede devolver el estado original

2. Los datos devueltos por reduser obtenidos por store.getState(), pero luego de apuntar a dispatch lo que se obtiene son los datos modificados por dispatch

el código se muestra a continuación:

código reductor

redux/index.js

import {createStore} from 'redux'
const init_list = [
    {
        id:3,
        name: "张三",
        age: 18
    },
    {
        id:2,
        name: "李四",
        age: 18
    },
    {
        id:1,
        name: "王五",
        age: 18
    }
]
function personList(state = init_list,action){
    switch (action.type){
        case 'insert':
            var id = state.length>0?state[0].id+1:1
            let {name,age} = action.data
            var obj = {
                id: id,
                name:name,
                age:age
            }
            return [obj,...state] 
            //不能多次返回同一个对象，在reduser当中，不可以返回原生的state
        case 'delete':
            console.log("这里是删除")
            break
        case 'update':
            console.log("这里是修改")
            break
        default:
            return state
    } 
}
const store = createStore(personList) //创建一个store对象
export default store

diseño.jsx

import React, { Component } from 'react'
import store from '../redux'
import { Table, Input,Form,Button } from 'antd';
import '../asserts/css/layout.css'
export default class Layout extends Component {
    state = {
        dataSource: [],
        columns: [
            {
                title: '编号', //表头字段
                dataIndex: 'id', //调用数据对应的字段 table.id
            },
            {
                title: '姓名',
                dataIndex: 'name',

            },
            {
                title: '年龄',
                dataIndex: 'age',

            },
        ]
    }
    UNSAFE_componentWillMount() {
        this.setState({
            dataSource: store.getState()
        });
    }
    submit(value){
        store.dispatch({
            type: 'insert',
            data: value
        })
        this.setState({
            dataSource: store.getState()
        });
    }
    render() {
        return (
            <>
                <div className="yangshi">
                    <Form
                        name="basic"
                        labelCol={
   
   { span: 8 }}
                        wrapperCol={
   
   { span: 16 }}
                        initialValues={
   
   { remember: true }}
                        autoComplete="off"
                        onFinish={this.submit.bind(this)}
                    >
                        <Form.Item
                            label="用户名"
                            name="name"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="年龄"
                            name="age"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item wrapperCol={
   
   { offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </Form>

                    <Table 
                       dataSource={this.state.dataSource} 
                       columns={this.state.columns} 
                    />
                </div>
            </>
        )
    }
}

cambiar

borrar