BlogJava-人在江湖-随笔分类-UI & MVChttp://www.blogjava.net/vcycyv/category/48069.htmlzh-cnFri, 02 Feb 2018 22:13:07 GMTFri, 02 Feb 2018 22:13:07 GMT60一个基于react redux typescript saga webpack springboot和jpa的示例程序http://www.blogjava.net/vcycyv/archive/2018/02/03/433036.html人在江湖人在江湖Fri, 02 Feb 2018 21:59:00 GMThttp://www.blogjava.net/vcycyv/archive/2018/02/03/433036.htmlhttp://www.blogjava.net/vcycyv/comments/433036.htmlhttp://www.blogjava.net/vcycyv/archive/2018/02/03/433036.html#Feedback0http://www.blogjava.net/vcycyv/comments/commentRss/433036.htmlhttp://www.blogjava.net/vcycyv/services/trackbacks/433036.html分享自己做的一个小应用，这是一个典型的web应用程序的技术栈，可以在这个项目的基础上开发你想做的应用。前端的开发有开发和产品两种模式，开发模式主要是为了Hot code reloading.

代码在这里：https://github.com/vcycyv/react-redux-typescript-saga-webpack-springboot-jpa-pomotodo 

使用方法：

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 "//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, 比如下面代码中，const tasks = yield call(ApiTasks.listTasks); 调用后端服务， 

export function* listTasks() {

    const tasks = yield call(ApiTasks.listTasks);

    yield put({

        type: LIST_TASK_SUCCESS,

        tasks

    })

}

再下面一行的yield put语句dispatch了LIST_TASK_SUCCESS这个action，payload就是REST API 返回的数据tasks.

计划继续开发这个项目，最终做一个番茄时间管理的工具。感兴趣的朋友可以在github上star 这个项目，下次可以随时在“your star”中找到它。



人在江湖 2018-02-03 05:59 发表评论
]]>Spring MVC step by step 代码分享http://www.blogjava.net/vcycyv/archive/2011/03/29/347161.html人在江湖人在江湖Mon, 28 Mar 2011 23:01:00 GMThttp://www.blogjava.net/vcycyv/archive/2011/03/29/347161.htmlhttp://www.blogjava.net/vcycyv/comments/347161.htmlhttp://www.blogjava.net/vcycyv/archive/2011/03/29/347161.html#Feedback0http://www.blogjava.net/vcycyv/comments/commentRss/347161.htmlhttp://www.blogjava.net/vcycyv/services/trackbacks/347161.htmlSpring发布包里的docs目录下，有Spring MVC step by step文档，写得非常清楚，但是没提供源代码。我在它的基础上略作了一点的改动，分享出来。是基于2.5.6版本的。

* 文档中使用tomcat作为container，免不了部署的步骤，我用eclipse启动embeded jetty, 更方便一些, 省了部署的步骤，直接就能run。 关于eclipse内嵌jetty, 可以参考之前的博客：

利用jetty实现超轻量级web开发

* 文档用了一堆ant脚本，很多工作是用来做部署打包之类的。既然用jetty来启动，ant脚本就完全扔掉了。

* 文档本身是JUnit的一个使用范例。但是咱们程序员最需要的是有个能debug的例子写程序的时候容易referrence, 所以一些JUnit的code被省略掉了。根本原因还是是为了完全扔掉ant。

 

代码可以在这里下载， 有两个eclipse工程，其中一个用来hold所有jar包，所以两个工程都要import，enjoy it!



人在江湖 2011-03-29 07:01 发表评论
]]>小结Ajaxhttp://www.blogjava.net/vcycyv/archive/2011/03/16/346403.html人在江湖人在江湖Wed, 16 Mar 2011 07:54:00 GMThttp://www.blogjava.net/vcycyv/archive/2011/03/16/346403.htmlhttp://www.blogjava.net/vcycyv/comments/346403.htmlhttp://www.blogjava.net/vcycyv/archive/2011/03/16/346403.html#Feedback0http://www.blogjava.net/vcycyv/comments/commentRss/346403.htmlhttp://www.blogjava.net/vcycyv/services/trackbacks/346403.htmlAjax是一组技术的集合：javascript, css, DOM, XMLHttpRequest.

其中XMLHttpRequest是达到异步效果的核心部件。

一个异步的例子，摘自Ajax 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>无标题文档</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:   else
  49:   {
  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;就是定义了callback handler

以后需要关注的一些方面：

DWR: http://directwebremoting.org/dwr/index.html 适合后端为Java的应用. DWR和jQuery是可以混合使用的。

JSON：它可以取代异步调用传输的xml



人在江湖 2011-03-16 15:54 发表评论
]]>