小项目：聊天室 （jQuery，PHP，MySQL）
这几天写了一个小项目，初衷是自己写一个有前端，有后端的东西练练手，所以，实际意义并不大，只是拿来试试手而已。
我对这个聊天室的构想是这样的：先建两个数据库，一个保存用户名和密码，另一个保存用户名和发送的信息，并记录发送的时间，网页上也想了很多骚操作，但是最后也就简简单单的卡了几张图在两边，简洁，勉强算是美观可看。用户登陆之后，网页就开始下载数据库的信息，并把用户发送的信息一个个垒成盒子向腾讯一样发出来。额。。。想来真是简单，我竟然写了一星期左右。
时间其实大部分耗费在处理后台发送过来的数据上面，查了很多资料，总是不得其法，后面终于慢慢摸索出来了，要在后台先把数据转换成json格式，然后在js里面转为数组，之后就可以随便拆分。
好了，上代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>chat with sb</title>
<meta charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
a{cursor: pointer;}
img{height:100%;}
div{overflow:hidden;border: 1px solid black;text-align: center;}
#left{position: absolute;top:0px;left:0px;width:25%;height:100%}
#right{position: absolute;top:0px;right:0px;width:25%;height:100%}
#sign{position: absolute;right:50%;margin-right: -24%;width:80px;height:auto}
#main{position: absolute;top:50px;left:50%;margin-left: -24%;width: 48%;height:700px;}
.show{height:70%;margin:10px 10px 10px 10px;overflow: auto;}
.text{height:25%;margin:10px 10px 10px 10px;}
#signUp,#signIn{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-left:-100px;margin-top:-100px}
a:hover{background-color: #C71585;}
#writeIn{width:100%;height:80%;border:none}
#exit{position: absolute;right:1px;top:1px;}
.insert{text-align: left;width: -webkit-fit-content;margin-left:10px;margin-top:10px ;padding: 5px 5px 5px 5px;background-color:#C71585;}
.insert a:hover{background-color: white;}
.insert a{cursor: auto;}
</style>
</head>
<body>
<div id="left"><img src="img/left.jpg" /> </div>
<div id="right"><img src="img/right.jpg" /></div>
<div id="sign"><a onclick="signIn()">登陆</a><a onclick="signUp()">注册</a> </div>
<div id="main">
<div class="show"><a id="more">更多消息</a></div>
<div class="text"><textarea id="writeIn"></textarea><button onclick="send()">发送</button></div>
</div>
<script type="text/javascript"> newInsert('sb','2017-7-22 16:02:24','在吗?');
var a=new ajax();
setInterval("a.aja()",1000); function ajax(){
var maxid=0;
this.aja=function(){
if($.cookie('username')==null){
return;
}
$.post("http://127.0.0.1/timeFigure.php",{
max:maxid
},function(data,status){
var obj = JSON.parse(data);
obj=obj.reverse();
for(var i=0;i<obj.length;i++){
newInsert(obj[i].user,obj[i].date,obj[i].str);
};
maxid=obj[i-1].id;
} );
}; }; function newInsert(user,time,str){
var insert=$("<div class='insert'></div>");
insert.html("<a>"+user+" "+time+"<br />"+str+"</a>");
$(".show").append(insert);
};
function signIn(){
$("body").css("background-color","#999999");
$("#writeIn").css("background-color","#999999");
var sign=$("<div id='signIn'></div>");
sign.html("<br/><br/>用户名：<input type='text' id='user'/><br />密码：<input type='password' id='password'/><br /><br /><button onclick='submitIn()'>提交</button>");
$("body").append(sign);
sign.css("background-color","white");
var exitDiv=$("<button onclick='exit()' id='exit'>X</button>");
sign.append(exitDiv);
};
function signUp(){
$("body").css("background-color","#999999");
$("#writeIn").css("background-color","#999999");
var sign=$("<div id='signUp'></div>");
sign.html("<br/><br/>用户名：<input type='text' id='user' /><br />密码：<input type='password' id='password'/><br /><br /><button onclick='submitUp()'>提交</button>");
$("body").append(sign);
sign.css("background-color","white");
var exitDiv=$("<button onclick='exit()' id='exit'>X</button>");
sign.append(exitDiv);
};
function exit(){
$("#exit").parent().remove();
$("body").css("background-color","white");
$("#writeIn").css("background-color","white");
};
function submitIn(){
$.post("http://127.0.0.1/signIn.php",{
user:$("#user").val(),
password:$("#password").val()
},function(data,status){
if(data){
$.cookie('username',data);
$("#sign").html("你好，"+$.cookie('username'));exit();
}
else {
alert("密码错误");
}
});
};
function submitUp(){
$.post("http://127.0.0.1/signUp.php",{
user:$("#user").val(),
password:$("#password").val()
},function(data,status){
var COOKIE_NAME='username';
//cookie异常
$.cookie(COOKIE_NAME,data,{ expires: 7, path: '/' });
$("#sign").html("你好，"+$.cookie("username"));
});
exit();
};
function send(){
if(!$.cookie('username'))
{
alert("请先登录");
$("#writeIn").val("");
return;
}
$.post("http://127.0.0.1/saveSTR.php",{
user:$.cookie('username'),
str:$("#writeIn").val()
},function(data,status){
$("#writeIn").val("");
if(data)
{
alert("data");
}
});
}; </script>
</body>
</html>
注册的PHP代码
<?php
header('Access-Control-Allow-Origin:*');
$user=$_POST['user'];
$password=$_POST['password']; $conn=mysql_connect("127.0.0.1","root","root");
if(!$conn)
{
die (mysql_error());
} mysql_select_db('my_db',$conn);
if(mysql_query("INSERT INTO persons (user,password) VALUES ('$user','$password')"))
{
die ($user);
}else{
echo mysql_error();
}
mysql_close($conn);
?>
发送信息的后台代码
<?php
header('Access-Control-Allow-Origin:*');
$max=$_POST['max'];
$array=array();
$conn=mysql_connect("127.0.0.1","root","root");
if(!$conn)
{
die (mysql_error());
}
mysql_select_db('my_db',$conn);
mysql_query("SELECT * FROM context\n"
. " ORDER BY id ASC LIMIT 0, 30 ");
$sql=mysql_query("select * from context WHERE id>$max");
while($row=mysql_fetch_array($sql))
{
$array[]=array('user'=>($row['user']),'date'=>$row['reg_date'],'str'=>($row['str']),'id'=>$row['id']);
}
$json_obj = json_encode($array);
echo ($json_obj);
mysql_close($conn);
?>
登陆，还有上传用户发送的文字代码也差不多，就不放了。
小项目：聊天室 （jQuery，PHP，MySQL）的更多相关文章
- 微信小程序--聊天室小程序(云开发)
微信小程序 -- 聊天室小程序(云开发) 从微信小程序开发社区更新watch接口之后,一直在构思这个项目.项目已经完成很久,但是一直都没有空写一篇博客记录展示一下. 开源地址 wx-cloud-im: ...
- [Java小程序]聊天室——Socket和ServerSocket的使用
这段小代码是因为担任Java助教给刚学习Java的本科大二的小学弟小学妹们指导,他们的实验作业就是编写一个Java聊天室客户端和服务器,为了避免出纰漏,自己事先写了一下. 客户端Ui代码: packa ...
- 用c写一个小的聊天室程序
1.聊天室程序——客户端 客户端我也用了select进行I/O复用,同时监控是否有来自socket的消息和标准输入,近似可以完成对键盘的中断使用. 其中select的监控里,STDOUT和STDIN是 ...
- Linux聊天室项目 -- ChatRome（select实现）
序 项目简介:采用I/O复用技术select实现socket通信,采用多线程负责每个客户操作处理,完成Linux下的多客户聊天室! OS:Ubuntu 15.04 IDE:vim gcc make D ...
- 基于LINUX的多功能聊天室
原文:基于LINUX的多功能聊天室 基于LINUX的多功能聊天室 其实这个项目在我电脑已经躺了多时,最初写完项目规划后,我就认认真真地去实现了它,后来拿着这个项目区参加了面试,同样面试官也拿这个项目来 ...
- FastAPI（56）- 使用 Websocket 打造一个迷你聊天室
背景 在实际项目中,可能会通过前端框架使用 WebSocket 和后端进行通信 这里就来详细讲解下 FastAPI 是如何操作 WebSocket 的 模拟 WebSocket 客户端 #!usr/b ...
- Java之聊天室系统设计一
任务: 先上实现效果图: 登陆界面: index.jsp: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- Django项目--web聊天室
需求 做一个web聊天室,主要练习前端ajax与后台的交互: 一对一聊天和群组聊天 添加用户为好友 搜索并添加群组 管理员可以审批用户加群请求,群管理员可以有多个,群管理员可以删除,添加禁言群友 与聊 ...
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
随机推荐
- js中的稀疏数组和密集数组
原文地址: http://www.2ality.com/2012/06/dense-arrays.html 一般来说JavaScript中的数组都是稀疏的,也就是说数组中的元素与元素之间是由空格的,因 ...
- Linux内核打印时间戳
较为简单可行的方式是通过PrintkTime功能为启动过程的所有内核信息增加时间戳,便于汇总分析.PrintkTime最早为CELF所提供的一个内核补丁,在后来的Kernel 2.6.11版本中正式纳 ...
- 聊聊C#与冲顶大会
一.由跳一跳开始 2018年初,跳一跳小程序着实火了一把.一时间,各种攻略,甚至辅助工具也应运而生.作为.net阵营的一员,园友的这篇http://www.cnblogs.com/bqh10086/p ...
- 【JavaScript流程控制语句的用法及练习】
1.做判断(if语句) if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件){ 条件成立时执行代码 } 例子:1.假设你应聘web前端技术开发岗位,如果你会HTML技术,你 ...
- fb27a9aeaf604597826718c467cc9f4f 为什么我老收到这个
fb27a9aeaf604597826718c467cc9f4f 为什么我老收到这个fb27a9aeaf604597826718c467cc9f4f 为什么我老收到这个fb27a9aeaf60 ...
- pm am 12小时格式化
<div id="m_tiem">PM 14:26</div> tiem('m_tiem'); //pm am 12小时格式化function tiem(i ...
- ImportError: No module named 'BaseHTTPServer'：解决方案
利用python写了一小段代码,里面使用到了Python标准库的BaseHTTPServer来构建一个基础HTTP服务器: 1 #-*- coding:utf-8 -*- 2 import http. ...
- IOS safari浏览器登陆时Cookie无法保存的问题
近期完成了一个儿童的测评项目,测试到最后的时候发现在ipad mini上登陆成功之后无法跳转页面,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没问题,只能一个一个的调试,结果发现设备的 ...
- HDU 1874 畅通工程续（模板题——Floyd算法）
题目: 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰 ...
- Solr学习笔记1(V7.2)
下载压缩包http://archive.apache.org/dist/lucene/,解压后放到某一盘符下面 Windows下启动命令 :\solr-7.2.0>bin\solr.cmd st ...