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

(1)先是尝试了修改application/hal+json为普通application/json,修改方法是重写configureRepositoryRestConfiguration方法。

  1. @Configuration
  2. public class MyRestMvcConfig extends RepositoryRestMvcConfiguration {
  3.  @Bean
  4.  public RepositoryRestConfigurer repositoryRestConfigurer() {
  5.   return new RepositoryRestConfigurerAdapter() {
  6.    @Override
  7.    public void configureRepositoryRestConfiguration(RepositoryRestConfiguration config) {
  8.     config.setDefaultMediaType(MediaType.APPLICATION_JSON);
  9.    }
  10.   };
  11.  }
  12. }

依然不够简单,到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即可,所以引用的路径如下:

  1. <script src="/webjars/jquery/2.1.1/jquery.min.js"></script>
  2. <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  3. <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引入:

  1. <script type="text/javascript" src="/webjars/angularjs/1.5.8/angular.min.js"></script>
  2. <script type="text/javascript" src="/webjars/restangular/1.5.1/restangular.min.js"></script>
  1. <script type="text/javascript" src="/webjars/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
  1. <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的问题,需要修改配置使得其能够显示

  1. config.exposeIdsFor(Customer.class);

Decoration2:引入Angularjs显示前台一条数据的更多相关文章

  1. matplotlib 显示最后n条数据(可用于实时更新)

    2020-04-16 14:05:01 --Edit by yangray 按横轴刻度的种类不同,分为数值类刻度和日期类刻度. 数值类刻度 需求:x轴数据间隔为2,显示最后24条数据. #!/usr/ ...

  2. 只显示前几条数据的sql语句写法 七种数据库中Select Top的使用方法

    七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELECT ...

  3. vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)

    效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的  这个方法里传递的index 对应  isShow 数组里的index  ,对 ...

  4. QTreeView处理大量数据(使用1000万条数据,每次都只是部分刷新)

    如何使QTreeView快速显示1000万条数据,并且内存占用量少呢?这个问题困扰我很久,在网上找了好多相关资料,都没有找到合理的解决方案,今天在这里把我的解决方案提供给朋友们,供大家相互学习. 我开 ...

  5. SQL高效分页(百万条数据)

    第一种方法:效率最高 SELECT TOP 页大小 * FROM ( SELECT ROW_NUMBER() OVER (ORDER BY id) AS RowNumber,* FROM table1 ...

  6. 显示刚刚添加的最后一条数据,access,选择语句,select

    显示刚刚添加的最后一条数据,access,选择语句,select select top 1  * from s1 order by id desc

  7. 分页(将数据库中的多条数据一页一页的显示在jsp页面中)

    一.显示数据库中的多条数据为什么要用分页 在真正的开发中,数据库中所存储的数据绝对不像我们平时所写的那样,仅仅有几条数据,而是有几十条甚至上百条,像淘宝京东的用户把都是上几十万甚至百万的.如果这时候在 ...

  8. js点击加载更多可以增加几条数据的显示

      <div class="list"> <div class="one"> <div class="img" ...

  9. SQL 去重 显示第一条数据 显示一条数据

    需求描述:根据某一个字段或几个字段去重来显示任一条数据,第一条或最后一条. 数据样式如下图: 尝试解决: --count(*)方法(只把条数为1条的显示出来了,超过1条全部过滤了) select * ...

随机推荐

  1. appium+python自动化26-模拟手势点击坐标(tap)

    ​# 前言: 有时候定位元素的时候,你使出了十八班武艺还是定位不到,怎么办呢?(面试经常会问) 那就拿出绝招:点元素所在位置的坐标 tap用法 1.tap是模拟手指点击,一般页面上元素 的语法有两个参 ...

  2. Appium+python自动化10-AVD 模拟器

    前言 有些小伙伴没android手机,这时候可以在电脑上开个模拟器玩玩 一.模拟器配置 1.双击启动AVD Manager,进入配置界面

  3. Log4j写入数据库详解

    log4j是一个优秀的开源日志记录项目,我们不仅可以对输出的日志的格式自定义,还可以自己定义日志输出的目的地,比如:屏幕,文本文件,数据库,甚至能通过socket输出.本节主要讲述如何将日志信息输入到 ...

  4. PAT 1033. To Fill or Not to Fill (贪心)

    PAT-A的最后一题,最终做出来了... 是贪心,通过局部最优获得全局最优. 1. 将加油站按距离升序排序 2. 记录当前所在的加油站index,存有的汽油,花费.向后遍历全部 该站可抵达的加油站 3 ...

  5. 3DPrint ABS和PLA代码比较

    PLA ABS

  6. [Android 新特性] 15项大改进 Android 4.4新特性解析

    腾讯数码讯(编译:刘沙) 终于,Android系统迎来了久违的重大更新——Android 4.4 KitKat,并与新旗舰Nexus 5同时问世.那么,新的系统究竟都有怎样的改进.是否值得升级呢,下面 ...

  7. sed替换换行符“\n”

    linux sed命令,如何替换换行符“\n” 在一次sed使用中,执行命令: sed "s/\n//g" file 1 发现,没起到任何效果. 后来,经查sed官方用户手册,才得 ...

  8. Nescafé2 月之谜 题解

    月之谜 (mystery.pas/c/cpp) [题目描述] 打败了 Lord lsp 之后,由于 lqr 是一个心地善良的女孩子,她想净化 Lord lsp 黑化的心,使他变回到原来那个天然呆的 l ...

  9. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  10. metal2的四个新features

    https://developer.apple.com/documentation/metal/mtldevice/ios_and_tvos_devices/about_gpu_family_4 Im ...