Dva & get请求 & post请求

Dva

https://dvajs.com/

安装

npm install dva-cli -g

dva new dva-quickstart
cd dva-quickstart
npm start

路由

//新建route页面， routes/Products.js，内容如下：
import React, { Component } from 'react';
export default class Products extends Component{
    render(){
        return (
            <h2>List of Products</h2>
        )
    }
}

//添加路由信息到路由表，编辑 router.js :
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import Products from './routes/Products';     					//导入Products页面
import 'antd/dist/antd.css';

function RouterConfig({ history }) {
  return (
    <Router history={history}> 
      <Switch>
		<Route path="/products" exact component={Products} />	//设置Products页面路由
      </Switch>
    </Router>
  );
}

export default RouterConfig;

组件仓库数据通信

//第一步：定义Model，在models文件中新建model， models/products.js 
export default {
  namespace: 'products',				//namespace 表示在全局 state 上的 key
  state: {
    name: 'Apple',
    songName: '爱情错觉'
  },
  effects: {},
  reducers: {							//接收 action，同步更新 state
    setSongName(state, action) {
      return {
        ...state,
        songName: action.payload.value
      }
    }
  }
}


//第二步：在 index.js 里载入他
app.model(require('./models/products').default);


//第三步：组件关联仓库（例如组件Xcontent）
import React, { Component } from 'react';
import { connect } from 'dva';

const namespaced = 'products';
const Xcontent = class Xcontent extends Component {
	constructor(props) {
		super(props);
		this.state = {}
	}
	
	updateSongName = () => {			//dispatch触发action
		const { dispatch } = this.props;
		dispatch({
			type: `${namespaced}/setSongName`,
			payload: {
				value: '余情未了'
			}
		})
	}

	render() {
		const { products } = this.props;
		return (
			<div>
				<p>{products.songName}</p>
				<button onClick={this.updateSongName}>点我修改歌名</button>
			</div>
		)
	}
}

function mapPropsState({ products }) {
	return { products }
}
export default connect(mapPropsState)(Xcontent);

配合后端egg.js框架

get请求

//前端get请求
demand() {
    request('http://localhost:7001/dss?username=llt&id=5').then((res) => {
        console.log(res);
    })
}

//后端响应
//router.js文件配置路由
router.get('/dss', controller.home.dss);

//home.js文件配置路由映射方法
async dss() {
    const { ctx } = this;
    const { username, id } = ctx.request.query;
    console.log(username, id);
    
    //后端返回数据格式最好为对象或数组
    ctx.body = {
        key : '6666'
    }
}

post请求

//前端post请求
request('http://localhost:7001/find', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({
        // 参数名：参数
        username: "llt",
        password: "111"
    }),
    credentials: 'include'		//是否携带cookie，默认为omit不携带; same-origi同源携带; include同源跨域都携带
    
}).then((res) => {
    console.log(res);
})


//后端响应
//router.js文件配置路由
router.post('/finds', controller.home.find);

//home.js文件配置路由映射方法
async find() {
    const { ctx } = this;
    const { username, password } = ctx.request.body;
    console.log(username, password);
    
    //后端返回数据格式必须为对象或数组
    ctx.body = {        
        key: 'llt'
    }
}