一、在后端prjuser工程实现个人中心里管理联系人功能(后台代码)
(1)在prjuser工程的mapper包里接口类ItripUserLinkUserMapper里添加联系人相关方法：
/**
* 查找所有联系人
* */
public List<ItripUserLinkUser> findPageAll(Map<String,Object> map);
/**
* 获取总记录数
* */
public int findMaxRow();
将上述联系人方法在resource目录下ItripUserLinkUserMapper.xml进行具体实现：
<!-- 分页 -->
<select id="findPageAll" resultMap="BaseResultMap" parameterType="java.util.Map" >
select
<include refid="Base_Column_List" />
from itrip_user_link_user
where 1=1 order by id limit ${(page-1)*rows},${rows}
</select>
<!-- 获取总记录数 -->
<select id="findMaxRow" resultType="int">
select count(*) from itrip_user_link_user
</select>
(2)编写联系人方法的业务类，在biz包下新建接口类ItripUserLinkUserBiz
public interface ItripUserLinkUserBiz {
public boolean save(ItripUserLinkUser linkUser);
public boolean update(ItripUserLinkUser linkUser);
public boolean delById(Long id);
public ItripUserLinkUser findById(Long id);
/**
* 查找所有联系人
* */
public List<ItripUserLinkUser> findPageAll(int page,int rows);
/**
* 获取总记录数
* */
public int findMaxPage(int rows);
}
编写联系人业务的实现类ItripUserLinkUserBizImp
@Service
@Transactional
public class ItripUserLinkUserBizImp implements ItripUserLinkUserBiz {
@Autowired
private ItripUserLinkUserMapper userLinkUserMapper;
public ItripUserLinkUserMapper getUserLinkUserMapper() {
return userLinkUserMapper;
}
public void setUserLinkUserMapper(ItripUserLinkUserMapper userLinkUserMapper) {
this.userLinkUserMapper = userLinkUserMapper;
}
@Override
public boolean save(ItripUserLinkUser linkUser) {
int row=userLinkUserMapper.insert(linkUser);
if(row>0){ //受影响行数>0
return true;
}
return false;
}
@Override
public boolean update(ItripUserLinkUser linkUser) {
int row=userLinkUserMapper.updateByPrimaryKey(linkUser);
if(row>0){
return true;
}
return false;
}
@Override
public boolean delById(Long id) {
int row=userLinkUserMapper.deleteByPrimaryKey(id);
if(row>0){
return true;
}
return false;
}
@Override
public ItripUserLinkUser findById(Long id) {
return userLinkUserMapper.selectByPrimaryKey(id);
}
@Override
public List<ItripUserLinkUser> findPageAll(int page,int rows) { //当前页数和每页记录数
if(page<1)page=1;
if(rows<1)rows=5;
Map<String,Object> map=new HashMap<>();
map.put("page",page);
map.put("rows",rows);
return userLinkUserMapper.findPageAll(map);
}
/***
* 获取总页数
* */
@Override
public int findMaxPage(int rows) {
int maxrow=0;
int maxpage=1;
maxrow=userLinkUserMapper.findMaxRow();
if(maxrow>0){
maxpage=maxrow%rows==0?maxrow/rows:maxrow/rows+1;
}
return maxpage;
}
}
(3)编写联系人方法的控制器类接口ItripUserLinkUserAction(传递Web信息)
public interface ItripUserLinkUserAction {
public String save(HttpServletRequest request,HttpServletResponse response, ItripUserLinkUser linkUser);
public String update(HttpServletRequest request,HttpServletResponse response, ItripUserLinkUser linkUser);
public String delById(HttpServletRequest request,HttpServletResponse response, Long id);
public String findById(HttpServletRequest request,HttpServletResponse response, Long id);
public String findPageAll(HttpServletRequest request,HttpServletResponse response, Integer page,Integer rows);
}
在imp包编写控制器接口的实现类ItripUserLinkUserImpAction：
@CrossOrigin(allowCredentials = "true", maxAge = 3600) //跨域请求注解
@RestController
public class ItripUserLinkUserImpAction implements ItripUserLinkUserAction {
@Autowired
private ItripUserLinkUserBiz userLinkUserBiz;
public ItripUserLinkUserBiz getUserLinkUserBiz() {
return userLinkUserBiz;
}
public void setUserLinkUserBiz(ItripUserLinkUserBiz userLinkUserBiz) {
this.userLinkUserBiz = userLinkUserBiz;
}
@Override
@RequestMapping(value = "save_LinkUser.do")
public String save(HttpServletRequest request, HttpServletResponse response, ItripUserLinkUser linkUser) {
boolean flag=userLinkUserBiz.save(linkUser);
if(flag){
return ""+1;
}
return ""+0;
}
@Override
@RequestMapping(value = "update_LinkUser.do")
public String update(HttpServletRequest request, HttpServletResponse response, ItripUserLinkUser linkUser) {
boolean flag=userLinkUserBiz.update(linkUser);
if(flag){
return ""+1;
}
return ""+0;
}
@Override
@RequestMapping(value = "delById_LinkUser.do")
public String delById(HttpServletRequest request, HttpServletResponse response, Long id) {
boolean flag=userLinkUserBiz.delById(id);
if(flag){
return ""+1;
}
return ""+0;
}
@Override
@RequestMapping(value = "findById_LinkUser.do")
public String findById(HttpServletRequest request, HttpServletResponse response, Long id) {
ItripUserLinkUser oldlinkUser=userLinkUserBiz.findById(id);
if(oldlinkUser!=null){
String jsonstr=JSONObject.toJSONString(oldlinkUser);
System.out.println("js-->"+jsonstr);
return jsonstr;
}
return null;
}
@Override
@RequestMapping(value = "findPageAll_LinkUser.do")
public String findPageAll(HttpServletRequest request, HttpServletResponse response, Integer page, Integer rows) {
page=page==null||page<1?1:page;
rows=rows==null||rows<1?5:rows;
if(rows>20)rows=20;//限制每页显示的记录数不能超过20条
//获取总页数
int maxpage=userLinkUserBiz.findMaxPage(rows);
if(page>maxpage)page=maxpage;
//获取每页记录的集合
List<ItripUserLinkUser> linkUserList=userLinkUserBiz.findPageAll(page, rows);
Map<String,Object> map=new HashMap<>();
map.put("page", page);
map.put("rows", rows);
map.put("maxpage", maxpage);
map.put("linkUserList", linkUserList);
String jsonstr=JSONObject.toJSONString(map);
System.out.println("js-->"+jsonstr);
return jsonstr;
}
}
二、在前端prjview工程实现个人中心里管理联系人功能(前端代码)
(1)在prjview工程里新建webapp->myinfo->index.html展示个人中心前台界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人中心-常用旅客</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../css/reset.css"/>
<link rel="stylesheet" href="../css/font-awesome.min.css"/>
<link rel="stylesheet" href="../css/common.css"/>
<link rel="stylesheet" href="../lib/cityselect/cityselect.css"/>
<link rel="stylesheet" href="../css/index.css"/>
<link rel="stylesheet" href="../css/travel.css"/>
<link rel="stylesheet" href="../css/strategy.css"/>
<!-- 引入easyui的jQuery框架 -->
<link rel="stylesheet" type="text/css" href="../easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<script src="../lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="../lib/cityselect/cityselect.js" type="text/javascript"></script>
<script src="../lib/echarts/echarts.min.js"></script>
<script src="../lib/echarts/shine.js"></script>
<script src="../lib/echarts/china.js"></script>
<!-- 引入easyui的js文件 -->
<script src="../easyui/jquery.easyui.min.js"></script>
<script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- nav开始 -->
<div class="i-nav clearfix">
<div class="i-nav-wrap">
<ul>
<li><a href="../index.html" class=""><i class="icon-home"></i>首页</a></li>
<li><a href="../travel/index.html" class="current"><i class="icon-globe"></i>旅游</a></li>
<li ><a href="../tavern/index.html"><i class="icon-hospital"></i>酒店</a></li>
<li><a href="../flyTicket.html"><i class="icon-plane"></i>机票</a></li>
<!-- <li><a href="#"><i class="icon-credit-card"></i>门票</a></li> -->
<li><a href="index.html"><i class="icon-book"></i>攻略</a></li>
</ul>
<!-- 未登录显示 -->
<div class="i-nav-login" id="unlogin">
<a href="login.html">登陆</a>
<span>|</span>
<a href="register.html">注册</a>
</div>
<!-- 用于登录者呈现登陆者的用户姓名 -->
<div class="i-nav-login" id="username">
<font color="#f0ffff">欢迎您:</font><span id="uname">xxx</span>|<font color="#f0ffff"><a id="btmyinfo" href="myinfo/index.html">用户中心</a></font>|<font color="#f0ffff"><a id="btlogout" href="#">注销</a></font>
</div>
</div>
</div>
<!-- nav结束 -->
<!-- 内容开始 -->
<div id="cc" class="easyui-layout" data-options="border:false" style="width:100%;height:650px;">
<!-- 左侧导航面板 -->
<div data-options="region:'west',title:'我的i旅行首页',split:true" style="width:250px;">
<div id="aa" class="easyui-accordion" style="width:250px;height:fit-content;">
<div title="订单" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:20px;">
<h2 style="font-size: 14px;padding: 5px">全部订单</h2>
<h2 style="font-size: 14px;padding: 5px">旅游订单</h2>
<h2 style="font-size: 14px;padding: 5px">酒店订单</h2>
<h2 style="font-size: 14px;padding: 5px">机票订单</h2>
</div>
<div title="个人中心" data-options="iconCls:'icon-reload'" style="padding:20px;">
<h2 style="font-size: 14px;padding: 5px"><a href="#" id="btmyinfolinkuser">常用旅客信息</a></h2>
</div>
</div>
</div>
<!-- 内容面板 -->
<div data-options="region:'center',title:'个人中心',border:false" style="padding:5px;background:#eee;width:880px;height:450px">
<div id="myinfo-ttab" data-options="border:false" class="easyui-tabs" style="width: 800px;height: 450px">
</div>
</div>
</div>
<!-- 内容结束 -->
<script src="index.js" type="text/javascript"></script>
<script>
window.onload = function (e) {
strategy.init();
}
</script>
</body>
</html>
在index.js文件里编写index.html的点击事件
//点击常用联系人信息
$(function(){
$("#btmyinfolinkuser").click(function(){
if($('#myinfo-ttab').tabs('exists','常用旅客信息')){//判断常用旅客信息面板是否出现在容器上
$('#myinfo-ttab').tabs('select','常用旅客信息');//选择‘常用旅客信息’面板
}else{
// 添加新的标签面板
$('#myinfo-ttab').tabs('add',{
title:'常用旅客信息',
content:'<iframe src="linkuser.html" frameborder="0" width="100%" height="350px" marginheight="0" marginwidth="0" scrolling="no"></iframe>',
fit:true,
//closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
});
});
/*****登陆者信息**************/
$("#unlogin").show();
$("#username").hide();
//读取本地cookie
//读取
function readCookie(name){
var searchName=name+"=";
var cookies=document.cookie.split(';');
for(var i=0;i<cookies.length;i++){
var c=cookies[i];
while(c.charAt(0)==' '){
c=c.substring(1,c.length);
}
if(c.indexOf(searchName)==0){
return c.substring(searchName.length,c.length)
}
}
return null;
}
$(function(){
var id=readCookie("id");
//alert(id);
$.getJSON('http://localhost:9001/showIndexUser_Users.do?id='+id,function (us) {
//alert(us);
if(us!=''){
$("#uname").html('<font color="#f0ffff">'+us.username+'</font>');
$("#unlogin").hide();
$("#username").show();
}
});
/***********************************************/
//注销用户登录
$("#btlogout").click(function(){
$.get('http://localhost:9001/logout_Users.do?id='+id,function(rst){
alert(rst);
if(rst=='注销成功'){
$("#unlogin").show();
$("#username").hide();
}
});
});
添加常用旅客信息面板linkuser.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入easyui的jQuery框架 -->
<link rel="stylesheet" type="text/css" href="../easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<script src="../lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- 引入easyui的js文件 -->
<script src="../easyui/jquery.easyui.min.js"></script>
<script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="linkuser.js"></script>
</head>
<body>
<div data-options="region:'center',fit:true,border:false">
<div id="p" class="easyui-panel" title="旅客信息"
style="width:800px;height:350px;padding:10px;background:#fafafa;"
data-options="border:false"
>
<a id="btadd" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加联系人</a><br>
<table id="dg"></table>
</div>
</div>
<!-- 添加联系人的窗口 -->
<div id="win" class="easyui-window" title="添加用户信息" style="width:400px;height:350px"
data-options="iconCls:'icon-save',modal:true">
<form id="ff" action="" method="post" name="ff">
<div style="padding: 10px">
姓 名: <input type="text" class="easyui-validatebox" name="linkusername" id="linkusername" data-options="required:true"/><br>
<input type="hidden" name="id" id="id"/>
<input type="hidden" name="userid" id="userid"/>
<input type="hidden" name="createdby" id="createdby"/>
<input type="hidden" name="screationdate" id="screationdate"/>
</div>
<div style="padding: 10px">
电 话: <input type="text" class="easyui-validatebox" name="linkphone" id="linkphone" data-options="required:true"/><br>
</div>
<div style="padding: 10px">
身份证: <input type="text" class="easyui-validatebox" name="linkidcard" id="linkidcard" data-options="required:true"/><br>
</div>
<div style="padding: 10px">
<a id="btsave" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
<a id="btupdate" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">修改</a>
</div>
</form>
</div>
</body>
</html>
linkuser.js
//读取本地cookie
//读取
function readCookie(name){
var searchName=name+"=";
var cookies=document.cookie.split(';');
for(var i=0;i<cookies.length;i++){
var c=cookies[i];
while(c.charAt(0)==' '){
c=c.substring(1,c.length);
}
if(c.indexOf(searchName)==0){
return c.substring(searchName.length,c.length)
}
}
return null;
}
$(function(){
var uid=readCookie("id");//从cookie中获取登陆者的id
//设置对话窗口为关闭状态
$('#win').window('close'); // close a window
$('#dg').datagrid({
url : 'http://localhost:9001/findPageAll_LinkUser.do?t=' + new Date().getTime(),
width:'750',
loadMsg:'正在加载网络数据,请稍后.....',
singleSelect:true,
pagination:true,
pageList:[5,10,15,20],
pageSize:5,
striped:true,
columns : [ [ //此处属性与实体类属性名保持一致
{
field : 'id',
title : '编号',
width : '50',
align : 'center'
},
{
field : 'linkusername',
title : '姓名',
width : '100',
align : 'center'
},
{
field : 'linkphone',
title : '手机/电话',
width : '100',
align : 'center'
},
{
field : 'linkidcardtype',
title : '证件类型',
width : '100',
align : 'center',
formatter:function(value,row,index){
if(row.linkidcardtype=='0'){
return '身份证';
}
if(row.linkidcardtype=='1'){
return '驾驶证';
}
}
},
{
field : 'linkidcard',
title : '证件号码',
width : '200',
align : 'center'
},
{
field : 'opts',
title : '操作',
width : 200,
align : 'center',
formatter:function(value,row,index){
if(row.userid==1001){
return '';
}
return '<input type=button value=删除 onclick="dodel('+row.id+')"/> <input type=button value=修改 onclick="findById('+row.id+')"/>';
}
}
] ]
});
由于使用到easyui，所以对后台代码进行更新：
在ItripUserLinkUserBiz里添加:
/**
* 获取总记录数
* */
public int findMaxRow();
在ItripUserLinkUserBizImp里添加:
/**
* 获取总记录数
* */
public int findMaxRow(){
return userLinkUserMapper.findMaxRow();
在实现类ItripUserLinkUserImpAction里更新：
@Override
@RequestMapping(value = "findPageAll_LinkUser.do")
public String findPageAll(HttpServletRequest request, HttpServletResponse response, Integer page, Integer rows) {
page=page==null||page<1?1:page;
rows=rows==null||rows<1?5:rows;
if(rows>20)rows=20;//限制每页显示的记录数不能超过20条
//获取总页数
int maxpage=userLinkUserBiz.findMaxPage(rows);
if(page>maxpage)page=maxpage;
//获取总记录数
int maxrow=userLinkUserBiz.findMaxRow();
//获取每页记录的集合
List<ItripUserLinkUser> linkUserList=userLinkUserBiz.findPageAll(page, rows);
Map<String,Object> map=new HashMap<>();
map.put("page", page);//传递给easyui当前页数
map.put("rows", linkUserList);//传递给easyui分页控件的记录集合,使用rows封装
map.put("total", maxrow);//传递给easyui的分页控件，自动进行分页处理
String jsonstr=JSONObject.toJSONString(map);
System.out.println("js-->"+jsonstr);
return jsonstr;
}
在linkuser.js补充添加事件（对联系人保存添加等等）
//点击添加联系人
$("#btadd").click(function(){
$('#win').window('open'); // close a window
});
//保存联系人事件
$("#btsave").click(function(){
$("#userid").val(uid);
$("#createdby").val(uid);
var date=new Date();
$("#screationdate").val(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate());
//easyui的form表单提交
$.messager.progress(); // 显示进度条
$('#ff').form('submit', {
url: 'http://localhost:9001/save_LinkUser.do',
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // 如果表单是无效的则隐藏进度条
}
return isValid; // 返回false终止表单提交
},
success: function(msg){
//alert(msg);
//if(msg=='1'){
$.messager.alert('提示','保存成功！');
$('#dg').datagrid('reload'); // 重新载入当前页面数据
//}else{
// $.messager.alert('提示','保存失败！');
//}
$.messager.progress('close'); // 如果提交成功则隐藏进度条
$('#win').window('close'); // close a window
}
});
/**************************保存联系人结束************************************/
//修改联系人按钮事件
$("#btupdate").click(function(){
/*********easyui的form表单提交**************/
$.messager.progress(); // 显示进度条
$('#ff').form('submit', {
url: 'http://localhost:9001/update_LinkUser.do',
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // 如果表单是无效的则隐藏进度条
}
return isValid; // 返回false终止表单提交
},
success: function(msg){
//alert(msg);
//if(msg=='1'){
$.messager.alert('提示','更新成功！');
$('#dg').datagrid('reload'); // 重新载入当前页面数据
//}else{
// $.messager.alert('提示','保存失败！');
//}
$.messager.progress('close'); // 如果提交成功则隐藏进度条
$('#win').window('close'); // close a window
}
});
});
});
//删除联系人
function dodel(id){
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
$.get('http://localhost:9001/delById_LinkUser.do?id='+id,function(msg){
if(msg=='1'){
$.messager.alert('提示','删除成功！');
$('#dg').datagrid('reload'); // 重新载入当前页面数据
}else{
$.messager.alert('提示','删除失败！');
}
});
}
});
}
//查找联系人
function findById(id){
//读取远程服务器返回的数据给表单元素赋值
$('#ff').form('load','http://localhost:9001/findById_LinkUser.do?id='+id); // 读取表单的URL
$('#win').window('open'); // open a window
}
