一步一步搭建一个React应用-前后端初始化
一步步搭建一个React应用-项目初始化【一步步搭建一个React应用-开篇】(https://segmentfault.com/a/11...git地址前端初始化#目录结构+----/build++----/config++----+/publicfe-++--+/less+----/scripts+----/common-+--+/svg+|+--index.less+----+/src+-----+||+--+nav.jsx+----/component-+--+route.jsx|+--+header.jsx|+--+user.jsx|+...|+----+/util---Utils.js|+-----+app.js|+-----+i??ndex.js脚手架create-react-appfenpmruneject配置文件exportto在项目目录下配置后端代理地址，在package.json中添加"proxy":"http://XXXXXXX"到介绍antd-mobile特定的webpack修改以及如何自定义主题以覆盖默认样式。参见：antdincreate-react-在appsrc/component/route.jsx项目中使用路由规划主要包括header,bottomnavigation,homepage,detailpage,me+几个部分------------------------+|+--------------------+|||页眉|||+----------------+||||+----------------+||||||||||内容|||||||||||||||+--------------------+||+--------------------+|||导航||+--------------------+|+--------------------+主要代码importReactfrom'react';import{BrowserRouterasRouter,Route,Redirect}from"react-router-dom"从"./header"导入标题从"./nav"导入导航从"./home/homePage"导入主页从"./detail"导入详细信息从"./user"导入爬虫从"./reptile"import从"./collectList"导入Util从"../util/Util"导出默认类RoutextendsReact.Component{constructor(props){super(props)this.state={login:false}}componentDidMount(){Util.fetch('/api/user/checkLogin').then(res=>{this.setState({login:!res.code})})}render(){return(}>{return}}>/Route>{return}}>{return})}> <导航登录={this.state.login}>
)}}如何实现全局ajax请求的加载状态每次有ajax请求，我们需要显示被请求的加载状态，这里我们封装它获取主要代码：src/util/Util.jsimport'whatwg-fetch'constLoading={pendingRequest:0}constUtil={open(fn){Loading.open=fn},close(fn){Loading.close=fn},fetch(url,options){Loading.open()Loading.pendingRequest++options=fillTokenToHeader(options)returnfetch(url,options).then(res=>{Loading.pendingRequest--如果（加载中.pendingRequest<=0){Loading.close()}returnres.json()}).then(data=>{if(url!=='/api/user/checkLogin'){if(data.code){Toast.info(data.name||data.message,1)}}returndata})}}exportdefaultUtil在最外层的App组件中，定义一个isLoading状态，控制加载活动指示器的显示和隐藏并将控制isLoading的两个方法传递给Util，具体请求发生时调用具体代码如下：src/app.jsimportReact,{Component}from'react'importRouterfrom"./component/route.jsx"import{ActivityIndi??cator}from"antd-mobile"importUtilfrom"./util/Util"importinitReactFastclickfrom'react-fastclick';initReactFastclick();exportdefaultclassAppextendsComponent{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
}}后端初始化后端基于express框架，使用MongoDB数据库，用户身份认证基于token，使用mocha+supertest对接口进行单元测试express-generator初始化项目npminstallexpress-generator-gexpress-ebenode./bin/www浏览器访问localhost:3000，可以看到东西，介绍pm2pm2是一个强大的node进程管理工具npminstall-gpm2在根目录下新建一个文件ecosystem.config.jsmodule项目目录.exports={apps:[//数组，可以指定多个服务{name:'movies-be',script:'bin/www',watch:true,env:{PORT:9000,//节点服务端口NODE_ENV:'development'},env_production:{PORT:9000,NODE_ENV:'production'}}]};package.json中的"scripts":{"start":"pm2startecosystem.config.js"}启动npmstart可以启动我们节点服务开发常用的pm2命令pm2list可以查看节点服务列表pm2日志查看日志，控制台打印信息等pm2kill关闭服务后，本文将介绍如何通过pm2将node应用部署到服务器
