个人博客系统主要功能实现:登录注册,日志模块,照片模块,评论模块,留言模块。
分为前台界面部分和后台管理部分。
实现了上传头像功能以及分页显示功能。
开发技术:JSP+Servlet+Javabean
服务器: Tmocat
数据库:mysql
开发工具:MyEclipse8.6
(1)个人博客注册
(2)首页显示
(3)用户登录
(4)查看日志
(5)查看照片
(6)发表评论
(7)用户留言
部分图片以及代码:
Index.jsp
<%@ page language="java" import="java.util.*,java.sql.*,java.util.Date" pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<title>个人博客</title>
<style type="text/css">
body {
padding-top: 65px;
padding-bottom: 40px;
background-color: #eee;
}
</style>
</head>
<body>
<!-- 导航栏-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="container" >
<!--小屏幕的导航按钮和logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-all"> <!-- 为了小窗口下点击按钮出现选项-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--小屏幕的导航按钮和logo-->
<a href="index.jsp" class="navbar-brand">博客首页</a>
</div>
<!--导航-->
<div class="collapse navbar-collapse" id="nav-all">
<ul class="nav navbar-nav navbar-right">
<script type="text/javascript">
function showTime(){
nowtime=new Date();
year=nowtime.getFullYear();
month=nowtime.getMonth()+1;
date=nowtime.getDate();
document.getElementById("mytime").innerText=year+"年"+month+"月"+date+" "+nowtime.toLocaleTimeString();
}
setInterval("showTime()",1000);
</script>
<li><a href="#"><span id="mytime"></span></a></li>
<li><a href="Note?status=selectall">日志</a></li>
<li><a href="Photo?status=selectall">相册</a></li>
<li><a href="Liuyan?status=selectall">留言</a></li>
<li><a href="login.jsp">登录</a></li>
<li><a href="zhuce.jsp">注册</a></li>
</ul>
</div>
</div>
</nav>
<jsp:include page="right.jsp"></jsp:include>
<br><br><br><br><br><br><br>
<!--底部-->
<nav class="navbar navbar-default navbar-fixed-bottom">
<div style="text-align:center">
XXXXXXXXXXXXXXXXXXXXXXXXXXXX 版权所有
</div>
</nav>
</body>
</html>
Login.jsp
<%@ page language="java" import="java.util.*,java.sql.*,java.util.Date" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>登录界面</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/sigin.css">
</head>
<body background="images/background.jpg"><!-- 导航栏-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="container" >
<!--小屏幕的导航按钮和logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-all"> <!-- 为了小窗口下点击按钮出现选项-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--小屏幕的导航按钮和logo-->
<a href="index.jsp" class="navbar-brand" target="_blank">稍后注册?先进去看看</a>
</div>
<!--导航-->
<div class="collapse navbar-collapse" id="nav-all">
<ul class="nav navbar-nav navbar-right">
<script type="text/javascript">
function showTime(){
nowtime=new Date();
year=nowtime.getFullYear();
month=nowtime.getMonth()+1;
date=nowtime.getDate();
document.getElementById("mytime").innerText=year+"年"+month+"月"+date+" "+nowtime.toLocaleTimeString();
}
setInterval("showTime()",1000);
</script>
<li><a href="#"><span id="mytime"></span></a></li>
<li><a href="login.jsp">登录</a></li>
<li><a href="zhuce.jsp">注册</a></li>
<li><a href="index0.jsp">欢迎页</a></li>
</ul>
</div>
</div>
</nav>
<br><br><br><br><br>
<div class="container">
<form class="form-signin" action="Login" method="post">
<h2 class="form-signin-heading">使用您的账号登录</h2>
<input type="text" name="name" class="form-control" placeholder="手机号" >
<input type="password" name="password" class="form-control" >
<div class="checkbox">
<label>
<input name="ck" type="checkbox" value="1"> 记住我
</label>
<a href="login_find.jsp">找回密码</a>
</div>
<input class="btn btn-lg btn-primary btn-block" type="submit" value="登录">
</form>
</div> <!-- /container -->
</body>
</html>
(1)管理员登录
(2)日志管理
(3)照片管理
(4)用户管理
(5)评论管理
(6)留言管理
部分截图以及代码:
Admin_rizhi.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="bean.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<title>个人博客</title>
<style type="text/css">
body {
padding-top: 65px;
padding-bottom: 40px;
background-color: #eee;
}
</style>
<script language="javascript">
//选中全选按钮,下面的checkbox全部选中
var selAll = document.getElementById("selAll");
function selectAll()
{
var obj = document.getElementsByName("checkAll");
if(document.getElementById("selAll").checked == false)
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=false;
}
}else
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=true;
}
}
}
//当选中所有的时候,全选按钮会勾上
function setSelectAll()
{
var obj=document.getElementsByName("checkAll");
var count = obj.length;
var selectCount = 0;
for(var i = 0; i < count; i++)
{
if(obj[i].checked == true)
{
selectCount++;
}
}
if(count == selectCount)
{
document.all.selAll.checked = true;
}
else
{
document.all.selAll.checked = false;
}
}
//反选按钮
function setNoSelect() {
var checkboxs=document.getElementsByName("checkAll");
for (var i=0;i<checkboxs.length;i++) {
var e=checkboxs[i];
e.checked=!e.checked;
setSelectAll();
}
}
</script>
</head>
<body background="images/background.jpg">
<!-- 导航栏-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="container" >
<!--小屏幕的导航按钮和logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-all"> <!-- 为了小窗口下点击按钮出现选项-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--小屏幕的导航按钮和logo-->
<a href="index_admin.jsp" class="navbar-brand">博客首页</a>
</div>
<!--导航-->
<div class="collapse navbar-collapse" id="nav-all">
<ul class="nav navbar-nav navbar-right">
<script type="text/javascript">
function showTime(){
nowtime=new Date();
year=nowtime.getFullYear();
month=nowtime.getMonth()+1;
date=nowtime.getDate();
document.getElementById("mytime").innerText=year+"年"+month+"月"+date+" "+nowtime.toLocaleTimeString();
}
setInterval("showTime()",1000);
</script>
<li><a href="#"><span id="mytime"></span></a></li>
<li><a href="Note?status=selectall" target="_blank">日志</a></li>
<li><a href="Photo?status=selectall" target="_blank">相册</a></li>
<li><a href="Liuyan?status=selectall" target="_blank">留言</a></li>
<li><a href="admin.jsp">管理</a></li>
<li><a href="zhuxiao.jsp">注销</a></li>
</ul>
</div>
</div>
</nav>
<%
// 如果有内容,则修改变量i,如果没有,则根据i的值进行无内容提示
int i = 0;
String keyword = request.getParameter("keyword");
List all = null;
all = (List) request.getAttribute("all");
%>
<h1 align="center">日志管理 <button type="button" onClick="window.location.href='admin_rizhi_insert.jsp'" class="btn btn-default">发表日志</button></h1>
<form method="post" action="admin_rizhi_deleteall.jsp">
<table class="table table-striped table-bordered table-hover table-condensed" >
<thead>
<th><input type="checkbox" id="selAll" onclick="selectAll();" />全选
<input type="checkbox" id="inverse" onclick="setNoSelect();" />反选 <input type="submit" value="删除"></th>
<th>日志ID</th>
<th>标题</th>
<th>图片</th>
<th>作者</th>
<th>内容</th>
<th>操作</th>
</thead>
<%
Iterator iter = all.iterator();
while (iter.hasNext()) {
note note = (note) iter.next();
i++;
// 进行循环打印,打印出所有的内容,以表格形式
// 从数据库中取出内容
int id = note.getId();
String author = note.getAuthor();
String title = note.getTitle();
String photo = note.getPhoto();
String content = note.getContent();
%>
<tbody>
<tr><td width="10%"><input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();" value="<%=id%>" /></td>
<td width="5%"><%=id%></td>
<td width="10%"><%=title%></td>
<td width="10%"><a href="admin_rizhi_photo.jsp?id=<%=id%>"><img src="<%=photo%>" height="50" width="50"></a><font size="1">点击修改图片</font></td>
<td width="10%"><%=author%></td>
<td width="25%">
<%
String a = content;
if(content.length()>=40)
a=a.substring(0,40)+"......";
out.print(a);
%></td>
<td width="10%">
<button type="button" onClick="window.location.href='admin_rizhi_update.jsp?id=<%=id %>'" class="btn btn-default">修改</button>
<button type="button" onClick="window.location.href='Note?id=<%=id%>&status=delete'" class="btn btn-default">删除</button>
</td>
</tr>
</tbody>
<%} %>
</table></form>
</body>
</html>