實戰react技術棧+express先後端博客項目（7）-- 前端管理界面用戶查看功能+後端對應接口開發

時間 2019-12-02

標籤實戰 react 技術 express 後端博客項目前端管理界面用戶查看功能對應接口開發欄目 React 简体版

原文原文鏈接

項目地址：github.com/Nealyang/Re…前端

本想等項目作完再連載一波系列博客，隨着開發的進行，也是的確遇到了很多坑，請教了很多人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享固然是好的，若是能作到集思廣益，那豈不是更美。咱們的口號是：堅定不會爛尾react

本博客爲連載代碼博客同步更新博客，隨着項目日後開發可能會遇到前面寫的不合適的地方會再回頭修改。若有不妥~歡迎兄弟們不嗇賜教。謝謝！git

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

界面展現

前端部分編碼

adminManagerUser.jsgithub

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信息，是爲了防止每次進入頁面都須要從新獲取下數據。作一個緩存的優化。express

界面編碼部分比較簡單，其實就是一個表格，覺得佈局我以爲比較煩，因此直接在底下加了一個分頁。redux

代碼以下：後端

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爲跳過的數據。