Empiece desde cero, cree una plataforma de compra sencilla (5): https://blog.csdn.net/time_____/article/details/105437534
Código fuente del proyecto (actualización continua): https://gitee.com/DieHunter/myCode/ árbol / amo / compras
En el cuarto artículo , se implementaron y probaron la carga de archivos del lado del servidor y la función de back-end para agregar usuarios. Este artículo implementa principalmente el avatar de carga de front-end y la adición de usuarios.
Primero, introducimos el componente de carga de archivos en antd y lo encapsulamos en nuestro componente
- Restringimos que los usuarios carguen solo una imagen. La acción en el componente de carga representa la ruta de carga, que es la dirección del archivo de carga que probamos en el cuarto artículo. El nombre es el nombre de identificación del archivo y los datos son el parámetro pasado. Aquí estamos Token usado
import React from "react";
import { Upload, message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import config from "../../config/config";
let {
UploadName,
Agreement,
BaseUrl,
ServerPort,
Path,
UploadKey,
StorageName,
} = config;
export default class UpdataPic extends React.Component {
state = {
fileList: [],
};
handleChange = ({ fileList, file }) => {
this.setState({ fileList });
if (file["response"] && file.status == "done") {
let res = file["response"];
message.success(res.msg);
}
if (file["status"] == "removed") {
}
};
render() {
const { fileList } = this.state;
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">上传头像</div>
</div>
);
return (
<div className="clearfix">
<Upload
action={Agreement + BaseUrl + ServerPort + Path + UploadName.headPic}
name={UploadKey.headKey}
listType="picture-card"
fileList={fileList}
onChange={this.handleChange}
data={
{ token: this.$utils.getStorage(StorageName.token) }}
>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
</div>
);
}
}
- Luego introducimos el componente en una página para probar el efecto
Una vez implementada la función de carga, podemos comenzar a agregar usuarios
- Para agregar un nuevo usuario, planeo ponerlo en el componente del cajón a la derecha, es decir, el componente del cajón, e incrustar el formulario en el cajón ( modificar usuarios y agregar nuevos usuarios es similar, modificamos la información del usuario directamente en el cajón del usuario recién agregado Simplemente dé el valor inicial al formulario )
- Hay varios puntos a tener en cuenta , el formulario de 1.antd necesita usar React.createRef () para cargar el componente. 2. Cuando se asigna el valor inicial a los datos del formulario, es necesario ajustar el método this.formRef.current.setFieldsValue () del formulario. Sin embargo, existe un error . Cuando se muestra el componente Drawer, el componente del formulario aún no se ha cargado. Si asigna el valor directamente en este momento, La asignación no será exitosa debido a la asincronía. La solución (el método de procesamiento oficial es usar la administración global redux, aquí uso la función de ciclo de vida para resolverlo): primero habilite la función de precarga en el componente Drawer (forceRender, pre-renderizando los elementos en el Drawer ), y luego obtenga el valor en el estado en el ciclo de vida (componentDidUpdate ), llame a this.formRef.current.setFieldsValue () (lo mismo que modificar la información del usuario)
import React from "react";
import Mail from "../../config/mail";
import {
Drawer,
Form,
Button,
Col,
Row,
Input,
Select,
Radio,
Cascader,
message,
} from "antd";
import config from "../../config/config";
import City from "../../config/city";
import UpdataPic from "../updata/updata";
const { ServerApi, StorageName, FilePath } = config;
const { Option } = Select;
export default class ListDrower extends React.Component {
formRef = React.createRef();
state = {
visible: false,
record: {},
};
componentDidMount() {
this.props.onDrowerRef(this);
}
componentDidUpdate() {
this.formRef.current.setFieldsValue(this.state.record);
}
showDrawer = () => {//显示Drawer
this.setState({
formType: "add",
visible: false,
record: {
sex: "man",
userType: "user",
mailurl: "@qq.com",
},
});
this.setState({
visible: true,
});
};
onClose = () => {//隐藏Drawer
this.formRef.current.resetFields();
this.setState({
visible: false,
record: null,
});
};
getPic = (data) => {//上传头像后刷新表单头像信息
this.formRef.current.setFieldsValue({
headPic: data.headPath,
});
};
delPic = () => {//删除头像后同时删除表单图片信息
this.formRef.current.setFieldsValue({
headPic: null,
});
};
sendData(val) {//提交用户信息
val.token = this.$utils.getStorage(StorageName.token);
let data = this.$crypto.setCrypto(val);
let _t = this;
this.$axios
.post(ServerApi.user.addUser, { crypto: data })
.then((res) => {
switch (res.result) {
case 1:
message.success(res.msg);
_t.onClose();
_t.props.getUserList();
break;
case 0:
message.warning(res.msg);
break;
default:
// message.warning(res.msg);
break;
}
})
.catch((err) => {
message.error("操作失败");
});
}
render() {
return (
<Drawer
title="新增用户"
width={720}
onClose={this.onClose}
visible={this.state.visible}
forceRender //加上预加载，防止表单异步生成，导致this.formRef.current为空
bodyStyle={
{ paddingBottom: 80 }}
footer={
<div
style={
{
textAlign: "right",
}}
>
<Button onClick={this.onClose} style={
{ marginRight: 20 }}>
取消
</Button>
</div>
}
>
<Form
layout="vertical"
hideRequiredMark
ref={this.formRef}
onFinish={this.sendData.bind(this)}
>
<Row gutter={16}>
<Col span={10}>
<Form.Item name="headPic" label="头像">
<UpdataPic
onUpdateRef={(child) => {
this.updateChild = child;
}}
picTarget={this.getPic}
picDelete={this.delPic}
></UpdataPic>
</Form.Item>
</Col>
<Col span={10}>
<Form.Item
name="userType"
label="用户类型"
rules={[{ required: true, message: "请选择用户类型" }]}
>
<Radio.Group buttonStyle="solid">
<Radio.Button value="admin">管理员</Radio.Button>
<Radio.Button value="user">用户</Radio.Button>
</Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="username"
label="用户名"
rules={[{ required: true, message: "请输入用户名" }]}
>
<Input placeholder="请输入用户名" allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="password"
label="密码"
rules={[{ required: true, message: "请输入密码" }]}
>
<Input.Password
type="password"
placeholder="请输入密码"
allowClear
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={5}>
<Form.Item
name="sex"
label="性别"
rules={[{ required: true, message: "请选择性别" }]}
>
<Radio.Group buttonStyle="solid">
<Radio.Button value="man">男</Radio.Button>
<Radio.Button value="woman">女</Radio.Button>
</Radio.Group>
</Form.Item>
</Col>
<Col span={16}>
<Form.Item label="邮箱">
<Input.Group compact>
<Form.Item
name="mailaddress"
rules={[{ required: true, message: "请输入正确邮箱" }]}
>
<Input defaultValue="" allowClear />
</Form.Item>
<Form.Item
name="mailurl"
rules={[{ required: true, message: "请选择邮箱类型" }]}
>
<Select onChange={this.changeMail} style={
{ width: 150 }}>
{(() => {
return Mail.address.map((item) => {
return (
<Option key={item.mail} value={item.mail}>
{item.mail}
</Option>
);
});
})()}
</Select>
</Form.Item>
</Input.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={16}>
<Form.Item label="收货地址" required={false}>
<Input.Group compact>
<Form.Item
name="alladdress"
// rules={[{ required: true, message: "请选择收货地址" }]}
>
<Cascader options={City} placeholder="请选择收货地址" />
</Form.Item>
<Form.Item
name="address"
// rules={[{ required: true, message: "请填写收货地址" }]}
>
<Input placeholder="请输入详细地址" allowClear />
</Form.Item>
</Input.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item name="descript" label="个性签名">
<Input.TextArea rows={4} placeholder="个性签名" />
</Form.Item>
</Col>
</Row>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
>
提交
</Button>
</Form.Item>
</Form>
</Drawer>
);
}
}
- Finalmente, solicitamos al servidor que pruebe
para resumir
React es un marco de optimización dom basado en la capa de visualización de vista. Su complemento de administración de estado global redux globaliza algunas variables compartidas, lo que equivale a definir variables globales en el ámbito de la ventana nativa. Aunque es conveniente, puede omitirse. Lugar, es mejor usar menos