可復(fù)制的前后端分離開(kāi)發(fā)模式精選課件

1、可復(fù)制的前后端分離開(kāi)發(fā)模式Cisco WebEx 杜歡w3cgroupdh20196126WEB開(kāi)發(fā)方式歷史回顧問(wèn)題與挑戰(zhàn)迎接挑戰(zhàn)組織結(jié)構(gòu)上的前后端分離F2E & SDE改變的意義開(kāi)發(fā)模式上的前后端分離合理的開(kāi)發(fā)流程Yahoo!的分離開(kāi)發(fā)經(jīng)驗(yàn)全新的思想-可復(fù)制的前后端分離開(kāi)發(fā)模式驗(yàn)證與實(shí)踐議題WEB開(kāi)發(fā)方式歷史回顧組織結(jié)構(gòu)業(yè)務(wù)管理開(kāi)發(fā)甲乙丙丁開(kāi)發(fā)主管技能數(shù)據(jù)庫(kù)服務(wù)端客戶端開(kāi)發(fā)流程(單項(xiàng)目)業(yè)務(wù)管理開(kāi)發(fā)甲乙丙丁開(kāi)發(fā)主管客戶需求數(shù)據(jù)庫(kù)設(shè)計(jì)服務(wù)端編程客戶端頁(yè)面開(kāi)發(fā)流程(多項(xiàng)目)業(yè)務(wù)管理開(kāi)發(fā)甲乙丙丁開(kāi)發(fā)主管客戶需求數(shù)據(jù)庫(kù)服務(wù)端客戶端客戶需求客戶需求數(shù)據(jù)庫(kù)服務(wù)端客戶端數(shù)據(jù)庫(kù)服務(wù)端客戶端迎接挑戰(zhàn)如何降低招

2、聘成本？如何提高項(xiàng)目質(zhì)量？如何完善開(kāi)發(fā)資源分配？如何提高企業(yè)的專業(yè)形象？如何為員工提供技能升級(jí)的空間？如何為員工提供更好的職業(yè)規(guī)劃指引？組織結(jié)構(gòu)上的前后端分離F2E & SDEF2EFront End Engineer泛指WEB前端開(kāi)發(fā)SDEServer Develop Engineer泛指WEB后端開(kāi)發(fā)開(kāi)發(fā)的組織結(jié)構(gòu)重組推薦的內(nèi)部組織結(jié)構(gòu)組織結(jié)構(gòu)Team LeaderTechnic LeaderTeam member企業(yè)提高生產(chǎn)力提高項(xiàng)目品質(zhì)降低招聘成本提升專業(yè)形象員工做自己想做的事具備成為領(lǐng)域內(nèi)專家的基礎(chǔ)獲得更為清晰的職業(yè)規(guī)劃路線改變的意義開(kāi)發(fā)模式上的前后端分離明確的需求合理的開(kāi)發(fā)流程F2

3、E前端SDE后端整合測(cè)試QA測(cè)試項(xiàng)目發(fā)布變動(dòng)的需求轉(zhuǎn)換成明確的需求非緊急，重大變動(dòng)的部分可以版本更新的方式進(jìn)行處理制定適合的“需求更改”流程合理的開(kāi)發(fā)流程PHPMaple System + PHP存在的問(wèn)題在頁(yè)面中找到要替換的假數(shù)據(jù)有點(diǎn)困難，需要“淡定”經(jīng)常弄丟HTML中的字符、引號(hào)、結(jié)束符等等SDE表示“壓力很大”SDE套頁(yè)后的頁(yè)面拿到前端跑不起來(lái)QA需要等到后端全部弄好后才能開(kāi)始測(cè)試Yahoo!的分離開(kāi)發(fā)經(jīng)驗(yàn)全新的思想可復(fù)制的前后端分離開(kāi)發(fā)模式適合任何后端語(yǔ)言的分離開(kāi)發(fā)模式JAVAPHPASP.NET思想核心指令引入JS的I18N資源文件頁(yè)面中調(diào)用該指令后，應(yīng)該輸出如下代碼:“en_US”

4、 應(yīng)該由該指令自動(dòng)識(shí)別客戶端語(yǔ)言如果站點(diǎn)允許用戶選擇“語(yǔ)言”，則以此為準(zhǔn)指令實(shí)現(xiàn)頁(yè)面中輸出的I18N信息該指令應(yīng)該從相應(yīng)的i18n屬性文件中取到key為”feed.userinfo”的值，如果支持參數(shù)形式，則可以將參數(shù)傳遞過(guò)去，支持多參數(shù)以數(shù)組形式的傳遞，如：arguments=”a”,”b”,”c”前端Mock環(huán)境時(shí)將只有一個(gè)模擬i18n文件（每種語(yǔ)言一個(gè)）例如，i18n資源中有: feed.userinfo=0s Info那么，調(diào)用該指令后應(yīng)該輸出: Charlies Info指令實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的訪問(wèn)“name” 取到的數(shù)據(jù)將賦值給它，以便在后面可以通過(guò)它來(lái)訪問(wèn)取到的數(shù)據(jù)“param” 該s

5、ervice需要用到的參數(shù)“service” 在前端mock環(huán)境下，它會(huì)去讀取對(duì)應(yīng)的mockdata/biz/feed/feed_list.json 這個(gè)文件，在真實(shí)環(huán)境中，它由后端對(duì)該指令接口的具體實(shí)現(xiàn)去提供真實(shí)數(shù)據(jù)，service和params將傳遞進(jìn)去。指令實(shí)現(xiàn)通過(guò)AJAX訪問(wèn)業(yè)務(wù)數(shù)據(jù)bizcall.ext.do, .php, .asp(x)所有通過(guò)AJAX訪問(wèn)業(yè)務(wù)數(shù)據(jù)的請(qǐng)求都指向到同一個(gè)bizCall.ext, 發(fā)送一個(gè)字段:字段名:bizcall字段值:name:“feed”, service:“feed.feed_list”, params:pageSize:10,pageInde

6、x:0對(duì)后端來(lái)講, 他們?nèi)匀豢梢允褂?easySC.bizData 來(lái)處理, 對(duì)前端來(lái)講, 他們的假數(shù)據(jù)不需要編寫(xiě)多份.提示: 前端對(duì)業(yè)務(wù)數(shù)據(jù)訪問(wèn)的AJAX Call可以封裝為一個(gè)通用方法，如 “bizCall”指令實(shí)現(xiàn)環(huán)境數(shù)據(jù)訪問(wèn)“key” 在前端開(kāi)發(fā)的mock環(huán)境中，應(yīng)該匹配到前端模擬的環(huán)境假數(shù)據(jù)文件中的 “currentuser.username” ，在真實(shí)環(huán)境中，則由后端對(duì)該指令接口的具體實(shí)現(xiàn)去提供真實(shí)數(shù)據(jù)，key將傳遞進(jìn)去?！皀ame” 取到的對(duì)應(yīng)KEY的返回值，如: “Charlie Du”，可以在后面的代碼中使用指令實(shí)現(xiàn)“指令”，可以由任何語(yǔ)言進(jìn)行實(shí)現(xiàn)“指令”設(shè)計(jì)思想:“指令”在

7、前端mock環(huán)境中取假數(shù)據(jù)“指令”在真實(shí)環(huán)境中取真實(shí)數(shù)據(jù)環(huán)境切換由開(kāi)關(guān)控制指令實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)格式需要由前后端共同約定數(shù)據(jù)接口status:“SUCCESS|FAILURE”,message:“當(dāng)前請(qǐng)求的情況資訊”,result:“返回值, 可以是任何數(shù)據(jù)類型, 比如 String, Array, Object, 需要前后端一起約定”環(huán)境數(shù)據(jù)格式需要由前后端共同約定，后面的注釋可以由后端同事補(bǔ)齊，用于后端在真實(shí)環(huán)境中取數(shù)據(jù)時(shí)可以明確數(shù)據(jù)出處（比如，來(lái)自Session或Cookie）。數(shù)據(jù)接口rootpath:“/”, skinpath:“/resource/skin_default/”,jspat

8、h:“/resource/js/”, currentuser.cred: “U1U7EXG5”, /*數(shù)據(jù)出處*/currentuser.username:“Charlie Du” /*備注信息*/前端模擬假數(shù)據(jù)文件結(jié)構(gòu)數(shù)據(jù)接口表單數(shù)據(jù)約定Action URLItems NameSubmit Method鏈接URL、參數(shù)約定數(shù)據(jù)接口所有這些約定最終需要形成“數(shù)據(jù)接口文檔”數(shù)據(jù)接口Data Interface SpecificationXXX ProjectVersion:0.1F2E Owner:Charlie DuSDE Owner:Bo Song2019/10/09驗(yàn)證與實(shí)踐分離框架EasySCEasy Separate and Cooperate它是一個(gè)簡(jiǎn)易的前后端分離框架基于可復(fù)制的前后端分離開(kāi)發(fā)模式思想，JAVA + Freemarker的簡(jiǎn)單實(shí)現(xiàn)分離框架EasySCHTTP ServerEasySC Framework前端環(huán)境真實(shí)環(huán)境實(shí)現(xiàn)接口BizDataEnvDataI18NI18NJS分離框架EasySC分離框架EasySC分離框架EasySCModule: current-list分離框架EasySCmstarWEB-INFclassesp