java:前端点击邮箱配置,弹出邮箱配置弹窗,弹窗里面的邮箱输入框可以动态的增加和删除,输入邮箱后,点击保存,并可以回显配置的邮箱,通过easyui+ssm的前后端具体实现代码
时间: 2024-03-16 15:42:47 浏览: 69
以下是一个简单的实现代码,包含前端页面和后端接口:
前端页面代码(使用EasyUI):
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邮箱配置</title>
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/jquery-easyui/1.5.2/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="http://cdn.staticfile.org/jquery-easyui/1.5.2/themes/icon.css">
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery-easyui/1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
//初始化弹窗
$('#dlg').dialog({
title: '邮箱配置',
closed: true,
modal: true,
buttons: [{
text: '保存',
handler: function () {
saveEmails();
}
}, {
text: '取消',
handler: function () {
$('#dlg').dialog('close');
}
}]
});
//点击配置按钮
$('#config-btn').click(function () {
$('#emails').empty(); //清空之前的邮箱输入框
$('#dlg').dialog('open'); //打开弹窗
});
//点击增加邮箱按钮
$('#add-btn').click(function () {
var input = $('<input type="text" class="easyui-validatebox" required="true" name="email"/>');
$('#emails').append(input);
$.parser.parse(input.parent()); //重新解析EasyUI组件
});
//点击删除邮箱按钮
$('#delete-btn').click(function () {
var inputs = $('#emails').find('input');
if (inputs.length > 0) {
inputs.last().remove(); //删除最后一个输入框
}
});
//保存邮箱配置
function saveEmails() {
var emails = [];
$('#emails').find('input').each(function () {
emails.push($(this).val());
});
$.ajax({
url: 'saveEmails',
type: 'POST',
data: {
'emails': emails.join(',')
},
success: function (data) {
if (data.success) {
$('#dlg').dialog('close');
alert('邮箱配置保存成功!');
} else {
alert('邮箱配置保存失败!');
}
}
});
}
});
</script>
</head>
<body>
<div style="margin:20px;">
<a id="config-btn" class="easyui-linkbutton" iconCls="icon-edit">配置邮箱</a>
</div>
<div id="dlg">
<div style="margin:20px;">
<div>
<a id="add-btn" class="easyui-linkbutton" iconCls="icon-add">增加邮箱</a>
<a id="delete-btn" class="easyui-linkbutton" iconCls="icon-remove">删除邮箱</a>
</div>
<div id="emails" style="margin:10px 0;"></div>
</div>
</div>
</body>
</html>
```
后端接口代码(使用SSM框架):
```
@Controller
public class EmailConfigController {
@Autowired
private EmailConfigService emailConfigService;
@RequestMapping(value = "/saveEmails", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> saveEmails(@RequestParam("emails") String emails) {
Map<String, Object> resultMap = new HashMap<>();
try {
emailConfigService.saveEmails(emails.split(","));
resultMap.put("success", true);
} catch (Exception e) {
e.printStackTrace();
resultMap.put("success", false);
}
return resultMap;
}
}
@Service
public class EmailConfigServiceImpl implements EmailConfigService {
@Autowired
private EmailConfigMapper emailConfigMapper;
@Override
public void saveEmails(String[] emails) {
//先清空之前的邮箱配置
emailConfigMapper.deleteAllEmails();
//保存新的邮箱配置
for (String email : emails) {
emailConfigMapper.insertEmail(email);
}
}
}
public interface EmailConfigMapper {
void deleteAllEmails();
void insertEmail(String email);
}
```
其中,EmailConfigController是SpringMVC的控制器,处理前端的请求;EmailConfigService是业务逻辑层;EmailConfigMapper是数据访问层,使用Mybatis框架。具体实现方法可以根据实际情况进行调整。
阅读全文