版权声明:本文为博主原创文章,未经博主允许不得转载。【合作联系QQ1668681286】 https://blog.csdn.net/qq_33036361/article/details/81909716
数据库 weibo
DROP TABLE IF EXISTS `msgs`;
CREATE TABLE `msgs` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`userid` int(11) unsigned DEFAULT NULL,
`msg` text,
`createtime` int(10) unsigned DEFAULT NULL,
`loves` int(11) unsigned DEFAULT '0',
`hates` int(11) unsigned DEFAULT '0',
`isdel` bit(1) DEFAULT b'0',
PRIMARY KEY (`Id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT INTO `msgs` VALUES (10,1,'测试、。',1534815070,0,0,b'0'),(32,1,'用户:ken 等级:5',1534839205,0,0,b'0'),(33,1,'用户:ken 等级:5<a href=\"http://www.2ml.club\">2ml</a>',1534839236,0,0,b'0');
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL DEFAULT '',
`pwd` varchar(32) DEFAULT NULL,
`age` tinyint(3) unsigned DEFAULT NULL,
`level` tinyint(3) unsigned DEFAULT NULL,
`birthday` int(10) unsigned DEFAULT '1500000000',
`flows` int(11) unsigned DEFAULT '0',
`avartar` varchar(255) DEFAULT NULL,
PRIMARY KEY (`Id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
INSERT INTO `users` VALUES (1,'ken','111',25,5,1500000000,1010,NULL),(2,'john','222',21,1,1500000000,0,NULL);
后端 api.php
<?php
$mysqli=new mysqli('localhost','root','root','weibo');//打开链接
session_start();
class User{
public $name;
public $age;
public $level;
public $birthday;
}
if(isset($_REQUEST['act']))
{
$act=$_REQUEST['act'];
switch($act){
case "dologin": //登录
if(isset($_SESSION['user']))
{
echo json_encode(array("code"=>1,"state"=>"success","user"=>$_SESSION['user']));
}
else{
$stmt = $mysqli->prepare("SELECT * FROM users WHERE `name`= ? and pwd = ?");
$stmt->bind_param('ss', $username,$pwd);
$username=$_REQUEST['username'];
$pwd=$_REQUEST['pwd'];
$stmt->execute();
$res = $stmt->get_result();
$row = $res->fetch_assoc();
if($row){
$_SESSION['user']=$row;
echo json_encode(array("code"=>1,"state"=>"success","user"=>$row));
}
else{
echo json_encode(array("code"=>0,"state"=>"fail","username"=>$username,"pwd"=>$pwd));
}
mysqli_free_result($res);//释放资源
}
break;
case "addmsg"://发送信息
if(isset($_SESSION['user']))
{
$u=$_SESSION['user'];
$a=$u['Id'];
if(isset($_REQUEST['msg']))
{
$b=$_REQUEST['msg'];
$c=time();
$stmt = $mysqli->prepare("insert into msgs(userid,msg,createtime) value(?,?,?)");
$stmt->bind_param('isi',$a,$b,$c);
$stmt->execute();
$msgid=mysqli_insert_id($mysqli);
echo json_encode(array("code"=>1,"state"=>"success","msgid"=>$msgid,"createtime"=>$c));
}
else{
echo json_encode(array("code"=>0,"state"=>"fail"));
}
}
else{
echo json_encode(array("code"=>0,"state"=>"fail","msg"=>"you have no right to add msg!"));
}
break;
case "chklogin": //检查用户登录状态 code: 1已登录 , 0未登录
if(isset($_SESSION['user']))
{
echo json_encode(array("code"=>1,"msg"=>"success","user"=>$_SESSION['user']));
}
else{
echo json_encode(array("code"=>0,"msg"=>"not logined"));
}
break;
case "getmsgs"://读取信息 p 当前页码
$pagesize=10;
$page=1;
if(isset($_REQUEST['p']))
$page=intval($_REQUEST['p']);
$offset=($page-1)*$pagesize;
$sql="SELECT * FROM msgs ORDER BY id desc limit ".$offset.",".$pagesize;
$result=mysqli_query($mysqli,$sql);
// 获取数据
$rows=mysqli_fetch_all($result,MYSQLI_ASSOC);
$result2=mysqli_query($mysqli,"select count(*) as cc from msgs ");
$totalrecord=mysqli_fetch_assoc($result2);
if($rows)
echo json_encode(array("code"=>1,"state"=>"success","msgs"=>$rows,"totalrecord"=>intval($totalrecord["cc"])));
else
echo json_encode(array("code"=>0,"state"=>"fail"));
// 释放结果集
mysqli_free_result($result);
break;
case "op": //常用操作 op :1赞,2踩 ,3删除信息 ; msgid:信息编号 ; 返回 json : code (0失败 ,1成功) ,msg 操作结果说明
$op=0;
$msgid=0;
if(isset($_REQUEST['op']))
$op=intval($_REQUEST['op']);
if(isset($_REQUEST['msgid']))
$msgid=intval($_REQUEST['msgid']);
if($op>0&&$msgid>0)
{
$sql='';
switch($op)
{
case 1:$sql="update msgs set loves=loves+1 where id=".$msgid;break;
case 2:$sql="update msgs set hates=hates+1 where id=".$msgid;break;
case 3:
if(isset($_SESSION['user']))
{
$u=$_SESSION['user'];
$sql="delete from msgs where id=".$msgid." and userid=".$u['Id'];
}
else{
echo json_encode(array("code"=>0,"state"=>"fail","msg"=>"you have no right to del msg!"));
}
break;
}
if(!empty($sql))
{
$result=mysqli_query($mysqli,$sql);
if($result)
echo json_encode(array("code"=>1,"state"=>"success","msg"=>"op success!"));
else
echo json_encode(array("code"=>1,"state"=>"success","msg"=>"nothing changed!"));
}
else{
echo json_encode(array("code"=>0,"state"=>"fail","msg"=>"unknow op parameter"));
}
}
else{
echo json_encode(array("code"=>0,"state"=>"fail","msg"=>"unknow op parameter"));
}
break;
default:
echo '{"msg":"no such action found!"}';
}
}
else{
echo '{"msg":"no action argument!"}';
}
?>
前台 weibo.html
<!DOCTYPE html>
<html ng-app="weibo">
<head>
<meta charset="utf-8">
<title></title>
<script src="angular.js" charset="utf-8"></script>
<style type="text/css">
body{min-height:800px;}
.login{width:400px;height:300px;margin:auto;border:1px solid #ccc;border-radius:8px;position: absolute; margin:auto; left:0; top:0; right:0; bottom:0;}
.weibo{width:880px;left:0;right:0;position:absolute;margin:auto;padding:10px;}
.weibo .msgbox,.weibo .msglist{border:1px solid #ccc;border-radius:8px;margin-bottom:20px;padding:10px;min-height:100px;}
.msglist ul{margin:0;padding:0;}
.msglist li{list-style-type:none;margin:0;padding:0;border-bottom:1px solid #ccc;width:100%;}
.msglist .op{height:30px;position:relative;}
.msglist .op span{padding-left:30px; background-image:url(op.png); background-repeat:no-repeat;display:inline-block;line-height: 30px;cursor:pointer;margin-right:10px;}
span.loves{background-position:0 -30px;}
span.hates{background-position:0 -90px;}
span.del{background-position:0 -150px;}
span.t{background-position:0 -210px;color:gray;}
span.loves:hover{background-position:0 0px;}
span.hates:hover{background-position:0 -60px;}
span.del:hover{background-position:0 -120px;}
span.t:hover{background-position:0 -180px;}
.pages{clear:both;margin-top:10px;}
.pages a{padding:4px 8px;margin:0 10px;border:1px solid #ccc;background-color:#eee;cursor:pointer;}
.pages a.cur,.pages a:hover,.sendbtn:hover{background-color:#1296db;color:white;}
textarea{width:100%;height:100px;max-width:100%;}
.clear{clear:both;}
.sendbtn{float:right;font-size:16px;padding:4px 15px;cursor:pointer;}
.userinfo{min-height:30px;}
</style>
<script>
const pagesize=10;//每页显示记录数;
let mod=angular.module('weibo',[]);
mod.controller('main',function($scope,$http){
$scope.username='';
$scope.pwd='';
$scope.user={};//用户信息
$scope.msgs=[];//消息列表
$scope.msg_len=0;//信息总条数
$scope.msg_pages=1;//页码数
$scope.currpage=1;
$scope.msg_pageslist=[];
$scope.logined=false;
$scope.loading=true;
//check login state;
$http.get(`api.php?act=chklogin`).then(res=>{
$scope.loading=false;
if(res.data.code==1)
{
$scope.user=res.data.user;
$scope.logined=true;
}
},err=>{});
//login submit
$scope.dologin=function(username,pwd){
$http.get(`api.php?act=dologin&username=${encodeURIComponent(username)}&pwd=${encodeURIComponent(pwd)}`).then(res=>{
console.log(res);
if(res.data.code==1)
{
$scope.user=res.data.user;
$scope.logined=true;
}
},err=>{alert('login fail!!!');});
};
//发送信息
$scope.addmsg=function(id,msg){
if(msg.length<10)
alert('禁止灌水!!!');
else
{
$http.get(`api.php?act=addmsg&userid=${id}&msg=${encodeURIComponent(msg)}`).then(res=>{
console.log("add msg :");
console.log(res);
if(res.data.code==1)
{
console.log("add msg :"+msg);
getmsgs($scope.currpage);
//$scope.msgs.unshift({Id:res.data.msgid,msg:msg,loves:0,hates:0,createtime:res.data.createtime});
}
},err=>{alert('login fail!!!');});
}
};
// get messages ; param: p for page;
function getmsgs(p){
$http.get(`api.php?act=getmsgs&p=${parseInt(p)}`).then(res=>{
console.log("getmsg:");
console.log(res);
if(res.data.code==1)
{
$scope.msgs=res.data.msgs;
$scope.msg_len=res.data.totalrecord;
$scope.msg_pages=parseInt(res.data.totalrecord/pagesize)+(res.data.totalrecord%pagesize==0?0:1);
$scope.msg_pageslist=[];
for(let i=0;i<$scope.msg_pages;i++)
$scope.msg_pageslist.push(i+1);
console.log(`records:${res.data.totalrecord} pages:${$scope.msg_pages} pagelist:`);
console.log($scope.msg_pageslist);
}
},err=>{});
};
getmsgs(1);
$scope.setPage=function(page){
$scope.currpage=page;
getmsgs(page);
}
// do like/hate/del
$scope.op=function(optype,item){
$http.get(`api.php?act=op&op=${optype}&msgid=${item.Id}`).then(res=>{
console.log(res);
if(res.data.code==1)
{
switch(optype)
{
case 1:item.loves++; break; //like
case 2:item.hates++; break; //hate
case 3: getmsgs($scope.currpage); break; //del
}
}
},err=>{});
};
});
/*
*/
</script>
</head>
<body ng-controller='main' ng-init="msg='';">
<div class="loading" ng-if="loading">
加载中。。。
</div>
<div class='login' ng-if="!logined&&!loading">
<input type="text" ng-model="username" />
<input type="password" ng-model="pwd" />
<input type='button' ng-click="dologin(username,pwd)" value="登录"/>
</div>
<div class='weibo' ng-if="logined&&!loading">
<div class='msgbox'>
<textarea ng-model="msg" placeholder="说点什么吧"></textarea>
<div class="clear"></div>
<div class="userinfo">
<span class='user'>用户:{{user.name}} 等级:{{user.level}}</span>
<input type="button" ng-click="addmsg(user.Id,msg)" class='sendbtn' value="发送" />
</div>
</div>
<div class='msglist'>
<div class='pages'>
<a ng-repeat="item in msg_pageslist" class="{{item==currpage?'cur':''}}" ng-click="setPage(item)">{{item}}</a>
</div>
<ul>
<li ng-repeat="item in msgs">
<h4>{{item.msg}}</h4>
<div class='op'>
<span class='t'>{{item.createtime*1000|date:"y-MM-dd HH:mm:ss"}}</span> <span class='loves' ng-click="op(1,item)">{{item.loves}}</span><span class='hates' ng-click="op(2,item)">{{item.hates}}</span><span class='del' ng-click="op(3,item)"> </span>
</div>
</li>
</ul>
<div class='pages'>
<a ng-repeat="item in msg_pageslist" class="{{item==currpage?'cur':''}}" ng-click="setPage(item)">{{item}}</a>
</div>
</div>
</div>
</body>
</html>