深圳市世强先进科技有限公司
后台react框架开发手册
修订记录：
版本号 |
编写日期 |
修改内容 |
作者 |
审核人 |
|
V1.0.0 |
2018-02-28 |
初始版本 |
周沛 |
|
1. 概述
1.1. 目的
说明后台react框架开发环境搭建，运行步骤；阐述编码规范等。
1.2. 读者对象
后台页面开发人员等
1.3. 注意
本文档主要是列出了后台react框架开发环境搭建，运行步骤，用于后台使用react框架的各个项目和模块，如有变更，将补充或修改此文档，并通知开发人员做相关修改。
2. 环境安装
2.1. 安装node.js
1.安装包地址
Y:\开发团队\01_部门公用文件夹\前端
2.安装检查
2.2. Download开发代码
1.下载源码
2.下载依赖插件
3.将依赖插件添加到源码目录
本地文件结构如下
2.3. 开发模式启动项目
（本文均以supply项目为例）
1.打开cmd转到项目根目录
2.通过npm启动项目
|
npm run dev_supply （启动命令在package.json中可以查看） |
3.检查启动结果
启动成功示例如下；如有报错请按照错误提示信息进行修复（以文件引用路径拼写错误和react语法错误居多）
2.4. 配置nginx访问页面
1. 修改公共参数
|
*** #添加红字内容 location ~ /(behind|front|common|management)/.*\.(gif|jpeg|jpg|png|bmp|swf|flv|mid|html|htm|wma|js|css|tff|woff|html|pdf|bcmap|gz|properties)$ { #修改root指向到当前项目的html root D:\workspaces_new\on20180207\html; *** location ^~/fixed/ { alias D:\ workspaces_new/on20180207/html/management/dist/html/; index home.html; } *** location /ecp { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://ecp; rewrite ^/ecp/mac/index /fixed/home.html permanent; } |
2. 项目添加时对应配置
|
*** upstream mng_supply{ server 127.0.0.1:9109; } *** location ~ ^/mng/supply.* { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://mng_supply; } *** |
3.重启nginx
4. 本地访问开发模式页面
|
http://localhost/mng/supply.html 开发模式访问地址规则：http://localhost/mng/项目名.html |
5. 本地访问构建后页面
（适用于通过本地的静态页面，调试本地后端接口；只需执行当前步骤的‘修改公共参数’部分）
|
http://localhost/fixed/supply.html 正常模式访问地址规则：http://localhost/fixed/项目名.html |
2.5. Npm打包构建静态文件
1. 打开cmd转到项目根目录
2.运行构建命令
|
npm run build_supply （构建命令可以在package.json中可以查看） |
3.打包成功
4.查看打包结果
生成文件在当前项目的/html/management/dist中；提交到开发环境只需要发布此处dist文件即可
3. 新建项目
3.1. src目录结构说明
1.页面代码文件
|
目录 |
说明 |
下级结构 |
||
|
router |
页面路由配置，项目入口文件 |
项目1 |
||
|
项目2… |
||||
|
action |
是把数据从后端接口传到页面的通道。是状态数据的唯一来源。 |
项目1 |
模块1 |
页面1代码 |
|
页面2代码… |
||||
|
模块2… |
||||
|
项目2… |
||||
|
component |
页面UI组件 |
结构同action |
||
|
container |
框架方法 |
结构同action |
||
|
reducer |
指定了应用状态的变化如何响应 actions ，并发送到 store 的。actions 只是描述了‘有事情发生了’这一事实，并没有描述应用如何更新 state |
结构同action |
||
2.公用模块
|
目录 |
说明 |
|
asset |
资源文件（全局css，images，lib插件等） |
|
Config |
参数配置文件 |
|
Utils |
工具类 |
3.2. 约定命名方式
1.约定文件名前缀
|
action：act component： cp container： ct reducer：rd |
2.命名方式
|
变量名和函数名以及目录（除组件名称外）：小写开头驼峰命名 私有变量用下划线开头 全局变量大写开头，驼峰命名 常量全部大写，下划线连接 |
3.3. 新建页面
（这里以supply项目为例，在on模块新建页面pageNew）
1.新建文件
|
action/supply/on/actPageNew.js component/supply/on/cpPageNew.js container/supply/on/ctPageNew.js reducers/supply/on/rdPageNew.js |
2.编辑actPageNew.js
|
import actionTypes from ‘actions/supply/types‘; import common from ‘actions/common/‘; import {SUPPLY} from ‘config/api‘; const pageActionTypes = actionTypes.on.pageNew;
function requestAction() { return { type: pageActionTypes.request } } function receiveAction(state, params, json) { return { type: pageActionTypes.receive, // json: json, json:{ data: {form1: ‘aaa‘}, code: ‘0‘, msg: ‘‘ } } } export function initData(params) { return (dispatch, getState) => { // const pageState = getState().pageNew; // return dispatch(common.editInit(SUPPLY.request, params, pageState, requestAction, receiveAction)) return dispatch(dispatch(receiveAction)) } } |
3.编辑cpPageNew.js
|
import React from ‘react‘; import Component from ‘component/pageComponent‘; export default class Cp extends Component { constructor(props) { super(props); } render(){ return( <div>page new</div> ) } } |
4.编辑ctPageNew.js
|
import React from ‘react‘; import {connect} from ‘react-redux‘; import Component from ‘container/base‘; import Cp from ‘component/supply/on/cpPageNew; import {initData } from ‘actions/supply/on/actPageNew; function mapStateToProps(state) { return state.pageNew } const mapDispatchToProps = (dispatch) => ({ initData(params){ dispatch(initData(params)); } })
const App = connect(mapStateToProps, mapDispatchToProps)(Cp); export default class Container extends Component { render() { return ( <App/> ) } } |
4.编辑rdPageNew.js
|
import actionTypes from ‘actions/test/types‘; import {CommonCode, isSysTag, Spinning} from ‘reducers/common/‘; const pageActionTypes = actionTypes.on.pageNew;
const initialState = { ...CommonCode, pageValue: {} } const baseState = { resCode: 0, resMsg: ‘‘, apiType:‘‘, } export default function tableReducer(state = initialState, action) { //系统层面的信息捕获 let isSysCase = isSysTag(state, action); if(typeof isSysCase == ‘object‘){ return isSysCase } let startupState = Object.assign({}, state, baseState); switch (action.type) { case pageActionTypes.request: return Object.assign(startupState) case pageActionTypes.receive: return Object.assign(startupState, { pageValue: action.json.data, resCode: action.json.code, resMsg: action.json.msg, resType: ‘init‘, }) default: return state; } } |
5添加对应配置
src/action/supply/types.js。对应actPageNew.js和rdPageNew.js的pageActionTypes
|
Export default { //添加红字内容 on: { pageNew: { request:SUPPLY_ON_PAGE_NEW_REQUEST, receive:SUPPLY_ON_PAGE_NEW_RECEIVE } } … } |
src/config/api.js。对应actPageNew.js的SUPPLY.request
|
let supply = { //添加红字内容 request: makeUrl(“/supply/request(接口地址)”) … } |
src/reducers/supply/index.js。对应ctPageNew.js的state.pageNew，及actPageNew.js的getState().pageNew
|
//添加红字内容 import pageNew from ‘reducers/supply/on/rdPageNew;
export const reducersToCombine = { … pageNew, } |
src/router/supply/index.js。访问路由地址
|
//添加红字内容 import pageNew from ‘container/supply/on/ctPageNew; … <Route path="/pageNew/"> <IndexRoute component={pageNew}/> </Route> … |
3.4. 访问页面
开发模式：
http://localhost/mng/supply.html#/pageNew/
构建后：
http://localhost/fixed/supply.html#/pageNew/
