redux global을 사용한 Axios 요청
플랫폼 구축
압축을 풀다
명령줄을 열고 종속 패키지 설치
asl 및
데이터베이스 가져오기
데이터베이스 구성 조정
시험
http://localhost:3001/api/getgoods
교차 도메인
정의: 이전 블로그에서 쿼리 가능
토큰 원칙: 프로젝트 소개, 인터페이스 문서, JWT 사용
동일 출처 정책(Same origin policy)은 브라우저의 핵심이자 가장 기본적인 보안 기능인 규약으로, 동일 출처 정책이 누락될 경우 브라우저의 정상적인 기능에 영향을 미칠 수 있습니다. 웹은 동일 출처 정책을 기반으로 구축되었으며 브라우저는 동일 출처 정책의 구현일 뿐이라고 말할 수 있습니다. 기본적으로 모든 사이트에서 로드된 신뢰할 수 있는 콘텐츠는 안전하지 않은 것으로 간주합니다. 브라우저에 의심스러운 스크립트가 샌드박스에서 실행될 때 악의적일 수 있는 다른 사이트의 리소스가 아닌 동일한 사이트의 리소스에만 액세스하도록 허용해야 합니다. 소위 동일한 출처는 동일한 도메인 이름, 프로토콜 및 포트를 나타냅니다.
반응 스캐폴딩의 두 가지 교차 도메인: 교차 및 교차 호출에 대한 솔루션 - 프로그래머 구함
도메인 간 문제
방법 1
package.json을 통한 교차 도메인
방법 2
방법 1은 교차 도메인을 달성했지만 충분히 유연하지 않으며 전역적으로 하나의 교차 도메인 주소만 설정할 수 있습니다.
타사 플러그인을 사용하여 http-proxy-middleware도메인 간 유연하게 사용할 수 있습니다.
npm i http-proxy-middleware -D
npm install --save-dev http-proxy-middleware
교차 도메인 파일을 구성하려면 src 디렉토리에 고정 쓰기로 setupProxy.js 파일을 생성해야 합니다.
const createProxyMiddleware = require('http-proxy-middleware');
module.exports = function(app){
app.use(createProxyMiddleware('/api',{
target: 'http://127.0.0.1:3001'
})
)
}
축
설치하다
npm 나는 축 -S
axios({
url: "url",
method: "post",
headers: {},
data: {}
}).then(res=>{
}).catch(error=>{
})얻다
axios.get('http://localhost:3001/api/getgoods',{headers:{},params:{}}).then(res=>{
console.log(res)
}).catch(error=>{
console.log(error)
})우편
axios.post('http://localhost:3001/api/getgoods',headers:{},data:{}).then(res=>{
console.log(res)
}).catch(error=>{
console.log(error)
})
axios.post(url).then(res=>{})캡슐화
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
술책
액시오스와 유사
가져오기는 고급 브라우저 >IE8.0에서 데이터 요청을 보내기 위한 내장 API입니다.
가져오기의 맨 아래 레이어는 Promise를 기반으로 합니다.
가져오기는 여전히 동일 출처 정책에 의해 제한됩니다.
얻다
var url = '/api/getgoods'
fetch(url).then(
res=>{
return res.json()//当前步骤只是接受到了响应对象，不能在这里看到响应数据
}
).then(
res=>{
console.log(res,"++++++++++++++++++++++++++++")
}
)fetch는 기본 get 요청이므로 요청 헤더 설정 부분은 생략 가능하며, 전체 작성 방법은 다음과 같습니다.
var url = '/api/getgoods'
fetch(url,{
method: "GET",
headers: {}
}).then(
res=>{
return res.json()//当前步骤只是接受到了响应对象，不能在这里看到响应数据
}
).then(
res=>{
console.log(res,"++++++++++++++++++++++++++++")
}
)우편
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,"++++++++++++++++++++++++++++")
}
)캡슐화
패키지 코드
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()
})
}사용
글로벌 데이터 제어 반응(redux)
Redux는 구성 요소 간에 공유해야 하는 일부 데이터를 관리하는 데 도움이 되는 반응 상태 관리 도구입니다.
다운로드
npm i redux -S기본 구조
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객체 저장
일반적인 방법
getState 获取store当中的数据
dispatch 传入剧本，调用store封装的函数的指定部分기본 기능
완전한 케이스
목록 데이터의 추가, 삭제, 수정 및 조회
형식 정의
npm i antd -S확인하다
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>
</>
)
}
}증가하다
1. 동일한 객체를 여러 번 반환할 수 없으며, reduser에서는 원래 상태로 반환할 수 없습니다.
2. reduser에 의해 반환된 데이터는 store.getState()에 의해 얻어지는데, dispatch를 가리키고 나서 얻은 것은 dispatch에 의해 수정된 데이터입니다.
아래와 같이 코드 쇼:
감속기 코드
리덕스/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레이아웃.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>
</>
)
}
}