1涩哟，項(xiàng)目搭建
- 1肃拜，本地接口部署：
創(chuàng)建并導(dǎo)入數(shù)據(jù)：數(shù)據(jù)庫名稱hkzf(好客租房)
image
數(shù)據(jù)文件在hkzfAPI -> db -> .sql文件
hkzfAPI上傳百度網(wǎng)盤由于文件過多撞叽，需要開通超級會員古徒，所以有需要的直接找我就行憔披！
- 2叔营，啟動接口：在hkzfAPI目錄中執(zhí)行npm start撑刺，啟動swagger接口即可
2鹉胖，項(xiàng)目搭建
- 1, 初始化項(xiàng)目：npx create-react-app hkzf-app
image
- 2, 項(xiàng)目初始化成功，切換到根目錄hkzf-app: yarn start
image
目錄結(jié)構(gòu)：
image
-
3, 調(diào)整項(xiàng)目中src目錄結(jié)構(gòu)如下：
image
3够傍，項(xiàng)目準(zhǔn)備
- 1甫菠，組件庫: antd-mobile
antd-mobile官方文檔
image
- 2，安裝：$ npm install --save antd-mobile@next / yarn add antd-mobile@next
- 3冕屯，導(dǎo)入要使用的組件
import { Button } from 'antd-mobile'
- 4, 使用
<Button></Button>
4, 配置基礎(chǔ)路由
- 1,安裝：yarn add react-router-dom
- 2,導(dǎo)入路由組件：Router / Route / Link
- 3, 在pages文件夾里創(chuàng)建Home->index.js和CityList->index.js兩個組件
- 4寂诱，使用Route組件配置首頁和城市頁面
在App.js中引入import { BroswerRouter as Router, Route, Link } from 'react-router-dom' // 導(dǎo)入兩個組件 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, 項(xiàng)目整體布局
- 1，兩種布局頁面
分析：有tabBar的頁面和無tabBar的頁面
image
有tabBar布局的頁面使用嵌套路由即可
- 2安聘，嵌套路由：路由內(nèi)部包含路由
- 用Home組件表示父路由的內(nèi)容
- 用News組件表示子路由的內(nèi)容
image
- 使用步驟
- 1痰洒，在pages中創(chuàng)建News/index.js
- 2，在Home組件中浴韭，添加一個Route作為子路由(嵌套的路由)的出口
- 3丘喻，設(shè)置嵌套路由的path，格式以父路由path開頭(父組件展示念颈，子組件才會展示)
- 4,修改pathname為/home/news,News組件的內(nèi)容就會展示在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
下篇開始實(shí)現(xiàn)tabBar，敬請期待
