1，项目搭建
- 1，本地接口部署：
创建并导入数据：数据库名称hkzf(好客租房)
image
数据文件在hkzfAPI -> db -> .sql文件
hkzfAPI上传百度网盘由于文件过多，需要开通超级会员，所以有需要的直接找我就行！
- 2，启动接口：在hkzfAPI目录中执行npm start，启动swagger接口即可
2，项目搭建
- 1, 初始化项目：npx create-react-app hkzf-app
image
- 2, 项目初始化成功，切换到根目录hkzf-app: yarn start
image
目录结构：
image
-
3, 调整项目中src目录结构如下：
image
3，项目准备
- 1，组件库: antd-mobile
antd-mobile官方文档
image
- 2，安装：$ npm install --save antd-mobile@next / yarn add antd-mobile@next
- 3，导入要使用的组件
import { Button } from 'antd-mobile'
- 4, 使用
<Button></Button>
4, 配置基础路由
- 1,安装：yarn add react-router-dom
- 2,导入路由组件：Router / Route / Link
- 3, 在pages文件夹里创建Home->index.js和CityList->index.js两个组件
- 4，使用Route组件配置首页和城市页面
在App.js中引入import { BroswerRouter as Router, Route, Link } from 'react-router-dom' // 导入两个组件 import Home from './pages/Home' import CityList from './pages/CityList' <Router> <div className="App"> <ul> <li><Link to="/home">首页</Link></li> <li><Link to="/CityList">CityList</Link></li> </ul> <Route path="/home" component={Home}/> <Route path="/cityList" component={CityList}/> </div> </Router>
5, 项目整体布局
- 1，两种布局页面
分析：有tabBar的页面和无tabBar的页面
image
有tabBar布局的页面使用嵌套路由即可
- 2，嵌套路由：路由内部包含路由
- 用Home组件表示父路由的内容
- 用News组件表示子路由的内容
image
- 使用步骤
- 1，在pages中创建News/index.js
- 2，在Home组件中，添加一个Route作为子路由(嵌套的路由)的出口
- 3，设置嵌套路由的path，格式以父路由path开头(父组件展示，子组件才会展示)
- 4,修改pathname为/home/news,News组件的内容就会展示在Home组件中了。
<Router> <div> <Route path="/home" component={Home}/> </div> </Router> const Home = () => { <div> <Route path="/home/news" component={News}/> </div> }
示例：
// Home组件
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import News from '../News'
export default class Home extends React.Component {
render() {
return (
<div style={{backgroundColor: 'skyblue', padding: 10}}>Home
<Route path="/home/news" component={News}></Route>
</div>
)
}
}
// News组件
import React from 'react';
export default class News extends React.Component {
render() {
return (
<div style={{backgroundColor: 'green'}}>
News
</div>
)
}
}
image
image
下篇开始实现tabBar，敬请期待
