纯手写 简单留言板小实例 php + mysql + angular

版权声明：本文为博主原创文章，未经博主允许不得转载。【合作联系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)">&nbsp;</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>