Decoration2:引入Angularjs显示前台一条数据
2017-04-08 16:25
225 查看
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资料查一下这个转换怎么写,还特意安装了蓝灯FQ ,真是够了,看起来不是那么简单。
这里要记录一个点: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即可,所以引用的路径如下:
bootstrap.min.js依赖jquery,所以jquery也要加进来
(4)首页一加载的时候,就要查询用户信息,如何做呢?通过angularjs的Controller,这时候就要把angularjs引入到工程中来了
首先在pom.xml中引入angular、restangular、lodash的webjar,并且在index.html引入:
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)先是尝试了修改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资料查一下这个转换怎么写,还特意安装了蓝灯FQ ,真是够了,看起来不是那么简单。
这里要记录一个点: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);
相关文章推荐
- 对于分页时,若数据库的数据不断更新,不让前台显示脏数据(同一条数据重复显示)的处理方式
- ext grid 前台grid加载数据碰到数据重复只显示一条
- Extjs中Grid分页汇总全部数据的合计----通过服务器端汇总发到前台显示
- 查询数据(后台到前台传递数据,显示数据)
- AngularJs从数据库获取数据并显示
- springmvc传递json数据到前台显示
- 前台jquery+ajax向后台请求数据,后台返回json,前台显示
- 关于oracle中将一张表中的多条数据的某列查询出来合并为一条数据显示
- 短信列表如何让同一个号码的短信只显示一条,刚刚加载短信列表会加载所有的数据列。求指教
- RecyclerView 多条数据却只显示一条数据
- ListView自动显示最后一条数据
- <img src 引入base64格式数据 显示图片 >
- ScrollView中的ListView只显示一条数据的解决方法
- SQL Server相同列只显示一条数据,不影响其他行数据
- listView返回多条数据但手机上显示就只有一条?
- SQl不重复的所有数据(重复的只显示一条)
- 将后台数据显示到前台页面的方法springmvc+hibernate+spring
- 【实例下载】javascript代码在html显示xml数据上一条记录和下一条记录
- db2 查询重复数据只显示一条
- easyUI 后台存的数据,前台显示文字 或者是前台是下拉框,选择是汉字的情况