分层的概念
前端和后端的分层概念是不同的,但有相似的地方。
后端的分层
服务器端一般分为 Controller,Service, Data Access 三层
- Controller:
负责与用户直接打交道,渲染页面、提供接口等,侧重于展示型逻辑。 - Service:
负责处理业务逻辑,供 Controller 层调用。 - Data Access:
顾名思义,负责与数据源对接,进行纯粹的数据读写,供 Service 层 调用。
前端的分层
前端分为:Page,Model,Service
- Page
负责与用户直接打交道:渲染页面、接受用户的操作输入,侧重于展示型交互性逻辑。 - Model
负责处理业务逻辑,为 Page 做数据、状态的读写、变换、暂存等。 - Service
负责与 HTTP 接口对接,进行纯粹的数据读写。
使用DVA进行数据分层管理
dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
官网:https://dvajs.com/
首先,将dva引用进项目,由于我是用Umi构建的react项目。所以导入就变得非常简单了。
在config.js中配置
使用dva插件
export default {
plugins:[
['umi-plugin-react',{
//开启功能
dva: true,
antd:true
}]
]
}
创建model文件
接下来,创建model文件,在umi中,约定在src/models文件夹中定义model,所以,在 该文件夹下创建ListData.js文件:
export default {
namespace: 'list',
state: {
data: [1, 2, 3],
maxNum: 3
}
}
创建组件并使用dva处理model的数据
import React from 'react';
import { connect } from 'dva';
const namespace = 'list'
const mapStateToPros = (state) =>{
return{
dataList : state[namespace].data,
maxNum : state[namespace].maxNum
}
}
@connect(mapDispatchToProps)
class List extends React.Component{
render(){
return (
<div>
<ul>
{
//遍历
this.props.dataList.map((value,index)=>{
return <li key={index}>{value}</li>
})
}
</ul>
</div>
);
}
}
export default List
流程说明:
- umi框架启动,会自动读取models目录下model文件,即ListData.js中的数据
- @connect修饰符的第一个参数,接收一个方法,该方法必须返回{},将接收到 model数据
- 在全局的数据中,会有很多,所以需要通过namespace进行区分,所以通过 state[namespace]进行获取数据
- 拿到model数据中的data,也就是[1, 2, 3]数据,进行包裹{}后返回
- 返回的数据,将被封装到this.props中,所以通过this.props.listData即可获取到 model中的数据
刚刚只是将数据展现出来,如果点击按钮,需要修改state的值,怎么操作呢? 首先,在
model中新增reducers方法,用于更新state中的数据:
在model中新增reducers方法
export default {
namespace: 'list',
state: {
data: [1, 2, 3],
maxNum: 3
},
reducers:{
//state是更新前的对象,只要state发生了改变 dom就会被重新渲染
addNewData(state){
let maxNum = state.maxNum+1;
let list = [...state.data,maxNum];
return {
data:list,
maxNum:maxNum
}
}
}
}
在组件中引用前面定义的方法
import React from 'react';
import { connect } from 'dva';
const namespace = 'list'
const mapStateToPros = (state) =>{
return{
dataList : state[namespace].data,
maxNum : state[namespace].maxNum
}
}
const mapDispatchToProps = (dispatch)=>{
return {
addNewData:()=>{
dispatch({
type:namespace + "/addNewData" //调用前面定义的修改数据的方法
})
}
}
}
@connect(mapStateToPros,mapDispatchToProps)
class List extends React.Component{
render(){
return (
<div>
<ul>
{
//遍历
this.props.dataList.map((value,index)=>{
return <li key={index}>{value}</li>
})
}
</ul>
<button onClick={()=>{
this.props.addNewData()
}}>
添加
</button>
</div>
);
}
}
export default List