zoukankan      html  css  js  c++  java
  • Spring Roo 3 实例训练[同时使用Javascript库dojo和jQuery并使用Rest服务]

    前两篇讲解了ROO的一些基本知识,这篇来个实例看看整个的开发过程。

    首先进入roo命令行,执行如下的脚本[建工程和必要的设置]

    project --topLevelPackage lesson

    persistence setup --provider HIBERNATE --database HYPERSONIC_IN_MEMORY

    web mvc setup

    security setup

    entity --class ~.domain.Pet

    field string --fieldName name

    json add --class ~.domain.Pet

    controller scaffold --class ~.web.PetController --entity ~.domain.Pet

    建立一个起始框架

    使用mvn tomcat:run可以在浏览器http://localhost:8080/lesson/ 查看默认的界面,已经可以进行增删改了

    同时JSON服务也可以访问

    http://localhost:8080/lesson/pets?form 加入一个记录

    然后模仿JSON的访问

    $ curl -i -H "Accept: application/json" http://localhost:8080/lesson/pets

    HTTP/1.1 200 OK

    Server: Apache-Coyote/1.1

    Content-Type: application/text;charset=utf-8

    Content-Length: 35

    Date: Wed, 12 Oct 2011 06:03:15 GMT

    [{"id":1,"name":"dog","version":0}]

    增加的步骤:

    添加jquery资源

    lesson\src\main\webapp\scripts 放入jquery和easyui库和css等

    配置apache tiles的布局

    lesson\src\main\webapp\WEB-INF\layouts 放入jdefault.jspx ,layouts.xml修改

    实现jquery等母板资源的加载

    lesson\src\main\webapp\WEB-INF\tags\util 放入jload-scripts.tagx

    具体的部分母板页实现页面

    lesson\src\main\webapp\WEB-INF\views 放入

    jheader.jspx

    jindex.jspx

    jfooter.jspx

    work.jspx

    同时修改views.xml

    导航

    webmvc-config.xml 加入<mvc:view-controller path="/main" view-name="main"/>

    <mvc:view-controller path="/work" view-name="work"/>

    image

    其中的登录逻辑使用Spring Security,并修改为json服务的步骤:

    登录服务LoginController

    @RequestMapping(method = RequestMethod.POST)

    @ResponseBody

    public ResponseEntity<String> login(@RequestParam("j_username") String username,

    @RequestParam("j_password") String password) {

    LoginStatus s = loginService.login(username, password);

    return new ResponseEntity<String>(s.toJson(), headers, HttpStatus.OK);

    }

    客户端界面

    $.ajax({url: "${req}/api/login",

    type: "POST",

    dataType:"json",

    beforeSend: function(xhr) {

    xhr.withCredentials = true;

    },

    data: $("#loginForm").serialize(),

    success: loginSucess,

    error: loginFailed

    });

    详细代码参考:

    https://skydrive.live.com/?cid=56b433ad3d1871e3&sc=documents&uc=1&id=56B433AD3D1871E3%21274# 

  • 相关阅读:
    12.静态目录
    11.Git线上操作
    10.分离的前后台交互
    09.后台主页应用
    08.前端主页
    爬虫介绍
    python2与python3爬虫中get与post对比
    HTML+CSS+JavaScript
    数据库 Mysql-mongodb-redis
    时频工具箱介绍与使用
  • 原文地址:https://www.cnblogs.com/2018/p/2209409.html
Copyright © 2011-2022 走看看