一步一步搭建react應用-專案初始化
[一步一步構建一個react應用-開篇](https://segmentfault.com/a/11…
前端初始化
# 目錄結構
+----/build
+
+----/config
+
+----+/public
fe- + +--+/less
+----/scripts +----/common-+--+/svg
+ | +--index.less
+----+/src+-----+
|
| +--+nav.jsx
+----/component-+--+route.jsx
| +--+header.jsx
| +--+user.jsx
| +。。。。。。
|
+----+/util---Utils.js
|
+-----+app.js
|
+-----+index.js- 腳手架
create-react-app fe
npm run eject 配置檔案匯出到專案目錄下
配置後端代理地址
package.json中加入 “proxy”: “http://XXXXXXX”
- 引入antd-mobile
具體webpack中的修改和如何自定義主題來覆蓋預設樣式參見：
- 路由規劃
src/component/route.jsx
專案主要有 頭部、底部導航、首頁、詳情頁、我的幾個部分
+-----------------------+
| +------------------+ |
| | Header | |
| +------------------+ |
| |
| +-----------------+ |
| | | |
| | | |
| | Content | |
| | | |
| | | |
| | | |
| +-----------------+ |
| +------------------+ |
| | Nav | |
| +------------------+ |
+-----------------------+主要程式碼
import React from `react`;
import {
BrowserRouter as Router,
Route,
Redirect
} from "react-router-dom"
import Header from "./header"
import Nav from "./nav"
import Home from "./home/homePage"
import Detail from "./detail"
import User from "./user"
import Reptile from "./reptile"
import Collect from "./collectList"
import Util from "../util/Util"
export default class Rout extends React.Component {
constructor(props) {
super(props)
this.state = {
login: false
}
}
componentDidMount() {
<!--傳遞到各個元件的當前是否登入狀態-->
Util.fetch(`/api/user/checkLogin`).then(res => {
this.setState({
login: !res.code
})
})
}
render() {
return (
<Router>
<div>
<!--頭部-->
<Header></Header>
<div className="main">
<Route exact path="/" render={() =>
<Redirect to="/home"></Redirect>
}></Route>
<Route path="/home" render={(props) => {
return <Home login={this.state.login} {...props}></Home>
}}></Route>
<Route path="/detail/:id" component={Detail}></Route>
<Route path="/user" render={(props) => {
return <User login={this.state.login} {...props}></User>
}}></Route>
<Route path="/reptile" render={(props=>{
return <Reptile login={this.state.login} {...props}></Reptile>
})}></Route>
<Route path="/collect" component={Collect}></Route>
</div>
<!--底部選單-->
<Nav login={this.state.login}></Nav>
</div>
</Router>
)
}
}- 如何實現全域性的ajax請求時loading狀態
每次有ajax請求時我們要顯示正在請求的loading狀態，這裡我們封裝一下fetch
主要程式碼：src/util/Util.js
import `whatwg-fetch`
const Loading = {
pendingRequest: 0
}
const Util = {
open(fn) {
Loading.open = fn
},
close(fn) {
Loading.close = fn
},
fetch(url, options) {
Loading.open()
Loading.pendingRequest++
options = fillTokenToHeader(options)
return fetch(url, options).then(res => {
Loading.pendingRequest--
if (Loading.pendingRequest <= 0) {
Loading.close()
}
return res.json()
}).then(data => {
if (url !== `/api/user/checkLogin`) {
if (data.code) {
Toast.info(data.name || data.message, 1)
}
}
return data
})
}
}
export default Util
在最外層的App元件中,定義一個isLoading狀態，控制loading活動指示器的顯示隱藏。
並將控制isLoading的兩個方法傳遞到Util中，在具體的請求發生時呼叫
具體程式碼如下: src/app.js
import React, { Component } from `react`
import Router from "./component/route.jsx"
import {
ActivityIndicator
} from "antd-mobile"
import Util from "./util/Util"
import initReactFastclick from `react-fastclick`;
initReactFastclick();
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
isLoading: false
}
Util.open(() => {
if(this.state.isLoading){
return
}
this.setState({
isLoading: true
})
})
Util.close(() => {
this.setState({
isLoading: false
})
})
}
render() {
return <div>
<ActivityIndicator
toast
animating={this.state.isLoading}>
</ActivityIndicator>
<Router></Router>
</div>
}
}
後端初始化
後端基於express框架，使用MongoDB資料庫，使用者身份認證基於token，並且使用mocha+supertest來對介面進行單元測試
- express-generator初始化專案
npm install express-generator -g
express -e be
node ./bin/www
瀏覽器訪問localhost:3000 能看到東西就可以了
- 引入pm2
pm2 是一個強大的node程式管理工具
npm install -g pm2- 在專案根目錄下新建檔案ecosystem.config.js
module.exports = {
apps: [ //陣列，可以指定多個服務
{
name: `movies-be`,
script: `bin/www`,
watch: true,
env: {
PORT: 9000, //node服務埠
NODE_ENV: `development`
},
env_production: {
PORT:9000,
NODE_ENV: `production`
}
}
]
};
package.json中
"scripts": {
"start": "pm2 start ecosystem.config.js"
}啟動
npm start 就可以啟動我們的node服務
- 開發中常用的pm2 命令
pm2 list 可以檢視node服務列表
pm2 logs 檢視日誌,console列印資訊等
pm2 kill 關閉服務
- 之後文章中會介紹如何通過pm2來部署node應用到伺服器