實戰react技術棧+express前後端部落格專案（7）-- 前端管理介面使用者檢視功能+後端對應介面開發

Neal_yang發表於2017-10-13
ReactExpress後端前端

專案地址：github.com/Nealyang/Re…

本想等專案做完再連載一波系列部落格，隨著開發的進行，也是的確遇到了不少坑，請教了不少人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享當然是好的，
如果能做到集思廣益，那豈不是更美。我們的口號是：堅決不會爛尾

本部落格為連載程式碼部落格同步更新部落格，隨著專案往後開發可能會遇到前面寫的不合適的地方會再回頭修改。如有不妥~歡迎兄弟們不嗇賜教。謝謝！

前端管理介面使用者資訊檢視

介面展示

前端部分編碼

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樹。

雖然只有一個查的操作。但是也展現了基本的互動。下一篇部落格將介紹標籤的管理。涉及資料的增刪改查等。

專案實現步驟系列部落格

歡迎兄弟們加入：

Node.js技術交流群：209530601

React技術棧：398240621

前端技術雜談：604953717 (新建)

相關文章