基于JavaWeb的微博系统设计与实现

墨蓝 2024-04-06 10:18 41阅读 0赞

[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86783538  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86783538  
微博系统  
目录  
一、设计要求： 1  
Homepage 1  
三、文件结构： 2  
四、各部分具体实现： 3  
1.登陆注册模块： 实现功能： 3  
2.动态模块与账号的注销退出： 6  
//单个动态处理函数 7  
else 9  
3.搜索好友模块： 9  
用 9  
用户 户 9  
的 9  
好友 9  
好 9  
友的好 9  
友 将此中不是用 9  
五、数据库的设计： 10  
六、结果截图： 11  
1.登陆注册界面： 11  
2.动态加载界面： 12  
3.查看更多功能及评论/回复： 12  
4.按账号搜索好友： 12  
5.好友推荐： 13  
七、总结： 13  
四、各部分具体实现：  
1.登陆注册模块： 实现功能：  
用户注册，注册的过程中加入了表单验证，验证规则为:  
(1).手机号必须为 11 位数字且必须是以 13/14/15/17/18/19 开头，因为 16 为服务号。 (2).学号为 11 位数字。  
(3).密码长度必须大于 6.  
用户登录时通过 Cookie 记录用户的登陆信息，下次登陆时无需再次输入。  
Canvas 画出西电眺望塔。  
主要代码：  
a.注册账号时的表单验证：  
$(function () \{  
$(‘\#logform’).bootstrapValidator(\{  
message: “This value is not valid”,  
feedbackIcons: \{//定义了检验通过与未通过时采用的图标  
valid: ‘glyphicon glyphicon-ok’,  
invalid: ‘glyphicon glyphicon-remove’,  
validating: ‘glyphicon glyphicon-refresh’  
\},

fields: 
                { 
                    tel:{ 
                        message:"The tel is not valid", 
                        validators:{ 
                            notEmpty:{ 
                              message:"手机号不能为空" 
                            }, 
                            stringLength:{ 
                                min:11, 
                                max:11, 
                                message:"手机号必须为 11 位" 
                            }, 
                            regexp:{ 
                                regexp:/^1[34578]\d{9}$/, 
                                message:"手机号错误" 
                            } 
                            //手机号已经注册过未写 
                        } 
                    }, 
                    StuId:{ 
                        message:"The StuId is not valid", 
                        validators:{ 
                                notEmpty:{ 
                                    message:"学号不能为空" 
                                }, 
            stringLength:{ 
                                min:11, 
                                max:11, 
                                message:"学号必须为 11 位" 
                                }, 
            regexp:{ 
               regexp:/\d{11}/, 
               message:"学号不正确" 
               } 
                   } 
                    }, 
                    password1:{ 
                        message:"The value is not valid", 
                        validators: { 
                            notEmpty: { 
                                message: "密码不能为空" 
                            }, 
                            stringLength: { 
    
                                min: 6, 
                                max: 20, 
                                message: "密码长度必须在 6~20 之间" 
                            } 
                        } 
                    }, 
                    password2:{ 
                        message:"The value is not valid", 
                        validators:{ 
                                    notEmpty:{ 
                                        message:"密码不能为空" 
                                    }, 
                                    identical:{ 
                                        field:'password1', 
                                        message:"两次密码输入不一致" 
                                    } 
                        } 
                    } 
                } 
    });

b.Cookie 记录用户登录信息函数：  
Cookie 的生存周期为 7 天，路径为网站根目录 path = “/”.  
函数功能为，当用户进入 index 界面后，本文转载自http://www.biyezuopin.vip/onews.asp?id=15032程序先判断上次登录时候是否设置 Cookie，并判断是否到期，若有 Cookie 并没到期，则将上次设置到  
Cookie 中的用户名和密码回填到表单中，用户选择是否记住密码，若选择记住，则此次登陆后，Cookie 中的内容被延至 7 天后到期，若未选中则 Cookie 被清空。  
$(function () \{  
//Cookie 模块

if(KaTeX parse error: Expected 'EOF', got '&' at position 29: …nname')!='null'&̲&.cookie(‘logincode’)!=‘null’&&KaTeX parse error: Expected 'EOF', got '&' at position 21: …ie('loginname')&̲&.cookie(‘l  
ogincode’))//判断 Cookie 是否有效 若有效则显示出来  
\{  
KaTeX parse error: Expected 'EOF', got '\#' at position 3: ('\#̲loginname').val….cookie(‘loginname’));  
KaTeX parse error: Expected 'EOF', got '\#' at position 3: ('\#̲logincode').val….cookie(‘logincode’));  
\}

$('#loginbut').click(function () { //登陆模块 发送 AJAX 请求到 loginroute 处理路由  （界面始终不跳转） 
      var loginname=$('#loginname').val(); 
      var logincode =$('#logincode').val(); 
      var data={"loginname":loginname,"logincode":logincode}; 
        $.ajax({ 
    
            url:"http://localhost:3000/loginroute", 
            data:data, 
            success:function (data,stau) { 
                if(stau == 'success') 
                { 
                    if($("#remember").is(":checked")==true)//若选中设置 cookie 
                    { 
                        $.cookie('loginname',loginname,{path:"/",expires:7}); 
                        $.cookie('logincode',logincode,{path:"/",expires:7}); 
                    } 
                    else//若没选中 清除 cookie 
                    { 
                        $.cookie('loginname',null); 
                        $.cookie('logincode',null); 
                    } 
                    if(data.search('false')!=-1) 
                    { 
                        alert("用户名或密码错误^_^false"); 
                        return; 
                    } 
                    if(data.search('StuId')) 
                    {

window.location.href=“http://localhost:3000/Homepage?”+“loginname=”+loginname+“&logincode=”+loginco de;  
return;  
\}  
\}  
else  
\{  
alert(stau);  
\}  
\},  
error:function () \{  
alert(“用户名或密码错误\_”);  
\},  
\})  
\});

2.动态模块与账号的注销退出：  
实现功能：  
个人信息编辑及头像上传。发布文字动态。

发布图片和文字动态。评论及回复模块。  
加载用户及其关注的好友当天发布过的动态及评论。 点击查看更多，可查看用户之前发布过的动态及评论。  
主要代码解释：  
a.加载用户发布的动态，用户登录进入后，通过 ajax 请求服务器返回当天的动态，并通过动态创建表单展示到页面。  
//加载当天动态  
function load\_dongtai(data)  
\{  
$.ajax(\{  
url:“/dongtai”,  
data:data,  
success:function (dat,name)  
\{  
if(name=“success”)  
\{  
var dat = JSON.parse(dat);  
//console.log(dat);  
var len = dat.length;  
//console.log(len);  
for(var i = len-1;i>=0;i–)  
\{  
dealOneDongtai(dat\[i\]);  
\}  
\}else  
\{  
console.log(name);  
\}  
\}  
\});  
\}  
//通过动态创建表单，处理一条动态函数。  
//单个动态处理函数  
function dealOneDongtai(data)  
\{  
//console.log(data);  
var showDT = $(‘\#showDT’);  
var h2 = $(‘

### ’+data\[‘xuehao’\]+‘: ###

’);  
showDT.append(h2);  
if(data\[‘imageinfo’\])  
\{

var img = $('<img src="'+ data['imageinfo']+'"100px" />'); 
        showDT.append(img); 
    } 
    if(data['dongtai']) 
    { 
        var dongtai = $('<p style="font-size: 18px">'+data['dongtai']+'</p>'); 
        showDT.append(dongtai); 
    } 
       var date = new Date(data['shijian']); 
       var shijian = $('<p style="font- size:15pt">'+date.getUTCFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate()+'</p>'); 
       showDT.append(shijian); 
        var Pbtn = $('<button class="ping_lunclass" onclick="pinlun_show(this)" id='+data['flag']+'>评论

‘); //评论按钮  
showDT.append(Pbtn);  
var pin\_input = KaTeX parse error: Expected '\}', got 'EOF' at end of input: … showDT.append((’

--------------------

‘));  
var tpinglun = pinglun.split(’\#‘);  
var pinglen = tpinglun.length;  
for(var i = 1;i<pinglen;i++)  
\{  
showDT.append( KaTeX parse error: Expected 'EOF', got '\#' at position 73: …lass" id="'+i+"\#̲"+data\['flag'\]+…(’

--------------------

'));  
\}

![在这里插入图片描述][113c2814934748d194e265af9a9a1acf.png_pic_center]  
![在这里插入图片描述][6b444b93c75d41988e881c3186d4330b.png_pic_center]  
![在这里插入图片描述][a64c7d126bb44c32a3f1bbedeae4372b.png_pic_center]  
![在这里插入图片描述][e8974c28309242cab7dabd75739848b7.png_pic_center]  
![在这里插入图片描述][7e0212ecdf874c7fa97fe6e09a4d88a0.png_pic_center]  
![在这里插入图片描述][f57975962ddf480c99315f9491fb1932.png_pic_center]  
![在这里插入图片描述][7a5a70a6c4b4457c98a551fa832d3d16.png_pic_center]  
![在这里插入图片描述][d5814801f2c04646a5f4198f2d596751.png_pic_center]  
![在这里插入图片描述][04d6912b61084754895643e5a6fc53a1.png_pic_center]  
![在这里插入图片描述][51bbedbfc287454a9ad589845abeb98b.png_pic_center]  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86783538  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86783538

[Link 1]: https://download.csdn.net/download/sheziqiong/86783538
[113c2814934748d194e265af9a9a1acf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7e5cb6464ea541cebfc658a522e6bf3d.png
[6b444b93c75d41988e881c3186d4330b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/611b1f615df744918ca7edd867fa0a52.png
[a64c7d126bb44c32a3f1bbedeae4372b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a120a254281d402db0e950a96cbd36c1.png
[e8974c28309242cab7dabd75739848b7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/79ddfa99b184456a9ff35c44067dc467.png
[7e0212ecdf874c7fa97fe6e09a4d88a0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1d1902b11d5241df8118a5ab1082296b.png
[f57975962ddf480c99315f9491fb1932.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/838d6cc138db4da08a1c7e2e0920d5af.png
[7a5a70a6c4b4457c98a551fa832d3d16.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/067fc74bd5104679b8c8661971c10d62.png
[d5814801f2c04646a5f4198f2d596751.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ecd8ec6e09ae4bfda60c75ef2749075f.png
[04d6912b61084754895643e5a6fc53a1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4fdfce0d7a274cfc8a67c0e8b0a2716e.png
[51bbedbfc287454a9ad589845abeb98b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/10f6ce0682af4e18a11a6601698eb979.png