JAVA模拟微博网站

JAVA模拟微博网站

1.（1）.建立一个数据库表，存放贴子基本数据：bbs

图1
（2）.建立一个数据库表，存放贴子的回复数据：bbsrep

图2

2.完成帖子的发布

（1）.用户登陆

图3
（2）.登陆后弹窗

图4
（3）.跳转到微博首页

图5

（4）.点击“点击分享新鲜事”，发布新微博。

图6
(5).点击“发布”，弹出“发布成功”提示。

图7
（6）.数据入库

图8

3.查看帖子，并对当前帖子回复

（1）.查看帖子

图9
（2）.点击“回复贴主”，对当前帖子进行回复。

图10
（3）.回复成功

图11
(4).跳转回当前帖子界面,查看帖子的回复

图12
（5）.对帖子的回复进行回复。

图13
（6）.弹窗提示回复成功

图14
（7）.跳转回帖子内容界面，可查看回复

图15
（8）.数据入库

图16

4.所有帖子标题展示

图17
5.根据关键字查找帖子
在“查找感兴趣的内容”中输入关键字“今天”，即可展现带有“今天”的内容。

图18
6.查看“我”发布的帖子
点击“我的微博”，即可查看登陆账号

图19

五、核心源代码

Js代码：

$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲bt1").bind("cli…(“#name”).val().trim();
var psw0=$(“#psw”).val().trim();
if(name0!=“” &&psw0!=“”){
//alert(name0);
$.ajax({
type:“post”,
url:“login”,
data:{“name”:name0,“psw”:psw0},
dateType:Text,
success:function(re){
alert(“登陆成功！”);
if(re==“2”) window.location.replace(“bbsindex.html”);//到论坛页面
if(re==“0”) window.location.replace(“sno.html”); //跳到注册界面
if(re==“1”) KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲psw").val("");(“#psw”).focus();
},
error:function(re2){ alert(“no”); }
})
}
else{
alert(“请输入完整的用户或密码!”)}
})

$("#tzfb").bind("click",function(){  //发布新贴子
window.location.replace("pubTz.html");
	})

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲fbTz").bind("cl…(“#form3”).attr(“action”);
var entype0=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲form3").attr("e…(“#form3”)[0]);// 这里只是一个文件，如果是多个文件，要修改
$.ajax({
type:“post”,
url:url0,
cache:false,
processData:false,//需设置为false。因为data值是FormData对象，不需要对数据做处理
contentType:false,//需设置为false。因为是FormData对象，且已经声明了属性enctype=“multipart/form-data”
data:data0,
dataType:“Json”,
success:function(re)
{
alert(“发布成功！”);
}
})
})

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲findwb").bind("…(“#findcontent”).val();
$.ajax({
type:“post”,
url:“findwb”,
data:{“findcontent”:findcontent},
dataType:“json”,
success:function(re1){
var re1 = JSON.stringify(re1);
//alert(JSON.stringify(re1));
//alert(re1);
ajaxDivTab3(“div1”,re1);
},
error:function(re2){ alert(“no1”); }
})
})

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲mytz").bind("cl…(“#p1”).val();
// var name0=$(“#p1”).val().trim();
//alert(“39033”);
$.ajax({
type:“post”,
url:“mytz”,
data:{“xx”:“”},
dataType:“json”,
success:function(re1){
var re1 = JSON.stringify(re1);
//alert(JSON.stringify(re1));
alert(re1);
ajaxDivTab3(“div1”,re1);
},
error:function(re2){ alert(“no1”); }
})
})

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲repTz").bind("c…(“#tzid”).val();
var repL=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲repL").val(); …(“#content”).val();
var fbDate=$(“#fbDate”).val();
$.ajax({
url:“repTz”,
data:{“tzid”:tzid,“repL”:repL,“content”:content,“fbDate”:fbDate},
dateType:Text, //只是需要返回发布成功标记就行，不用Json
type:“post”,//提交数据方式post/get
success:function(re)
{
//alert(re);
alert(“回复成功！”);
window.location.replace(“display.html?id=”+tzid);
}
})
})
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲repRepTz").bind…(“#tzid”).val();
var repL=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲repL").val(); …(“#replrepl”).val();
var content=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲content").val()…(“#fbDate”).val();
content=“回复:”+replrepl+“”+content;
$.ajax({
url:“repTz”, //与回复主贴一样的
data:{“tzid”:tzid,“repL”:repL,“content”:content,“fbDate”:fbDate},
dateType:Text, //只是需要返回发布成功标记就行，不用Json
type:“post”,//提交数据方式post/get
success:function(re)
{
alert(“回复成功！”);
window.location.replace(“display.html?id=”+tzid);
}
})
})
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲submitBt2").bin…(“#form2”).attr(“action”);
var entype0=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲form2").attr("e…(“#form2”).serialize(); 带文件的表单不能这样序列化了，因是流
alert(url0);
var data0=new FormData($(“#form2”)[0]);// 这里只是一个文件，如果是多个文件，要修改
$.ajax({
type:“post”,
url:url0,
cache:false,
processData:false,//需设置为false。因为data值是FormData对象，不需要对数据做处理
contentType:false,//需设置为false。因为是FormData对象，且已经声明了属性enctype=“multipart/form-data”
data:data0,
dataType:“Json”,
success:function(re)
{ alert(“注册成功！”);
//这个解析大家还是 把它函数方法化，如果返回是单一jsonobject或jsonArray分别定义不同函数来处理它，甚至直接渲染到HTML容器类的控件中去
//自动解析出每一个参数项
// var keys=Object.keys(re);
// var str1=“”;
// for(var j=0;j<keys.length;j++)
// str1=str1+keys[j]+“~”+re[keys[j]]+" ";
// alert(re[“no”]);
// alert(str1);
},
error:function(re)
{ alert(“NO 不成功”); }
})
})
})

function displayTz()
{ //var sessionxm=$.sessionStorage.get("xmS");//set(“key",值)可以赋值session//$(“#p1”).innerText(sessionxm);
$.ajax({
type:“post”,//提交数据方式post/get
url:“displayAllTz”,
data:{“xx”:“”},//随便给一个无法参数
dateType:“json”, //从后台向前台传数据时的格式json
success:function(re)
{
ajaxDivTab3(“div1”,re);
},
error:function(re)
{ alert(“no”);}

})

}
function getSession()
{
$.ajax({
type:“post”,//提交数据方式post/get
url:“getSession”,
data:{“xx”:“”},//随便给一个无法参数
dateType:“text”, //从后台向前台传数据时的格式json
success:function(re)
{
//alert(re);
$(“#p1”).text(re);
},
error:function(re)
{ //alert(“no”);
}
})
}
function getSession2(ElmId)
{ $.ajax({
type:“post”, url:“getSession”,
dateType:“text”, //返回来一个用户名，最还有权限
success:function(re)
{
alert(re);
$(“#”+ElmId).val(re);
}

})
}
function getSession3()
{$.ajax({
type:“post”, url:“getSession”,
dateType:“text”,
success:function(re)
{ KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲repL").val(re);….ajax({
type:“post”, url:“getSession”,
dateType:“text”,
success:function(re)
{ // alert(re);
$(“#repL”).val(re);
}
})
}
function relTzLoad()
{ var id=getQueryString(“id”);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲tzid").val(id);…(“#repL”).val(“李四”);
}
function relTzLoad2()
{ var id=getQueryString(“id”);
var name=getQueryString(“name”);//被回复人姓名
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲tzid").val(id);…(“#repL”).val(“李四”);//回复人，应该从session取得
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲replrepl").val(….type(re0));
//alert(re0);
var re1=$.parseJSON(re0);//测试一下返回的究竟是什么类型，如果是串，则转换jsonarray//alert($.type(re1));
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).empty();…(“

”);
// KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).append(t…(“

”+re1[row][keys0[col]]+“

”);
// $(“#”+div).append(td);
// if(row r-1) $(“.tr2”).addClass(“tdbott”);
// else $(“.tr2”).removeClass(“tdbott”);
// if(colc-1) $(“.tr2”).addClass(“tdright”);
// else $(“.tr2”).removeClass(“tdright”);
// //控制列宽
// KaTeX parse error: Expected 'EOF', got '}' at position 83: …后有效 // }̲ // var trend…(“

”);
// KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).append(t…(“”);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).append(t…(“”); tr0.appendTo(table1);
var keys0=Object.keys(re1[0])//得到有几个键(即一行有几个键列
var col10=keys0.length; //直接得到一个json对象里的键数(对应表格列数
for(var j=1;j<=col10-1;j++)
{ var td0= KaTeX parse error: Expected 'EOF', got '}' at position 73: …); }̲ va…(“”); trend0.appendTo(table1);

   	  for(var i=0;i<re1.length;i++)
   	  { var keys=Object.keys(re1[i])//得到有几个键
   	   var col1=keys.length; //直接得到一个json对象里的键数(对应表格列数
   	   	 var tr1=$("<tr>");
   	     tr1.appendTo(table1);     	  	 
   	  for(var j=1;j<=col1-1;j++)     	   
   	    { if(j==1) //第二列标题左对齐好看些
			var td=$("<td style='text-align: left;'>&nbsp;&nbsp;&nbsp;&nbsp;"+re1[i][keys[j]]+"</td>");
			else
			var td=$("<td style='text-align: center;'>&nbsp;&nbsp;&nbsp;&nbsp;"+re1[i][keys[j]]+"</td>");
   	     td.appendTo(tr1);
   	     }
   	    var trend=$("</tr>");
   	    trend.appendTo(table1);
   	  }
   	  $("#"+div).append("</table>");

}
function dispTzCon()
{ var id=getQueryString(“id”);//alert(id); //这就是HTML网页之间传递参数的接收办法之一
$.ajax({
type:“post”,
url:“dispTzcont”,
data:{“id”:id},
dateType:“json”,
success:function(re)
{ //alert(re);
ajaxdisplayTz(“div1”,re);
},
error:function(re)
{// alert(“no”);
}

})

}
function dispTzRep()
{ var id=getQueryString(“id”);//alert(id); //这就是HTML网页之间传递参数的接收办法之一
$.ajax({
type:“post”,
url:“dispTzRep”,
data:{“id”:id},
dateType:“json”,
success:function(re)
{ //alert(re);
ajaxdisplayRep(“div2”,re);
},
error:function(re)
{ //alert(“no”);
}

})

}

function ajaxdisplayTz(div,re0)
{
var re1=$.parseJSON(re0); //测试一下返回的究竟是什么类型，如果是串，则转换 jsonarray
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).empty();…(“

标题:”+ re1[0][keys0[1]]+"

“);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).append(t…(”

发布人:“+ re1[0][“作者”]+”  “+re1[0][“发布日期”]+”

id:“+re1[0][“id”]+”

“);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).append(t…(”

“);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).append(t…(”

内容:
      “+re1[0][keys0[2]]+”

“);
$(”#“+div).append(tdCont);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div3").append((”<a href=replTz.html?id=“+re1[0][“id”]+” style=‘color:red;’>回复贴主“))
}
function ajaxdisplayRep(div,re0)
{
var re1=$.parseJSON(re0); //测试一下返回的究竟是什么类型，如果是串，则转换 jsonarray
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).empty();…(”

<img src='“+ re1[i][“回复人头像”].toString().trim()+”'style=‘width:35px; height:35px; border-radius:50%;’/>“+ re1[i][“replier”]+”  “+re1[i][“date”]+”

赞:“+re1[i][“clickno”]+”     回复" +“

”);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲"+div).append(t…(“

      “+re1[i][“replycontent”]+”

”);
$(“#”+div).append(tdCont);
}

}

function getQueryString(name) { //以正则表达式去匹配URL传过来的参数，这个可模块化常用
var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);
var r = decodeURI(window.location.search).substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

Css代码：
Divtab1:

body {
background: url(“…/bj.jpg”) center;
background-size: 100% auto;
background-repeat: no-repeat;
}

#login-box {
border: 1px solid grey;
width: 30%;
text-align: center;
margin: 0 auto;
margin-top: 15%;
background: #00000080;
padding: 20px 50px;
}
h1 {
color: white;
}
/对username和password窗口进行修改/
.item input {
width: 200px;
border: 0; /* 首先将边界取消，方便下面修改下部边界宽度 /
border-bottom: 5px solid white; / 将下边界进行修改，显示出横线效果 /
font-size: 18px; / 将字体适当的变大加粗 /
background: #ffffff00; / 将输入框设置为透明 /
color: white; / 上面的文本颜色设置为白色，但是placeholder的颜色要单独设置 /
padding: 5px 10px;/ 为了placeholder的内容不是顶格显示，增加内部边界 /
}
/将添加的矢量图进行颜色和大小的设置/
#login-box .form .item i {
color: white;
font-size: 18px;
}
#bt1 {
border: 0; / 取消按钮的边界 /
width: 150px; / 设置合适的按钮的长和宽 /
height: 30px;
margin-top: 18px; / 设置合适的上部外框的宽度，增加与上面的password框的距离 /
font-size: 18px; / 修改按钮文字的大小 /
color: white; / 修改按钮上文字的颜色 /
border-radius: 25px;/ 将按钮的左右边框设置为圆弧 /
background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); / 为按钮增加渐变颜色 */
}

Divtab2:

div{
box-sizing: border-box;
width: 100%;
text-align: center; border: #ffffff 1px solid;
}
#top {
width: 100%;
height: 56px;
line-height: 56px;
font-family: 黑体;
font-size: xx-large;

}
#top-left{
width: 7%;
height: 53px;
float: left;
}
#top-right{
width: 30%;
height: 53px;
float: right;
}
#left{
width: 10%;
height: 1000px;
line-height: 104px;
float: left;
background-color: #eee9c2;
}
#right {
width: 10%;
height:1000px;
line-height: 104px;
float: right;
background-color: #eee9c2;
}
#middle{
width: 75%;
height: 1000px;
line-height: 104px;
margin:0 auto;

}

#bottom{
width: 100%;
height: 24px;
line-height: 24px;
font-family: 黑体;
clear: both;
}

#tzfb{
width: 120px;
height: 30px;
border: 1px solid #faf7f7;
border-radius: 10px;
background-image: linear-gradient(to right, #ffaa00 0%, #ff007f 100%);
}
#findcontent,#fbDate,#auth,#title{
width: 170px;
height: 30px;
border: 1px solid #faf7f7;
border-radius: 10px;
}
#findwb,#fbTz{
width: 50px;
height: 30px;
border: 1px solid #faf7f7;
border-radius: 10px;
background-image: linear-gradient(to right, #ffaa00 0%, #ffffc9 100%);
}

/----teacher—/
.table{
width:98%;
margin:0px auto;
/* background-color: #007FFF; */
}
.tr{
width: 100%;height: 30px;

}
.tr div{
width: 24%;
height: 100%;
float: left;
border-top:1px solid red; ;
border-left: 1px solid red;
text-align: center;
padding-top: 8px;
/* margin: 0px;padding: 0px; /
}
.tdright{border-right: 1px dotted red; }
.tdbott{border-bottom: 1px dotted red;}
.tr2{
height: 99%;
float: left;
border-top:1px solid red; ;
border-left: 1px solid red;
text-align: center;
padding-top: 4px;
/ margin: 0px;padding: 0px; /
}
/ 下面是一段table修改方法 */
table {
width: 90%;
background: #ccc;
margin: 10px auto;
border-collapse: collapse;/border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距/
}
th,td {
height: 25px;
line-height: 25px;
text-align: center;
border: 1px solid #acc;
}
th {
background: #eee;
font-weight: normal;
}
tr {
background: #fff;
}
tr:hover {
background: #cc0;
}
td a {
color: #06f;
text-decoration: none;
}
td a:hover {
color: #06f;
text-decoration: underline; }