【停车场车辆管理系统】从零搭建——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>
)
}
}