从零开始，搭建一个简单的购物平台（六）：https://blog.csdn.net/time_____/article/details/105440818
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping
到现在为止，项目前后端功能已实现登录，token获取验证，上传头像，添加用户，这篇文章主要讲述实现前后端用户列表分页查找，模糊查询，用户列表渲染功能
首先是分页查找，后端实现方式通过数据库查找表的长度，配合数据库函数skip(n)（跳过前n条数据），和limit(m)（向后查找m条数据），通过db.find().skip((page - 1) * pageSize).limit(pageSize)（page代表第几页，从0开始，第一页则不需要跳过。pageSize表示分页后每页数据条数），所以我们在command.js中新建两个方法，用于查询表的长度和关键字查询并分页
/* 查询分页 * @param {object} mod 数据库model * @param {number} sort 排序顺序 负数倒序 正数顺序 * @param {number} page 当前页数 * @param {number} pageSize 分页大小 * @param {object} pageSize 关键字模糊查询 */ static async findByPage(mod, sort, page, pageSize, keyWord) { //分页查 return await mod .find(keyWord) .sort(sort) .skip((page - 1) * pageSize) .limit(pageSize); } /* 查询分页 * @param {object} mod 数据库model * @param {number} pageSize 分页大小 */ static async getTotalPage(mod, pageSize) { let allNum = await mod.find().estimatedDocumentCount(); return { totalPage: parseInt(allNum / pageSize) + 1, allNum }; }
在users.js中添加获取用户列表的接口，通过电子邮件或者用户名查找，分页
router.get(Config.ServerApi.userList, Util.checkToken, async (req, res) => { if (res._data.userTokenType != "admin") { //非管理员 res.send({ result: -999, msg: "请用管理员账号登录", }); return; } let total = await getTotalPage(Mod, res._data.pageSize); let query = new RegExp(res._data.keyWord, "i"); //模糊查找正则条件 res.send({ result: 1, data: { page: res._data.page, pageSize: res._data.pageSize, totalPage: total.totalPage, allNum: total.allNum, list: await findByPage( Mod, { time: res._data.sort, }, res._data.page, res._data.pageSize, res._data.keyWord.length ? { $or: [ { mailaddress: query, }, { username: query, }, ], } : {} ), }, msg: "查找成功", }); });
后端部分实现完成后，开始编写前端，需要用到表格组件，分页组件和input查找组件，这里可以将表格组件单独写出来，写成我们自己的组件，以供后期商品列表重复使用
先配置一下用户表格字段，封装到一个class里
import React from "react"; import { Button, Popconfirm, } from "antd"; import config from "../../config/config"; const { FilePath } = config; export default class UserTable { constructor(_this) { return [ { align: "center", title: "用户名", dataIndex: "username", width: 200 }, { align: "center", title: "邮箱", dataIndex: "mailaddress", width: 200, render: (text, data) => { return <div>{text + data.mailurl}</div>; }, }, { align: "center", title: "密码", dataIndex: "password", width: 300, }, { align: "center", title: "头像", dataIndex: "headPic", width: 150, render: (imgPath) => { return ( <img src={FilePath + imgPath} alt="" style={{ width: 60, margin: "0 auto" }} /> ); }, }, { align: "center", title: "性别", dataIndex: "sex", width: 200, render: (sex) => { return <div>{sex == "man" ? "男" : "女"}</div>; }, }, { align: "center", title: "收货地址", dataIndex: "alladdress", width: 200, render: (text, data, index) => { return <div>{text.join("-") + data.address}</div>; }, }, { align: "center", title: "个性签名", dataIndex: "descript", width: 200, }, { align: "center", title: "用户类型", dataIndex: "userType", width: 200, render: (type) => { return <div>{type == "admin" ? "管理员" : "用户"}</div>; }, }, { align: "center", title: "注册时间", dataIndex: "time", width: 200, }, ]; } }
在表格渲染前判断一下表格类型，是显示用户还是商品，达到组件复用功能，将分页组件与pageconfig绑定，达到切换页面的效果
import React from "react"; import { Table, Button, Card, Pagination, Input, Col, Row, } from "antd"; import userTab from "./userTab"; import { PlusOutlined } from "@ant-design/icons"; const { Search } = Input; export default class ListTable extends React.Component { state = { tableType: this.props.tableType, pageConfig: { totalPage: 0, page: 0, pageSize: 0, allNum: 0, }, columns: [], list: [], }; componentDidMount() { if (this.state.tableType == "user") { this.setState({ columns: new userTab(this) }); } else { } this.props.onTableRef(this); } render() { return ( <Card title="用户列表"> <Row gutter={16}> <Col span={12}> <Button onClick={this.props.showDrawer} type="primary"> <PlusOutlined /> 新增用户 </Button> </Col> <Col span={12}> <Search style={{ float: "right" }} placeholder="输入用户名/邮箱" enterButton="查找" size="large" allowClear onSearch={(val) => { let { pageConfig } = this.state; pageConfig.keyWord = val; this.setState({ pageConfig, }); this.props.changePage(pageConfig); }} /> </Col> </Row> <Table scroll={{ x: 2000 }} rowKey={(record) => record._id} columns={this.state.columns} dataSource={this.state.list} pagination={false} ></Table> <Pagination style={{ marginTop: 50 }} hideOnSinglePage total={this.state.pageConfig.allNum} current={this.state.pageConfig.page} pageSize={this.state.pageConfig.pageSize} showSizeChanger showQuickJumper showTotal={(total) => `共 ${total} 条`} onChange={this.changePage} onShowSizeChange={this.changePage} /> </Card> ); } changePage = (page, pageSize) => { let pageConfig = this.state.pageConfig; pageConfig.page = page; pageConfig.pageSize = pageSize; this.setState({ pageConfig, }); this.props.changePage(pageConfig); }; }
最后在userlist中调用，与表格中的page达到一个数据双向绑定效果
import React from "react"; import ListTable from "../../../components/table/table"; import { message, } from "antd"; import config from "../../../config/config"; const { ServerApi, StorageName } = config; export default class UserList extends React.Component { state = { userType: "adduser", pageConfig: { token: this.$utils.getStorage(StorageName.token), keyWord: "", page: 1, pageSize: 2, totalPage: 1, sort: 1, }, }; componentDidMount() { this.getUserList(); } render() { return ( <div> <ListTable tableType="user" onTableRef={(child) => { this.tableChild = child; }} showDrawer={this.showDrawer} changePage={this.changePage} ></ListTable> <ListDrower getUserList={this.getUserList} userType={this.state.userType} onDrowerRef={(child) => { this.drawerChild = child; }} ></ListDrower> </div> ); } showDrawer = () => { this.drawerChild.showDrawer(); }; changePage = (pageConfig) => { this.setState({ pageConfig }); this.getUserList(); }; getUserList = () => { let data = { ...this.state.pageConfig }; this.$axios .get(ServerApi.user.userList, { params: { crypto: this.$crypto.setCrypto(data) }, }) .then((res) => { let { list, totalPage, allNum } = res.data; let { pageConfig } = this.state; pageConfig.allNum = allNum; pageConfig.totalPage = totalPage; this.tableChild.setState({ pageConfig, list }); }) .catch((err) => {}); }; }
全部完成后，测试一下
总结
在组件化开发的前端代码中，组件复用可以使代码可维护性提升，通过修改state或者初始状态值对相对应的组件进行使用，大大提升代码效率
