国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React項(xiàng)目實(shí)踐系列一

DC_er / 1014人閱讀

摘要：在此我們選用用友的公共靜態(tài)資源庫。因此打算建立遠(yuǎn)程的其實(shí)還有個(gè)關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術(shù)團(tuán)隊(duì)提供了平臺(tái)。

數(shù)據(jù)分析平臺(tái)-實(shí)踐系列一 
項(xiàng)目創(chuàng)建于2018年1月底，到現(xiàn)在已經(jīng)接近半年，在此寫下半年來項(xiàng)目的實(shí)踐過程以及自己對(duì)前端的學(xué)習(xí)與體悟。
技術(shù)選型

框架： React

路由： React-Router 4

狀態(tài)管理： Redux

UI組件庫： Ant Design

搭建工程

因?yàn)槠脚_(tái)的前端技術(shù)選型，因此挑選了React為技術(shù)框架。并使用create-react-app快速搭建工程。create-react-app為fackbook官方出品的快速搭建React工程的命令行工具，可以減少寫各種配置的過程，似于vue的vue-cli和angular的angular-cli。

而在使用create-react-app，需要使用eject暴露所有配置項(xiàng)，好自定義個(gè)人的Webpack配置。

首先我們并不打算將React讓Webpack打包，而使用第三方的CDN，直接在HTML文件以script標(biāo)簽引入。在此我們選用用友的tinper公共靜態(tài)資源庫。

改動(dòng)Webpack配置文件

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
  "react-router-dom": "ReactRouterDOM",
  "redux": "Redux",
  "react-redux": "ReactRedux"
}

而若引入第三方CDN，需要分引入為生產(chǎn)環(huán)境還是開發(fā)環(huán)境的代碼。
如在生產(chǎn)環(huán)境下要引入//design.yonyoucloud.com/static/react/16.0.0/umd/react.production.min.js
而在開發(fā)環(huán)境引入//design.yonyoucloud.com/static/react/16.2.0/umd/react.development.js。

選用ejs-compiled-loader，這樣另我們可以在HTML文件使用ejs模板引擎。

繼續(xù)改動(dòng)Webpack配置文件

new HtmlWebpackPlugin({
  inject: true,
  template: `!!ejs-compiled-loader!${paths.appHtml}`,
}),

在HTML使用模板引擎

  <% if (process.env.NODE_ENV === "production") { %>
    
    
  <% } %>
  <% if (process.env.NODE_ENV === "development") { %>
    
    
  <% } %>

最后，設(shè)置Webpack的別名，讓后續(xù)引用的地方減少路徑的復(fù)雜度。

alias: {
  "root": path.resolve(__dirname, "../src"),
  "@": path.resolve(__dirname, "..")
},

如在src文件夾下有兩個(gè)文件夾a和b，倘若b下的m.js需要引用a下的n.js，需要import X from ‘../a/n.js’，設(shè)置別名后可寫為root/a/n.js。

前后端分離

在知乎上面找了張圖片，前后端分離，簡(jiǎn)單的說，就是前端負(fù)責(zé)頁面交互，顯示后臺(tái)提供的數(shù)據(jù)，而后端負(fù)責(zé)數(shù)據(jù)的處理，提供給前臺(tái)數(shù)據(jù)。

可以看出前后端是有很強(qiáng)的耦合關(guān)系，后端需要依賴前端請(qǐng)求，前端需要依賴后端響應(yīng)。不過此處后端是可以輕松模擬前端請(qǐng)求，如POSTMAN等。剩下的解決要點(diǎn)為如何給前端模擬數(shù)據(jù)。因此，我們?cè)谠O(shè)計(jì)接口約定數(shù)據(jù)后構(gòu)建另一個(gè)簡(jiǎn)單的Server，這個(gè)Server會(huì)簡(jiǎn)單的響應(yīng)前端請(qǐng)求，根據(jù)約定返回模擬的數(shù)據(jù)。我們將這個(gè)Server成為Mock Server。

其中Mock Server可分成本地及遠(yuǎn)程。

本地的Mock Server需要每個(gè)前端在自己電腦上部署服務(wù)器，且若后臺(tái)改動(dòng)API，后臺(tái)無法同步維護(hù)Mock Server與Real Server。

因此打算建立遠(yuǎn)程的Mock Server(其實(shí)還有個(gè)關(guān)鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。)不過此步驟我們也可以省略了，用友的大前端技術(shù)團(tuán)隊(duì)提供了Mock平臺(tái)。

他的功能十分齊全，具備權(quán)限管理，Mock Server，數(shù)據(jù)導(dǎo)入等等的功能。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108022.html

相關(guān)文章

  • 前端每周清單年度總結(jié)與盤點(diǎn)

    摘要：前端每周清單年度總結(jié)與盤點(diǎn)在過去的八個(gè)月中，我?guī)缀踔蛔隽藘杉拢ぷ髋c整理前端每周清單。本文末尾我會(huì)附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵(lì)過的朋友，希望你們能夠繼續(xù)支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結(jié)與盤點(diǎn) 在過去的八個(gè)月中，我?guī)缀踔蛔隽?..

    jackwang 評(píng)論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤點(diǎn)之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為...

    Barry_Ng 評(píng)論0 收藏0

  • 前端每周清單第 10 期：Firefox53、React VR發(fā)布、Microsoft Edge現(xiàn)代

    摘要：新聞熱點(diǎn)國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)發(fā)布近日，正式發(fā)布新版本中提供了一系列的特性與問題修復(fù)。而近日正式發(fā)布，其能夠幫助開發(fā)者快速構(gòu)建應(yīng)用。 前端每周清單第 10 期：Firefox53、React VR發(fā)布、JS測(cè)試技術(shù)概述、Microsoft Edge現(xiàn)代DOM樹構(gòu)建及性能之道 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請(qǐng)與InfoQ中文站聯(lián)系。從屬于筆者的 Web 前端入門...

    MingjunYang 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)踐系列二

    摘要：數(shù)據(jù)分析平臺(tái)實(shí)踐系列二這期主要講接口的請(qǐng)求配置設(shè)置代理上一篇文章說明了使用遠(yuǎn)程，那下一步就是讓前端請(qǐng)求環(huán)境了。建立一個(gè)測(cè)試接口在項(xiàng)目中便可直接便可。在項(xiàng)目中，我們選用了。在使用前，需要對(duì)所有的請(qǐng)求與響應(yīng)進(jìn)行統(tǒng)一攔截，以便后期管理。 數(shù)據(jù)分析平臺(tái)-實(shí)踐系列二 這期主要講接口的請(qǐng)求配置 設(shè)置代理 上一篇文章說明了使用遠(yuǎn)程Mock Server，那下一步就是讓前端請(qǐng)求Mock環(huán)境了。 建立一...

    wind3110991 評(píng)論0 收藏0

  • 前端每周清單第 51 期: React Context API 與模式變遷, Webpack 與 W

    摘要：前端每周清單第期與模式變遷與優(yōu)化界面生成作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000013279448); 前端每周清單第 51 期: React Context A...

    Jiavan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<