本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人。遂想,何不一边记录踩坑,一边分享收获呢。分享当然是好的,
如果能做到集思广益,那岂不是更美。我们的口号是:坚决不会烂尾
本博客为连载代码博客同步更新博客,随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢!
前端管理界面用户信息查看
界面展示
前端部分编码
adminManagerUser.js
const initialState = {
list: [],
pageNum: 1,
total:0
};
export const actionTypes = {
'GET_ALL_USER': "GET_ALL_USER",
'RESOLVE_GET_ALL_USERS': "RESOLVE_GET_ALL_USERS"
};
export const actions = {
get_all_users: function (pageNum=1) {
return {
type: actionTypes.GET_ALL_USER,
pageNum:pageNum
}
}
};
export function users(state = initialState, action) {
switch (action.type) {
case actionTypes.RESOLVE_GET_ALL_USERS:
return {
list: action.data.list,
pageNum: action.data.pageNum,
total:action.data.total
};
default:
return state;
}
}复制代码
常规操作,这里之所以保存了pageNum状态树以及list信息,是为了防止每次进入页面都需要重新获取下数据。做一个缓存的优化。
界面编码部分比较简单,其实就是一个表格,以为布局我觉得比较烦,所以直接在底下加了一个分页。
代码如下:
render() {
return (
<div>
<h2>用户管理</h2>
<Table
className={style.table}
pagination={false}
columns={columns}
dataSource={this.props.list}/>
<div>
<Pagination
onChange={(pageNum)=>{
this.props.getAllUsers(pageNum);
}}
current={this.props.pageNum}
total={this.props.total}/>
</div>
</div>
)
}
...
...
AdminManagerUser.propsTypes = {
pageNUm: PropTypes.number.isRequired,
list: PropTypes.arrayOf(PropTypes.object),
total:PropTypes.number.isRequired
};
AdminManagerUser.defaultProps = {
pageNum: 1,
list: [],
total:0
};
function mapStateToProps(state) {
let {pageNum, list,total} = state.admin.users;
return {
pageNum,
list,
total
}
}
function mapDispatchToProps(dispatch) {
return {
getAllUsers: bindActionCreators(get_all_users, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(AdminManagerUser)复制代码
在进入页面的时候,需要发起请求,再次切入回来,查看list是否为空,否则才发起数据请求。对应saga处理:
export function* fetch_users(pageNum) {
yield put({type: IndexActionTypes.FETCH_START});
try {
return yield call(get, `/admin/getUsers?pageNum=${pageNum}`);
} catch (err) {
yield put({type: IndexActionTypes.SET_MESSAGE, msgContent: '网络请求错误', msgType: 0});
} finally {
yield put({type: IndexActionTypes.FETCH_END})
}
}
export function* get_all_users_flow() {
while (true) {
let request = yield take(ManagerUserActionTypes.GET_ALL_USER);
let pageNum = request.pageNum||1;
let response = yield call(fetch_users,pageNum);
if(response&&response.code === 0){
for(let i = 0;i<response.data.list.length;i++){
response.data.list[i].key = i;
}
let data = {};
data.total = response.data.total;
data.list = response.data.list;
data.pageNum = Number.parseInt(pageNum);
yield put({type:ManagerUserActionTypes.RESOLVE_GET_ALL_USERS,data:data})
}else{
yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:response.message,msgType:0});
}
}
}复制代码
saga中需要注意的就是pageNum的处理。以及在每次发起请求的时候都要先发起FETCH_START的action。
后端部分
后端部分的编码比较简单,其实及时一个分页的操作。
router.get('/getUsers',(req,res)=>{
let skip =(req.query.pageNum-1)<0?0:(req.query.pageNum-1)*10;
let responseData = {
total:0,
list:[]
};
User.count()
.then(count=>{
responseData.total = count;
User.find(null,'_id username type password',{skip:skip,limit:10})
.then((result)=>{
responseData.list = result;
responseClient(res,200,0,'',responseData)
})
.catch(err=>{
responseClient(res);
})
});
});复制代码
因为感觉用户注册了随意删除啥的不太好,所以这里就只做了查看的功能。就当做单独演示分页的操作吧。limit为每页的数量。skip为跳过的数据。
结束语
基本也就是一个前后端简单的交互工作。后端写好接口。前端对应异步action发出。然后saga对接受到的数据进行处理返回给reducer处理最后组织出来state树。
虽然只有一个查的操作。但是也展现了基本的交互。下一篇博客将介绍标签的管理。涉及数据的增删改查等。
项目实现步骤系列博客
- 实战react技术栈+express前后端博客项目(0)-- 预热一波
- 实战react技术栈+express前后端博客项目(1)-- 整体项目结构搭建、state状态树设计
- 实战react技术栈+express前后端博客项目(2)-- 前端react-xxx、路由配置
- 实战react技术栈+express前后端博客项目(3)-- 后端路由、代理以及静态资源托管等其他配置说明
- 实战react技术栈+express前后端博客项目(4)-- 博客首页代码编写以及redux-saga组织
- 实战react技术栈+express前后端博客项目(5)-- 前后端实现登录功能
- 实战react技术栈+express前后端博客项目(6)-- 使用session实现免登陆+管理后台权限验证
- 实战react技术栈+express前后端博客项目(7)-- 前端管理界面用户查看功能+后端对应接口开发
- 实战react技术栈+express前后端博客项目(8)-- 前端管理界面标签管理功能+后端对应接口开发
- 实战react技术栈+express前后端博客项目(9)-- 前端管理界面评论管理功能+后端对应接口开发
- 实战react技术栈+express前后端博客项目(10)-- 前端管理界面发表文章功能
- 实战react技术栈+express前后端博客项目(11)-- 后端接口对应文章部分的增删改查
- 实战react技术栈+express前后端博客项目(12)-- 前端对于发文部分的完善(增删改查、分页等)
- 实战react技术栈+express前后端博客项目(13)-- 前端对于发文部分的完善(增删改查等)
- 实战react技术栈+express前后端博客项目(14)-- 内容详情页以及阅读数的展示
- 实战react技术栈+express前后端博客项目(15)-- 博客添加评论功能以及对应后端实现
- 实战react技术栈+express前后端博客项目(16)-- pm2 的使用说明
实战react技术栈+express前后端博客项目(17)-- 收工
交流
倘若有哪里说的不是很明白,或者有什么需要与我交流,欢迎各位提issue。或者加群联系我~
扫码关注我的个人微信公众号,直接回复,必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一起学习,一起进步
欢迎兄弟们加入:
Node.js技术交流群:209530601
React技术栈:398240621
前端技术杂谈:604953717 (新建)