【停车场车辆管理系统】从零搭建——项目分析
【停车场车辆管理系统】从零搭建——数据库搭建
【停车场车辆管理系统】从零搭建——后端搭建
【停车场车辆管理系统】从零搭建——后端Model类
【停车场车辆管理系统】从零搭建——Mapper搭建
【停车场车辆管理系统】从零搭建——AdminController搭建
【停车场车辆管理系统】从零搭建——UserController搭建
【停车场车辆管理系统】从零搭建——前端react搭建
【停车场车辆管理系统】从零搭建——首页、登录、注册前端
文章目录
页面展示侧边栏个人信息车辆信息信息修改添加车辆完整代码UserInfoUpdateMyInfoAddCar页面展示
这个是整体页面，修改个人信息和添加车辆信息的按钮点击之后会弹出对话框。
我们来分析下页面结构：
侧边栏
layout代码可以到官网上看一下，布局的样式有很多种，这里选择的是侧边布局。
除了要写上我们需要的模块名以外，还需要给他们绑定上跳转路径，由于在用户界面需要有一个登录状态的验证，所以我们给它创建一个state:user，将之前登录页面传过来的props.location.state.user填入当前的state.user内。在layout里面进行跳转时，也需要将其作为参数进行传递。
import ...export default class UserInfo extends ponent {constructor(props) {super(props);this.state = ({user: this.props.location.state.user})}render() {return (<div className="UserInfo"><Layout><Siderbreakpoint="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 © 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 ponent {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) => {ponentDidMount();});}
然后我们再看下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 ponent {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="取消"><FormlabelCol={{span: 24}}wrapperCol={{span: 24}}><Form.Item label="姓名："><Inputid="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="小区："><SelectlabelInValuedefaultValue={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.Passwordplaceholder="请输入密码"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.ponentDidMount(); alert("修改成功"); this.close()}else{alert("修改失败，请再试一次")}});}
当我们修改成功的时候，返回主界面需要更新一下当前的信息，所以调用了一下this.ponentDidMount();
再回到主界面，添加一行：
<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.Itemlabel="详细地址">{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 ponent {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.ponentDidMount();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="取消"><FormlabelCol={{span: 24}}wrapperCol={{span: 24}}><Form.Item label="车牌号："><Inputid="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 ponent {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) => {ponentDidMount();});} 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><Siderbreakpoint="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.Itemlabel="详细地址">{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 © 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 ponent {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.ponentDidMount(); 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="取消"><FormlabelCol={{span: 24}}wrapperCol={{span: 24}}><Form.Item label="姓名："><Inputid="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="小区："><SelectlabelInValuedefaultValue={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.Passwordplaceholder="请输入密码"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 ponent {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.ponentDidMount();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="取消"><FormlabelCol={{span: 24}}wrapperCol={{span: 24}}><Form.Item label="车牌号："><Inputid="carNumber" placeholder="请输入车牌号"/></Form.Item></Form></Modal></div>)}}
如果觉得《【停车场车辆管理系统】从零搭建——用户-个人信息》对你有帮助，请点赞、收藏，并留下你的观点哦！
