导航：首页 > 互联网科技 >

怎么实现web与后台的联动

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，这篇文章主要介绍"怎么实现web与后台的联动"，在日常操作中，相信很多人在怎么实现web与后台的联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"怎么实现web与后台的

千家信息网最后更新 2026年11月03日怎么实现web与后台的联动

这篇文章主要介绍"怎么实现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不要自动为它生成子类

@NoRepositoryBeanpublic interface BaseRepository extends JpaRepository, JpaSpecificationExecutor {    //根据Query拿到分页对象(分页)    Page findPageByQuery(BaseQuery baseQuery);    //根据Query拿到对应的所有数据(不分页)    List findByQuery(BaseQuery baseQuery);    //根据jpql与对应的参数拿到数据    List findByJpql(String jpql,Object... values);}

## 2.BaseRepositoryImpl 实现 BaseRepository

public class BaseRepositoryImpl extends SimpleJpaRepository implements BaseRepository {    private final EntityManager entityManager;    //必需要实现父类的这个构造器    public BaseRepositoryImpl(Class 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 page = super.findAll(spec, pageable);        return page;    }    @Override    public List 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, S, ID extends Serializable> extends JpaRepositoryFactoryBean {    @Override    protected RepositoryFactorySupport createRepositoryFactory(EntityManager entityManager) {        return new MyRepositoryFactory(entityManager); //注：这里创建是我们的自定义类    }    //继承JpaRepositoryFactory后，把返回的对象修改成我们自己的实现    private static  class MyRepositoryFactory   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((Class)information.getDomainType(),entityManager);        }        //确定功能对象的类型        @Override        protected Class getRepositoryBaseClass(RepositoryMetadata metadata) {            return BaseRepositoryImpl.class;        }    }}

### 3.2 applicationContext.xml配置
> 关键就是factory-class配置

### 3.3使用的时候继承BaseRepository

public interface EmployeeRepository extends BaseRepository{...}

# 二.Service层的调用

BaseServiceImpl 实现 IBaseService
IEmployeeService 继承 IBaseService

> 注意点泛型注入

@Autowiredprivate BaseRepository baseRepository;

# 三.集成SpringMVC与EasyUI

## 3.1 noSession问题
> 我们在关闭了EntityManager之前,依然在使用它操作数据库(懒加载时出现)
>> 解决方案:web.xml中添加OpenEntityManagerInViewFilter

      openEntityManager    org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter        openEntityManager    /*

## 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 配置这个映射

                                                            application/json; charset=UTF-8                    application/x-www-form-urlencoded; charset=UTF-8

## 3.3 分页获取数据
> 后台返回的是Page对象{content:..,totalElements:..}
>> 前台要拿代码是{rows:..,total:...}
>>> 它们的结果对应不上- 搞了一个UIPage

public class UIPage {    private List rows;    private Long total;    public UIPage(Page page) {        this.rows = page.getContent();        this.total = page.getTotalElements();    }   //省略getter与setter}

- 返回的时候代码如下：

@RequestMapping("/page")@ResponseBodypublic 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的功能进行扩展
``

### 获取表单的功能

 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"属性