智能销售系统Day2
服务层的实现
为了以后能够更加方便的增加功能，对service层添加父接口以及父实现类
- 父接口中，为了能够适应其他类的继承，使用了泛型接口继承Serializable，这样就能够在父接口中增加增删改的功能，因为是继承了Serializable，其中的增改两个功能大同小异，只是增加通过id进行判断
- 在父类实现中，将父类实现变为抽象类，这样继承父类实现其中的方法时，就不会担心方法错误，在增加一个Spring的事务
在接口中，根据自己的需要进行添加一些方法，Employee类中一定会有查询员工的方法
Employee findByUsername(String username);
实现查询员工的功能，注入在repository类，使用其中的自定义查询语句
在实现业务方法中调用查询功能
Autowired
private EmployeeRepository employeeRepository;
@Override
public Employee findByUsername(String username) {
Employee employee = employeeRepository.findByUsername(username);
return employee;
}
控制层，与客户端对接
先增加控制层的配置文件
<?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" xmlns:p="http://www.springframework.org/schema/p"
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.扫描-->
<context:component-scan base-package="com.xiafan.object2.web" />
<context:component-scan base-package="com.xiafan.object2.service"/>
<!--2.放行-->
<mvc:default-servlet-handler />
<!--3.注解-->
<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="com.xiafan.object2.common.CustomMapper"></bean>
</property>
</bean>
</mvc:message-converters>
</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>
<context:component-scan base-package="com.xiafan.object2.common"/>
<!--5.上传
上传解析器的id必须是multipartResolver
-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize">
<value>10485760</value>
</property>
</bean>
<context:component-scan base-package="cn.afterturn.easypoi.view" />
<bean class="org.springframework.web.servlet.view.BeanNameViewResolver" p:order="1"></bean>
</beans>
Controller层主要是为了与前端进行数据的相应进行实现我们的功能，在类头上增加@Controller交给Spring进行管理，@RequestMapping访问此类的父路径
这里不再使用注入服务的实现层，而是注入服务的接口，通过子路径找到Controller对应的前端jsp页面
@RequestMapping("/子路径，自己定义")
public String test(){
return "jsp页面路径";
}
实现增删改查的功能，这里将增加与修改功能中的公共方法进行提取出来成为一个公共的方法，增加与修改直接进行调用该方法
//抽取增加与修改的公共方法，使功能分明
public String SaveandUpdate(Employee employee){
try {
service.save(employee);
} catch (Exception e) {
e.printStackTrace();
}
}
@RequestMapping("update")
@ResponseBody//将controller层请求的数据转为json格式呈现给用户
private String update(Employee employee){
return SaveandUpdate(employee);
}
前端jsp页面
引入easyui的框架js
<%--easyui的样式--%>
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<%--easyui的图标样式--%>
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<%--easyui的颜色包--%>
<link rel="stylesheet" type="text/css" href="/easyui/themes/color.css">
<%--jquery的js--%>
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<%--easyui的核心js--%>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<%--引入jquery的扩展包--%>
<script type="text/javascript" src="/easyui/plugin/jquery.jdirk.js"></script>
<%--easyui的国际化--%>
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--引入头部文件，外接的js文件--%>
<%@include file="/WEB-INF/views/head.jsp"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%--引入当前模块对应的js--%>
<script src="/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>
<%--解决没有权限而进行操作的第二种方法，第一种是使用自定义过滤器--%>
<shiro:hasPermission name="employee:delete">
<a href="#" data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</shiro:hasPermission>
</div>
<%--高级查询搜索框--%>
<form id="searchForm" method="post" action="/employee/download">
用户名: <input name="username" class="easyui-textbox" style="width:80px">
邮件: <input name="email" class="easyui-textbox" style="width:80px">
部门: <input class="easyui-combobox" name="departmentId"
data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/department/list'" />
<a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
<button class="easyui-linkbutton" iconCls="icon-print">导出</button>
</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>
<th data-options="field:'department',width:100">部门</th>
</tr>
</thead>
</table>
<%--添加与修改的弹出窗口--%>
<div id="editDialog" class="easyui-dialog easyui-window" title="用户管理"
data-options="iconCls:'icon-save',resizable:true,closeOnEsc:true,modal:true,closed:true,buttons:'#editButtons'">
<form id="editForm" method="post">
<input id="employeeId" type="hidden" name="id" />
<table cellpadding="5">
<tr>
<td>姓名:</td>
<td><input class="easyui-textbox" type="text" name="username" data-options="required:true"></input></td>
</tr>
<%--设置一个标识,如果是修改，都进行隐藏 --%>
<tr shower="false">
<td>密码:</td>
<td><input class="easyui-textbox" name="password" data-options="required:true"></input></td>
</tr>
<tr>
<td>邮件:</td>
<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></input></td>
</tr>
<tr>
<td>部门:</td>
<td><input class="easyui-combobox" name="department.id"
data-options="required:true,valueField:'id',textField:'name',panelHeight:'auto',url:'/department/list'" /></td>
</tr>
</table>
</form>
//外接的按钮
<div id="editButtons">
<a href="#" data-method="save" class="easyui-linkbutton c1">保存</a>
<a href="#" data-method="close" class="easyui-linkbutton c5">关闭</a>
</div>
</div>
</body>
</html>
这里前台的功能会出现显示部门为[Object Object]类型，使用格式化进行解决，在部门这里增加formatter:objFormatter,在自定义的js文件中实现格式化方法function objFormat(v) { return v?v.name:""; }，解决格式问题
js文件
$(function () {
//常用的元素都先在这里获取到
//页数据表格
var dataGrid = $("#dataGrid");
//高级查询表单
var searchForm = $("#searchForm");
//编辑弹出框
var editDialog = $("#editDialog");
//编辑表单
var editForm = $("#editForm");
//拿到公共的data-method，统一管理
$("*[data-method]").on("click",function () {
//1.拿到当前对应的方法名
var methodName = $(this).data("method");
//2.调用方法
itsource[methodName]();
})
itsource ={
//添加按钮执行(弹出)
//添加按钮
add(){
//展示数据
$("*[shower]").show();
//把修改时不需要操作的东西启用
$("*[shower]>td>input").textbox("enable");
//弹出对话框,固定居中
editDialog.dialog("open").dialog("center");
//清空表单中的数据
editForm.form("clear");
},
//修改按钮
update(){
//获取到选中行，如果没有选中，给出提示，后面代码不在执行
//1.获取选中的行
var row = dataGrid.datagrid("getSelected");
//2.如果这一行不存在(给出提示，后台代码不再执行)
if(!row){
$.messager.alert('提示','哎，选都没选，傻啊！',"warning");
return;
}
//把修改时不需要操作的东西隐藏起来
$("*[shower]").hide();
//把修改时不需要操作的东西禁用
$("*[shower]>td>input").textbox("disable");
//弹出对话框,固定居中
editDialog.dialog("open").dialog("center");
//清空表单中的数据
editForm.form("clear");
//完成部门的回显
if(row.department){
row["department.id"] = row.department.id;
}
//进行数据回显
editForm.form("load",row);
},
//保存数据
save(){
//1.准备相应的路径
var url = "/employee/save";
//2.获取隐藏域的id(如果id有值,就修改路径)
var employeeId = $("#employeeId").val();
if(employeeId){
url = "/employee/update?_cmd=update";
}
editForm.form('submit', {
//路径
url:url,
//提交前执行的代码
onSubmit: function(){
// do some check
// return false to prevent submit;
return $(this).form('validate');
},
//成功后的处理
//后台会返回一个结果:{success:true/false,msg:xxx}
// Easyui这里没有直接帮你把json字符串转成json对象
success:function(data){
// {"success":true,"msg":null}
var result = JSON.parse(data);
//如果成功,刷新数据
if(result.success){
//5.刷新页面
dataGrid.datagrid("reload");
}else{
//给出错误提示
$.messager.alert('提示',`操作失败，原因是:${result.msg}`,"error");
}
itsource.close();
}
});
},
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");
}
})
}
});
},
//窗口关闭方法
close(){
editDialog.dialog("close");
}
};
})
其他的页面直接进行拷贝，修改对应的字段，将Employee与employee替换为对应的类名
来源：CSDN
作者：weixin_44353972
链接：https://blog.csdn.net/weixin_44353972/article/details/103702515