在上一篇随笔中，我们已经看了如何实现前台的对话功能；前台我限定了店主只有一人，店铺只有一个，所有比较单一，但后台就不一样了，而后台更像是我们常见的聊天软件；当然，前台也应该实现这种效果，但原理懂了，可以自己以后再扩展：

首先看一下要实现的效果：

实现的功能：

（1）右边的联系人列表：

　　　　未联系过的不显示；只显示联系过的；可以清空消息记录；有新消息时会有提醒，当点击后，提醒消失，清空按钮出现；

（2）左边的对话框

　　　　点击右边的联系人，显示该联系人的头像和他的对话消息（和前台页面一样）

 第一步：店主登录查看信息页面：

第二步：实现显示列表

  1. <div class="ff" style="background-color: ghostwhite;">
  2.         	<div style="height: 100px; width: 300px;background-image: url(../img/1.jpg);">
    //（1）读取所有给店主发过信息的联系人界面,包括头像和姓名
  3.         	<?php
  4.         	$uid = $_SESSION["uid"];
  5.         	$sql = "select * from users where uid='{$uid}'";
  6.         	$arr = $db->query($sql);
  7.         	foreach($arr as $v)
  8.         	{
  9.         	echo "<div style='height:100px;width:100px;float:left;text-align:center;line-height:100px'>
  10.         		<img src='{$v[6]}' height='80px' width='80px'/></div>
  11.         		<div style='height:100px;width:200px;float:left;'>
  12.         		<div style='height:40px;width:200px;text-align:left;line-height:40px'>
  13.         			{$v[2]}
  14.         		</div>
  15.         		<div style='height:60px;width:200px;'>
  16.         			个性签名：
  17.         			<input type='text' placeholder='不读书怎么对得起今天!' style='width:180px'>
  18.         		</div>
  19.         		</div>";
  20.         	}
  21.         	?>
  22.         	</div>
  23.         	<div style="height: 30px; width: 300px;text-align:center;line-height:30px;border-bottom:2px solid grey;background-color: ghostwhite;">
  24.         		我的联系人
  25.         	</div>
  26.         	<div style="height: 470px; width: 300px;">
  27.         		<?php
  28.         	$uid = $_SESSION["uid"];
  29.         	if($uid=="zhangsan")
  30.         	{
  31.         		//读取所有给张三发过信息的联系人，并按发送时间的降序排序
  32.         		$sql2="select * from duihua where jsid='{$uid}' group by uid order by dhtime desc";
  33.         		$arr2= $db->query($sql2);    
  34.  
  35.         		foreach($arr2 as $n)
  36.         		{
                                     //从users表中读取中文姓名
  37.         			$sql3 = "select * from users where uid='{$n[2]}' ";
  38.         			$arr3=$db->query($sql3);     
  39.  
  40.         			//从对话表中读取不同联系人未读信息的条数，
  41.         			 	$sql4 = "select count(*) from duihua where uid='{$n[2]}' and isok='0'";
  42. 					$shumu =$db->strquery($sql4);
  43.         			echo "<div style='height:70px; width: 300px;border-bottom:2px solid grey;background-color:ghostwhite' class='guke dh' aaa='{$n[2]}'>
  44.         				<div  style='height:70px; width: 100px; float:left;'>
  45.         		 	<div style='height:50px;width:50px;margin:10px auto; border-radius:10px;overflow:hidden'>
  46.         		       <img src='{$arr3[0][6]}' height='50px' width='50px'/>
  47.         		    </div>
  48.         				</div>";      
    //如果有未读消息，则显示“XXX，有。。。条未读，红字”
  49.         			if($shumu>0){
  50.         			echo"<div  style='height:70px; width: 100px;float:left;line-height:80px'>
  51.         					{$arr3[0][2]} <span style='font-size:12px;color:red'>有{$shumu}新消息！</span>
  52.         			</div>
  53.  
  54.         			</div>";
  55.         				}
    //否则，则只显示XXX，和“清空”按钮
  56.         				else
  57.         				{
  58.         				echo"<div style='height:70px; width: 100px;float:left;line-height:80px'>
  59.         					{$arr3[0][2]}
  60.         				</div>
  61.         				<div class='qk' ccc='{$n[2]}' style='height:70px; width:50px;line-height:80px;float:right'><button type='button' class='btn btn-danger' style='height:30px;width:50px' onclick=\"return confirm('确认清空该聊天记录吗？')\">清空</button></div>
  62.         			       </div>";
  63.         				}
  64.         		}
  65.         	}
  66.         	?>
  67.         	</div>
  68.         </div>

　　实现效果：

第三步：点击该列表可以移动，实现移动：

这一块内容可以借鉴05月12日写的随笔：http://www.cnblogs.com/chenguanai/p/6845240.html

  1.     $(".ff").mousedown(function(e){
  2.         //设置移动后的默认位置
  3.         var endx=0;
  4.         var endy=0;
  5.         //获取div的初始位置，要注意的是需要转整型，因为获取到值带px
  6.         var left= parseInt($(".ff").css("left"));
  7.         var top = parseInt($(".ff").css("top"));
  8.         //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
  9.         var downx=e.pageX;
  10.         var downy=e.pageY;     //pageY的y要大写，必须大写！！
  11.      //    鼠标按下时给div挂事件
  12.     $(".ff").bind("mousemove",function(es){
  13.         //es.pageX,es.pageY:获取鼠标移动后的坐标
  14.         var endx= es.pageX-downx+left;     //计算div的最终位置
  15.         var endy=es.pageY-downy+top;
  16.         //带上单位
  17.         $(".ff").css("left",endx+"px").css("top",endy+"px")
  18.     });
  19.   })
  20.  
  21.     $(".ff").mouseup(function(){
  22.         //鼠标弹起时给div取消事件
  23.         $(".ff").unbind("mousemove")
  24.     })

　第四步：点击不同的用户进入不同用户的界面（以头像作为区别）；用session来做（核心）

  1. <script>
  2.   	$(".guke").dblclick(function(){
  3. 		var aaa=$(this).attr("aaa");
  4.   $.ajax({
  5. 			url:"yidu-cl.php",
  6. 			data:{yh:aaa},
  7. 			type:"POST",
  8. 			dataType:"TEXT",
  9. 			success: function(data){
  10. 				window.location.href="ht-dh.php";
  11. 			}
  12. 		});
  13. 	})
  14.  
  15. </script>

　　yidu-cl.php页面

  1. <?php
  2. session_start();
  3. require "DBDA.class.php";
  4. $db = new DBDA();
  5. $uid=$_SESSION["uid"];
  6.  
  7. $yh=$_POST["yh"];
    //存一下
  8. $_SESSION["cuid"]=$yh;
  9. $sql = "update duihua set isok='1' where uid='{$yh}' and jsid='{$uid}'";
  10. echo $sql;
  11. $db->query($sql,0);
  12. ?>

　　

第四步：点击陈三，进入与陈三的对话界面：

当我点击陈三后，“有。。新消息”消失；出现清空按钮；左侧相应的变为与张三的对话界面

实现代码：

  1. 	<div id="zhongjian">
  2.  
  3. 					<!--对话-->
  4. 				<div id="mid">
  5. 	<!--判断是否已经存了cuid,注意一点，这是前半部分代码；后半部分代码在最后边；不然会报错的！！！！-->
  6. 					          <?php
  7.           	if(!empty($_SESSION["cuid"]))
  8.           	{
  9.           ?>
  10.      <div id="kuangjia" style="background-color: whitesmoke;height: 550px;width: 620px;margin: 0px auto;border: 1px solid gainsboro; ">
  11. 			<div id="neirong" style="height: 400px;width: 620px;">
  12. 				<div style="height: 100px;width: 620px;background-image: url(../img/bj4.jpg);">
  13. 	<!--取存的cuid，显示该联系人的头像姓名等信息-->
  14. 				<?php
  15.         	$cuid = $_SESSION["cuid"];
  16.         	$sql3 = "select * from users where uid='{$cuid}'";
  17.         	$arr3 = $db->query($sql3);
  18.         	foreach($arr3 as $c)
  19.         	{
  20.         	echo "
  21.         	<div style='height:100px;float:left;width:100px;float:left;'>
  22.         		<div style='border:2px solid grey;height:84px;width:84px;margin:7px auto; border-radius:10px;overflow:hidden'>
  23.         		<img src='{$c[6]}' height='80px' width='80px'/>
  24.         		</div>
  25.         		</div>
  26.         		<div style='height:100px;width:500px;float:left;'>
  27.         		<div style='height:50px;width:500px;text-align:left;line-height:50px'>
  28.         			{$arr3[0][2]}
  29.         		</div>
  30.         			<div style='height:50px;width:500px;text-align:left;'>个性签名：
  31.         			<input type='text' placeholder='店主，便宜点!' style='width:280px'>
  32.         		</div>
  33.         		</div>
  34.         		";
  35.         	}
  36.         	?>
  37.         	</div>
  38.         	<!--读取聊天内容-->
  39.         	<div style="height: 300px;width: 620px;overflow: auto;overflow-x:hidden ;">
  40.    		   <?php
  41. 					$cuid = $_SESSION["cuid"];
  42.  
  43. 					$sql4 = "select * from users where uid='{$cuid}'";
  44.         	        $arr4 = $db->query($sql4);
  45.  
  46. 					$sql5="select * from duihua where uid='{$cuid}' or jsid='{$cuid}' order by dhtime";
  47. 					$arr5= $db->query($sql5);
  48. 					foreach($arr5 as $f)
  49. 					{
  50. 					//该联系人的信息显示在左侧，和前台相反
  51. 					if($f[2]==$cuid)
  52. 					{
  53. 					echo "<div style='height:100px;width:600px;'>
  54. 					<div style='height:100px;width:300px;float:left'>
  55. 						<div style='height:20px;width:300px;font-size:13px;padding-left:20px'>
  56. 								{$f[6]}</div>
  57. 						<div style='height:80px;width:50px;float:left'>
  58. 							<div style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'>
  59. 								<img src='{$arr4[0][6]}' height='50px' width='50px'/>
  60. 							</div>
  61. 						</div>
  62. 						<div style='min-height:40px;width:250px;float:left;background-color:pink; border-bottom-right-radius: 10px;border-top-right-radius: 10px;border-top-left-radius: 40px;border-bottom-left-radius: 40px;'>
  63. 							<p style='padding-left:20px; line-height:40px'>
  64. 								{$f[4]}</p>
  65. 						</div>
  66. 					</div></div>";
  67. 					}
  68. 					//如果是店主，则显示在右侧
  69. 				  if($f[2]=='zhangsan')
  70. 					{
  71. 					echo "<div style='height:100px;width:600px;margin-right:20px'>
  72. 					<div style='height:100px;width:300px; float:right'>
  73. 						<div style='height:20px;width:300px;font-size:13px;padding-right:20px'>
  74. 								{$f[6]}</div>
  75. 						<div style='height:80px;width:50px;float:right'>
  76. 							<div style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'>
  77. 								<img src='{$v[6]}' height='50px' width='50px'/>
  78. 							</div>
  79. 						</div>
  80. 						<div style='min-height:40px;width:250px;float:right;background-color:cornflowerblue; border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;'>
  81. 							<p style='padding-left:20px; line-height:40px'>
  82. 								{$f[4]}</p>
  83. 						</div>
  84. 					</div></div>";
  85. 					}
  86. 					}
  87. 					?>
  88.         	</div>
  89. 			</div> <!--id="neirong"-->
  90. 		<form role="form">
  91. 		  <div class="form-group">
  92. 		    <textarea class="form-control" rows="3" id="words"></textarea>
  93. 		  </div>
  94. 		</form>
  95. 		<div id="fs" style="height: 50px; width: 600px;text-align: right; padding-right: 50px;">
  96. 		<button type="button" class="btn btn-success guanbi"  bbb="<?php  echo $cuid;  ?>" >关闭</button>
  97. 		<button type="button" class="btn btn-success fasong">发送</button>
  98. 		</div>
  99. 		</div>
  100. 	<!--是最开始判断是否为空的结尾-->
  101.      <?php
  102.           }
  103.       ?>
  104. 			</div>	<!--id=mid-->
  105. 	</div> <!--id=zhongjian-->

　第五步：点击清空

  1. 	$(".qk").click(function(){
  2. 		var ccc=$(this).attr("ccc");
  3. 		  $.ajax({
  4. 			url:"qk-cl.php",
  5. 			data:{yh:ccc},
  6. 			type:"POST",
  7. 			dataType:"TEXT",
  8. 			success: function(data){
  9. 				alert("删除成功！");
  10. 				window.location.href="ht-dh.php";
  11. 			}
  12. 		});
  13.  
  14. 	})

　　qk-cl.php页面：

  1. <?php
  2. session_start();
  3. require "DBDA.class.php";
  4. $db = new DBDA();
  5. $uid=$_POST["yh"];
  6. $sql = "delete from duihua where uid='{$uid}'";
  7. $db->query($sql,0);

　现在我们来全部看一遍：以陈三为例

1、先清空陈三的聊天记录（只有王五一人）

2、登录陈三的账号，发布一个信息

              

3、登录张三的账号，会发现多了陈三的对话列表

4、点击陈三；出现与陈三的对话列表，同时提示消失，出现清除按钮

5、点击清空按钮：

        

这样就实现了全部效果了~~~如果把前台也做成后台这种效果，那就和qq、阿里旺旺等聊天工具一样啦~~

难点是：

　　　　点击不同用户出现与不同用户的对话框，触发点击事件时存一下session；

　　　　发送内容时，点击发送，刷新读取内容时存的cuid是否依旧存在？（加判断）；

　　　　逻辑要清晰，因为要不断用用户名从users表读取头像和姓名；所以sql语句有点多，也有点绕。慢慢来

用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面的更多相关文章

  1. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面

    在上一篇随笔中,我们已经看了如何实现前台的对话功能:前台我限定了店主只有一人,店铺只有一个,所有比较单一,但后台就不一样了,而后台更像是我们常见的聊天软件:当然,前台也应该实现这种效果,但原理懂了,可 ...

  2. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面

    首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...

  3. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面

    首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...

  4. Python模拟简易版淘宝客服机器人

    对于用Python制作一个简易版的淘宝客服机器人,大概思路是:首先从数据库中用sql语句获取相关数据信息并将其封装成函数,然后定义机器问答的主体函数,对于问题的识别可以利用正则表达式来进行分析,结合现 ...

  5. 屏蔽全部统计代码（51.la cnzz 百度统计 谷歌分析师adsense、屏蔽淘宝客广告代码）的方法

    支持百度统计 .51.la统计.cnzz统计.51yes统计.谷歌分析师.阿里妈妈淘宝客广告.chinaz弹窗.假设有很多其它的须要屏蔽的,欢迎联系 default7#zbphp.com 改动etc的 ...

  6. destoon系统商城加淘宝客按钮方法

    destoon系统很多喜欢运营B2B的站长都在用,其中的商城模块常常被用来做淘宝客,其中的难点是如何把购买按钮做成淘宝客地址,这个问题的修改在论坛上被叫价50元,下面小编把这个实用的方法分享下,希望对 ...

  7. 关于淘宝的数据来源,针对做淘宝客网站的淘宝api调用方法

    上次写了个淘宝返利模式的博客,直接被移除首页,不知道何故啊.可能是真的跟技术不太刮边. 众所周知,能够支撑一个网站运营的最基础不是程序写的多么好.也不是有多么牛X的运营人员,最主要的是数据,如果没有数 ...

  8. 巧用ecshop做淘宝客

    一.第一步 下载文件,可以在http://www.ecshop.com/下载ecshop各个版本的安装包,安装好ECSHOP,然后通过PTF工具下载2个文件到本地进行修改.这个2个文件分别是goods ...

  9. 【淘宝客】根据淘客联盟精选清单（淘宝天猫内部优惠券）随机显示淘宝天猫优惠券dome

    也许大家在生活中经常淘宝看到[淘宝天猫内部优惠券]的网站,或者在微博中经常有博主发券,让大家生活中购物便宜许多,作为一个站长,我们也希望自己的网站也能有这样的一个功能,现在就分享给大家,还是免后台哦. ...

随机推荐

  1. log4j的Appenders配置

    因为是刚开始使用log4j,很多配置方面的东西都不懂,记录下. 下面是我用STS(Spring Tool Suite)新建Spring MVC项目的时候,帮我自动生成的一个log4j.xml配置文件. ...

  2. O（mn）实现LCIS

    序: LCIS即求两序列的最长公共不下降子序列.思路于LCS基本一致. 用dp[i][j]记录当前最大值. 代码实现: /* About: LCIS O(mn) Auther: kongse_qi D ...

  3. 【Netty】第一个Netty应用

    一.前言 前面已经学习完了Java NIO的内容,接着来学习Netty,本篇将通过一个简单的应用来了解Netty的使用. 二.Netty应用 2.1 服务端客户端框架图 下图展示了Netty中服务端与 ...

  4. jenkins部署

    第一步:官网下载jenkins:http://Jenkins-ci.org/ 第二步:安装jdk:(参考jdk安装)http://www.cnblogs.com/tanghuang/p/5805514 ...

  5. UISement属性

    .segmentedControlStyle 设置segment的显示样式. typedef NS_ENUM(NSInteger, UISegmentedControlStyle) { UISegme ...

  6. NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】

    近期在看NodeJS相关 不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合 在接触NodeJS时受平时Java或者C#中API接口等开发的思 ...

  7. hdu4614 Vases and Flowers 线段树+二分

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4614 题意: 给你N个花瓶,编号是0  到 N - 1 ,初始状态花瓶是空的,每个花瓶最多插一朵花. ...

  8. LISTCTRL控件方法

    以下未经说明,listctrl默认view风格为report --------------------------------------------------------------------- ...

  9. Ajax，纯Js+Jquery

    AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...

  10. CentOS系统搭建gitolite服务

    1.安装相关支持软件 a.$yum install perl-Time-HiRes openssh-server perl -y b.$yum -y install git 2.服务端操作:创建git ...