基于Javaweb实现的微博系统

Leftme

发布日期: 2019-03-29 21:17:25 浏览量: 3818
评分:
star star star star star star star star star star
*转载请注明来自write-bug.com

一、设计要求

使用 Java Web 开发和实现一个微博系统 ,可参考新浪微博,要求具备微博的基本功能:

  • 注册、登录和注销等功能

  • 发布信息,如:文字、图片

  • 用户发言、留言功能

二、总体设计

三、文件结构

app.js 为入口文件,routes 为路由文件,views 为界面渲染文件,public 中存放着 网站用到的一些静态资源文件。运行过程为:npm start 开启服务器后,浏览器输 入 url,然后 node.js 在 app.js 中找到对应的路由接口,然后根据接口去 routes 中找到处理路由,接着根据 routes 中指定的渲染文件,去 views 找到对应的渲染文件进行渲染。

渲染文件如下:

Index.ejs 为网站入口的渲染文件,包含用户的登陆和注册。Error.ejs 为 404 出错界面。Homepage.ejs 为微博主界面,包括动态的加载、动态的发表、好友 列表的显示以及个人中心还有头像上传等。searchFriend.ejs 为好友搜索渲染文件, 包含按账号搜索和好友推荐。

四、各部分具体实现

4.1 登陆注册模块

4.1.1 实现功能

用户注册,注册的过程中加入了表单验证,验证规则为:

  • 手机号必须为 11 位数字且必须是以 13/14/15/17/18/19 开头,因为 16 为服务号

  • 学号为 11 位数字

  • 密码长度必须大于 6

用户登录时通过 Cookie 记录用户的登陆信息,下次登陆时无需再次输入。

Canvas 画出西电眺望塔。

4.1.2 主要代码

注册账号时的表单验证

  1. $(function () {
  2. $('#logform').bootstrapValidator({
  3. message: "This value is not valid",
  4. feedbackIcons: { // 定义了检验通过与未通过时采用的图标
  5. valid: 'glyphicon glyphicon-ok',
  6. invalid: 'glyphicon glyphicon-remove',
  7. validating: 'glyphicon glyphicon-refresh'
  8. },
  9. fields:
  10. {
  11. tel:{
  12. message:"The tel is not valid",
  13. validators:{
  14. notEmpty:{
  15. message:"手机号不能为空"
  16. },
  17. stringLength:{
  18. min:11,
  19. max:11,
  20. message:"手机号必须为 11 位"
  21. },
  22. regexp:{
  23. regexp:/^1[34578]\d{9}$/,
  24. message:"手机号错误"
  25. }
  26. // 手机号已经注册过未写
  27. }
  28. },
  29. StuId:{
  30. message:"The StuId is not valid",
  31. validators:{
  32. notEmpty:{
  33. message:"学号不能为空"
  34. },
  35. stringLength:{
  36. min:11,
  37. max:11,
  38. message:"学号必须为 11 位"
  39. },
  40. regexp:{
  41. regexp:/\d{11}/,
  42. message:"学号不正确"
  43. }
  44. }
  45. },
  46. password1:{
  47. message:"The value is not valid",
  48. validators: {
  49. notEmpty: {
  50. message: "密码不能为空"
  51. },
  52. stringLength: {
  53. min: 6,
  54. max: 20,
  55. message: "密码长度必须在 6~20 之间"
  56. }
  57. }
  58. },
  59. password2:{
  60. message:"The value is not valid",
  61. validators:{
  62. notEmpty:{
  63. message:"密码不能为空"
  64. },
  65. identical:{
  66. field:'password1',
  67. message:"两次密码输入不一致"
  68. }
  69. }
  70. }
  71. }
  72. });

Cookie 记录用户登录信息函数

Cookie 的生存周期为 7 天,路径为网站根目录 path = “/”. 函数功能为,当用户进入 index 界面后,程序先判断上次登录时候是否设置 Cookie,并判断是否到期,若有 Cookie 并没到期,则将上次设置到 Cookie 中的用户名和密码回填到表单中,用户选择是否记住密码,若选择记住,则此次登陆后,Cookie 中的内容被延至 7 天后到期,若未选中则 Cookie 被清空。

  1. $(function () {
  2. //Cookie 模块
  3. if($.cookie('loginname')!='null'&&$.cookie('logincode')!='null'&&$.cookie('loginname')&&$.cookie('l
  4. ogincode')) // 判断 Cookie 是否有效 若有效则显示出来
  5. {
  6. $('#loginname').val($.cookie('loginname'));
  7. $('#logincode').val($.cookie('logincode'));
  8. }
  9. $('#loginbut').click(function () { // 登陆模块 发送 AJAX 请求到 loginroute 处理路由 (界面始
  10. 终不跳转)
  11. var loginname=$('#loginname').val();
  12. var logincode =$('#logincode').val();
  13. var data={"loginname":loginname,"logincode":logincode};
  14. $.ajax({
  15. url:"http://localhost:3000/loginroute",
  16. data:data,
  17. success:function (data,stau) {
  18. if(stau == 'success')
  19. {
  20. if($("#remember").is(":checked")==true) // 若选中设置 cookie
  21. {
  22. $.cookie('loginname',loginname,{path:"/",expires:7});
  23. $.cookie('logincode',logincode,{path:"/",expires:7});
  24. }
  25. else // 若没选中 清除 cookie
  26. {
  27. $.cookie('loginname',null);
  28. $.cookie('logincode',null);
  29. }
  30. if(data.search('false')!=-1)
  31. {
  32. alert("用户名或密码错误^_^false");
  33. return;
  34. }
  35. if(data.search('StuId'))
  36. {
  37. window.location.href="http://localhost:3000/Homepage?"+"loginname="+loginname+"&logincode="+loginco
  38. de;
  39. return;
  40. }
  41. }
  42. else
  43. {
  44. alert(stau);
  45. }
  46. },
  47. error:function () {
  48. alert("用户名或密码错误^_^");
  49. },
  50. })
  51. });

4.2 动态模块与账号的注销退出

4.2.1 实现功能

  • 个人信息编辑及头像上传

  • 发布文字动态

  • 发布图片和文字动态

  • 评论及回复模块

  • 加载用户及其关注的好友当天发布过的动态及评论

  • 点击查看更多,可查看用户之前发布过的动态及评论

4.2.2 主要代码解释

加载用户发布的动态,用户登录进入后,通过 ajax 请求服务器返回当天的动态,并通过动态创建表单展示到页面。

  1. //加载当天动态 function load_dongtai (data)
  2. {
  3. $.ajax({
  4. url:"/dongtai",
  5. data:data,
  6. success:function (dat,name)
  7. {
  8. if(name="success")
  9. {
  10. var dat = JSON .parse(dat);
  11. //console.log(dat);
  12. var len = dat.length;
  13. //console.log(len);
  14. for(var i = len-1;i>=0;i--)
  15. {
  16. dealOneDongtai (dat[i]);
  17. }
  18. }else
  19. {
  20. console.log(name);
  21. }
  22. }
  23. });
  24. } //通过动态创建表单,处理一条动态函数。 // 单个动态处理函数
  25. function dealOneDongtai (data)
  26. {
  27. //console.log(data);
  28. var showDT = $('#showDT');
  29. var h2 = $('<h2>'+data['xuehao']+':</h2><br>');
  30. showDT.append(h2);
  31. if(data['imageinfo'])
  32. {
  33. var img = $('<img src="'+ data['imageinfo']+'"100px" />');
  34. showDT.append(img);
  35. }
  36. if(data['dongtai'])
  37. {
  38. var dongtai = $('<p style="font-size: 18px">'+data['dongtai']+'</p>');
  39. showDT.append(dongtai);
  40. }
  41. var date = new Date(data['shijian']);
  42. var shijian = $('<p style="font
  43. size:15pt">'+date.getUTCFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate()+'</p>');
  44. showDT.append(shijian);
  45. var Pbtn = $('<button class="ping_lunclass" onclick=" pinlun_show (this)" id='+data['flag']+'>评论
  46. </button>'); // 评论按钮
  47. showDT.append(Pbtn);
  48. var pin_input = $('<form id="'+data['xuehao']+data['flag']+'"><input type="text" /><button type="button"
  49. value="fabu" onclick=" fabu_cancel (this)">发表</button><button type="button" value="cancel"
  50. onclick=" fabu_cancel (this)">取消</button></form>')
  51. showDT.append(pin_input);
  52. pin_input.hide();
  53. var pinglun = data['liuyan'];
  54. if(pinglun)
  55. {
  56. showDT.append($('<hr style="border: 1px dotted gray">'));
  57. var tpinglun = pinglun.split('#');
  58. var pinglen = tpinglun.length;
  59. for(var i = 1;i<pinglen;i++)
  60. {
  61. showDT.append($('<p class="pinglun">'+tpinglun[i]+'<button class="huifuclass"
  62. id="'+i+"#"+data['flag']+'" onclick=" hui_fu (this)">回复</button></p>'));
  63. }
  64. }
  65. showDT.append($('<hr style="background-color: gray ;height: 1px;">'));
  66. }

发表图片和文字动态

通过序列化头像数据和文字消息,通过 ajax 采用 post 方式提交到后台,提交完成后刷新页面,头像上传和此处逻辑基本相似,不过头像上传完成后不用刷新页面,而是将头像 img 的 src 动态改变成所上传头像在服务器端的路径即可。

  1. function upload1 () {
  2. var data = new FormData($('#myph_wordform')[0]);
  3. console.log(data);
  4. data.append("loginname", loginname );
  5. var url="http://localhost:3000/myph_word";
  6. $.ajax({
  7. url:url,
  8. type:'post',
  9. data:data,
  10. processData:false, // 默认为 true
  11. contentType:false, //string 类型 默认值 : "application/x - www - form - urlencoded" 。发送信息至服务器时内
  12. 容编码类型。
  13. success:function (dat,name)
  14. {
  15. if(name =='success'&&dat!="false")
  16. {
  17. //console.log("success");
  18. location = location;
  19. }
  20. else
  21. {
  22. alert("动态发表失败-_-!");
  23. }
  24. }
  25. });
  26. }

4.3 搜索好友模块

4.3.1 实现功能

用户输入账号查找到对应的账号信息,可点击关注或者取消关注。好友推荐模块,会按照一定规则推荐 20 个非好友给你,每页展示 4 个,用户可以选择关注他们或不关注。

4.3.2 主要代码解释

好友推荐,推荐规则为:根据用户的好友的好友中,不在用户的好友列表中,且和用户有共同好友数最多的前 20 个好友给用户。用图表示如下:

将此中不是用户好友,和用户有较多共同好友的账户推荐给用户。

五、数据库的设计

Customers 用户注册时的信息表,用来记录用户的个人信息。主码为 StuId;

Relaion 表,刻画人物之间的关系,A 和 B 账号在此表中有一条记录,表示 A 关 注 B,A 关注了 B,A 就可以看到 B 发送的动态,而 B 不可以看到 A 的,如果 B 没有关注 A 的话。

Dongtai 表,记录所发布的动态和留言消息,主码为自增的标号 flag。

六、结果截图

6.1 登陆注册界面

6.2 动态加载界面

6.3 查看更多功能及评论/回复

6.4 按账号搜索好友

6.5 好友推荐

七、总结

从这次微博系统的总体设计,到各个模块之间关系的确定,再到最后每个模块具体功能的细化以及最终编码的实现,让我更清楚的理解和了解了网络上的各种协议及数据传输方式,特别是对 Ajax 技术及 Cookie 还有正则表达式,及对 DOM 操作的一些细节有了更清楚的认识,收益匪浅。

上传的附件 cloud_download 基于Javaweb实现的微博系统.7z ( 4.08mb, 258次下载 )
error_outline 下载需要12点积分

发送私信

告别错的,方可遇见对的

18
文章数
17
评论数
最近文章
eject