模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）
我们大部分人都发过动态，想必都知道发动态、回复评论、删除动态的整个过程，那么作为初学者，要模仿这些功能有点复杂的，最起码表的关系得弄清楚~~
先把思路理一下：
（1）用户登录，用session读取当前用户----目的是：该用户可以发表动态，重点是显示该用户好友及他自己发表的动态，并且按发表时间排序。
（2）做个发表动态框实现发表动态功能
（3）显示该用户和他好友已经发表对的动态信息，并按发表时间由近到远显示
（4）再每条动态后面做一个评论按钮和删除按钮；实现对动态的评论，回复和删除（斜体部分下一篇随笔，不然太长了）
需要用到的表：
（1）用户表：
（2）好友表
（3）动态表
我先将代码分块解析，最后将主页代码完整附上，不然弄不清逻辑可能会有点混~~~~
第一步：实现简单的登录
（1）login.php页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#body{
height: 300px;
width: 300px;
margin: 200px auto; }
</style>
</head>
<body>
<div id="body">
<form method="post" action="login-cl.php">
用户名：<input type="text" name="uid" /><br /><br />
密码：<input type="password" name="pwd"/><br />
<input type="submit" value="登录" />
</form>
</div>
</body>
</html>
效果图如下：
（2）login-cl.php页面：（用session存取用户名）
<?php
session_start();
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
require "../DB.class.php";
$db = new DB();
$sql = "select pwd from users where uid = '{$uid}'";
$mm = $db->strquery($sql);
var_dump($mm);
if($mm == $pwd && !empty($pwd))
{
$_SESSION["uid"] = $uid;
header("location:main.php");
}
else{
echo "用户名或密码错误！";
}
?>
第二步：登录之后，布局发布动态框
（1）发布之前，判断一下session是否已经取到值，如果没有，返回到登陆页面，如果取到值则显示“欢迎，xx”的字体（后面的姓名均用拼音显示，不再读取汉字的姓名）
<?php
session_start();
$uid = "";
if(empty($_SESSION["uid"]))
{
header("location:login.php");
exit;
}
$uid = $_SESSION["uid"];
echo "欢迎："."<span class='qid' yh='{$uid}'>{$uid}</span>";
?>
（2）
<!--写动态-->
<div id="xdt">
<p>发表动态：</p>
<textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
<input type="submit" value="发表" id="fb" /> </div>
实现的效果：
第三步：显示该用户和他好友已经发表的动态信息，并按发表时间由近到远显示
重点是：
（1）显示的动态只是登陆的该用户和他好友的，非好友不显示--------所以在处理页面的sql语句要注意
（2）将读取出来的信息按照发表时间读取，发表时间最近的越在上边
首先：
<!--容纳动态内容-->
<div class="fdt">
<p style="color: brown; font-family: '微软雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友动态：<p>
<div id="nr"></div>
</div>
其次：
//当发表动态时，将动态内容写进数据库，并刷新页面
$("#fb").click(function(){
var dt= $(".xdt").val();
var uid = $(".qid").attr("yh");
$.ajax({
url:"main-cl.php",
data:{dt:dt},
type:"POST",
dataType:"TEXT",
success:function(data){
alert("发表动态成功！");
window.location.href="main.php";
}
});
})
对应的main-cl.php页面：
<?php
session_start();
$uid = $_SESSION["uid"];
$dt = $_POST["dt"];
$date = date ("Y-m-d H:i:s");
require "../DB.class.php";
$db = new DB();
$sql = "insert into qqdongtai values ('','{$uid}','{$dt}','{$date}')";
$db->query($sql,0);
$sql = "select * from qqdongtai where uid='{$uid}' or uid in (select uid from qqfriends where fname =(select name from qqusers where uid='{$uid}'))";
//echo $sql;
$arr = $db->strquery($sql);
echo $arr;
?>
然后：
//刷新页面时将内容读取出来，并按发表时间读出来
$.ajax({
url:"sx-cl.php",
dataType:"TEXT",
success:function(data){
var hang = data.trim().split("|");
var str="";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str = str + "<div class='a'><span class='xm'>"+lie[1]+"</span>发表动态：</div><div class='b'>"+lie[2]+"</p><div class='c'>发表动态时间："+lie[3]+"</div>";
str =str+"<div id='d'><button class='btn btn-primary' data-toggle='modal' data-target='#myModal'>评论</button><span><a href='del.php?code="+lie[0]+"'>删除动态</a></span></div>";
}
$("#nr").html(str); }
});
sx-cl.php页面：
<?php
session_start();
$uid = $_SESSION["uid"];
$date = date ("Y-m-d H:i:s");
require "../DB.class.php";
$db = new DB();
//选取该用户和该用户好友的动态，并按时间顺训读出
$sql = "select * from qqdongtai where uid='{$uid}' or uid in (select uid from qqfriends where fname =(select name from qqusers where uid='{$uid}')) order by time desc";
//echo $sql;
$arr = $db->strquery($sql);
echo $arr;
?>
由上面可知：登录用户是lisi，由好友表可以知道，lisi的好友只有zhangsan和zhaoliu,那么显示的动态只能有lisi,zhangsan,和zhaoliu的。现在看一下效果及数据库~~~~
第四步：用bootstrap添加模态框用来评论动态
（1）引入文件：
<!--引入bootstrap的css文件-->
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!--引入js包-->
<script src="../jquery-3.2.0.js"></script>
<!--引入bootstrap的js文件-->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
（2）用模态框做评论效果：
<!-- 评论模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">评论</h4>
</div>
<textarea class="modal-body" cols="80px"></textarea>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary qdhf">确定</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
实现效果：（样式比较简陋）
点击“评论”：
到这一步基本就能实现动态的发布和显示好友动态了~~~~未完待续----评论和评论回复见下一篇随笔~~~
主页面全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入bootstrap的css文件-->
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!--引入js包-->
<script src="../jquery-3.2.0.js"></script>
<!--引入bootstrap的js文件-->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
#body{
height: auto;
width: 1000px;
margin: 0px auto;
}
#xdt{
height: 200px;
width:1000px;
border: 1px solid royalblue;
}
.fdt{
position: relative;
min-height:300px;
width: 1000px; }
/*谁发表动态样式*/
.a{
float: left;
min-height:40px;
width: 1000px;
border-bottom: 2px solid brown;
}
.xm{
font-size: 18px;
color: brown;
font-weight: bold;
}
/*发表动态样式内容*/
.b{
float: left;
text-align: left;
height:100px;
line-height: 50px;
}
/*发表时间与回复删除样式*/
.c{
height:30px;
width: 800px;
float: left;
font-size: 12px;
text-align:right;
}
#d{
height:30px;
width: 200px;
float: left;
font-size: 15px;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<?php
session_start();
$uid = "";
if(empty($_SESSION["uid"]))
{
header("location:login.php");
exit;
}
$uid = $_SESSION["uid"];
//这种方法可以取到uid。
echo "欢迎："."<span class='qid' yh='{$uid}'>{$uid}</span>";
?> <!--写动态-->
<div id="xdt">
<p>发表动态：</p>
<!--<form method="post" action="main-cl.php">-->
<textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
<input type="submit" value="发表" id="fb" />
<!--</form>-->
</div> <!--容纳动态内容-->
<div class="fdt">
<p style="color: brown; font-family: '微软雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友动态：<p>
<div id="nr"></div>
</div> <!-- 评论模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">评论</h4>
</div>
<textarea class="modal-body" cols="80px"></textarea>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary qdhf">提交评论</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div> </div>
</body>
</html>
<script>
//刷新页面时将内容读取出来，并按发表时间读出来
$.ajax({
url:"sx-cl.php",
dataType:"TEXT",
success:function(data){
var hang = data.trim().split("|");
var str="";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str = str + "<div class='a'><span class='xm'>"+lie[1]+"</span>发表动态：</div><div class='b'>"+lie[2]+"</p><div class='c'>发表动态时间："+lie[3]+"</div>";
str =str+"<div id='d'><button class='btn btn-primary' data-toggle='modal' data-target='#myModal'>评论</button><span><a href='del.php?code="+lie[0]+"'>删除动态</a></span></div>";
}
$("#nr").html(str);
//点击回复
}
});
//当发表动态时，将动态内容写进数据库，并刷新页面
$("#fb").click(function(){
var dt= $(".xdt").val();
var uid = $(".qid").attr("yh");
$.ajax({
url:"main-cl.php",
data:{dt:dt},
type:"POST",
dataType:"TEXT",
success:function(data){
alert("发表动态成功！");
window.location.href="main.php";
}
});
})
</script>
模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）的更多相关文章
- QQ空间／朋友圈类界面的搭建
类似于QQ空间的布局主要是在说说信息.点赞.回复三大部分的自适应布局上. 当我们需要搭建类似QQ空间.微信朋友圈的界面的时候,可做如下操作: 创建一个对应的model类: 创建一个对应model类的f ...
- Android 模仿QQ空间风格的 UI（转）
本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2 ...
- Android 模仿QQ空间风格的 UI
本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2 ...
- 模仿QQ空间 网页设计
目的:1.通过模仿QQ空间,全自主写代码,熟悉网页设计的流程 2.熟练的掌握HTML.CSS.JS的应用 3.将在此过程中遇到的问题及其解决方法记录在此,以便取用. 开始: 一.登陆界面(index. ...
- Android 仿微信的朋友圈发布(1)
想自己做一个APP,然后等做到类似发布朋友圈的,微博状态的时候,遇到问题了,完全不知道咋下手. 什么访问相册,列出照片,选择照片进行回传,完全不懂,咋办,自己写?自己写是不可能自己写的,打屎都不可能自 ...
- jsp模仿QQ空间说说的发表
1.在文本域中输入文字(可以不添加) 2.点击添加图片(可以不添加) 3.点击发表 4.发表成功,文字和图片是超链接,点击就可以查看全部内容 5.点击图片查看原图,没有图片则不显示查看原图的超链接 主 ...
- Android模仿QQ空间图片上传——原理
MainActivity.class package com.example.imagedemotext; import java.io.ByteArrayOutputStream; import j ...
- 社交媒体（朋友圈、微博、QQ空间）开发一网打尽，PC端移动端都有！——源码来袭！
一.应用场景 曾几何时,社交媒体已经驻扎到了几乎每个人的生活中.看看你身边的朋友,有几个不玩朋友圈的?就算他不玩朋友圈,那也得玩微博吧.再没有底线,也得玩QQ空间. 不过,作为程序员的我们,没事还是少 ...
- 微信朋友圈如何同时分享(图片+文字) Android版
以下是:微信朋友圈SDK 分享图片的代码,但只能分享图片,不能分享文字,如何才能图片和文字同时分享?求各位大神指教! public class MainActivity extends Activit ...
随机推荐
- 微信小程序,前端大梦想(一)
小程序框架MINA简介 微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...
- JavaScript高级程序设计---学习笔记（三）
函数表达式 定义函数的方式有两种:一种是函数声明,另一种是函数表达式. 关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之前会先读取函数声明所以可以把函数声明放在调用它的语句后面. 而 ...
- Git命令行和Xcode结合使用
现在一直使用Git来管理代码,对于有强迫症的我来说,依旧选择了命令行,下面这段话可以更好的解释我为什么喜欢使用终端敲命令. There are a lot of different ways to u ...
- 【转】JDBC学习笔记(10)——调用函数&存储过程
转自:http://www.cnblogs.com/ysw-go/ 如何使用JDBC调用存储在数据库中的函数或存储过程: * 1.通过COnnection对象的prepareCall()方法创建一个C ...
- python之numpy的安装
这是我第一次写博客,我的第一次打算送给python的numpy库的安装指导,这是我看到一位大神的博客后产生的启发,真是控制不住自己,必须得写一下. 第一次安装numpy浪费了我一个下午,结果还没安装好 ...
- .NET跨平台实践：再谈用C#开发Linux守护进程
Linux守护进程是Linux的后台服务进程,相当于Windows服务进程,对于为Linux开发服务程序的朋友来说,Linux守护进程相关技术是必不可少的,因为这个技术不仅仅是开发守护进程,还可以拓展 ...
- JS实现排序
排序算法可以分为内部排序和外部排序.内部排序是数据记录在内存中进行排序,外部排序是因排序的数据很大,一次不能够容纳全部的排序记录,在排序中需要访问外存.常见的内部排序算法有插入排序,选择排序,冒泡排序 ...
- python3.x中如何实现print不换行
大家应该知道python中print之后是默认换行的, 那如何我们不想换行,且不想讲输出内容用一个print函数输出时,就需要改变print默认换行的属性, 方法如下: print('contents ...
- 关于WebService、WebApi的跨域问题
随着移动互联网的发展, 传统营销模式往网站以及移动客户端转移已经成为一种趋势.接触过互联网开发的开发者肯定会很熟悉两种网络服务WebApi.WebService.在使用JavaScript进行数据交互 ...
- 一个使用openGL渲染的炫丽Android动画库
android-magic-surface-view 这是一个 android 动画特效库, 可以实现各种炫酷动画. github地址: https://github.com/gplibs/andro ...