一步一步搭建react應(yīng)用-項(xiàng)目初始化
前端初始化
?# 目錄結(jié)構(gòu)
+----/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 配置文件導(dǎo)出到項(xiàng)目目錄下
配置后端代理地址
package.json中加入 "proxy": "http://XXXXXXX"
- 引入antd-mobile
具體webpack中的修改和如何自定義主題來覆蓋默認(rèn)樣式參見：
- 路由規(guī)劃
src/component/route.jsx
項(xiàng)目主要有 頭部、底部導(dǎo)航、首頁(yè)、詳情頁(yè)、我的幾個(gè)部分
+-----------------------+
| +------------------+ |
| | 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() {
<!--傳遞到各個(gè)組件的當(dāng)前是否登錄狀態(tài)-->
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>
)
}
}
- 如何實(shí)現(xiàn)全局的ajax請(qǐng)求時(shí)loading狀態(tài)
每次有ajax請(qǐng)求時(shí)我們要顯示正在請(qǐng)求的loading狀態(tài)，這里我們封裝一下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組件中,定義一個(gè)isLoading狀態(tài)，控制loading活動(dòng)指示器的顯示隱藏。
并將控制isLoading的兩個(gè)方法傳遞到Util中，在具體的請(qǐng)求發(fā)生時(shí)調(diào)用
具體代碼如下: 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數(shù)據(jù)庫(kù)，用戶身份認(rèn)證基于token，并且使用mocha+supertest來對(duì)接口進(jìn)行單元測(cè)試
- express-generator初始化項(xiàng)目
npm install express-generator -g
express -e be
node ./bin/www
瀏覽器訪問localhost:3000 能看到東西就可以了
- 引入pm2
pm2 是一個(gè)強(qiáng)大的node進(jìn)程管理工具
npm install -g pm2
- 在項(xiàng)目根目錄下新建文件ecosystem.config.js
module.exports = {
apps: [ //數(shù)組，可以指定多個(gè)服務(wù)
{
name: 'movies-be',
script: 'bin/www',
watch: true,
env: {
PORT: 9000, //node服務(wù)端口
NODE_ENV: 'development'
},
env_production: {
PORT:9000,
NODE_ENV: 'production'
}
}
]
};
package.json中
"scripts": {
"start": "pm2 start ecosystem.config.js"
}
啟動(dòng)
npm start 就可以啟動(dòng)我們的node服務(wù)
- 開發(fā)中常用的pm2 命令
pm2 list 可以查看node服務(wù)列表
pm2 logs 查看日志,console打印信息等
pm2 kill 關(guān)閉服務(wù)
- 之后文章中會(huì)介紹如何通過pm2來部署?node應(yīng)用到服務(wù)器
