锘??xml version="1.0" encoding="utf-8" standalone="yes"?>
浠g爜鍦ㄨ繖閲岋細https://github.com/vcycyv/react-redux-typescript-saga-webpack-springboot-jpa-pomotodo
浣跨敤鏂規硶錛?/p>
1. clone/download the project
2. run "gradle wrapper"
3. run "gradle build" (It will download jar files and js modules dependency)
4. Before importing the project into IDE, comment out "http://include 'src:main:frontend" from settings.gradle
5. Import gradle project to IDE. (I use eclipse)
6. create a postgre db named "pomotodo"
7. Start the mid-tier by running Application.java
8. UI development
8.1 For projection, navigate to /src/main/frontend and run "npm run build", and go to localhost:8080/pomotodo
8.2 For development (hot reloading), navigate to /src/main/frontend and run "npm start", and go to localhost:9090
浣跨敤redux-saga鐨勫ソ澶勬槸涓轟簡side-effect, 姣斿涓嬮潰浠g爜涓紝const tasks = yield call(ApiTasks.listTasks); 璋冪敤鍚庣鏈嶅姟錛?nbsp;
export function* listTasks() {
const tasks = yield call(ApiTasks.listTasks);
yield put({
type: LIST_TASK_SUCCESS,
tasks
})
}
鍐嶄笅闈竴琛岀殑yield put璇彞dispatch浜哃IST_TASK_SUCCESS榪欎釜action錛宲ayload灝辨槸REST API 榪斿洖鐨勬暟鎹畉asks.
璁″垝緇х畫寮鍙戣繖涓」鐩紝鏈緇堝仛涓涓暘鑼勬椂闂寸鐞嗙殑宸ュ叿銆傛劅鍏磋叮鐨勬湅鍙嬪彲浠ュ湪github涓妔tar 榪欎釜欏圭洰錛屼笅嬈″彲浠ラ殢鏃跺湪“your star”涓壘鍒板畠銆?/p>
* 鏂囨。涓嬌鐢╰omcat浣滀負container錛屽厤涓嶄簡閮ㄧ講鐨勬楠わ紝鎴戠敤eclipse鍚姩embeded jetty, 鏇存柟渚夸竴浜? 鐪佷簡閮ㄧ講鐨勬楠わ紝鐩存帴灝辮兘run銆?鍏充簬eclipse鍐呭祵jetty, 鍙互鍙傝冧箣鍓嶇殑鍗氬錛?
* 鏂囨。鐢ㄤ簡涓鍫哸nt鑴氭湰錛屽緢澶氬伐浣滄槸鐢ㄦ潵鍋氶儴緗叉墦鍖呬箣綾葷殑銆傛棦鐒剁敤jetty鏉ュ惎鍔紝ant鑴氭湰灝卞畬鍏ㄦ墧鎺変簡銆?/p>
* 鏂囨。鏈韓鏄疛Unit鐨勪竴涓嬌鐢ㄨ寖渚嬨備絾鏄挶浠▼搴忓憳鏈闇瑕佺殑鏄湁涓兘debug鐨勪緥瀛愬啓紼嬪簭鐨勬椂鍊欏鏄搑eferrence, 鎵浠ヤ竴浜汮Unit鐨刢ode琚渷鐣ユ帀浜嗐傛牴鏈師鍥犺繕鏄槸涓轟簡瀹屽叏鎵旀帀ant銆?/p>
浠g爜鍙互鍦?a >榪欓噷涓嬭澆錛?鏈変袱涓猠clipse宸ョ▼錛屽叾涓竴涓敤鏉old鎵鏈塲ar鍖咃紝鎵浠ヤ袱涓伐紼嬮兘瑕乮mport錛宔njoy it!
鍏朵腑XMLHttpRequest鏄揪鍒板紓姝ユ晥鏋滅殑鏍稿績閮ㄤ歡銆?/p>
涓涓紓姝ョ殑渚嬪瓙錛屾憳鑷狝jax in Action:
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/html4/loose.dtd">
3: <html>
4: <head>
5: <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6: <title>鏃犳爣棰樻枃妗?span style="color: #0000ff"></title>
7: <script type="text/javascript">1:
2: var req=null;3: var console=null;4: var READY_STATE_UNINITIALIZED=0;5: var READY_STATE_LOADING=1;6: var READY_STATE_LOADED=2;7: var READY_STATE_INTERACTIVE=3;8: var READY_STATE_COMPLETE=4;9: function sendRequest(url,params,HttpMethod)10: {
11: if(!HttpMethod)12: {
13: HttpMethod="GET";14: }
15: req=initXMLHTTPRequest();
16: if(req)17: {
18: req.onreadystatechange=onReadyState;
19: req.open(HttpMethod,url,true);20: req.setRequestHeader("Content-Type","appplication/x-www-form-urlencoded");21: req.send(params);22: }
23: }
24:
25: function initXMLHTTPRequest()26: {
27: var xRequest=null;28: if(window.XMLHttpRequest)29: {
30: xRequest=new XMLHttpRequest();31: }
32: else if(window.ActiveXObject)33: {
34: xRequest=new ActiveXObject("Microsoft.XMLHTTP");35: }
36: return xRequest;37:
38: }
39:
40: function onReadyState()41: {
42: var ready=req.readyState;43: var data=null;44: if(ready==READY_STATE_COMPLETE)45: {
46: data=req.responseText;
47: }
48: else49: {
50: data="loading...["+ready+"]";51: }
52: toConsole(data);
53:
54: }
55:
56: function toConsole(data)57: {
58: if(console!=null)59: {
60: var newline=document.createElement("div");61: console.appendChild(newline);
62: var txt=document.createTextNode(data);63: newline.appendChild(txt);
64: }
65: }
66: window.onload=function()67: {
68: console=document.getElementById("console");69: sendRequest("data.txt"");70: }
71:
</script>
8: </head>
9:
10: <body>
11: <div id="console">aaa</div>
12:
13: </body>
14: </html>
娉ㄦ剰鍏朵腑 req.onreadystatechange=onReadyState;灝辨槸瀹氫箟浜哻allback handler
浠ュ悗闇瑕佸叧娉ㄧ殑涓浜涙柟闈細
DWR: http://directwebremoting.org/dwr/index.html 閫傚悎鍚庣涓篔ava鐨勫簲鐢? DWR鍜宩Query鏄彲浠ユ販鍚堜嬌鐢ㄧ殑銆?/p>
JSON錛氬畠鍙互鍙栦唬寮傛璋冪敤浼犺緭鐨剎ml