基于Ajax博客系统的用户管理的研究与实现
[摘 要] 随着Ajax技术的出现， Web应用正面临全新的改变，最重要的是它改变了传统Web的应用体验和编程模式，有效地解决了Web应用所需要的各种特性，从而使得Web应用的功能和开发方式发生了根本性的变化，并逐渐成为企业应用开发的主流和首选。伴随一系列Ajax框架和开源项目的涌现，以及包括IBM、微软在内的各大厂商推波助澜，Ajax成为了近一年最热门的软件技术，而对于现今非常流行的博客来说，其大量的数据，频繁的各种操作等特点，更是一个Ajax良好的表现舞台。    随着Internet及其相关技术的迅猛发展，人与人的交流变的越来越频繁，信息量也呈现无限扩大的趋势。博客系统的出现很好的满足了对个人信息的管理，并加强了人与人之间的交流，伴随着各种高级技术的出现，博客系统不断走向成熟，着实成为了互联网的新宠。本文介绍了现代博客系统的开发技术，实现了一个功能简单的博客系统。
 [关键词]博客，Ajax  XMLHttpRequest 异步交互 MVC Hibernate
 一．博客系统用户管理的背景意义
 随着Ajax技术的出现， Web应用正面临全新的改变，最重要的是它改变了传统Web的应用体验和编程模式，有效地解决了Web应用所需要的各种特性，从而使得Web应用的功能和开发方式发生了根本性的变化，并逐渐成为企业应用开发的主流和首选。伴随一系列Ajax框架和开源项目的涌现，以及包括IBM、微软在内的各大厂商推波助澜，Ajax成为了近一年最热门的软件技术，而对于现今非常流行的博客来说，其大量的数据，频繁的各种操作等特点，更是一个Ajax良好的表现舞台。
 随着Internet及其相关技术的迅猛发展，人与人的交流变的越来越频繁，信息量也呈现无限扩大的趋势。博客系统的出现很好的满足了对个人信息的管理，并加强了人与人之间的交流，伴随着各种高级技术的出现，博客系统不断走向成熟，着实成为了互联网的新宠。本文介绍了现代博客系统的开发技术，实现了一个功能简单的博客系统。
 服务器端操作系统：Window XP
 数据库：MySQL 4.1
 Web服务器：Tomcat 5.0[6]
 客户端运行环境：IE5.0以上或Mozilla Firefox2.0
 Java运行环境：JDK1.4
 Eclipse3.1
 MyEclipse5.0
 Mysql驱动插件:  mysql-connector-java-3.1.10-bin.jar
 SmartUpload组件
 Hibernate3.1
 二．博客系统的需求分析    
 1．博客的功能
 用户可以在本系统注注申请自己的博客。一旦用户申请了自己的博客，就可以将心得体会等发表到自己的博客上，当发表了自己的心得体现后，浏览者就可以对用户所发表的日志的内容进行评论。除了发表文章的功能外，加了体现不同用户的个性，系统还允许用户对自己的博客进行设计。主要包括：博客主页内容的显示版式的调整、内容显示方式的设置、显示模块的选择和博客整体风格的挑选等功能。
 2.页面功能
博客页面主要包括，博客的介绍，博主的注册和登录，日志的发布和管理,和分类选择功，并有搜索功能。
 三．博客系统的设计
 1.系统机构设计
 
                              图1  系统结构图 
 
 2.用户管理相关页面的设计
 （1）首页start.jsp
博客的首页，实现的功能为：提供注册的链接、提供博客网站介绍的链接、登录的界面、显示最新文章、显示最热博客、搜索文章的界面。
 其中与用户管理相关的功能为页面右上方的用户登录功能，在相应位置输入用户名和密码，提交后首先做有效性检查，要求用户输入了完整且有效的用户名和密码。数据发送到服务器后，控制器程序负责访问数据库验证用户名和密码是否正确。如果正确，页面跳转到控制台页；否则，返回错误信息提示用户。
注册页creat-blog.jsp
 （2）新用户在此页面注册个人博客。其中用户名要先验证是否已被注册，这里应用了Ajax引擎，实现了页面无刷新的信息提示。接下来检测两次输入的密码是否一致和其他的注册信息是否有效，并弹出相应提示。
 （3）注册成功页create-done.jsp。当注册成功有效时的跳转页面并提供了新文章的相关链接。
 （4）显示个人资料页profile.jsp显示用户的相关资料并提供编辑个人资料的链接。
 （5）编辑个人资料页edit-profile.jsp提供对个人资料的修改功能，其中相应的修改栏默认显示先前的注册信息，修改后服务器更新数据库中相应内容。另外还提供了图片上传的功能。
 3.数据库设计
 （1）数据库需求分析
用户的基本信息表：保存用户的用户名、密码和几个主要信息
用户的详细信息表：保存用户的详细信息，表与用户的基本信息表要有连接
文章表：保存发布的文章信息，表中有一项要指明文章属于的用户
分类表：保存用户的博客分类信息，表中有一项要指明分类属于的用户
链接表：保存用户的博客链接信息，表中有一项要指明链接属于的用户
评论表：保存指定的文章的评论信息，表中有一项要指明评论属于的文章
 4.数据库设计
根据需求设计数据库表如下：
 表名  kind
 Id  Int  kindId
 BlogId  Int  Id
 Name  Varchar  名称
                            表1  kind表
 表名  comment
 Id  Int  ID
 Uname  Varchar  名称
 Content  Text  评论内容
 Pubtime  Datetime  评论时间
 Postid  Int  文章ID
                          表2  comment表
 表名：  blog
 字段名称  数据类型  说明
 Id  Int  自动生成 ，主键
 Username  Varchar  用户名
 Password  Varchar  密码
 Screenname  Varchar  显示名
 Email  Varchar  信箱
 Visitcount  Number  访问次数
                            表3  blog表
 表名：  post
 Id  Int  Id
 Title  Varchar  文章题目
 Content  Text  内容
 Putime  Date  时间
 Kindid  Int  分类Id
 Blogid  Int  Blogid
                            表4  post表
 表名：  blogger_info
 Id  Int  Id
 Photo  Varchar  头像地址
 Truename  Varchar  真实名称
 Age  Date  年龄
 Url  Varchar  链接
 Im  Varchar  IM
 City  Varchar  城市
 State  Varchar  洲
 Country  Varchar  国家
 Interests  Text  爱好
 Movies  Text  电影
 Books  Text  书
 Aboutme  Text  关于
 Who  Int  Id
 Sex  Varchar  性别
                         表5  blogger_info表
 表名  link
 Id  Int  LinkId
 BlogId  Int  Id
 Name  Varchar  名称
 url  Varchar  地址
                           表4.6  link表
四．用户管理相关页面的实现 
 1.首页

 图2 首页
 主要有三个功能点：一、用户登录；二、搜索文章；三、显示数据库中文章和博客列表。其中与用户管理相关的功能为用户登录[9]。
2.用户登录
 
                              图3 用户登陆界面
 onsubmit="return CheckForm()"，提交时调用CheckForm()提示用户输入框不能为空，action="login"请求，根据web.xml知LoginCheck.java来处理，借助Hibernate来访问数据库检查用户是否正确。
 得到提交的数据
 String uname = request.getParameter("uname");
 String psw = request.getParameter("psw");
访问数据库，由用户名得到账户对象，再得到密码
 DbOperate db = new DbOperate();
 Blog blog = db.getBlog(uname);
 String dbPassword = blog.getPassword();
 验证用户和密码，再做相应的处理
   if (blog == null||!dbPassword.equals(psw))
   {
  session.setAttribute(Constants.LOGIN_WRONG_KEY, new Integer(1));
  response.sendRedirect("/BlogWeb/start.jsp");
   }
   else
   {
  session.setAttribute(Constants.LOGIN_USER_KEY, blog);
  response.sendRedirect("/BlogWeb/home.jsp");
   }
 如果用户名或密码错误，会跳转回首页，并有错误提示信息。
以上验证用户和密码是对数据库的访问运用了Ajax技术，异步的获得数据库中的数据，实现了无刷新，等待时间短的特点。
 3.注册页
 注册页基本上时提交表单和保存数据的操作。
 
 图4  创建帐户界面
 
填写要注册的用户名后，点击“检查用户名”动态访问数据库并返回信息提示用户名是否被占用。
  Blog blog = db.getBlog(uname);
  if (blog != null)
  {
   out.println("1"); //占用
  }
  else
  {
   out.println("0");
  }

   if(res == 1)
   {
    window.alert("用户名已被占用");
    document.form1.uname.focus();
    userAvailable = false;
   }
    else
    { 
     window.alert("用户名可以使用");
     userAvailable = true;
    } 
 
                            图5  用户名已存在
 
                            图6  用户名可以使用
 接下来验证两次输入的密码是否一致
 
                            图7  密码有效性验证
 再用户名和密码都有效时，就可以创建账户。
 CreateGo.java中保存到数据库
   DbOperate db = new DbOperate();
   Blog blog = new Blog();
   blog.setUsername(uname);
   blog.setPassword(passwd);
   blog.setScreenname(screenname);
   blog.setEmail(email);
   db.save(blog);
 以上所有弹出的提示信息都使用了Ajax技术，异步的获取数据，实现了无刷新，等待时间短的特点[10]。
 4.注册成功页
 当正常注册成功时，页面跳转到此页。

                                   图8  注册成功

 5.显示个人资料页
应用java语句访问数据库，将用户的详细个人资料显示在页面上。<%=blog.getScreenname()%>
<%=bloggerInfo.getSex()%>等
提供编辑个人资料的链接
 
                           图9  显示个人资料界面
 6.编辑个人资料页
 将数据库中的用户详细个人资料显示在页面的输入框中，用户可以修改并提交更新数据库。
saveProfile请求，SaveProfile类来处理
      DbOperate db = new DbOperate();
   int blogid = blog.getId();   
   blog.setEmail(email);
   bloggerInfo.setTruename(truename);
   bloggerInfo.setSex(sex);
   bloggerInfo.setAge(age);
   bloggerInfo.setUrl(url);
   bloggerInfo.setIm(im);
   bloggerInfo.setCity(city);
   bloggerInfo.setState(state);
   bloggerInfo.setCountry(country);
   bloggerInfo.setInterests(interests);
   bloggerInfo.setAboutme(aboutme);
   bloggerInfo.setMovies(movies);
   bloggerInfo.setMusics(musics);
   bloggerInfo.setBooks(books);
 bloggerInfo.setWho(blogid);
 db.update(bloggerInfo);
  db.update(blog);
 
                             图10  编辑个人资料界面
要注意的是，上传用户图片的功能。点击“上传”链接，弹出上传窗口。
<input name="photo" id="photo" type=file>是上传文件的输入框。
savePhoto请求，由SavePhoto类处理，使用SmartUpload组件来实现
 String photoName = null;
 SmartUpload smartUpload = new SmartUpload();
      try
      {
       smartUpload.initialize(config,request,response);
       smartUpload.upload();
       smartUpload.save("\\pictures");
 photoName = smartUpload.getFiles().getFile(0).getFileName();
      }
 ……….
 bloggerInfo.setPhoto(photoName);
 DbOperate db = new DbOperate();
 db.update(bloggerInfo);
 
 图片文件存放在pictures下，文件名保存在数据库中。
 
 图11 上传图片界面
 五．总结
   在做博客系统的这段时间里，因为接触到很多自己不懂的技术，所以在网上查了很多的资料也翻阅了好多书，花费了很多时间在深入的理解各种设计的相关技术上，所以动手比较晚。但是，在这段时间里确实学到了不少知识，充实了自己，开阔了眼界。由于很多技术都是初次接触，加上时间方面的制约，所以设计中存在很多的不足。最大的不足就是只是实现了很有限的博客系统的基本功能，很多很不错的高级功能没有实现，比如未设置留言板，不能上传歌曲，没有RSS的订阅功能，访客信息的统计不够全面等，所以显得系统功能比较单薄，不够人性化。
 
 参考文献
 1、《Ajax基础教程》  北京：人民邮电出版社，2006.2 Ryan Asleson，Nathaniel T.Schutta著，金灵 译   P 45~P72
 2、《Ajax实战》  北京：人民邮电出版社，2006.4  Dave Crane，Eric Pascarello，Darren James著，ajaxcn.org译  P132~P221
 3、《征服Ajax Web2.0快速入门与项目实践（Java）》  北京：人民邮电出版社，2006.6  张桂元，贾燕枫，姜波 编著  P7~ P51  P190~P272
 4、《HTML与XHTML权威指南》  北京：清华大学出版社，第五版，2003.6  Chuck Musciano，Bill Kennedy著，技桥 译  P134~P165
 5、《java script权威指南》  北京：机械工业出版社，第四版，2003.1  David Flanagan著，张铭泽 等译   P177~P256
 6、《Tomcat与Java.Web开发技术详解》  北京：电子工业出版社，2004.4  孙卫琴，李洪成 编著   P77~P92
 7、《hibernate中文参考论文》  官方技术论文，Version:2.1.6  Hibernate.org 著  
 8、《深入浅出Hibernate》  北京：电子工业出版社，2005.6  夏昕，曹晓刚，唐勇 编著   P68~P94  P188~P247
 9、《Ajax在Web2.0中的应用研究》，《科技资讯》2006年30期  王东亚，贾卓生 著
 10、《基于AJAX的WEB应用》，《电脑开发与应用》 2006年08期   张晓龙 著 
 11、《AJAX的原理及其在Web开发中的应用》,《科技广场》2006年07期  王义勇，何月顺  著
 12、《Hibernate技术的研究》 ，《计算机技术与发展》，2006年11期  林寒超，张南平  著
 13、《AJAX在MVC模式中的应用》，《武汉理工大学学报（信息与管理工程版）》 2006年07期  彭晶 著

相关论文