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显示前台一条数据的更多相关文章
- matplotlib 显示最后n条数据(可用于实时更新)
2020-04-16 14:05:01 --Edit by yangray 按横轴刻度的种类不同,分为数值类刻度和日期类刻度. 数值类刻度 需求:x轴数据间隔为2,显示最后24条数据. #!/usr/ ...
- 只显示前几条数据的sql语句写法 七种数据库中Select Top的使用方法
七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELECT ...
- vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)
效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的 这个方法里传递的index 对应 isShow 数组里的index ,对 ...
- QTreeView处理大量数据(使用1000万条数据,每次都只是部分刷新)
如何使QTreeView快速显示1000万条数据,并且内存占用量少呢?这个问题困扰我很久,在网上找了好多相关资料,都没有找到合理的解决方案,今天在这里把我的解决方案提供给朋友们,供大家相互学习. 我开 ...
- SQL高效分页(百万条数据)
第一种方法:效率最高 SELECT TOP 页大小 * FROM ( SELECT ROW_NUMBER() OVER (ORDER BY id) AS RowNumber,* FROM table1 ...
- 显示刚刚添加的最后一条数据,access,选择语句,select
显示刚刚添加的最后一条数据,access,选择语句,select select top 1 * from s1 order by id desc
- 分页(将数据库中的多条数据一页一页的显示在jsp页面中)
一.显示数据库中的多条数据为什么要用分页 在真正的开发中,数据库中所存储的数据绝对不像我们平时所写的那样,仅仅有几条数据,而是有几十条甚至上百条,像淘宝京东的用户把都是上几十万甚至百万的.如果这时候在 ...
- js点击加载更多可以增加几条数据的显示
<div class="list"> <div class="one"> <div class="img" ...
- SQL 去重 显示第一条数据 显示一条数据
需求描述:根据某一个字段或几个字段去重来显示任一条数据,第一条或最后一条. 数据样式如下图: 尝试解决: --count(*)方法(只把条数为1条的显示出来了,超过1条全部过滤了) select * ...
随机推荐
- 关于actor-critic,这篇文章写的很好
这篇文章: https://blog.csdn.net/qq_30615903/article/details/80774384 可以好好温习,包括代码,基本看懂了.
- UDP套接字——(DGRAM)
/*********************程序相关信息********************* * 程序编号:014 * 程序编写起始日期:2013.11.29 * 程序编写完成日期:2013.1 ...
- IP数字,数字IP
DECLARE @ip VARCHAR(60)='113.118.138.159'DECLARE @ip_int BIGINT=[dbo].[f_IP2Int](@ip) SELECT [IPstar ...
- echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据
1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...
- 转:Eclipse ADT的Custom debug keystore所需证书规格
转:http://blog.k-res.net/archives/1229.html Eclipse ADT的Custom debug keystore所需证书规格 三月 8, 2013 | Po ...
- getActivity nullPointerException
今天突然出现一个问题. Fragment中getActivity突然不能了,会出现空指针问题.最后也不知道是什么原因引起的. 解决的方法: @Override public void onAttach ...
- SPOJ 8222 NSUBSTR(SAM)
这几天看了N多论文研究了下后缀自己主动机.刚開始蛋疼的看着极短的代码和clj的论文硬是看不懂,后来结合其它几篇论文研究了下.总算是明确了一些 推荐文章http://blog.sina.com.cn/s ...
- Citrix服务器虚拟化之二十九 XenApp 6.5发布服务器上的应用程序
Citrix服务器虚拟化之二十九 XenApp 6.5发布服务器上的应用程序 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1) 服务器桌面:发布场中服务 ...
- UNIX网络编程读书笔记:基本UDP套接口编程
概述 使用UDP编写的一些流行的应用程序有:DNS(域名系统).NFS(网络文件系统)和SNMP(简单网络管理协议). 如下图所示,给出了典型的UDP客户/服务器程序的函数调用: 客户不与服务器建立连 ...
- OSG 集群渲染 cluster render 支持 Cave 和 powerwall 模式
写了几天.用OSG,实现了集群渲染,感觉还不错,线性加速比还算能够.採用KDTree .八叉树管理场景.场景数据通过UDP和TCP. 不用复制文件,直接在线读取(主节点向渲染节点同步模型数据).效率基 ...