一步一步搭建react應用-項目初始化
前端初始化
?# 目錄結構
+----/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應用到服務器
