停车场车辆管理系统从零搭建——用户-个人信息
ZhShy23
帮助1人
【停车场车辆管理系统】从零搭建——AdminController搭建
【停车场车辆管理系统】从零搭建——UserController搭建
页面展示
这个是整体页面，修改个人信息和添加车辆信息的按钮点击之后会弹出对话框。
我们来分析下页面结构：
侧边栏
layout代码可以到官网上看一下，布局的样式有很多种，这里选择的是侧边布局。
除了要写上我们需要的模块名以外，还需要给他们绑定上跳转路径，由于在用户界面需要有一个登录状态的验证，所以我们给它创建一个state:user，将之前登录页面传过来的props.location.state.user填入当前的state.user内。在layout里面进行跳转时，也需要将其作为参数进行传递。
import ...
export default class UserInfo extends React.Component {
constructor(props) {
super(props);
this.state = (
{
user: this.props.location.state.user
})
}
render() {
return (
<div className="UserInfo">
<Layout>
<Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={broken => {
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<div className="logo"/>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined/>}>
<Link to={{
pathname: '/UserInfo',
state: {user: this.state.user}
}}>个人信息</Link>
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined/>}>
<Link to={{
pathname: '/UserParkInfo',
state: {user: this.state.user}
}}>车位信息</Link>
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined/>}>
<Link to={{
pathname: '/UserParkingOrder',
state: {user: this.state.user}
}}>费用信息</Link>
</Menu.Item>
<Menu.Item key="4" icon={<UploadOutlined/>}>
<Link to={{
pathname: '/UserRentApplication',
state: {user: this.state.user}
}}>承包申请</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header className="site-layout-sub-header-background" style={{padding: 0}}/>
<Content style={{margin: '24px 16px 0'}}>
<div className="site-layout-background" style={{padding: 24, minHeight: 510}}>
</div>
</Content>
<Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
</div>
)
}
}
完成后的页面是这样的，现在我们向<Content></Content>中填入内容。
个人信息
首先我们使用一个分割线
<div className="site-layout-background" style={{padding: 24, minHeight: 510}}>
<div className="MyInfo">
<Divider orientation="left">个人信息</Divider>
</div>
</div>
然后我们再使用一个描述列表对信息进行展示。
<div className="site-layout-background" style={{padding: 24, minHeight: 510}}>
<div className="MyInfo">
<Divider orientation="left">个人信息</Divider>
<Descriptions bordered column={2}>
<Descriptions.Item label="姓名">{this.state.user.userName}</Descriptions.Item>
<Descriptions.Item label="手机号">{this.state.user.userPhone}</Descriptions.Item>
<Descriptions.Item label="小区">{this.state.user.cityName}</Descriptions.Item>
<Descriptions.Item label="详细地址">{this.state.user.userAddress}</Descriptions.Item>
</Descriptions>
</div>
</div>
这里我们可以看到，小区是没有信息的，对照代码，可以看到小区那一栏我们写的是cityName，而真正从后端返回过来的属性是cityId，cityId是一个整形，我们需要根据id来找到对应的cityName，这就要涉及后端方法了。在之前的后端搭建部分我们已经写了这部分的接口，直接调用即可。
export default class UserInfo extends React.Component {
constructor(props) {
super(props);
this.state = (
{
user: this.props.location.state.user
})
}
componentDidMount() {
this.selectCityName();
}
selectCityName = () => {
const url = 'http://localhost:8080/user/selectCityName'
axios.get(url, {
params: {
cityId: this.state.user.cityId
}
}
).then(
(res) => {
const user = this.state.user;
user.cityName = res.data;
this.setState({
user: user
})
}
)
}
render() {......}
}
这里的componentDidMount是指在元素一渲染完毕就调用此函数，这个函数中引用了 selectCityName()函数，指在元素一渲染完毕就查询cityId对应的cityName。
车辆信息
这里是调用了antd上的表格。
<div className="MyCar">
<Divider orientation="left">车辆信息</Divider>
<Table columns={columns} dataSource={this.state.car}/>
</div>
我们可以看到，Table中使用了两个属性，一个是columns，一个是dataSource，分别是表格的列名和内容。
首先来看列：
const columns = [
{
title: '车牌号',
dataIndex: 'carNumber',
key: 'carNumber',
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<Space size="middle">
<div>
<a onClick={() => this.delete(text, record)}>
删除
</a>
</div>
</Space>
),
},
];
在列里有一列车牌号，一列操作，操作中是删除。
删除操作调用了一个delete方法。注意这个delete方法的参数是text,record，这样可以将表格中对应行的数据传递到方法中。
delete = (text, record) => {
var url = 'http://localhost:8080/user/deleteMyCar'
axios.post(url, text).then(
(res) => {
this.componentDidMount();
}
);
}
然后我们再看下dataSource，dataSource使用了this.state.car，我们需要用一个方法来把数据库中的车辆信息放入state中。
selectMyCar = () => {
var url = 'http://localhost:8080/user/selectMyCar'
axios.post(url, this.state.user).then(
(res) => {
this.setState({
car: res.data
})
}
)
}
同样，这个方法需要在componentDidMount中进行调用。
componentDidMount() {
this.selectCityName();
this.selectMyCar();
}
显示出来就是这样：
我们还缺少用户的信息修改和车辆信息的添加。
信息修改
我们新建一个UpdateMyInfo.js文件
首先我们创建好初始内容，并使用props将user信息放进state中
import React from "react";
export default class UpdateMyInfo extends React.Component {
constructor(props) {
super(props);
this.state = ({
user: this.props.user,
city: []
})
}
再获取下city：
componentDidMount() {
this.selectCity();
}
selectCity = () => {
const url = 'http://localhost:8080/user/selectCity'
axios.get(url).then(
(city) => {
this.setState({
city: city.data
})
}
)
}
这里我们使用一个modal模态框，把个人信息作为form表单放进去，
<Button type="primary" onClick={this.open} style={{float: "left"}}>
修改个人信息
</Button>
<Modal title="Basic Modal" visible={this.state.showModal}
onOk={this.updateMyInfo}
onCancel={this.close}
okText="保存"
cancelText="取消"
>
<Form
labelCol={{span: 24}}
wrapperCol={{span: 24}}
>
<Form.Item label="姓名：">
<Input
id="userName"
value={this.state.user.userName}
onChange={this.getInput}
placeholder="请输入姓名"/>
</Form.Item>
<Form.Item label="手机号：">
<Input placeholder="请输入手机号"
onChange={this.getInput}
value={this.state.user.userPhone}
id="userPhone"
/>
</Form.Item>
<Form.Item label="小区：">
<Select
labelInValue
defaultValue={this.state.user.cityId}
onChange={this.getSelect}
>
{this.state.city.map(
(value) => {
return (
<Option value={value.cityId}>{value.cityName}</Option>
)
}
)}
</Select>,
</Form.Item>
<Form.Item label="详细地址：">
<Input placeholder="请输入详细地址"
id="userAddress"
onChange={this.getInput}
value={this.state.user.userAddress}
/>
</Form.Item>
<Form.Item label="密码：">
<Input.Password
placeholder="请输入密码"
onChange={this.getInput}
id="userPassword"
value={this.state.user.userPassword}
/>
</Form.Item>
<Form.Item>
</Form.Item>
</Form>
</Modal>
关于模态框的打开与关闭，需要用到一个showModal参数，作为bool值来决定modal的开关，然后调用open与close方法。
constructor(props) {
super(props);
this.state = ({
showModal: false,
user: this.props.user,
city: []
})
}
open = () => {
this.setState({
showModal: true
})
}
close = () => {
this.setState({
showModal: false
})
}
在模态框内的表单编辑时，还需要对新输入的内容进行获取，
getInput=()=>{
const user=this.state.user;
user.cityId=this.state.user.cityId;
user.userName=document.getElementById('userName').value;
user.userPhone=document.getElementById('userPhone').value;
user.userAddress=document.getElementById('userAddress').value;
user.userPassword=document.getElementById('userPassword').value;
this.setState({
user:user
})
}
getSelect = (value) => {
const cityId = value.value;
const user = this.state.user;
user.cityId = cityId;
this.setState({
user: user
})
}
当完成修改后我们需要保存修改：
updateMyInfo=()=>{
const url = 'http://localhost:8080/user/updateMyInfo'
const user=this.state.user;
user.userName=document.getElementById('userName').value;
user.userPhone=document.getElementById('userPhone').value;
user.userAddress=document.getElementById('userAddress').value;
user.userPassword=document.getElementById('userPassword').value;
axios.post(url, user).then(
(res)=>{
if (res.status==200){
this.props.parent.componentDidMount();
alert("修改成功");
this.close()
}else{
alert("修改失败，请再试一次")
}
}
);
}
当我们修改成功的时候，返回主界面需要更新一下当前的信息，所以调用了一下this.props.parent.componentDidMount();
再回到主界面，添加一行：
<UpdateMyInfo user={this.state.user} parent={this}/>
<div className="MyInfo">
<Divider orientation="left">个人信息</Divider>
<UpdateMyInfo user={this.state.user} parent={this}/>
<Descriptions bordered column={2}>
<Descriptions.Item label="姓名">{this.state.user.userName}</Descriptions.Item>
<Descriptions.Item label="手机号">{this.state.user.userPhone}</Descriptions.Item>
<Descriptions.Item label="小区">{this.state.user.cityName}</Descriptions.Item>
<Descriptions.Item
label="详细地址">{this.state.user.userAddress}</Descriptions.Item>
</Descriptions>
</div>
接下来对添加车辆做同样的操作。
添加车辆
这里直接贴出代码：
import React from "react";
import {Button, Form, Input, Modal, Select} from "antd";
import {Option} from "antd/es/mentions";
import axios from "axios";
export default class AddCar extends React.Component {
constructor(props) {
super(props);
this.state = ({
showModal: false,
user: this.props.user,
})
}
open = () => {
this.setState({
showModal: true
})
}
close = () => {
this.setState({
showModal: false
})
}
addCar = () => {
const car = {
carNumber: document.getElementById('carNumber').value,
userId: this.state.user.userId
}
var url = 'http://localhost:8080/user/addCar'
axios.post(url, car).then(
(res) => {
this.props.parent.componentDidMount();
this.close();
}
)
}
render() {
return (
<div>
<Button type="primary" onClick={this.open} style={{float: "left"}}>
添加车辆信息
</Button>
<Modal title="添加车辆信息" visible={this.state.showModal}
onOk={this.addCar}
onCancel={this.close}
okText="保存"
cancelText="取消"
>
<Form
labelCol={{span: 24}}
wrapperCol={{span: 24}}
>
<Form.Item label="车牌号：">
<Input
id="carNumber"
placeholder="请输入车牌号"/>
</Form.Item>
</Form>
</Modal>
</div>
)
}
}
<div className="MyCar">
<Divider orientation="left">车辆信息</Divider>
<AddCar user={this.state.user} parent={this}/>
<Table columns={columns} dataSource={this.state.car}/>
</div>
完整代码
UserInfo
import React from "react";
import Data from "../../Data.json"
import {Button, Descriptions, Divider, Form, Input, Layout, Menu, Modal, Space, Table} from "antd";
import {UploadOutlined, UserOutlined, VideoCameraOutlined} from "@ant-design/icons";
import Sider from "antd/es/layout/Sider";
import {Content, Footer, Header} from "antd/es/layout/layout";
import {Link} from "react-router-dom";
import axios from "axios";
import UpdateMyInfo from "../Component/UpdateMyInfo";
import AddCar from "../Component/AddCar";
export default class UserInfo extends React.Component {
constructor(props) {
super(props);
this.state = (
{
user: this.props.location.state.user
})
}
componentDidMount() {
this.selectCityName();
this.selectMyCar();
}
delete = (text, record) => {
var url = 'http://localhost:8080/user/deleteMyCar'
axios.post(url, text).then(
(res) => {
this.componentDidMount();
}
);
}
selectCityName = () => {
const url = 'http://localhost:8080/user/selectCityName'
axios.get(url, {
params: {
cityId: this.state.user.cityId
}
}
)
.then(
(res) => {
const user = this.state.user;
user.cityName = res.data;
this.setState({
user: user
})
}
)
}
selectMyCar = () => {
var url = 'http://localhost:8080/user/selectMyCar'
axios.post(url, this.state.user).then(
(res) => {
this.setState({
car: res.data
})
}
)
}
render() {
const columns = [
{
title: '车牌号',
dataIndex: 'carNumber',
key: 'carNumber',
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
<Space size="middle">
<div>
<a onClick={() => this.delete(text, record)}>
删除
</a>
</div>
</Space>
),
},
];
return (
<div className="UserInfo">
<Layout>
<Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={broken => {
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<div className="logo"/>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined/>}>
<Link to={{
pathname: '/UserInfo',
state: {user: this.state.user}
}}>个人信息</Link>
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined/>}>
<Link to={{
pathname: '/UserParkInfo',
state: {user: this.state.user}
}}>车位信息</Link>
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined/>}>
<Link to={{
pathname: '/UserParkingOrder',
state: {user: this.state.user}
}}>费用信息</Link>
</Menu.Item>
<Menu.Item key="4" icon={<UploadOutlined/>}>
<Link to={{
pathname: '/UserRentApplication',
state: {user: this.state.user}
}}>承包申请</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header className="site-layout-sub-header-background" style={{padding: 0}}/>
<Content style={{margin: '24px 16px 0'}}>
<div className="site-layout-background" style={{padding: 24, minHeight: 510}}>
<div className="MyInfo">
<Divider orientation="left">个人信息</Divider>
<UpdateMyInfo user={this.state.user} parent={this}/>
<Descriptions bordered column={2}>
<Descriptions.Item label="姓名">{this.state.user.userName}</Descriptions.Item>
<Descriptions.Item label="手机号">{this.state.user.userPhone}</Descriptions.Item>
<Descriptions.Item label="小区">{this.state.user.cityName}</Descriptions.Item>
<Descriptions.Item
label="详细地址">{this.state.user.userAddress}</Descriptions.Item>
</Descriptions>
</div>
<div className="MyCar">
<Divider orientation="left">车辆信息</Divider>
<AddCar user={this.state.user} parent={this}/>
<Table columns={columns} dataSource={this.state.car}/>
</div>
</div>
</Content>
<Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
</div>
)
}
}
UpdateMyInfo
import React from "react";
import {Button, Form, Input, Modal, Select} from "antd";
import axios from "axios";
import {Option} from "antd/es/mentions";
export default class UpdateMyInfo extends React.Component {
constructor(props) {
super(props);
this.state = ({
showModal: false,
user: this.props.user,
city: []
})
}
componentDidMount() {
this.selectCity();
}
selectCity = () => {
const url = 'http://localhost:8080/user/selectCity'
axios.get(url).then(
(city) => {
this.setState({
city: city.data
})
}
)
}
getSelect = (value) => {
const cityId = value.value;
const user = this.state.user;
user.cityId = cityId;
this.setState({
user: user
})
console.log(this.state.user)
}
open = () => {
this.setState({
showModal: true
})
}
close = () => {
this.setState({
showModal: false
})
}
getInput=()=>{
const user=this.state.user;
user.cityId=this.state.user.cityId;
user.userName=document.getElementById('userName').value;
user.userPhone=document.getElementById('userPhone').value;
user.userAddress=document.getElementById('userAddress').value;
user.userPassword=document.getElementById('userPassword').value;
console.log(user)
this.setState({
user:user
})
}
updateMyInfo=()=>{
const url = 'http://localhost:8080/user/updateMyInfo'
const user=this.state.user;
user.userName=document.getElementById('userName').value;
user.userPhone=document.getElementById('userPhone').value;
user.userAddress=document.getElementById('userAddress').value;
user.userPassword=document.getElementById('userPassword').value;
axios.post(url, user).then(
(res)=>{
if (res.status==200){
this.props.parent.componentDidMount();
alert("修改成功");
this.close()
}else{
alert("修改失败，请再试一次")
}
}
);
}
render() {
return (
<div>
<Button type="primary" onClick={this.open} style={{float: "left"}}>
修改个人信息
</Button>
<Modal title="Basic Modal" visible={this.state.showModal}
onOk={this.updateMyInfo}
onCancel={this.close}
okText="保存"
cancelText="取消"
>
<Form
labelCol={{span: 24}}
wrapperCol={{span: 24}}
>
<Form.Item label="姓名：">
<Input
id="userName"
value={this.state.user.userName}
onChange={this.getInput}
placeholder="请输入姓名"/>
</Form.Item>
<Form.Item label="手机号：">
<Input placeholder="请输入手机号"
onChange={this.getInput}
value={this.state.user.userPhone}
id="userPhone"
/>
</Form.Item>
<Form.Item label="小区：">
<Select
labelInValue
defaultValue={this.state.user.cityId}
onChange={this.getSelect}
>
{this.state.city.map(
(value) => {
return (
<Option value={value.cityId}>{value.cityName}</Option>
)
}
)}
</Select>,
</Form.Item>
<Form.Item label="详细地址：">
<Input placeholder="请输入详细地址"
id="userAddress"
onChange={this.getInput}
value={this.state.user.userAddress}
/>
</Form.Item>
<Form.Item label="密码：">
<Input.Password
placeholder="请输入密码"
onChange={this.getInput}
id="userPassword"
value={this.state.user.userPassword}
/>
</Form.Item>
<Form.Item>
</Form.Item>
</Form>
</Modal>
</div>
);
}
}
AddCar
import React from "react";
import {Button, Form, Input, Modal, Select} from "antd";
import {Option} from "antd/es/mentions";
import axios from "axios";
export default class AddCar extends React.Component {
constructor(props) {
super(props);
this.state = ({
showModal: false,
user: this.props.user,
})
}
open = () => {
this.setState({
showModal: true
})
}
close = () => {
this.setState({
showModal: false
})
}
addCar = () => {
const car = {
carNumber: document.getElementById('carNumber').value,
userId: this.state.user.userId
}
var url = 'http://localhost:8080/user/addCar'
axios.post(url, car).then(
(res) => {
this.props.parent.componentDidMount();
this.close();
}
)
}
render() {
return (
<div>
<Button type="primary" onClick={this.open} style={{float: "left"}}>
添加车辆信息
</Button>
<Modal title="添加车辆信息" visible={this.state.showModal}
onOk={this.addCar}
onCancel={this.close}
okText="保存"
cancelText="取消"
>
<Form
labelCol={{span: 24}}
wrapperCol={{span: 24}}
>
<Form.Item label="车牌号：">
<Input
id="carNumber"
placeholder="请输入车牌号"/>
</Form.Item>
</Form>
</Modal>
</div>
)
}
}
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhggafef
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
