項目開始前,咱們先聊一聊關於項目的一些說明。該項目起始於2017年初,當時公司主要技術棧爲gulp+angular,鑑於react的火熱的生態,在公司決定研發bss管理系統時選用react開發,目的也是爲react native打下基礎,以解決後期公司大前端技術棧的逐步成熟。(當時沒有選擇vue開發的主要緣由是weex生態還不夠特別成熟),既然決定換新,項目的構建也跟着一塊兒換,從gulp轉向火熱的webpack,持續大半年的更新迭代,咱們將構建模塊逐步從項目中抽離出來,把構建模塊做爲npm包單獨管理,完成和項目代碼解耦,因而就有了後面咱們要說的wci-build構建模塊包和wci-cli項目腳手架。javascript
項目採用先後端分離的形式,後端選用Maven+SpringClould全家桶開發,前端選用webpack+react全家桶開發,先後端所有采用包管理工具徹底解決項目依賴管理的難題,版本管理採用git,先後端經過json交互,swgger管理接口文檔,接口所有遵循restful規範。因爲本文面向社區開放,故本文中不涉及公司業務層的代碼,本文所有代碼均爲最新編寫,咱們以一個旅遊管理系統的三個模塊爲你們演示項目(登錄登出、用戶模塊、景點模塊)。爲了快速開展,本文涉及的後端代碼直接採用Java的SSM框架搭建,源碼也將爲你們奉上。朋友們也可使用mock模擬接口數據。後期咱們在演示nodejs+espress時將接口代碼所有轉爲node形式。css
因本文不是講解基礎,故你們在敲代碼前,還須要具有必定的前端基礎,部分以下html
本項目集成了最新的react1六、react-router四、redux,同時能夠選擇性集成antd|antd mobile,在解決繁瑣的架構配置工做外,還解決了如下問題前端
雖然通過大半年迭代,但咱們還須要在實際項目開發中支持更多的個性化需求vue
你們在開發過程當中遇到任何問題,但願能夠給咱們留言,咱們會不斷優化項目。將來,咱們還會加入mobx、rxjs、immutablejs、GraphQL等,也但願在和你們的探討中,持續進步。java
本項目基礎環境必須依賴nodejs和npm,未安裝的朋友能夠去官網自行安裝,安裝教程這裏不詳細說明,安裝完成後使用以下命令,查看是否安裝成功。node
node -v
npm -v
複製代碼
####初始化項目 本項目咱們使用wci-cli腳手架初始化項目react
npm install -g wci-cli
複製代碼
wci new myapp
複製代碼
執行命令後,命令行會提示是否須要安裝antd以及選擇antd類型,便可完成項目初始化,以下webpack
項目目錄ios
myapp
├── app // 項目業務代碼
│ ├── assets // 靜態文件目錄(圖片、字體等)
│ ├── script // js代碼目錄
│ │ ├── actions // redux action目錄
│ │ ├── componets // react 無狀態組件目錄
│ │ ├── containers // react 業務代碼
│ │ ├── reducers // redux reducer目錄
│ │ ├── util // 工具包目錄
│ │ │ ├── theme.js // antd自定義樣式文件
│ │ ├── Home.js // 首頁
│ │ ├── home.less // 首頁樣式
│ ├── styles // 全局樣式目錄
│ ├── index.js // 項目入口文件
│ ├── index.tpl.html // 項目html模版
├── node_modules // 依賴包目錄
├── .babelrc // babel配置文件
├── .eslintrc // eslint代碼校驗配置文件
├── .gitignore
├── package.json
├── README.md
├── wci.json // wci項目配置文件(主要配置一些開發、測試、生產環境的信息)
└── webpack.js // webpack自定義配置文件
複製代碼
執行以下命令,運行開發環境
cd myapp
npm run start
複製代碼
如上圖,咱們的項目已經跑起來了...
npm run test // 測試環境打包
npm run dist // 生產環境打包
複製代碼
測試代碼
生產代碼
到這裏,咱們已經完成項目前期開發的全部準備工做,接下來,咱們一塊兒開始擼代碼吧
項目結束後,我會爲你們奉上兩篇彩蛋,分別是 1. 一步步搭建webpack前端構建工具並抽成npm單獨模塊 2. 一步步構建本身的npm開發包而且以一個真實例子演示(開發一個命令行生成文件夾結構的小工具)
正式開始擼代碼前,還要針對項目具體說明,包括項目代碼目錄介紹,先後端分離項目須要注意哪些問題,先後端如何鑑權等...
myapp
├── app // 項目業務代碼
│ ├── assets // 靜態文件目錄(圖片、字體等)
│ ├── script // js代碼目錄
│ │ ├── actions // redux action目錄
│ │ ├── componets // react 無狀態組件目錄
│ │ ├── containers // react 業務代碼
│ │ ├── reducers // redux reducer目錄
│ │ ├── util // 工具包目錄
│ │ │ ├── theme.js // antd自定義樣式文件
│ │ ├── Home.js // 首頁
│ │ ├── home.less // 首頁樣式
│ ├── styles // 全局樣式目錄
│ ├── index.js // 項目入口文件
│ ├── index.tpl.html // 項目html模版
├── node_modules // 依賴包目錄
├── .babelrc // babel配置文件
├── .eslintrc // eslint代碼校驗配置文件
├── .gitignore
├── package.json
├── README.md
├── wci.json // wci項目配置文件(主要配置一些開發、測試、生產環境的信息)
└── webpack.js // webpack自定義配置文件
複製代碼
以上是代碼的所有目錄,下面咱們根據功能依次介紹:
node_modules: npm依賴包目錄,開發者能夠不用管,只要知道咱們項目裏全部的依賴都下載在這個文件夾下 .gitignore:git須要忽略的文件 package.json:npm最主要的文件,裏面寫滿了咱們依賴包的結構和一些項目信息 README.md:github的說明文件
.babelrc:babel配置文件,能夠配置部分自定義babel插件(例如本項目裏antd自定義主題和javascript@語法糖就在這裏配置) .eslintrc:eslint配置文件,能夠自定義配置eslint規則,詳細規則能夠去官網eslint查看
說明:這兩個模塊本該配置在wci-build構建工具裏,但考慮到項目的靈活性,全部抽離出來放在項目根目錄
webpack.js:webpack loader個性化的配置文件,能夠自定義添加webpack loader
wci.json:項目的配置文件,能夠自定義配置項目
{
"index": "app/index.js", // 項目入口文件
"hostname": "127.0.0.1", // 開發環境IP地址(能夠配置域名經過本地host轉發)
"name": "wci-antd-app", // 項目名稱(顯示在瀏覽器title裏的名字)
"libs": [ // 項目的公共包,後續能夠自行添加
"react",
"react-dom",
"axios",
"classnames",
"prop-types",
"react-redux",
"react-router-dom",
"redux",
"redux-thunk"
],
"dev": { // 開發環境配置
"port": 8031, // 開發環境端口
"src": "app", // 開發環境監聽目錄
"api": "", // 開發環境後端接口地址
"module": {}, // 開發環境的模塊包
"is_eslint": false // 開發環境是否開啓eslint校驗
},
"test": { // 測試環境配置
"module": {}, // 測試環境的模塊包
"api": "" // 測試環境後端接口地址
},
"prod": { // 生產環境配置
"module": {}, // 生產環境的模塊包
"api": "" // 生產環境後端接口地址
}
}
複製代碼
項目目錄
├── app // 項目業務代碼
│ ├── assets // 靜態文件目錄(圖片、字體等)
│ ├── script // js代碼目錄
│ │ ├── actions // redux action目錄
│ │ ├── componets // react 無狀態組件目錄
│ │ ├── containers // react 業務代碼
│ │ ├── reducers // redux reducer目錄
│ │ ├── util // 工具包目錄
│ │ │ ├── theme.js // antd自定義樣式文件
│ │ ├── Home.js // 首頁
│ │ ├── home.less // 首頁樣式
│ ├── styles // 全局樣式目錄
│ ├── index.js // 項目入口文件
│ ├── index.tpl.html // 項目html模版
複製代碼
如上,由於react遵循組件化開發,故咱們的業務代碼所有寫在containers
目錄下,而且模塊的樣式文件、高階組件寫在相對的模塊下,如圖
styles
目錄用於存放項目全局的樣式文件,例如全局樣式的變量文件等...
推薦使用gitflow來進行版本的管理,這裏不作詳細描述
一旦項目採用先後端分離,跨域是全部項目裏不可避免的問題,目前跨域的解決方案主要有三種
咱們這裏採用方式2
java代碼
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Credentials", "true");
response.addHeader("Access-Control-Allow-Headers","Content-Type,Content-Token,Content-User,X-Requested-With");
複製代碼
nodejs 代碼
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers","Content-Type,Content-Token,Content-User,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
複製代碼
這種方式還能夠自定義請求頭的認證信息
不明白的朋友能夠去看阮一峯大神的這篇文章
更新於2018-02-27