记录学习的第一阶段
自从我开始学习Web一个月以来,照着视频课程写过不少的练习,所以当我粗略的学习了Web三件套和php+Mysql后。我决定要用自己的想法来实现留言板这个练习,来巩固自己的学习。毕竟纸上得来终觉浅,绝知此事要躬行,实践才是最好的老师。(网上留言板编写教程很多,建议还是先靠自己的想法来实现)虽然这个案例实现的功能不多,但是编写的过程还是遇到了挺多的问题,特别是接口的编写。(第一次写接口的时候真的是特别懵)。在这里也很感谢我同学对我的指引,让我在学习的路少走了很多弯路,感谢感谢感谢~。本来想把功能完善的更好一点(因为急着进入下一阶段的学习,所以实现了简单的留言功能之后就停下来了,以后一定回头把它完善好)
- 功能实现
-
- 提交留言,通过php把留言写入Mysql数据库,再通过AJAX从数据库查询最后一条留言显示出来实现局部刷新。
-
- 页面初始化,通过php查询Mysql数据库里的留言,全部显示出来。
-
- 心动画的实现(心会跳动)
效果图:
html代码:
<!DOCTYPE html>
<html lang="en">
<style>
div#dem p{
margin-top: 10px;
margin-bottom: 10px;
font-size: 24px;
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lyb.css?v=12">
<script>//按钮按下执行的脚本
function newmessage(){
var x =document.getElementById("srname").value;
var y =document.getElementById("srmessage").value;
if(x==""){
alert("必须填写姓名!");
return false;
}
else if (y == "") {
alert("必须填写留言!");
return false;
}
else{
document.getElementById("srname").value="";//提交以后清空内容
document.getElementById("srmessage").value="";//提交以后清空内容
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){ //先向数据库添加数据,当服务器响应则查询最后一个留言
var xhttp = new XMLHttpRequest();{
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { //向服务器响应则查询最后一个留言
var box=document.getElementById("dem");
var str=this.responseText;
var strArray=str.split("}{");//以}{分割字段
for(var i=0;i<strArray.length;i++){
if(i=strArray.length-1){
strArray[i]=strArray[i].replace("{","");//去掉字符串里的某个字符
strArray[i]=strArray[i].replace("}","");
var str=strArray[i];
var obj=document.createElement("p");
obj.innerText=str;
document.getElementById("dem").appendChild(obj);
}
}
}
}
};
xhttp.open("post", "/chaxun.php", true);//向数据库添加数据请求
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交,以头文件形式?
xhttp.send();
}
}
xhttp.open("POST", "/xxx.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交,以头文件形式?
xhttp.send(JSON.stringify({
"name" :x,
"message" :y
}));
$("#name").val("");
}
}
</script>
<script> //界面初始化执行脚本,查询留言并显示出来。
window.onload=function(){
var xhttp = new XMLHttpRequest();{
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var box=document.getElementById("dem");
var str=this.responseText;
var strArray=str.split("}{");//以}{分割字段
for(var i=0;i<strArray.length;i++){
strArray[i]=strArray[i].replace("{","");//去掉字符串里的某个字符
strArray[i]=strArray[i].replace("}","");
var str=strArray[i];
var obj=document.createElement("p");
obj.innerText=str;
document.getElementById("dem").appendChild(obj);
}
}
}
};
xhttp.open("post", "/chaxun.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交,以头文件形式?
xhttp.send();
}
</script>
</head>
<body>
<div id="body">
<header>
<p class="headerP">十三毕业留言</p>
<button class="dl">管理员登录</button>
</header>
<input id="srname" class="inputname" type="text" name="name" placeholder="请输入你的姓名(必填)">
<textarea id="srmessage" class="inputtextarea" name="newmessage" placeholder="请输入你想写的留言(必填)"></textarea>
<button class="buttontj" onclick="newmessage()">提交留言</button>
<span class="heart"><!--用来设置心形动画的实现-->
<span class="heart-left"></span><span class="heart-right"></span>
</span>
<div id="dem"></div>
</div>
</body>
</html>
css样式:
*{ margin: 0;padding: 0;}
p.headerP{
line-height: 50px;
display: inline-block;
color: white;
margin-left:10px;
font-size: 18px;
}
div#body{
margin-left: 20%;
margin-right: 20%;
}
body{
background:url(picture/320539.jpg);
background-size: 1920px 1080px;
background-repeat:repeat-y;
position: relative;
}
header{
height: 50px;
background-color: #32393F;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
border-radius: 6px;
margin-top: 16px;
}
button.dl{
width:100px ;
text-align: center;
background-color:#4facfe;
font-size: 16px;
color: white;
border-radius: 13px;
height: 40px;
margin-top: 5px;
margin-right: 5px;
border: white;
}
input.inputname{
height: 30px;
width:99.8%;
font-size: 18px;
border-radius: 10px;
outline: none;
border: white;
}
textarea.inputtextarea{
width: 100%;
height: 120px;
font-size: 22px;
margin-top: 10px;
border-radius: 13px;
outline: none;
border: white;
}
button.buttontj{
width: 100%;
height: 40px;
border: white;
background-color: #027BFE;
border-radius: 18px;
color: white;
font-size: 20px;
margin-top: 10px;
margin-bottom: 12px;
}
span{
display: inline-block;
}
.heart-left,.heart-right{ /*画出基本样式*/
width: 25px;height: 40px;
background-color: red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.heart-left{ /*通过旋转变为心形*/
transform: rotateZ(-45deg);
}
.heart-right{ /*通过旋转变为心形*/
transform: translateX(-14px) rotateZ(45deg);
}
@keyframes xin{
30%{transform: scale(1.3);}
100%{transform: scale(1);}
}
.heart{
animation: xin 1.5s infinite;
margin-left: 10px;
}
php程序:
<html>
<body>
<?php
$a=file_get_contents ( 'php://input' );
$link=mysqli_connect("localhost","root","123456");
$db_selectd=mysqli_select_db($link,"lzm");
$query="insert into t1(info) values('$a')";
mysqli_query($link,$query);
?>
</body>
</html>
<?php
$link=mysqli_connect("localhost","root","123456");
$db_selectd=mysqli_select_db($link,"lzm");
$query="select*from t1 order by into desc limit 1";
var_dump(mysqli_query($link,$query));
?>
代码全部在这里了,喜欢的点赞关注码走吧。(其中或多或少可能会有一点bug,新人勿喷)