Dva
https://dvajs.com/
安装
npm install dva-cli -g
dva new dva-quickstart
cd dva-quickstart
npm start
路由
import React, { Component } from 'react';
export default class Products extends Component{
render(){
return (
<h2>List of Products</h2>
)
}
}
import Products from './routes/Products';
<Route path="/products" exact component={Products} />
组件仓库数据通信
export default {
namespace: 'products',
state: {
name: 'Lemon',
payload: '你是沙雕吗'
},
reducers: {
'upd_name'(state,{payload}){
return{
...state,
payload
}
}
},
};
app.model(require('./models/products').default);
import React, { Component } from 'react';
import { connect } from 'dva';
const Xcontent = class Xcontent extends Component {
render() {
return (
<div>
<p>{this.props.products.payload}</p>
<button onClick={this.props.set_name}>
点我有惊喜
</button>
</div>
)
}
}
export default connect(
(state) => {
return state
},
(dispatch) => {
return {
set_name: () => {
dispatch({
type: 'products/upd_name',
payload: '滚一边玩去'
})
}
}
}
)(Xcontent);
配合后端egg.js框架
get请求
demand() {
request('http://localhost:7001/dss?username=llt&id=5').then((res) => {
console.log(res);
})
}
router.get('/dss', controller.home.dss);
async dss() {
const { ctx } = this;
const { username, id } = ctx.request.query;
console.log(username, id);
ctx.body = {
key : '6666'
}
}
post请求
request('http://localhost:7001/find', {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
body: JSON.stringify({
username: "llt",
password: "111"
})
}).then((res) => {
console.log(res);
})
router.post('/finds', controller.home.find);
async find() {
const { ctx } = this;
const { username, password } = ctx.request.body;
console.log(username, password);
ctx.body = {
key: 'llt'
}
}