文章目录
一、系统设计
1.前台功能模块：
首页
浏览博文
浏览图片
浏览好友
留言板
博文评论
2.后台管理模块
管理博文
管理图片
管理好友
管理评论
二、数据库设计
文章表：dbo.tb_article
id、art_whoId、art_title、art_content、art_pubTime、art_count
评论表：dbo.tb_articleR（用来保存博客的评论内容）
id、artReview_rootId、artReview_author、artReview_content、artReview_time
文章评论表：dbo.tb_articleRB（用来保存用户多次评论的信息）
id、artReview_rootId、artReview_author、artReview_content、artReview_time
好友表：dbo.tb_friend
id、firend_whoId、user_id
图片表：dbo.tb_photo
id、photo_whoId、photo_src、photo_info、photo_uptime
留言表：dbo.tb_word
id、word_whoId、word_content、word_author、word_time
三、开发准备
1.在Ecliepse中创建Web服务器：
创建新服务器–apache–tomcat server
2.创建项目
dynamic web project
Java Resources --src 【放置java文件的目录】
build – WebContent --css/images/js/META-INF【JSP、HTML、CSS等文件都放在WebContent目录下】
build – WebContent --WEB-INF --lib 【放置jar包的目录】
3.创建JSP文件
build – WebContent --new – JSP File
WebContent节点下将会自动添加一个名为index.jsp的节点
4.创建项目目录结构
Java Resources --src --建立5个包
com.dao【数据库业务处理类】
com.filter【数据过滤类】
com.servlet【表单提交类】
com.toolsBean【工具类】
com.valueBean【数据模型类】
5.运行项目
Project Explorer选择项目名称节点，run as – Run on Server
默认Eclipse内置显示器
也可复制URL地址，eg：http://localhost:8080/blogs
四、博客首页模块设计
在WebContent节点下的文件夹中进行操作
最后运行http://localhost:8080/blogs/index.jsp
1.设计首页页面
页面资源文件css、js、images
jsp文件：index.jsp
2.实现精选博文功能
- 引入数据库连接类和数据过滤类等工具
- 创建首页对应的操作类IndexServlet
IndexServlet类是博客首页对应的操作类，在这个类中，定义了接受用户访问博客首页的doGet（）方法和doPost方法（），这两个方法可以起到连接博客和数据库的桥梁通道作用。
IndexServlet继承HttpServlet父类，并且重写父类的doGet（）和doPost（）方法。前台通过GET方法可以将表单信息以明文无加密的方式传递到后台，而通过POST方法发送的请求可以对一些需要加密的信息进行传递，比如用户密码等
IndexServlet.java代码如下：
package com.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.dao.ArticleDao;
import com.dao.UserDao;
import com.toolsBean.Change;
import com.valueBean.UserSingle;
//调用doGet方法，获取前台通过get方法传递过来的参数
@SuppressWarnings("serial")
//关于SuppressWarnings的用法详见此篇 https://thinkingcao.blog.csdn.net/article/details/71170595
public class IndexServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
doPost(request,response); //执行doPost方法
}
@SuppressWarnings("unchecked")
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setAttribute("mainPage",getInitParameter("defaultPage")); // Request.setAttribute()方法：设置request对象的属性。“mainPage”为属性名称，其属性值getInitParameter它用来获取Servlet的配置文件的初始化参数的信息，也就是我们自己的web应用程序根目录下的WEB-INF目录下的web.xml文件中的初始化参数信息。
String forward=""; //初始化字符串forward
HttpSession session=request.getSession(); //获取系统session
int userid=Change.strToInt(request.getParameter("master")); //获取当前用户id
UserSingle logoner=(UserSingle)session.getAttribute("logoner");
if(null!=logoner){ //根据获取的session值进行逻辑判断
session.setAttribute("logoner",logoner); //将longer赋值给session变量longer
if(userid==logoner.getId()){ //根据uerid进行逻辑判断
request.setAttribute("isSelf","1"); //当前浏览用户不等于博主id，则返回1
}else{
request.setAttribute("isSelf","0"); 当前浏览用户等于博主id，则返回0
}
}
try{
// 获取最新的文章前10条
List newArticlelist = new ArrayList(); //创建list实例newAriticlelist
ArticleDao articleDao = new ArticleDao(); //创建数据库业务处理类articleDao
newArticlelist = articleDao.getNewArticle(); //调用数据库，获取文章数据
request.setAttribute("newArticlelist", newArticlelist);
// 获取右侧栏位置上的点击率排行前10名的博客
UserDao userDao = new UserDao();
List toplist = userDao.getTopList();
session.setAttribute("toplist", toplist);
forward = getInitParameter("index"); //获取index的值
}catch(Exception e){
forward=this.getServletContext().getInitParameter("messagePage");
System.out.println("'获取首页信息错误！"); //打印出错误信息
e.printStackTrace();
}
//获取响应指令
RequestDispatcher rd=request.getRequestDispatcher(forward);
rd.forward(request,response); //指定返回的路径以及响应信息
}
}
3.创建博文管理的数据库处理类ArticleDao
- ArticleDao继承SuperDao父类，在getMostArticle（）方法中，首先创建用于数据库查询的SQL语句，接下来创建数据库的连接类mydb，通过mydb的doPstm（）方法，执行数据库从查询，最后将结果复制到newArticleList数组集合中，并将这些数据返回给页面
ArticleDao.java
package com.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.toolsBean.Change;
import com.toolsBean.DB;
import com.valueBean.ArticleSingle;
public class ArticleDao extends SuperDao{
/**
* @throws SQLException
* @功能： 获取精选博文（10条记录）
*/
public List getMostArticle() throws SQLException{
//创建数据库的SQL语句
String sql="select top 10 t1.id,t1.art_whoId,t1.art_title,t1.art_content,t1.art_count,convert(varchar, t1.art_pubTime, 111),t2.user_name from tb_article t1,tb_user t2 where t1.art_whoId=t2.id order by art_count desc";
List newArticleList=null; //创建List实例ArticleList
DB mydb=new DB(); //创建数据库连接实例mydb
mydb.doPstm(sql,null); //执行数据库查询
ResultSet rs=mydb.getRs(); //将结果集保存在rs内
if(rs!=null){ //根据结果集进行判断
newArticleList=new ArrayList(); //将newArticleList定义为数组
while(rs.next()){ //根据rs结果集进行循环
ArticleSingle single=new ArticleSingle(); //创建ArticleSinge实例
single.setId(rs.getInt(1)); //取出博文记录的id
single.setArtWhoId(rs.getInt(2)); //取出博文记录的用户id
single.setArtTitle(rs.getString(3)); //取出博文记录的标题
single.setArtContent(rs.getString(4)); //取出博文记录的内容
single.setArtCount(rs.getInt(5)); //取出博文记录的阅读数
single.setArtPubTime(rs.getString(6)); //取出博文记录的发布时间
single.setUserName(rs.getString(7)); //取出博文记录的用户名
System.out.println(rs.getString(6));
newArticleList.add(single); //将单条记录加到数据组中
}
}
return newArticleList; //将数据集合返回到前台界面
}
}
4.配置页面路由web.xml文件
页面路由采用的是java的servlet技术，通过在web.xml文件配置页面的路径，也就是通过servlet的类路径，可以访问不同的页面路径。这样的好处，就是可以访问不同的页面路径。可以非常灵活的配置页面模块和业务逻辑。JSP文件专注在页面展示，Java类则专门处理后台的业务逻辑
<!-- 进入首页控制 -->
<servlet>
<servlet-name>index</servlet-name>
<!-- 负责首页业务逻辑处理的java类 -->
<servlet-class>com.servlet.IndexServlet</servlet-class>
<init-param>
<!--根据处理的返回值，返回指定的首页页面-->
<param-name>index</param-name>
<param-value>index.jsp</param-value>
</init-param>
</servlet>
<!-- 用户进入系统访问的路径 -->
<servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/index</url-pattern>
</servlet-mapping>
5.实现“精选博文”功能在index.jsp中的展示
通过<c:set>标签，将后台存储博文记录的数组集合mostArticlelist显示到页面，并且存储到变量类型var的mostArticlelist中，然后使用<c:if>标签，根据mostArticlelist的值是否为空判断页面显示的逻辑。当mostArticlelist为空，则不进行页面的显示，否者使用<c:forEach>标签进行博文字段内容的循环显示输出
index.jsp
<!-- 将mostArticlelist显示到页面中 -->
<c:set var="mostArticlelist" value="${requestScope.mostArticlelist}" />
<!-- 当mostArticlelist不为空时，进行页面的显示 -->
<div class="bloglist left">
<c:if test="${!empty mostArticlelist}">
<c:forEach var="article" items="${mostArticlelist}">
<h3>
<a
href="goBlogContent?id=${article.id}&master=${article.artWhoId}">${article.artTitle}</a>
</h3>
<ul>
<!-- 取出博客内容 -->
<p id="cssClip">
${article.artContent}
</p>
<a
href="goBlogContent?id=${article.id}&master=${article.artWhoId}"
target="_blank" class="readmore">阅读全文>></a>
</ul>
<p class="dateview">
<!-- 取出博客发布时间和作者 -->
<span>${article.artPubTime}</span><span>作者：${article.userName}</span>
</p>
</c:forEach>
</c:if>
在Project Explorer中选择blogs节点，再run as – Run on Server运行程序
http://localhost:8080/blogs/index (注意是index，不是index.jsp）
6.实现“最新博文”功能
1.在IndexServlet.java中添加“最新博文”代码
try{
// 获取最新的文章前10条
List newArticlelist = new ArrayList(); //调用list对象
ArticleDao articleDao = new ArticleDao(); //调用articleDao方法，获取结果
newArticlelist = articleDao.getNewArticle(); //将结果显示到页面
request.setAttribute("newArticlelist", newArticlelist);
forward = getInitParameter("index");
2.在ArticleDao.java中添加“最新博文”的数据库处理方法
getNewArticle（）
/**
* @throws SQLException
* @功能： 获取最新博文（10条记录）
*/
public List getNewArticle() throws SQLException{
String sql="select top 10 id,art_whoId,art_title,art_content,art_count from tb_article order by art_pubTime desc";
List newArticleList=null; //创建newArticleList实例
DB mydb=new DB(); //创建数据库连接类mydb
mydb.doPstm(sql,null); //执行数据库查询
ResultSet rs=mydb.getRs(); //将查询结果存储在rs结果集内
if(rs!=null){ //根据rs的值进行逻辑判断
newArticleList=new ArrayList(); //将newArticle赋值为数组类型
while(rs.next()){ //将结果集循环
ArticleSingle single=new ArticleSingle(); //创建ArticleSingle实例
single.setId(rs.getInt(1)); //获取博文的id
single.setArtWhoId(rs.getInt(2)); //获取博文的用户id
single.setArtTitle(rs.getString(3)); //获取博文的标题
single.setArtContent(rs.getString(4)); //获取博文的内容
single.setArtCount(rs.getInt(5)); //获取博文的阅读数
newArticleList.add(single); //将博文的内容添加到newArticle中
}
}
return newArticleList; //将结果集返回给页面
}
3.在index.jsp中添加“最新博文”的页面显示代码
<aside class="right">
<div class="news">
<h3>
<p>
最新
<span>文章</span>
</p>
</h3>
<!-- 将后台的数据集合newArticlelist赋值到前台页面 -->
<c:set var="newArticlelist" value="${requestScope.newArticlelist}" />
<ul class="rank">
<!-- 根据newArticlelist进行逻辑判断 -->
<c:if test="${!empty newArticlelist}">
<!-- 根据newArticlelist进行循环 -->
<c:forEach var="article" items="${newArticlelist}">
<!-- 获取博文的相关信息 -->
<li>
<a
href="goBlogContent?id=${article.id}&master=${article.artWhoId}"
title="${article.artTitle}" target="_blank">${article.artTitle}</a>
</li>
</c:forEach>
</c:if>
</ul>
7.实现“博客排行榜”功能
原理：通过对各个博主的所有文章阅读数进行统计排名
1.在IndexServlet.java中添加“博客排行榜”代码
UserDao userDao = new UserDao(); //创建userDao实例
List toplist = userDao.getTopList(); //调用getTopList（）方法，获取博客排行榜记录
session.setAttribute("toplist", toplist); //将数据结果集赋值到session变量toplist
2.创建UserDao.java文件，添加getTopList（）方法
package com.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.toolsBean.Change;
import com.toolsBean.DB;
import com.valueBean.UserSingle;
public class UserDao {
public List getTopList() throws SQLException{
//创建数据库查询的SQL语句
String sql="select top 10 id,user_name,user_hitNum,user_ico from tb_user order by user_hitNum desc";
List topList=null; //创建list实例topList
DB mydb=new DB(); //创建数据库连接类mydb
mydb.doPstm(sql,null); //执行数据库查询
ResultSet rs=mydb.getRs(); //将结果集返回给rs实例
if(rs!=null){ //根据rs进行逻辑判断
topList=new ArrayList(); //将topList赋值给数组
while(rs.next()){ //将rs解析循环
UserSingle single=new UserSingle(); //创建用户实例类
single.setId(rs.getInt(1)); //获取用户Id
single.setUserName(rs.getString(2)); //获取用户名
single.setUserHitNum(rs.getInt(3)); //获取用户单击数
single.setUserIco(rs.getString(4)); //获取用户logo
topList.add(single); //将用户数据添加到topList中
}
}
return topList; //返回topList供前台页面使用
}
3.在index.jsp中添加“博客排行榜”的页面显示代码
<h3 class="ph">
<p>
博客
<span>排行</span>
</p>
</h3>
<!-- 后台数据toplist赋值到页面变量var中的toplist -->
<c:set var="toplist" value="${sessionScope.toplist}" />
<ul class="paih">
<!-- 根据toplist的取值进行逻辑判断 -->
<c:if test="${!empty toplist}">
<!-- 循环显示出toplist的字段记录 -->
<c:forEach var="topUser" items="${toplist}">
<ul>
<!-- 获取用户的相关字段数据以及阅读字段数据 -->
<li>
<a style="color: #5EA51B"
href="goBlogIndex?master=${topUser.id}">${topUser.userName}</a>
<span style="float: right">${topUser.userHitNum}次阅读</span>
</li>
</ul>
</c:forEach>
</c:if>
</ul>
五、登陆注册
1.登陆注册模块概述
在用户登陆界面加入了验证码功能，使用了算数验证码，即要求输入给定算式的结果才允许登陆
2.实现“算术验证码”的功能
1.编辑index.jsp，实现登陆页面效果
-
首先需要将事先设计好的loginHtml.js赋值到Eclipse的js节点中
-
然后返回到index.jsp中，添加代码。由于本章采用的是Ajax形式提交表单，所以登陆界面的实现方法也需要JavaScript特效组件共同实现。这里采用的是开源JavaScript弹出组件jBox。通过jBox，可以非常灵活的配置弹出登陆窗口的大小、颜色、按钮样式等。引入美工设计好的登陆界面后，就可以调用jBox的open（）方法，打开HTML页面了，具体代码如下：
index.jsp
<script type ="text/javascript" src="js/loginHtml.js" charset="UTF-8"></script>
<script>
// 验证用户是否登录
$(function() {
var loginFlag = $('#logoner').html();
});
function loginIndex() { //定义方法名loginIndex
//引入美工制作的登陆页面 var html = loginHtml；
var html = '<div id="respond"><form method="post" id="commentform">'
+ '<div class="comment-login">请登录</div>'
+ '<div class="comment-login">'
+ '<ul>'
+ '<li class="form-inline">'
+ '<label>账号：</label>'
+ '<input type="text" name="user" id="user" value="" tabindex="1" aria-required="true">'
+ '</li>'
+ '<li class="form-inline">'
+ '<label>密码：</label>'
+ '<input type="password" name="ps" id="ps" value="" tabindex="2" aria-required="true">'
+ '</li>'
+ '</ul>'
+ '</div>'
+ '<div class="comment-login"><input name="submit" type="button" id="save" οnclick="loginIn()" class="submitButton" tabindex="5" value="登录"></div>'
+ '</form></div>';
var content = {
state1 : {
content : html, //显示登陆页面
buttons : {
'取消' : 0 //取消操作
},
buttonsFocus : 0, //默认显示单击状态
submit : function(v, h, f) {
if (v == 0) { //根据单击动作提交按钮
return true; // 若单机登录，则执行提交操作
}
return false;
}
}
};
$.jBox.open(content, '登录', 650, 550); //设置窗口大小
}
</script>
2.实现登陆验证码的功能
首先利用Math.random（）随机函数生成两个随机数，并赋值给变量i和j，然后将i和j加起来赋值给变量k，同时将k赋值给页面的id上为hiddencode的<div>标签，最后将算数验证码的页面样式通过id为showspan的<div>标签显示出来，具体代码如下：
index.jsp
var i =parseInt(10*Math.random()); //生成随机数赋值给i
var j =parseInt(10*Math.random()); //生成随机数赋值给i
var k=i+j; //变量k为i与j之和
$("#hiddencode").val(k); //设置验证码的正确答案
$("#showspan").html(""+i+"+"+j+"=?"); //设置验证码的样式
通过编写getverifycodeChange（）方法，实现算数验证码的功能。首先生成两个随机数赋值给变量i和j，然后将i与j的和保存在页面的隐藏标签（id等于hiddencode的<div> 标签）内，再将输入值与真实值k比较判定代码是否正确
<script tpye ="text/javascript" language="javbascript">
function getverifycodeChange(){
var i =parseInt(10*Math.random()); //生成随机数赋值给i
var j =parseInt(10*Math.random()); //生成随机数赋值给i
var k=i+j; //变量k为i与j之和
$("#hiddencode").val(k); //设置验证码的正确答案
$("#showspan").html(""+i+"+"+j+"=?"); //设置验证码的样式
$("#verifycode").focus //单机验证码时，鼠标聚焦
}
</script>
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
