【停车场车辆管理系统】从零搭建——首页、登录、注册前端

文章目录

首页
管理员登录
用户登录
用户注册

前面把路由配置好了，现在来开始写首页和登录注册。

首页

在这里插入图片描述
首页很简单，一个h1加两个button，button主要实现的就是跳转功能。
这里的button使用了antd的<Button/>组件，使用antd内的组件时都需要import，不导入的话就会报错，这里就不详细说了。
除了import组件之外，还需要导入样式文件，antd官网文档如下：
在这里插入图片描述

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
1

这行代码推荐写在index.js或App.js文件里。

import React from "react";
import {Button} from "antd";
import {Link} from "react-router-dom";

export default class Welcome extends React.Component {
    render() {
        return (
            <div className="Welcome">
                <div style={{width: 800, height: 400, margin: '200px auto'}}>
                    <h1>欢迎进入车辆管理系统</h1>
                    <Button type="primary">
                        <Link to="/UserLogin">用户登录</Link>
                    </Button>
                    <Button type="primary">
                        <Link to="/AdminLogin">管理员登录</Link>
                    </Button>
                </div>
            </div>
        );
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

可以看一下welcome.js的代码，还是很简单的，通过<Link to=path>来完成了跳转功能。

这个文件我实际上是这样写的：

import React from "react";
import {Button} from "antd";
import {Link} from "react-router-dom";
import axios from "axios";

export default class Welcome extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.updateParkingOrder();
        // console.log(this.state);
    }
    updateParkingOrder = () => {
        axios.get("http://localhost:8080/user/updateParkingOrder");
    }
    render() {
        return (
            <div className="Welcome">
                <div style={{width: 800, height: 400, margin: '200px auto'}}>
                    <h1>欢迎进入车辆管理系统</h1>
                    <Button type="primary">
                        <Link to="/UserLogin">用户登录</Link>
                    </Button>
                    <Button type="primary">
                        <Link to="/AdminLogin">管理员登录</Link>
                    </Button>
                </div>
            </div>
        );
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

用到了一个axios，调用了后端的updateParkingOrder接口。这里是因为在停车订单模块需要计时来计算缴费金额，所以我调用了一个更新的方法，每次有人访问首页的时候就对数据库里所有订单的计时信息和缴费金额进行一次更新。

管理员登录

在这里插入图片描述
管理员登录用到一个表单，我们可以在antd里找到了直接拿来用

这里因为刚开始用的时候忘记复制代码里的css文件了，后来也懒得弄了，所以跟官网的样式不太一样。

官网代码

import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

const NormalLoginForm = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your Username!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your Password!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <a className="login-form-forgot" href="">
          Forgot password
        </a>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          Log in
        </Button>
        Or <a href="">register now!</a>
      </Form.Item>
    </Form>
  );
};

export default () => <NormalLoginForm />;

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .ant-col-rtl .login-form-forgot {
  float: left;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

我们只需要import和return内的代码。

import React from "react";
import {Button, Checkbox, Form, Input} from "antd";
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import axios from "axios";
import {Link, withRouter} from "react-router-dom";

export default class AdminLogin extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="UserLogin">
                <div className="LoginBody">
                    <h1>管理员登录</h1>

                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}

                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Username!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>}
                                   placeholder="手机号"
                                   id="userPhone"
                                   onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Password!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="密码"
                                id="userPassword"
                                onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                忘记密码
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="login-form-button"
                                onClick={this.userLogin}
                            >
                                登录
                            </Button>
                            没有账号？
                            <Link to="/UserRegister">现在注册</Link>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

大家可以看到，input和登录按钮里分别绑定了onChange和onClick事件，现在写下对应的方法：

    getInput = () => {
        const adminPhone = document.getElementById('userPhone').value;
        const adminPassword = document.getElementById('userPassword').value;
        const admin ={};
        admin.adminPhone = adminPhone;
        admin.adminPassword = adminPassword;
        this.setState({
            admin: admin
        })
    }

    userLogin = (e) => {
        e.preventDefault()
        const url = 'http://localhost:8080/admin/adminLogin'
        axios.post(url, this.state.admin).then(
            (user) => {
                if (user.data) {
                    this.setState({
                        admin: user.data
                    })
                    this.props.history.push({pathname:"/AdminInfo",state:{admin:user.data}});
                }else{
                    alert("账号或密码错误！")
                }
            }
        );
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

管理员登录就完成了，贴一下完整代码

import React from "react";
import {Button, Checkbox, Form, Input} from "antd";
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import axios from "axios";
import {Link, withRouter} from "react-router-dom";

export default class AdminLogin extends React.Component {
    constructor(props) {
        super(props);
    }

    getInput = () => {
        const adminPhone = document.getElementById('userPhone').value;
        const adminPassword = document.getElementById('userPassword').value;
        const admin ={};
        admin.adminPhone = adminPhone;
        admin.adminPassword = adminPassword;
        this.setState({
            admin: admin
        })
    }

    userLogin = (e) => {
        e.preventDefault()
        const url = 'http://localhost:8080/admin/adminLogin'
        axios.post(url, this.state.admin).then(
            (user) => {
                if (user.data) {
                    this.setState({
                        admin: user.data
                    })
                    this.props.history.push({pathname:"/AdminInfo",state:{admin:user.data}});
                }else{
                    alert("账号或密码错误！")
                }
            }
        );

    }

    render() {
        return (
            <div className="UserLogin">
                <div className="LoginBody">
                    <h1>管理员登录</h1>

                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}

                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Username!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>}
                                   placeholder="手机号"
                                   id="userPhone"
                                   onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Password!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="密码"
                                id="userPassword"
                                onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                忘记密码
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="login-form-button"
                                onClick={this.userLogin}
                            >
                                登录
                            </Button>
                            没有账号？
                            <Link to="/UserRegister">现在注册</Link>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

用户登录

在这里插入图片描述

用户登录和管理员登录差不多，只贴代码了：

import React from "react";
import {Button, Checkbox, Form, Input} from "antd";
import {UserOutlined, LockOutlined} from '@ant-design/icons'; 
import axios from "axios"; 
import {Link, withRouter} from "react-router-dom";

class UserLogin extends React.Component {
    constructor(props) {
        super(props); 
    }

    getInput = () => {
        const userPhone = document.getElementById('userPhone').value;
        const userPassword = document.getElementById('userPassword').value;
        const user ={};
        user.userPhone = userPhone;
        user.userPassword = userPassword;
        this.setState({
            user: user
        })
    }

    userLogin = (e) => {
        e.preventDefault()
        // console.log(this.state.user)
        const url = 'http://localhost:8080/user/userLogin'
        axios.post(url, this.state.user).then(
            (user) => {
                if (user.data) {
                    this.setState({
                        user: user.data
                    })
                    this.props.history.push({pathname:"/UserInfo",state:{user:user.data}});
                }else{
                    alert("账号或密码错误！")
                }
            }
        );

    }

    render() {
        return (
            <div className="UserLogin">
                <div className="LoginBody">
                    <h1>用户登录</h1>

                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}

                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Username!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>}
                                   placeholder="手机号"
                                   id="userPhone"
                                   onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your Password!',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="密码"
                                id="userPassword"
                                onChange={this.getInput}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                忘记密码
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="login-form-button"
                                onClick={this.userLogin}
                            >
                                登录
                            </Button>
                            没有账号？
                            <Link to="/UserRegister">现在注册</Link>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}
export default withRouter(UserLogin);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

用户注册

在这里插入图片描述

用户注册也是一个表单，其中的小区用到了一个下拉选择器(Select)，antd里的代码是这样的：

import { Select } from 'antd';

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

export default () => (
  <>
    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} disabled>
      <Option value="lucy">Lucy</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} loading>
      <Option value="lucy">Lucy</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} allowClear>
      <Option value="lucy">Lucy</Option>
    </Select>
  </>
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在项目里，我们首先要从数据库中获取所有的小区数据，然后以map遍历出应有的option，并且在点击时获取选项。

......
constructor(props) {
    super(props);
    this.state = {
        city:{
            cityId:0,
            cityName:""
        },
        user:{
            userId: "",
            userName: "",
            userPhone: "",
            cityId: "",
            userAddress: "",
            userPassword: ""
        }
    }
}

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
    })
}

......
<Form.Item label="小区：">
   <Select
        labelInValue
        // defaultValue={{value: ''}}
        onChange={this.getSelect}
    >
        {this.state.city.map(
            (value)=>{
                return(
                    <Option value={value.cityId}>{value.cityName}</Option>
                )
            }
        )}
    </Select>
</Form.Item>
......
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

然后就是编写注册方法了，这里和完整代码一起贴出来。
完整代码：

import React from "react";
import {Button, Form, Input, Select} from "antd";
import {Option} from "antd/es/mentions";
import axios from "axios"

export default class UserRegister extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            city:{
                cityId:0,
                cityName:""
            },
            user:{
                userId: "",
                userName: "",
                userPhone: "",
                cityId: "",
                userAddress: "",
                userPassword: ""
            }
        }
    }

    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
        })
    }

    userRegister=()=>{
        const url = 'http://localhost:8080/user/userRegister'
        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;
        console.log(user)
        axios.post(url, user).then(
            (res)=>{
                if (res.status==200){
                    alert("注册成功");
                    this.props.history.push({pathname:"/UserLogin"});
                }else{
                    alert("注册失败，请重新注册")
                }
            }
        );
    }

    render() {
        return (
            <div className="UserRegister">
                <div className="RegisterBody">
                    <h1>用户注册</h1>
                    <Form
                        labelCol={{span: 24}}
                        wrapperCol={{span: 24}}
                    >

                        <Form.Item label="姓名：">
                            <Input
                                id="userName"
                                placeholder="请输入姓名"/>
                        </Form.Item>
                        <Form.Item label="手机号：">
                            <Input placeholder="请输入手机号"
                                   id="userPhone"
                            />
                        </Form.Item>
                        <Form.Item label="小区：">
                            <Select
                                labelInValue
                                // defaultValue={{value: ''}}
                                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"
                            />
                        </Form.Item>
                        <Form.Item label="密码：">
                            <Input.Password
                                placeholder="请输入密码"
                                id="userPassword"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" onClick={this.userRegister}>注册</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
            ;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

相关阅读:
Linux 中解压不同的压缩文件用到不同的命令详解
 带你掌握Redis中的数据类型
 【注解和反射】获取类运行时结构
 SpringBoot 使用Logback日志框架
 欧姆龙PLC出现故障怎么进行远程维护？怎么进行保养？
抖音小店无货源，正处于红利期内的电商项目，新手能操作吗？
C++ 11 多线程之future
【MySQL进阶】深入理解InnoDB数据页结构
 java基于Android快递物流服务系统
 新版HI3559AV100开发注意事项
原文地址：https://blog.csdn.net/weixin_43651049/article/details/124825762