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

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

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

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

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

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

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

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

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

React环境

nodejs

使用react需要先安装nodej环境
具体的安装步骤大家可以自行寻找，这里不多赘述。
http://nodejs.org/这是nodejs的官网，下载之后无脑安装基本就行了。

create-react-app

react的创建需要用到create-react-app

1. 首先检查nodejs安装情况

   node -v
   

   看看环境变量是否配置好了，配置好就可以进行下一步。

2. 安装react

   npm install -g create-react-app
   

3. 在命令行输入create-react-app验证是否安装成功

4. 创建项目

   create-react-app demo
   

5. 进入项目

   cd demo
   

6. 启动项目

   npm start
   

   浏览器输入localhost:3000/

插件安装

在本项目里主要用到了antd模板，react-router-dom路由和axios与后端交互。
进入项目的根目录，输入：

npm i antd react-router-dom@5 axios --save

至于这里用react-router-dom@5主要是对这个比较熟悉一点，新版本改了很多东西，不太顺手。

项目结构

我同样是根据角色不同，分出了Admin和User两个包，每个包中的Component是组件，当然这些组件也可以直接写在Page中的js文件里，我嫌代码太长就分出来了。Page包里则根据角色下的每个模块进行划分。
功能依次如下：

• 管理员
  • 组件
    • 添加停车位
    • 更新管理员信息
    • 更新车位信息
  • 页面
    • 管理员信息
    • 管理员登录
    • 车位信息
    • 订单信息
    • 承包申请信息
• 用户
  • 组件
    • 添加车辆
    • 更新信息
  • 页面
    • 个人信息
    • 用户登录
    • 车位信息
    • 订单信息
    • 用户登录
    • 承包申请

最后的Welcome.js则是首页。

红框框起来的部分是使用create-react-app创建之后就自带的，基本上不用修改，但是要在App.js中配置路由。

路由配置

一开始打开App.js里面应该是有些内容的，我们把App.js的内容调整如下，也就是将初始内容清空。

function App() {
    return (
            <div className="App">
               
            </div>
    );
}

export default App;

以Welcome.js为例，我们为它注册路由。

首先，我们需要创建Welcome.js页面，页面内输入：

import React from "react";
export default class Welcome extends React.Component {

}

然后在App.js中引用react-router-dom中的BrowserRouter和Route。

import {BrowserRouter, Route} from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
            
            </div>
        </BrowserRouter>

    );
}

export default App;

下面使用Route进行配置：

import {BrowserRouter, Route} from "react-router-dom";
import Welcome from "./Welcome";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Route path="/" component={Welcome} exact="false"/>

            </div>
        </BrowserRouter>

    );
}

export default App;

可以看到：

 <Route path="/" component={Welcome} exact="false"/>

其中的path是指url路径，这里用了一个/即不输入任何信息也能跳转到welcome页面。
component则是调用的组件，可以看到代码第二行有一个import Welcome from "./Welcome";则是引用了welcome组件。
关于Route的exact,加上exact代表当前路由path的路径采用精确匹配，比如说Home的path如果不加上exact,那么path="/about"将会匹配他自己与path="/“这两个，所以一般path=”/"这个路由一般会加上exact。

接着，如上述同样方法创建其他的Page页面，并且进行路由匹配，完整代码如下：

import {BrowserRouter, Route} from "react-router-dom";
import Welcome from "./Welcome";
import UserLogin from "./User/Page/UserLogin";
import UserRegister from "./User/Page/UserRegister";
import UserInfo from "./User/Page/UserInfo";
import UserParkInfo from "./User/Page/UserParkInfo";
import UserParkingOrder from "./User/Page/UserParkingOrder";
import AdminInfo from "./Admin/Page/AdminInfo";
import AdminParkInfo from "./Admin/Page/AdminParkInfo";
import AdminRentApplication from "./Admin/Page/AdminRentApplication";
import AdminParkingOrder from "./Admin/Page/AdminParkingOrder";
import AdminLogin from "./Admin/Page/AdminLogin";
import UserRentApplication from "./User/Page/UserRentApplication";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Route path="/" component={Welcome} exact="false"/>

                <Route path="/UserLogin" component={UserLogin} />
                <Route path="/UserRegister" component={UserRegister}/>
                <Route path="/UserParkInfo" component={UserParkInfo} />
                <Route path="/UserInfo" component={UserInfo}/>
                <Route path="/UserParkingOrder" component={UserParkingOrder} />
                <Route path="/UserRentApplication" component={UserRentApplication} />

                <Route path="/AdminLogin" component={AdminLogin} />
                <Route path="/AdminInfo" component={AdminInfo} />
                <Route path="/AdminParkingOrder" component={AdminParkingOrder} />
                <Route path="/AdminParkInfo" component={AdminParkInfo} />
                <Route path="/AdminRentApplication" component={AdminRentApplication} />

            </div>
        </BrowserRouter>

    );
}

export default App;

这样，我们就可以通过输入localhost:3000/path来访问不同的页面了。