您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“怎么实现web与后台的联动”，在日常操作中，相信很多人在怎么实现web与后台的联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么实现web与后台的联动”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一.项目结构:
1.common:工具类
2.domain:主体类
3.repository:持久化类/接口
4.query:查询类
5.service:服务层
6.web:前端
①controller:控制层
二.今日目标
1.完成SpringDataJpa的扩展抽取,然后就可以直接使用了
2.完成流程搭建,并运行成功
①后台代码搭建
②前台主页连通
③完善类与展示页面
④加入高级查询
⑤功能扩展
三.代码完成
[toc]
# 一.SpringDataJpa扩展
> 对SpringDataJpa的原来功能进行了相应的增加(代码是拷备)## 1.BaseRepository 接口
> @NoRepositoryBean:让SpringdataJpa不要自动为它生成子类
@NoRepositoryBean
public interface BaseRepository<T, ID extends Serializable> extends JpaRepository<T,ID>, JpaSpecificationExecutor<T> {
//根据Query拿到分页对象(分页)
Page findPageByQuery(BaseQuery baseQuery);
//根据Query拿到对应的所有数据(不分页)
List<T> findByQuery(BaseQuery baseQuery);
//根据jpql与对应的参数拿到数据
List findByJpql(String jpql,Object... values);
}
## 2.BaseRepositoryImpl 实现 BaseRepository
public class BaseRepositoryImpl<T,ID extends Serializable> extends SimpleJpaRepository<T,ID> implements BaseRepository<T,ID> {
private final EntityManager entityManager;
//必需要实现父类的这个构造器
public BaseRepositoryImpl(Class<T> domainClass, EntityManager em) {
super(domainClass, em);
this.entityManager = em;
}
@Override
public Page findPageByQuery(BaseQuery baseQuery) {
//第一步：拿到所有高级查询条件
Specification spec = baseQuery.createSpec();
//第二步:拿到排序的值
Sort sort = baseQuery.createSort();
//第三步:根据条件查询分页数据并且返回
Pageable pageable = new PageRequest(baseQuery.getJpaPage(), baseQuery.getPageSize(),sort);
Page<T> page = super.findAll(spec, pageable);
return page;
}
@Override
public List<T> findByQuery(BaseQuery baseQuery) {
//第一步：拿到所有高级查询条件
Specification spec = baseQuery.createSpec();
//第二步:拿到排序的值
Sort sort = baseQuery.createSort();
//第三步:拿到数据返回
return findAll(spec, sort);
}
@Override
public List findByJpql(String jpql, Object... values) {
//第一步:创建Query对象
Query query = entityManager.createQuery(jpql);
//第二步:把值设置到Query对象中去
if (values!=null) {
for (int i = 0; i < values.length; i++) {
query.setParameter(i + 1, values[i]);
}
}
//第三步：返回数据
return query.getResultList();
}
}## 3.让SpringDataJpa使用我们自己的实现
> 原来默认使用SimpleJpaRepository来实现，把它修改成BaseRepositoryImpl### 3.1 BaseRepositoryFactoryBean
/**
* 如果要扩展SpringDataJpa必需写它
*/
public class BaseRepositoryFactoryBean<T extends Repository<S, ID>, S, ID extends Serializable> extends JpaRepositoryFactoryBean<T,S,ID> {
@Override
protected RepositoryFactorySupport createRepositoryFactory(EntityManager entityManager) {
return new MyRepositoryFactory<T,ID>(entityManager); //注：这里创建是我们的自定义类
}
//继承JpaRepositoryFactory后，把返回的对象修改成我们自己的实现
private static class MyRepositoryFactory<T,ID extends Serializable> extends JpaRepositoryFactory {
private final EntityManager entityManager;
/**
* Creates a new {@link JpaRepositoryFactory}.
*
* @param entityManager must not be {@literal null}
*/
public MyRepositoryFactory(EntityManager entityManager) {
super(entityManager);
this.entityManager = entityManager;
}
//这里返回最后的功能对象
@Override
protected Object getTargetRepository(RepositoryInformation information) {
return new BaseRepositoryImpl<T,ID>((Class<T>)information.getDomainType(),entityManager);
}
//确定功能对象的类型
@Override
protected Class<?> getRepositoryBaseClass(RepositoryMetadata metadata) {
return BaseRepositoryImpl.class;
}
}
}
### 3.2 applicationContext.xml配置
> 关键就是factory-class配置
<!-- 集成SpringDataJpa (这层单独扫描)--> <jpa:repositories base-package="cn.itsource.aisell.repository" entity-manager-factory-ref="entityManagerFactory" transaction-manager-ref="transactionManager" factory-class="cn.itsource.aisell.repository.BaseRepositoryFactoryBean" ></jpa:repositories>
### 3.3使用的时候继承BaseRepository
public interface EmployeeRepository extends BaseRepository<Employee,Long>{...}# 二.Service层的调用
BaseServiceImpl 实现 IBaseService
IEmployeeService 继承 IBaseService
> 注意点泛型注入
@Autowired private BaseRepository<T,ID> baseRepository;
# 三.集成SpringMVC与EasyUI
## 3.1 noSession问题
> 我们在关闭了EntityManager之前,依然在使用它操作数据库(懒加载时出现)
>> 解决方案:web.xml中添加OpenEntityManagerInViewFilter
<!-- 解决no-session的问题 -->
<filter> <filter-name>openEntityManager</filter-name> <filter-class>org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter</filter-class> </filter> <filter-mapping> <filter-name>openEntityManager</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
## 3.2 no serializer问题
> 原因:jpa的懒加载对象自己为加一些属性("hibernateLazyInitializer","handler","fieldHandler") 会影响到SpringMVC返回Json(因为返回时有个内省机制)
### 解决方案一:加注解
`@JsonIgnoreProperties(value={"hibernateLazyInitializer","handler","fieldHandler"})`
### 解决方案二:一劳永逸- 重写：ObjectMapper
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
//重写了原生的映射关系
public class CustomMapper extends ObjectMapper {
public CustomMapper() {
this.setSerializationInclusion(JsonInclude.Include.NON_NULL);
// 设置 SerializationFeature.FAIL_ON_EMPTY_BEANS 为 false
this.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
}
}- 在applicationContext-mvc.xml 配置这个映射
<!-- Spring MVC 配置 -->
<mvc:annotation-driven> <mvc:message-converters> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>application/json; charset=UTF-8</value> <value>application/x-www-form-urlencoded; charset=UTF-8</value> </list> </property> <!-- No serializer:配置 objectMapper 为我们自定义扩展后的 CustomMapper,解决了返回对象有关系对象的报错问题 --> <property name="objectMapper"> <bean class="cn.itsource.aisell.common.CustomMapper"></bean> </property> </bean> </mvc:message-converters> </mvc:annotation-driven>
## 3.3 分页获取数据
> 后台返回的是Page对象{content:..,totalElements:..}
>> 前台要拿代码是{rows:..,total:...}
>>> 它们的结果对应不上- 搞了一个UIPage
public class UIPage <T>{
private List<T> rows;
private Long total;
public UIPage(Page page) {
this.rows = page.getContent();
this.total = page.getTotalElements();
}
//省略getter与setter
}
- 返回的时候代码如下：
@RequestMapping("/page")
@ResponseBody
public UIPage page(EmployeeQuery query){
return new UIPage(employeeService.findPageByQuery(query));
}## 3.4 分页传数据
> 传的是page与rows,但是我们之前的query名称没对应上
- BaseQuery加上兼容
//为了兼容前台的easyui而准备的,添加额外的setter
public void setPage(int page) {
this.currentPage = page;
}
public void setRows(int rows) {
this.pageSize = rows;
}## 3.5 高级查询
- 高级查询的时候获取对应的表单值
### 引入[jquery.jdirk.js]
> 它对jQuery的功能进行扩展
`<script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script>`
### 获取表单的功能
search(){
//直接获取到表单中的所有值
var params = $("#searchForm").serializeObject();
//进行相应的查询
$("#employeeGrid").datagrid("load",params);
}## 3.6 扩展部分
一.排序功能
BaseQuery后台支持
/**
* 公共的条件与规范
*/
public abstract class BaseQuery {
...
//兼容Easyui的排序
public void setSort(String sort) {
this.orderByName = sort;
}
public void setOrder(String order) {
this.orderByType = order;
}
}2.employee.js支持 : 在需要支持的字段添加sortable="true"属性
<th width="20" field="headImage" data-options="formatter:formatImage">头像</th> <th width="20" field="username" sortable="true">用户名</th> <th width="20" field="password">密码</th> <th width="20" field="email">邮件</th> <th width="20" field="age" align="right" sortable="true">年龄</th> <th width="20" field="department" align="center" data-options="formatter:formatDept" sortable="true">部门</th>
3.隐藏字段
可以找到http://www.easyui-extlib.com/ -> grid部分找到这个效果
并获取需要的支持和源码;
需要的部分:
<!-- datagrid-隐藏列的支持 --> <link href="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.css" rel="stylesheet" /> <script src="/easyui/plugin/menu/jeasyui.extensions.menu.js"></script> <script src="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script> <script src="/easyui/plugin/datagrid/jeasyui.extensions.datagrid.columnToggle.js"></script>
在table标签中添加 enableHeaderClickMenu="true"属性即可
<table id="employeeGrid" class="easyui-datagrid" data-options="fit:true,fixed:true,fitColumns:true,toolbar:'#tb',singleSelect:true" url="/employee/page" iconCls="icon-save" enableHeaderClickMenu="true" rownumbers="true" pagination="true">
到此，关于“怎么实现web与后台的联动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。