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

【停车场车辆管理系统】从零搭建——项目分析

【停车场车辆管理系统】从零搭建——数据库搭建

【停车场车辆管理系统】从零搭建——后端搭建

【停车场车辆管理系统】从零搭建——后端Model类

【停车场车辆管理系统】从零搭建——Mapper搭建

【停车场车辆管理系统】从零搭建——AdminController搭建

【停车场车辆管理系统】从零搭建——UserController搭建

【停车场车辆管理系统】从零搭建——前端react搭建

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

文章目录 首页管理员登录用户登录用户注册
前面把路由配置好了，现在来开始写首页和登录注册。

首页

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

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

这行代码推荐写在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>
        );
    }
}

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

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

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

用到了一个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%;
}

我们只需要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>
        )
    }
}

大家可以看到，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("账号或密码错误！")
                }
            }
        );
    }

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

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

用户登录

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

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

用户注册

用户注册也是一个表单，其中的小区用到了一个下拉选择器(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>
  </>
);

在项目里，我们首先要从数据库中获取所有的小区数据，然后以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>
......

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

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1297663.html