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

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

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

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

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

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

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

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

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

文章目录 React环境nodejscreate-react-app 插件安装项目结构路由配置

React环境 nodejs

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

create-react-app

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

首先检查nodejs安装情况

node -v

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

安装react

npm install -g create-react-app

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

创建项目

create-react-app demo

进入项目

cd demo

启动项目

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;

可以看到：

其中的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来访问不同的页面了。