8-3智能商貿day2前端

1.課程介紹

1.準備Service層

2.內建SpringMVC(Controller層)

3.添加EasyUI展示首頁面

4.完成一個資料的查詢功能

5.完成删除功能

6.增加資料

7.修改資料

8.資料驗證功能

springdatajpa的擴充–抽取

抽取一個BaseRepository – 寫三個方法

@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);


}

           

然後實作BaseRepositoryImpl

public class BaseRepositoryImpl<T,ID extends Serializable> extends SimpleJpaRepository<T,ID>
        implements BaseRepository<T,ID>  {
    //讓spring把entityManager給我注入過來 --factoryBean
    private final EntityManager entityManager;

    //必需要實作父類的這個構造器
    public BaseRepositoryImpl(Class<T> domainClass, EntityManager em) {
        super(domainClass, em);
        this.entityManager = em;
    }

    //分頁查詢的方法
    @Override
    public Page  findPageByQuery(BaseQuery baseQuery) {
        //得到Sort
        Sort sort = baseQuery.createSort();
        //條件
        Specification spec = baseQuery.createSpecification();
        //分頁
        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) {
        Sort sort = baseQuery.createSort();
        Specification specs = baseQuery.createSpecification();
        //條件和排序
        List<T> list = super.findAll(specs,sort);
        return list;
    }

    //select o from Employee o where o.username=? and o.email=?
    //xxx [email protected] 2
    @Override
    public List findByJpql(String jpql, Object... values) {
        //得到query對象
        Query query = entityManager.createQuery(jpql);
        //設值
        for (int i = 0; i < values.length; i++) {
            query.setParameter(i+1,values[i] );
        }

        return query.getResultList();
    }

           

然後管理起來自己用

二,建立web前端結構

完成Service層

建立IBaseService

public interface IBaseService<T,ID extends Serializable> {
    //新增和修改
    void save(T t);

    //删除 --Long
    void delete(ID id);

    //查詢
    T findOne(ID id);

    //查詢所有
    List<T> findAll();

    //根據Query拿到分頁對象(分頁)
    Page findPageByQuery(BaseQuery baseQuery);

    //根據Query拿到對應的所有資料(不分頁)
    List<T> findByQuery(BaseQuery baseQuery);

    //根據jpql與對應的參數拿到資料
    List findByJpql(String jpql,Object... values);
}
           

建立BaseServiceImpl

@Transactional(propagation = Propagation.SUPPORTS,readOnly = true)
public class BaseServiceImpl<T,ID extends Serializable> implements IBaseService<T,ID> {

    //spring 4之後 支援泛型的注解
    @Autowired
    private BaseRepository<T,ID> baseRepository;

    @Override
    @Transactional
    public void save(T t) {
        baseRepository.save(t);
    }

    @Override
    @Transactional
    public void delete(ID id) {
        baseRepository.delete(id);
    }

    @Override
    public T findOne(ID id) {
        return baseRepository.findOne(id);
    }

    @Override
    public List<T> findAll() {
        return baseRepository.findAll();
    }

    @Override
    public Page findPageByQuery(BaseQuery baseQuery) {
        return baseRepository.findPageByQuery(baseQuery);
    }

    @Override
    public List<T> findByQuery(BaseQuery baseQuery) {
        return baseRepository.findByQuery(baseQuery);
    }

    @Override
    public List findByJpql(String jpql, Object... values) {
        return baseRepository.findByJpql(jpql,values);
    }
}
           

建立IEmployeeService

public interface IEmployeeService extends IBaseService<Employee,Long> {
}
           

建立EmployeeServiceImpl

@Service
public class EmployeeServiceImpl extends BaseServiceImpl<Employee,Long>
        implements IEmployeeService {
}

           

配置applicationContext-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="
         http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans.xsd
         http://www.springframework.org/schema/context
         http://www.springframework.org/schema/context/spring-context.xsd
         http://www.springframework.org/schema/mvc
         http://www.springframework.org/schema/mvc/spring-mvc.xsd
    ">
    <!-- 對靜态資源進行放行 -->
    <mvc:default-servlet-handler />
    <!-- 掃描controller部分的包 -->
    <!-- @Component元件, @Repository持久層, @Service業務邏輯層, and @Controller控制器 -->
    <context:component-scan base-package="cn.itsource.aisell.web.controller" />
    <!-- 添加mvc對@RequestMapping等注解的支援 -->
    <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:配置 setObjectMapper(new CustomMapper)objectMapper 為我們自定義擴充後的 CustomMapper,解決了傳回對象有關系對象的報錯問題 -->
                <property name="objectMapper">
                    <bean class="cn.itsource.aisell.common.CustomMapper"></bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

    <!-- ViewResolver 視圖解析器 (struts2視圖類型類似) -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 設定視圖路徑的前字尾，該配置可以讓我們寫視圖路徑的時候更簡單。 -->
        <!-- 希望跳轉jsp是[/WEB-INF/views/字首][xxx變量][.jsp字尾] -->
        <!-- * @see #setPrefix -->
        <property name="prefix" value="/WEB-INF/views/" />
        <!-- * @see #setSuffix -->
        <property name="suffix" value=".jsp" />
    </bean>

    <!-- 錯誤：提示告訴開發者你沒有配置檔案上傳解析器。 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 設定上傳檔案的最大尺寸為1MB -->
        <property name="maxUploadSize">
            <value>1048576</value>
        </property>
    </bean>
</beans>
           

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         id="WebApp_ID" version="3.1">


</web-app>
           

完成Controller層

@Controller
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private IEmployeeService employeeService;

    @RequestMapping("/index")
    public String index() {
        //根據配置，這裡會跳到/WEB-INF/views/employee/employee.jsp頁面
        return "employee/employee";
    }
    @RequestMapping("/list")
    @ResponseBody
    public List<Employee> list(){
        return employeeService.findAll();
    }

}
           

三,完成員工頁面前端展示和分頁

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/views/head.jsp"%>

<html>
<head>
    <title>Title</title>
    <script  type="text/javascript" src="/js/model/employee.js"></script>
</head>
<body>
    <!--
     datagrid  fit 填充父容器
     rownumbers 行号
     pagination  分頁

    -->
    <table id="employeeGrid" class="easyui-datagrid" data-options="fit:false,fixed:true,
            fitColumns:true,toolbar:'#tb',singleSelect:true";
           url="/employee/page"
           iconCls="icon-save"
           rownumbers="true" pagination="true">
        <thead>
        <tr>
            <th width="20"  field="headImage" align="right" formatter="formatImage">頭像</th>
            <th width="20"  field="username" >使用者名</th>
            <th width="20"  field="password">密碼</th>
            <th width="20"  field="email">郵件</th>
            <th width="20"  field="age" align="right">年齡</th>
            <th width="20"  field="department" align="right" formatter="formatObj">部門名稱</th>
        </tr>
        </thead>
    </table>

    <div id="tb" style="padding:5px;height:auto">
        <!-- 這部分是加上增删改的按鍵:現在沒有功能，我們先不管它 -->
        <div style="margin-bottom:5px">
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        </div>
        <!-- 這部門是查詢的功能  -->
        <div>
            <form id="searchForm" action="/employee/download" method="post">
                使用者名： <input name="username" class="easyui-textbox" style="width:80px;height:32px">
                郵件: <input name="email" class="easyui-textbox" style="width:80px;height:32px">
                部門 :
                <input  class="easyui-combobox" name="departmentId"
                        data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/departmentList'">
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查找</a>
            </form>
        </div>
    </div>
</body>
</html>
           

解決懶加載問題

<filter>
    <filter-name>openEntity</filter-name>
    <filter-class>org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>openEntity</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
           

public class CustomMapper extends ObjectMapper {
    public CustomMapper() {
        this.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        // 設定 SerializationFeature.FAIL_ON_EMPTY_BEANS 為 false 對null的bean 不做序列化
        this.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
    }
}
           

加入進階查詢條件

UtilController

@Controller
@RequestMapping("/util")
public class UtilController {
    //注入部門資訊
    @Autowired
    private IDepartmentService departmentService;

    //departmentList
    @RequestMapping("/departmentList")
    @ResponseBody
    public List<Department> queryDepartmentList(){
        return departmentService.findAll();
    }
}

           

$(function(){
    //定義form表單
    var searchForm = $("#searchForm");
    var employeeGrid = $("#employeeGrid");

    //綁定事件 easyui 第二天的時候
    $("a[data-method]").on('click',function(){
       //擷取 data-method屬性 <a data-method="seacher">
        var methodName = $(this).data("method");
        //動态調用方法 itsource["seacher"]
        itsource[methodName]();
    })
    //對象
    var itsource = {
        search:function(){
          //怎麼完成進階查詢 jquery.jdirk.js 這個方法 這是jquery擴充方法
            //該方法傳回一個 JSON Object，傳回對象中的每個資料都表示一個表單控件值。
            var param = searchForm.serializeObject();
            //發送查詢資料庫 --加載表格 發送請求 /employee/page
            employeeGrid.datagrid('load',param);
        },
        add:function(){
            alert(1);
        }
    }

           

public class EmployeeQuery extends BaseQuery{

    /**
     * username	admin
     * email	[email protected]
     * departmentId	1
     */
    //自身條件
    private String username;
    private String email;
    private Integer age;

    private Integer departmentId;


    public Integer getDepartmentId() {
        return departmentId;
    }

    public void setDepartmentId(Integer departmentId) {
        this.departmentId = departmentId;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
    //抽取查詢
    @Override
    public Specification createSpecification() {
        Specification<Employee> spe = Specifications.<Employee>and().
                like(StringUtils.isNotBlank(username), "username", "%" + username + "%")
                .like(StringUtils.isNotBlank(email), "email", "%" + email + "%")
                .eq(departmentId!=null,"department.id",departmentId)
                .gt(age != null, "age", age)
                .build();

        return spe;
    }
}