Empiece de cero, cree una plataforma de compra sencilla (6): https://blog.csdn.net/time_____/article/details/105440818
Código fuente del proyecto (actualización continua): https://gitee.com/DieHunter/myCode/ árbol / amo / compras
Hasta ahora, las funciones de front-end y back-end del proyecto han realizado el inicio de sesión, la verificación de la adquisición de tokens, la carga de avatares y la adición de usuarios. Este artículo describe principalmente la realización de las funciones de búsqueda de páginas de listas de usuarios de front-end y back-end, consulta difusa y representación de listas de usuarios.
- La primera es la búsqueda por paginación. El método de implementación de back-end usa la longitud de la base de datos para buscar la tabla, con la función de base de datos skip (n) (omitir los primeros n datos) y limit (m) (buscar m datos hacia atrás), a través de db.find () .skip ((page-1) * pageSize) .limit (pageSize) (la página representa el número de páginas, empezando por 0, no es necesario omitir la primera página. pageSize representa el número de elementos de datos por página después de la paginación), por lo que Creamos dos nuevos métodos en command.js para consultar la longitud de la tabla y la consulta y paginación de palabras clave
/* 查询分页
* @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 };
}- Agregue una interfaz para obtener la lista de usuarios en users.js, busque por correo electrónico o nombre de usuario y paginación
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: "查找成功",
});
});Una vez implementada la parte de back-end, comience a escribir el front-end. Se necesitan el componente de formulario, el componente de paginación y el componente de búsqueda de entrada. Aquí, el componente de formulario se puede escribir por separado y escribir como nuestro propio componente para reutilizarlo en la lista de productos posterior.
- Primero configure los campos del formulario de usuario y encapsúlelos en una clase
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,
},
];
}
}
- Antes de renderizar la tabla, determine el tipo de tabla, ya sea para mostrar el usuario o el producto, para lograr la función de reutilización del componente y vincular el componente de paginación a pageconfig para lograr el efecto de cambiar de página.
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);
};
}
- Finalmente, se llama en la lista de usuarios para lograr un efecto de enlace bidireccional de datos con la página de la tabla.
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) => {});
};
}
- Después de que todo esté hecho, pruébalo
para resumir
En el desarrollo de código de front-end basado en componentes, la reutilización de componentes puede mejorar la capacidad de mantenimiento del código. Al modificar el estado o el valor del estado inicial para usar el componente correspondiente, la eficiencia del código se mejora enormemente