aisell(2) springmvc+easyui+mvc层的抽取

文章目录

• 后台支持(dao与service)
• 抽取Dao层
• 创建BaseRepsitory
• EmployeeRepsitory
• 抽取Service层
• IBaseService:父接口
• BaseServiceImpl:父实现
• IEmployeeService
• EmployeeServiceImpl
• SpringMVC的集成
• 准备applicationContext-mvc.xml
• 准备web.xml
• UIPage
• 准备Controller
• EasyUI的集成
• 准备head.jsp
• employee的jsp代码
• employee.js

后台支持(dao与service)

抽取Dao层

创建BaseRepsitory

/**
 * 该类和EmployeeRepository写在同一个类中，加上这个注解@NoRepositoryBean避免扫描包时将该接口实例化
 * @author myllxy
 * @create 2019-12-10 10:06
 */
@NoRepositoryBean
public interface BaseRepository<T, ID extends Serializable> extends JpaRepository<T, ID>, JpaSpecificationExecutor<T> {
}

EmployeeRepsitory

注意加上泛型

/**
 * 第一个泛型:代表类型
 * 第二个泛型:主键类型
 */
public interface EmployeeRepository extends BaseRepository<Employee,Long> {
    
}

抽取Service层

IBaseService:父接口

public interface IBaseService<T, ID extends Serializable> {
}

BaseServiceImpl:父实现

/**
 * 我们不用这个类，而是用它的子类去调方法，这个类只是作为一个一些公共方法的基类
 *
 * @author myllxy
 * @create 2019-12-10 11:00
 */
@Transactional(readOnly = true, propagation = Propagation.SUPPORTS)
public class BaseServiceImpl<T, ID extends Serializable> implements IBaseService<T, ID> {
}

IEmployeeService

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

EmployeeServiceImpl

/**
 * @author myllxy
 * @create 2019-12-10 11:04
 */
@Service
public class EmployeeServiceImpl extends BaseServiceImpl<Employee, Long> implements IEmployeeService {
}

SpringMVC的集成

准备applicationContext-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       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">
    <!--1.扫描相应的web层-->
    <context:component-scan base-package="cn.itsource.aisell.controller"/>
    <!--2.静态资源放行-->
    <mvc:default-servlet-handler/>
    <!--3.mvc的注解支持-->
    <mvc:annotation-driven/>
    <!--4.视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    <!--5.上传解析器 CommonsMultipartResolver-->
    <!-- 注意:上传解析器的id必需:multipartResolver -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760"/>
    </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">

  <!--SpringMVC的配置和Spring的配置要单独读取，否则后面集成其它框架会出问题-->

  <!--运行与读取spring的配置-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>

  <!--配置mvc的核心控制器-->
  <servlet>
    <servlet-name>dispatchServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--读取mvc配置-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext-mvc.xml</param-value>
    </init-param>
    <!--tomcat启动用创建-->
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatchServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!--编码过滤-->
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

UIPage

这个类主要是用来做前端参数和后端方法的兼容，当前端需要后端相应给他一个规定格式的json时：

所以我们需要修改后端让其返回key值与其匹配

准备Controller

@Controller
@RequestMapping("/employee")
public class EmployeeController extends BaseController {
    @Autowired
    private IEmployeeService employeeService;
    @RequestMapping("/index")
    public String index() {return "employee/index";}
    。。。
}

EasyUI的集成

准备head.jsp

1. 我们把所有公共的引入(css,js) 都放在head.jsp中
2. 以后要使用easyui直接引入即可
3. 同时还可以抽取baseurl公共上下文路径

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%--easyui的样式--%>
<c:set var="baseurl" value="${pageContext.request.contextPath}"/>
<link rel="stylesheet" type="text/css" href="${baseurl}/easyui/themes/default/easyui.css">
<%--easyui的图标 --%>
<link rel="stylesheet" type="text/css" href="${baseurl}/easyui/themes/icon.css">
<%--jQuery的支持--%>
<script type="text/javascript" src="${baseurl}/easyui/jquery.min.js"></script>
<%--jQuery的扩展包 --%>
<script type="text/javascript" src="${baseurl}/easyui/plugin/jquery.jdirk.js"></script>
<%--easyui的核心功能--%>
<script type="text/javascript" src="${baseurl}/easyui/jquery.easyui.min.js"></script>
<%--国际化--%>
<script type="text/javascript" src="${baseurl}/easyui/locale/easyui-lang-zh_CN.js"></script>

employee的jsp代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/10
  Time: 11:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Title</title>
    <%--引入头部文件--%>
    <%@include file="/WEB-INF/views/head.jsp"%>
    <%--引入当前模块对应的js--%>
    <script src="${pageContext.request.contextPath}/js/model/employee.js"></script>
</head>
<body>
<div id="toolbar" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="#" data-method="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="#" data-method="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <form id="searchForm" method="post">
        用户名: <input name="username" class="easyui-textbox" style="width:80px">
        邮件: <input name="email" class="easyui-textbox" style="width:80px">
        <a href="#"  data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查询</a>
    </form>
</div>
<table id="datagrid" class="easyui-datagrid"
       data-options="url:'/employee/page',fitColumns:true,singleSelect:true,fit:true,pagination:true,toolbar:'#toolbar'">
    <thead>
    <tr>
        <th data-options="field:'id',width:100">编码</th>
        <th data-options="field:'username',width:100">名称</th>
        <th data-options="field:'age',width:100">年龄</th>
        <th data-options="field:'password',width:100">密码</th>
        <th data-options="field:'email',width:100">邮件</th>
    </tr>
    </thead>
</table>
</body>
</html>

employee.js

$(function () {
    //常用的元素都先在这里获取到
    var datagrid = $("#datagrid");
    var searchForm = $("#searchForm")
    //事件
    $("*[data-method]").on("click",function () {
        //1.拿到当前对应的方法名
        var methodName = $(this).data("method");
        //2.调用方法
        itsource[methodName]();
    })
    itsource ={
        add(){
            alert("add");
        },
        update(){alert("update");},
        delete(){
            //1.获取选中的行
            var row = datagrid.datagrid("getSelected");
            //2.如果这一行不存在(给出提示，后台代码不再执行)
            if(!row){
                $.messager.alert('提示','请选中一行再来删除，好嘛！',"warning");
                return;
            }
            //3.让用户确定是否删除
            $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
                if (r){
                   //4.通过Ajax请求进行删除
                    // 参数一:请求路径   参数二:请求参数   参数三:回调
                    // result:是后端返回的结果
                    $.get("/employee/delete",{id:row.id},function (result) {
                        if(result.success){
                            //5.刷新页面
                            datagrid.datagrid("reload");
                        }else{
                            //给出错误提示
                            $.messager.alert('提示',`删除失败，原因是:${result.msg}`,"error");
                        }
                    })
                }
            });
        },
        //高级查询功能
        search(){
            //1.拿到查询的值
            var params = searchForm.serializeObject();
            //2.进行查询
            datagrid.datagrid("load",params);
        }
    };
})

代码地址

来源：CSDN

作者：myllxy

链接：https://blog.csdn.net/qq_39327985/article/details/103477314