Decoration2：引入Angularjs显示前台一条数据

SpringMVC内置的RestFul API格式采用的是最复杂最全面的HATEOAS规范，对于简单应用来说，前台解析起来不方便，我们下面主要想办法重新定义一种简单的RestFulAPI。

（1）先是尝试了修改application/hal+json为普通application/json，修改方法是重写configureRepositoryRestConfiguration方法。

@Configuration

public class MyRestMvcConfig extends RepositoryRestMvcConfiguration {

 @Bean

 public RepositoryRestConfigurer repositoryRestConfigurer() {

  return new RepositoryRestConfigurerAdapter() {

   @Override

   public void configureRepositoryRestConfiguration(RepositoryRestConfiguration config) {

    config.setDefaultMediaType(MediaType.APPLICATION_JSON);

   }

  };

 }

}

依然不够简单，到stackoverflow查找，发现这种功能实现起来有些困难：

you can't use spring-data-rest without hateoas. If you want to build your web service without hateoas, you'll have to write your own controllers

为了google资料查一下这个转换怎么写，还特意安装了蓝灯翻墙，真是够了，看起来不是那么简单。

这里要记录一个点：Spring如何对output的格式进行处理的？

（2）退而求其次，在现在的Restful格式下，在前台用JS代码做转换

用了一个GitHub上的工程 restangular-hateoas，原理就是在Angularjs的services请求之后对数据格式做一下转换

这里要记录一个点：Restangular的setResponseExtractor、addResponseInterceptor的作用时机和用法

（3）方案确定后，开始引入前台开发元素

首先页面要有基本的css格式，先不讲究页面设计，直接把bootstrap引入进来，怎么引入比较好呢，为了方便管理，采用webjar。这样就需要做两个动作：一是在pom.xml中添对应的webjar的依赖，二是在index.html中加入引用，在springboot中webjar文件只要在路径前面加入/webjar即可，所以引用的路径如下:

<script src="/webjars/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

bootstrap.min.js依赖jquery，所以jquery也要加进来

（4）首页一加载的时候，就要查询用户信息，如何做呢？通过angularjs的Controller，这时候就要把angularjs引入到工程中来了

首先在pom.xml中引入angular、restangular、lodash的webjar，并且在index.html引入：

<script type="text/javascript" src="/webjars/angularjs/1.5.8/angular.min.js"></script>

<script type="text/javascript" src="/webjars/restangular/1.5.1/restangular.min.js"></script>

<script type="text/javascript" src="/webjars/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

<script type="text/javascript" src="/webjars/lodash/4.15.0/lodash.min.js"></script>

restangular用户简化angularjs的$http请求，这个插件要依赖lodash，所以loadsh依赖也要加进来

（5）然后是写app.js使用restangular调用后台服务查询出数据并显示到前台

这里遇到一个错误： In the latest version(4.0.0) of lodash, _.contais() method is not defined. It was available in version "3.10.0"

这是因为lodash的新版本中，_contais已经被废弃掉了，但是restangular还在用老的版本，所以回退到2.4.1版。

现在达到了最简目标：在前台显示出数据库的数据。

这里面遇到了一个不能在前台显示ID的问题，需要修改配置使得其能够显示

config.exposeIdsFor(Customer.class);

巴特西

Decoration2：引入Angularjs显示前台一条数据

最新文章

热门文章