JSP+servlet+mysql个人博客系统

个人博客系统

个人博客系统主要功能实现:登录注册,日志模块,照片模块,评论模块,留言模块。
分为前台界面部分和后台管理部分。
实现了上传头像功能以及分页显示功能。
开发技术: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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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">日志管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

此博客只是想为一些新手提供一些设计个人博客系统的思路、步骤和启发。我也是新手,望大佬指点,希望大家都可以写出属于自己的个人博客, 如有需要可以评论联系我。

你可能感兴趣的:(JSP+servlet+mysql个人博客系统)