实战react技术栈+express前后端博客项目(7)-- 前端管理界面用户查看功能+后端对应接口开发

前端之家收集整理的这篇文章主要介绍了实战react技术栈+express前后端博客项目(7)-- 前端管理界面用户查看功能+后端对应接口开发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目地址:https://github.com/Nealyang/R...

本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人。遂想,何不一边记录踩坑,一边分享收获呢。分享当然是好的,
如果能做到集思广益,那岂不是更美。我们的口号是:坚决不会烂尾

博客为连载代码博客同步更新博客,随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢!

前端管理界面用户信息查看

界面展示

前端部分编码

adminManagerUser.js

  1. const initialState = {
  2. list: [],pageNum: 1,total:0
  3. };
  4. export const actionTypes = {
  5. 'GET_ALL_USER': "GET_ALL_USER",'RESOLVE_GET_ALL_USERS': "RESOLVE_GET_ALL_USERS"
  6. };
  7.  
  8. export const actions = {
  9. get_all_users: function (pageNum=1) {
  10. return {
  11. type: actionTypes.GET_ALL_USER,pageNum:pageNum
  12. }
  13. }
  14. };
  15.  
  16. export function users(state = initialState,action) {
  17. switch (action.type) {
  18. case actionTypes.RESOLVE_GET_ALL_USERS:
  19. return {
  20. list: action.data.list,pageNum: action.data.pageNum,total:action.data.total
  21. };
  22. default:
  23. return state;
  24.  
  25. }
  26. }

常规操作,这里之所以保存了pageNum状态树以及list信息,是为了防止每次进入页面都需要重新获取下数据。做一个缓存的优化。

界面编码部分比较简单,其实就是一个表格,以为布局我觉得比较烦,所以直接在底下加了一个分页

代码如下:

  1. render() {
  2. return (
  3. <div>
  4. <h2>用户管理</h2>
  5. <Table
  6. className={style.table}
  7. pagination={false}
  8. columns={columns}
  9. dataSource={this.props.list}/>
  10. <div>
  11. <Pagination
  12. onChange={(pageNum)=>{
  13. this.props.getAllUsers(pageNum);
  14. }}
  15. current={this.props.pageNum}
  16. total={this.props.total}/>
  17. </div>
  18. </div>
  19.  
  20. )
  21. }
  22. ...
  23. ...
  24. AdminManagerUser.propsTypes = {
  25. pageNUm: PropTypes.number.isrequired,list: PropTypes.arrayOf(PropTypes.object),total:PropTypes.number.isrequired
  26. };
  27. AdminManagerUser.defaultProps = {
  28. pageNum: 1,list: [],total:0
  29. };
  30. function mapStateToProps(state) {
  31. let {pageNum,list,total} = state.admin.users;
  32. return {
  33. pageNum,total
  34. }
  35. }
  36. function mapDispatchToProps(dispatch) {
  37. return {
  38. getAllUsers: bindActionCreators(get_all_users,dispatch)
  39. }
  40. }
  41. export default connect(
  42. mapStateToProps,mapDispatchToProps
  43. )(AdminManagerUser)

在进入页面的时候,需要发起请求,再次切入回来,查看list是否为空,否则才发起数据请求。对应saga处理:

  1. export function* fetch_users(pageNum) {
  2. yield put({type: IndexActionTypes.FETCH_START});
  3. try {
  4. return yield call(get,`/admin/getUsers?pageNum=${pageNum}`);
  5. } catch (err) {
  6. yield put({type: IndexActionTypes.SET_MESSAGE,msgContent: '网络请求错误',msgType: 0});
  7. } finally {
  8. yield put({type: IndexActionTypes.FETCH_END})
  9. }
  10. }
  11.  
  12. export function* get_all_users_flow() {
  13. while (true) {
  14. let request = yield take(ManagerUserActionTypes.GET_ALL_USER);
  15. let pageNum = request.pageNum||1;
  16. let response = yield call(fetch_users,pageNum);
  17. if(response&&response.code === 0){
  18. for(let i = 0;i<response.data.list.length;i++){
  19. response.data.list[i].key = i;
  20. }
  21. let data = {};
  22. data.total = response.data.total;
  23. data.list = response.data.list;
  24. data.pageNum = Number.parseInt(pageNum);
  25. yield put({type:ManagerUserActionTypes.RESOLVE_GET_ALL_USERS,data:data})
  26. }else{
  27. yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:response.message,msgType:0});
  28. }
  29. }
  30. }

saga中需要注意的就是pageNum的处理。以及在每次发起请求的时候都要先发起FETCH_START的action。

## 后端部分

后端部分的编码比较简单,其实及时一个分页的操作。

  1. router.get('/getUsers',(req,res)=>{
  2. let skip =(req.query.pageNum-1)<0?0:(req.query.pageNum-1)*10;
  3. let responseData = {
  4. total:0,list:[]
  5. };
  6. User.count()
  7. .then(count=>{
  8. responseData.total = count;
  9. User.find(null,'_id username type password',{skip:skip,limit:10})
  10. .then((result)=>{
  11. responseData.list = result;
  12. responseClient(res,200,'',responseData)
  13. })
  14. .catch(err=>{
  15. responseClient(res);
  16. })
  17. });
  18. });

因为感觉用户注册了随意删除啥的不太好,所以这里就只做了查看的功能。就当做单独演示分页的操作吧。limit为每页的数量。skip为跳过的数据。

结束语

基本也就是一个前后端简单的交互工作。后端写好接口。前端对应异步action发出。然后saga对接受到的数据进行处理返回给reducer处理最后组织出来state树。

虽然只有一个查的操作。但是也展现了基本的交互。下一篇博客将介绍标签的管理。涉及数据的增删改查等。

项目实现步骤系列博客

## 交流

倘若有哪里说的不是很明白,或者有什么需要与我交流,欢迎各位提issue。或者加群联系我~

扫码关注我的个人微信公众号,直接回复,必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一起学习,一起进步

---

欢迎兄弟们加入:

Node.js技术交流群:209530601

React技术栈:398240621

前端技术杂谈:604953717 (新建)

---

猜你在找的React相关文章