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

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

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

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

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

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

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

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

文章目录

React环境
- nodejs
- create-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;

可以看到：

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

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

【停车场车辆管理系统】从零搭建——首页、登录、注册前端
[停车场车辆管理系统]从零搭建--项目分析 [停车场车辆管理系统]从零搭建--数据库搭建 [停车场车辆管理系统]从零搭建--后端搭建 [停车场车辆管理系统]从零搭建--后端Model类 [停车场车辆管 ...
【停车场车辆管理系统】从零搭建——AdminController搭建
[停车场车辆管理系统]从零搭建--项目分析 [停车场车辆管理系统]从零搭建--数据库搭建 [停车场车辆管理系统]从零搭建--后端搭建 [停车场车辆管理系统]从零搭建--后端Model类 [停车场车辆管 ...
【停车场车辆管理系统】从零搭建——项目分析
[停车场车辆管理系统]从零搭建--项目分析 [停车场车辆管理系统]从零搭建--数据库搭建 [停车场车辆管理系统]从零搭建--后端搭建 [停车场车辆管理系统]从零搭建--后端Model类 [停车场车辆管 ...
【停车场车辆管理系统】从零搭建——Mapper搭建
[停车场车辆管理系统]从零搭建--项目分析 [停车场车辆管理系统]从零搭建--数据库搭建 [停车场车辆管理系统]从零搭建--后端搭建 [停车场车辆管理系统]从零搭建--后端Model类 [停车场车辆管 ...
【停车场车辆管理系统】从零搭建——数据库搭建
[停车场车辆管理系统]从零搭建--项目分析 [停车场车辆管理系统]从零搭建--数据库搭建 [停车场车辆管理系统]从零搭建--后端搭建 [停车场车辆管理系统]从零搭建--后端Model类 [停车场车辆管 ...
【停车场车辆管理系统】从零搭建——用户-个人信息
[停车场车辆管理系统]从零搭建--项目分析 [停车场车辆管理系统]从零搭建--数据库搭建 [停车场车辆管理系统]从零搭建--后端搭建 [停车场车辆管理系统]从零搭建--后端Model类 [停车场车辆管 ...
【阿里云高校计划】未完成（车牌识别）停车场车辆管理系统 day5 【以小见大】
[阿里云高校计划]未完成(车牌识别)停车场车辆管理系统 day5 [以小见大] [阿里云高校计划]未完成(车牌识别)停车场车辆管理系统 day5 [以小见大] 实施前--项目实现思路 1.简要描述 2 ...
Java停车场车辆管理系统车位
该项目采用技术JSP.Servlet.jdbc.Tomcat服务器.MySQL数据库 ,项目含有源码.论文.配套开发软件.软件安装教程.项目发布教程项目功能介绍: 基于Web停车场管理系统主要用于实 ...
java毕业设计成品源码网站基于javaWeb停车场车辆管理系统的设计与实现|车位