JAVAWeb较完善的登录注册实现（eclipse+mvc+sql）

1.整体代码结构


2.因为主页面功能不是很完善所以这里仅分享一下登录注册页面，大家可以按照自己的想法来写登录成功后的主页面。
IUserDao.java

package com.Case.DAO;

import java.util.List;

import com.Case.entity.ContentVO;
import com.Case.entity.RegisterVO;

public interface IUserDao {
	public int Register(RegisterVO user);
	
	public int Login(RegisterVO user);
	
	public int isExsit(RegisterVO user);
	
	public List<ContentVO> Content(ContentVO user);
}

UserDaoImpl.java

package com.Case.DAO;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import org.omg.CORBA.PUBLIC_MEMBER;

import com.Case.entity.ContentVO;
import com.Case.entity.DBUtil;
import com.Case.entity.RegisterVO;
import com.sun.crypto.provider.RSACipher;

import sun.security.util.Password;

public class UserDaoImpl implements IUserDao{

	
	private static final String Static = null;


/**
 * 注册模块
 */
	public int Register(RegisterVO user) {
		try {
			Connection conn = DBUtil.connectDB();
			String sql = "INSERT INTO [User] (username , password) "
					+ " VALUES(?,?)";

			PreparedStatement pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, user.getUsername());
			pstmt.setString(2, user.getPassword());

			if(!pstmt.execute()) 
				return 1;
			else 
				return 0;
		} catch (Exception e) {
			// TODO: handle exception
			return -1;
		}finally {
			DBUtil.closeAll(DBUtil.rs,DBUtil.pstmt,DBUtil.con);
		}
		
	}
	
	
/**
 * 登录模块
 */
	public int Login(RegisterVO user) {
		int result = -1;
        ResultSet rs = null;
        try {
            String sql = "select count(*) from [User] where username = ? and password = ?";
            Object[] params = {user.getUsername(), user.getPassword()};
            rs = DBUtil.executeQuery(sql, params);
            if (rs.next()) {
                result = rs.getInt(1);
            }
            if (result == 1) {//登陆成功
                return 1;
            } else {//登录失败
                return 0;
            }
        } catch (SQLException e) {//登录系统异常
            e.printStackTrace();
            return -1;
        } catch (Exception e) {
            e.printStackTrace();
            return -1;
        } finally {
            DBUtil.closeAll(rs, DBUtil.pstmt, DBUtil.con);
        }
		}
	
	

	/**
	 * 判断用户名是否存在
	 */
	public int isExsit(RegisterVO user) {
		 try {
	            String sql = "select * from [User] where username = ?";
	            Object[] params = {user.getUsername()};
	            DBUtil.rs = DBUtil.executeQuery(sql, params);
	            if (DBUtil.rs.next()) {//存在已有相同的用户名
	                return 0;
	            } else {//不存在相同的用户名
	                return 1;
	            }
	        } catch (SQLException e) {
	            e.printStackTrace();
	            return -1;
	        } catch (Exception e) {
	            e.printStackTrace();
	            return -1;
	        } finally {
	            DBUtil.closeAll(DBUtil.rs, DBUtil.pstmt, DBUtil.con);
	        }
	}

	/**
	 * 这个是还未完善的功能，可删去
	 */
	@Override
	public List<ContentVO> Content(ContentVO user){
		List<ContentVO> list = new ArrayList<ContentVO>();
		Connection conn = DBUtil.connectDB();
		String sql = "select * from wenben where id=?";
		Object[] params = {user.getId()};
		 DBUtil.rs = DBUtil.executeQuery(sql,params);
		try{
			while(DBUtil.rs.next()){
				
				user.setId(DBUtil.rs.getString("id"));
				user.setText(DBUtil.rs.getString("text"));
				list.add(user);
			}
			return list;
		} catch(Exception e){
			e.printStackTrace();
			return null;
		}finally{
			DBUtil.closeAll(DBUtil.rs, DBUtil.pstmt, DBUtil.con);
		}
	}

}

DBUtil.java

package com.Case.entity;

import java.sql.*;

public class DBUtil {
	private static final String URI = "jdbc:sqlserver://127.0.0.1:1433;DatabaseName=Case";//Case是数据库名称
	private static final String userName="sa";//你的数据库用户名
	private static final String userPwd="123";//你的密码
	private static final String DRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
    public static PreparedStatement pstmt = null;
    public static Connection con = null;
    public static ResultSet rs = null;
    
  

    //连接数据库
    public static Connection connectDB() {
        try {
            //1、加载数据库驱动
            Class.forName(DRIVER);
            //2、获取数据库连接
            con = DriverManager.getConnection(URI, userName, userPwd);
            return con;
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
            return null;//无法连接数据库
        } catch (SQLException e) {
            e.printStackTrace();
            return null;//无法连接数据库
        } catch (Exception e) {
            e.printStackTrace();
            return null;//无法连接数据库
        }
    }
    
    /**
     * 这里将DBUtil改造为万能类，将对数据库的一些操作都写在这里，方便调用
     * @return
     */

    //增删改
    public static boolean executeUpdate(String sql, Object[] params) {
        try {
            pstmt = createPrepareStatement(sql, params);
            int count = pstmt.executeUpdate();
            return count > 0;
        } catch (SQLException e) {
            e.printStackTrace();
            return false;//操作失败
        } catch (Exception e) {
            e.printStackTrace();
            return false;//操作失败
        }
    }

    //查询
    public static ResultSet executeQuery(String sql, Object[] params) {
        try {
            pstmt = createPrepareStatement(sql, params);
            rs = pstmt.executeQuery();
            return rs;
        } catch (SQLException e) {
            e.printStackTrace();
            return null;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    //创建PreparedStatement对象
    public static PreparedStatement createPrepareStatement(String sql, Object[] params) throws SQLException {
        pstmt = connectDB().prepareStatement(sql);
        if (params != null) {
            for (int i = 0; i < params.length; i++) {
                pstmt.setObject(i + 1, params[i]);
            }
        }
        return pstmt;
    }

    //关闭接口
    public static void closeAll(ResultSet rs, Statement stmt, Connection con) {
        try {
            if (rs != null) rs.close();
            if (stmt != null) stmt.close();
            if (con != null) con.close();
        } catch (SQLException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

RegisterVO.java

package com.Case.entity;

import com.sun.org.apache.bcel.internal.generic.RETURN;

public class RegisterVO {
	private String Username;
	private String Password;
	
	public RegisterVO(String name,String password) {
		this.Username = name;
		this.Password = password;
	}

	public String getUsername() {
		return Username;
	}

	public void setUsername(String username) {
		Username = username;
	}

	public String getPassword() {
		return Password;
	}

	public void setPassword(String password) {
		Password = password;
	}
	
	
}

FindUserServlet.java

package com.Case.servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.eclipse.jdt.internal.compiler.ast.FalseLiteral;

import com.Case.DAO.UserDaoImpl;
import com.Case.entity.DBUtil;
import com.Case.entity.RegisterVO;
import com.fasterxml.jackson.databind.ObjectMapper;

import javafx.scene.control.Alert;

/**
 * Servlet implementation class FindUserServlet
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);

	}		
		

	
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("application/json;charset=utf-8");
		Map<String, Object> map = new HashMap<String, Object>();
		
		//获取前端输入的用户名和密码
		String name = request.getParameter("user_name");
		String password = request.getParameter("user_pwd");

		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		
		try {
			conn = DBUtil.connectDB();
			String sql = "select * from [User] where username = ?";
			
			
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, name);
			rs = pstmt.executeQuery();
			if(rs.next()){//存在已有相同的用户名
				map.put("userExsit",true);
				map.put("msg","用户名已被抢走！");
			}else {//不存在相同的用户名
				map.put("userExsit",false);
				map.put("msg","独特的用户名！");
			}
			//这里使用了ajax离焦事件，效果是注册时，输入用户名，自动判断用户名是否已存在，并给出提示
			ObjectMapper mapper = new ObjectMapper();
			mapper.writeValue(response.getWriter(), map);
			
				
		}catch (SQLException e) {
			e.printStackTrace();
		}catch (Exception e) {
			e.printStackTrace();
		}finally {
			try {
				if (rs != null) rs.close();
				if (pstmt != null) pstmt.close();
				if (conn != null) conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}
}

LoginServlet.java

package com.Case.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.Case.DAO.UserDaoImpl;
import com.Case.entity.RegisterVO;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
					
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		
		String name = request.getParameter("user_name");
		String password = request.getParameter("user_pwd");
		
		RegisterVO register = new RegisterVO(name,password);
		UserDaoImpl dao = new UserDaoImpl();
		//登录时判断该用户名是否存在
		int rel1 = dao.isExsit(register);
		//下面对登录失败的原因进行分析，是密码错误还是用户名错误
		if(rel1==1) {
			response.getWriter().print("<script language='javascript'>alert('抱歉，登录失败，请确认用户名再试一次！')</script>");
			response.setHeader("refresh", "1;URL=login.jsp");
		}else {
			int rel = dao.Login(register);
			if (rel==1) {
				response.sendRedirect("index.jsp");
			}else {
				response.getWriter().print("<script language='javascript'>alert('抱歉，登录失败，请确认密码再试一次！')</script>");
				response.setHeader("refresh", "1;URL=login.jsp");
			}
		}
	}

}

RegisterServlet.java

package com.Case.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.Case.DAO.UserDaoImpl;
import com.Case.entity.RegisterVO;

/**
 * Servlet implementation class RegisterServlet
 */
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public RegisterServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("user_name");
		String password = request.getParameter("user_pwd");
		

		RegisterVO register = new RegisterVO(name,password);
		UserDaoImpl dao = new UserDaoImpl();
		int rel=0;
		
		
		boolean flag = false;
		//判断注册时用户名和密码是否为空
		if(name.equals("")||password.equals("")) {
			response.getWriter().print("<script language='javascript'>alert('抱歉，注册失败！')</script>");
			response.setHeader("refresh", "1;URL=register.jsp");
			return;
		}else {
			 rel = dao.isExsit(register);
		}
		
		
		
		if(rel==1)
			flag = true;

		if(flag) {
			try {
				int result = dao.Register(register);
				if(result==1) {
					response.getWriter().print("<script language='javascript'>alert('恭喜你，注册成功！')</script>");
					response.setHeader("refresh", "1;URL=login.jsp");
				}
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}else {
			response.getWriter().print("<script language='javascript'>alert('抱歉，注册失败！')</script>");
			response.setHeader("refresh", "1;URL=register.jsp");
		}
	}

}

Login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>login</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="jquery-3.3.1.min.js"></script>
<script src="js/jquery.pure.tooltips.js" charset="UTF-8"></script>

<script>
//检查用户名是否为空
function checkUserName(obj) {
    var username = obj;
    var checkUserNameResult = document.getElementById("checkUserNameResult");
    if (username.trim().length == 0) {
        checkUserNameResult.innerHTML = "用户名不能为空";
        obj.focus();
    } else {
    	checkUserNameResult.innerHTML = "";
    }
    	
}

//检查密码是否为空
function checkPassword(obj) {
    var password = obj;
    var checkPasswordResult = document.getElementById("checkPasswordResult");
    if (password.trim().length == 0) {
        checkPasswordResult.innerHTML = "密码不能为空";
        obj.focus();
    } else {
        checkPasswordResult.innerHTML = "";
    }
}
</script>
</head>
<body>
		<div class="container demo-1">
			<div class="content">
				<div id="large-header" class="large-header">
					<canvas id="demo-canvas"></canvas>
					<div class="logo_box">
						<h3>欢迎你</h3>
						<form action="" name="f" method="post">
							<div class="input_outer">
								<span class="u_user"></span>
								<input id="uname" onblur="checkUserName(this.value);" name="user_name" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户">
								<span id="checkUserNameResult" style="text-align: center;display:block;color:red"></span>
							</div>
							<div class="input_outer">
								<span class="us_uer"></span>
								<input id="upwd"  onblur="checkPassword(this.value);" name="user_pwd" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码">
							</div>
							<div>
							<span id="checkPasswordResult" style="text-align: center;display:block;color:red"></span>
							</div>
							<div>
							   
							</div>
							<div class="mb2" ><a type="button"  style="color: #FFFFFF"  class="act-but submit" onclick='login()' >登录</a>
							</div>
							<div class="mb2" ><a type="button"  style="color: #FFFFF0"  class="act-but submit" onclick='register()' >注册</a>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/TweenLite.min.js"></script>
		<script src="js/EasePack.min.js"></script>
		<script src="js/rAF.js"></script>
		<script src="js/demo-1.js"></script>
		<div style="text-align:center;">
</div>
	</body>
	<script>
	function login() {//登录+
    	document.f.action="LoginServlet";
	    document.f.submit();
    }


function register() {
    document.f.action="register.jsp";
    document.f.submit();
}
	

</script>
</html>

register.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
		<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0"> 
	<title>登录界面</title>
	
    <link href="css/default.css" rel="stylesheet" type="text/css" />
	<!--必要样式-->
	
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link href="css1/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/loaders.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
    $(function(){
    	
		
		$("#uname").blur(function(){
			var username = $(this).val();
			if(username.trim().length <= 0)
				span.html("");
			else{
				$.get("findUserServlet",{user_name:username},function(data){
					var span = $("#s_username");
					if(data.userExsit){
						span.css("color","red");
						span.html(data.msg);
					}else{
						span.css("color","green");
						span.html(data.msg);	
					}
					
				});
			}
			
		});
	});


	</script>
    
</head>
<body>
<div class='login'>
<form action="" name="f" method="post">
	  <div class='login_title'>
	    <span>欢迎你的加入</span>
	  </div>
	  <div class='login_fields'>
	    <div class='login_fields__user'>
	      <div class='icon'>
	        <img alt="" src='img/user_icon_copy.png'>
	      </div>
	      <!-- 用户名输入框 -->
		      <div>
		      <input id="uname" onblur="checkUserName(this.value);" name="user_name" placeholder='用户名' maxlength="16" type='text' autocomplete="off" />
		      <span id="s_username" style="text-align: center;display:block;"></span>
		      <span id="checkUserNameResult" style="text-align: center;display:block;color:red"></span>
	      </div>
	        <div class='validation'>
	          <img alt="" src='img/tick.png'>
	        </div>
	    </div> 
	    <!-- 密码输入框 -->   
	    <div class='login_fields__password'>
	      <div class='icon'>
	        <img alt="" src='img/lock_icon_copy.png'>
	      </div>
	      
	      <input name="user_pwd" onblur="checkPassword(this.value);" placeholder='密码' maxlength="16" type='text' autocomplete="off">
	      <span id="checkPasswordResult" style="text-align: center;display:block;color:red"></span>
	      
	      <div class='validation'>
	        <img alt="" src='img/tick.png'>
	      </div>
	    </div>
	    <div class='login_fields__password'>
	    </div>
	    <div class='login_fields__submit'>
	      <input type='button' value='注册' onclick='register()'>
	  </form>
	</div>
	<div class='authent'>
	  <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
        </div>
	</div>
	<div class="OverWindows"></div>
 
	<script>
	function register() {
	    document.f.action="registerServlet";
	    document.f.submit();
	}

	//检查用户名是否为空
	function checkUserName(obj) {
	    var username = obj;
	    var checkUserNameResult = document.getElementById("checkUserNameResult");
	    if (username.trim().length == 0) {
	        checkUserNameResult.innerHTML = "用户名不能为空";
	        obj.focus();
	    } else {
	    	checkUserNameResult.innerHTML = "";
	    }
	    	
	}
	
	//检查密码是否为空
	function checkPassword(obj) {
	    var password = obj;
	    var checkPasswordResult = document.getElementById("checkPasswordResult");
	    if (password.trim().length == 0) {
	        checkPasswordResult.innerHTML = "密码不能为空";
	        obj.focus();
	    } else {
	        checkPasswordResult.innerHTML = "";
	    }
	}
	</script>
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="assets/css/nprogress.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="assets/css/default.css" type="text/css" media="screen" />
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/jquery.nivo.slider.pack.js"></script>
    <script src="assets/js/nprogress.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});

<%--弹出层--%>
<%--
layui.use('layer', function(){ //独立版的layer无需执行这一句
	  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

	  var active = {
			    setTop: function(){
			      var that = this; 
			      //多窗口模式，层叠置顶
			    }
			    ,notice: function(){
			      //示范一个公告层
			      layer.open({
			        type: 1
			        ,title: false //不显示标题栏
			        ,closeBtn: false
			        ,area: '300px;'
			        ,shade: 0.8
			        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
			        ,btn: ['火速围观', '残忍拒绝']
			        ,btnAlign: 'c'
			        ,moveType: 1 //拖拽模式，0或者1
			        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
			        ,success: function(layero){
			          var btn = layero.find('.layui-layer-btn');
			          btn.find('.layui-layer-btn0').attr({
			            href: 'http://www.layui.com/'
			            ,target: '_blank'
			          });
			        }
			      });
			    }
			
			  };
$('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });
  
});
--%>

<%--轮播图脚本--%>
layui.use(['carousel', 'form'], function(){
	  var carousel = layui.carousel
	  ,form = layui.form;
	  
	//常规轮播
	  carousel.render({
	    elem: '#test1'
	    ,arrow: 'always'
	  });

	  //图片轮播
	  carousel.render({
	    elem: '#test10'
	    ,width: '560px'
	    ,height: '200px'
	    ,interval: 3000
	  });
	  carousel.render({
		    elem: '#test3'
		    ,width: '540px'
		    ,height: '200px'
		    ,interval: 3000
		  });
	  
	  var $ = layui.$, active = {
	    set: function(othis){
	      var THIS = 'layui-bg-normal'
	      ,key = othis.data('key')
	      ,options = {};
	      
	      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
	      options[key] = othis.data('value');
	      ins3.reload(options);
	    }
	  };
	  
	  //监听开关
	  form.on('switch(autoplay)', function(){
	    ins3.reload({
	      autoplay: this.checked
	    });
	  });
	  
	  $('.demoSet').on('keyup', function(){
	    var value = this.value
	    ,options = {};
	    if(!/^\d+$/.test(value)) return;
	    
	    options[this.name] = value;
	    ins3.reload(options);
	  });
	  $('.demoTest .layui-btn').on('click', function(){
		    var othis = $(this), type = othis.data('type');
		    active[type] ? active[type].call(this, othis) : '';
		  });
});

<%--日历脚本--%>
layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  //直接嵌套显示
	  laydate.render({
	    elem: '#test-n1'
	    ,position: 'static'
	  });
	});
	
/*banner 初始化*/
$(window).load(function() {
 $('#slider').nivoSlider({
    effect: 'random',        // 过渡效果
    controlNav: false,       // 是否显示图片导航控制按钮（,2,3... ）
    pauseOnHover: true,      // 鼠标县浮时是否停止动画
    manualAdvance: false,    // 是否手动切换 
    animSpeed: 100,          // 图片过渡时间   
    pauseTime: 2000,         // 图片显示时间
    pauseOnHover: false,
    manualAdvance: false,
});
});
$(document).ready(function(){
$('body').show();
$('.version').text(NProgress.version);
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
})

</script>


<style type="text/css">
	body{
		background-repeat:no-repeat;
		background-image:url(layui/images/11.jpg);
	}
</style>
 
</head>
<body>
<!-- 导航栏 -->
<ul class="layui-nav" style="background:rgba(255,240,245,0.4)">
  <li class="layui-nav-item" lay-unselect="">
    <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"><font style="font-weight:bold;font-style:italic;">我</font></a>
    <dl class="layui-nav-child">
      <dd><a href="index.jsp">主页</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退出</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="personal.jsp"><font style="font-weight:bold;font-style:italic;">个人中心</font><span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item" style="float:right" >
    <a href=""><font style="font-weight:bold;font-style:italic;">控制台</font><span class="layui-badge" >9</span></a>
  </li>
</ul>

<!-- 内容填充 -->
  
  <!-- 公告 -->
    <div class="layui-col-md3" id="layerDemo" style="margin-bottom: 0;">
      <!--  <button data-method="notice" class="layui-btn">公告栏</button>-->
      <div style="padding: 10px; background-color: #F2F2F2;background:rgba(255,240,245,0);">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">公告栏</div>
        <div class="layui-card-body">
          博客内容请勿盗用，严禁使用于不法途径
        </div>
      </div>
    </div>
  </div>
</div> 
<div>
<br>
<br>
<br>
<br>
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="background:rgba(138,43,226,0.6);margin-right: 15px;"style="float:left">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">主菜单</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">个人中心</a></dd>
      <dd><a href="javascript:;">管理中心</a></dd>
      <dd><a href="javascript:;">博客管理</a></dd>
     
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">文章分类</a>
    <dl class="layui-nav-child">
      <dd><a href="">随笔</a></dd>
      <dd><a href="">游记</a></dd>
      <dd><a href="">教育</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="write.jsp">写博客</a></li>
  <li class="layui-nav-item"><a href="">留言板</a></li>
</ul>
</div>
    </div>
    
    <!-- 轮播图 -->

     <div class="layui-col-md3">
     <br>
<div class="row" >
        <div class="col-md-12 post-container" >
            <h2 class="post-title">
                <a href="block.jsp" title="">博客介绍</a>
            </h2>
            <div class="meta-box">
            <span class="m-post-date">
              <i class="fa fa-calendar-o">
              </i>
              2019年11月1日
            </span>
            </div>
            <div class="post-content">
                <p>
                   博客用来记录分享学习中的经验，也是为了丰富学习的色彩，增添学习乐趣。也为找到有相同学习兴趣的同学们提供一个平台。
                   如有问题可进入我的博客主页联系我！
                    <a href="https://blog.csdn.net/ITarmi">
                        主页
                    </a>
                    </p>
            </div>
            <div class="meta-box">
            <span class="cat-links">
              <i class="fa fa-navicon">
              </i>
                  分类: 随笔
            </span>
            <span class="tag-links">
              <i class="fa fa-tags">
              </i>
                  标签:  通告
            </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 post-container">
            <h2 class="post-title">
                <a href="block.jsp" title="">第一篇文章</a>
            </h2>
            <div class="meta-box">
            <span class="m-post-date">
              <i class="fa fa-calendar-o">
              </i>
              2015年6月3日
            </span>
            </div>
            <div class="post-content">
                <p>
                   这是第一个javaweb项目，虽然粗糙，但还是有价值。
                </p>
            </div>
              <div class="meta-box">
            <span class="cat-links">
              <i class="fa fa-navicon">
              </i>
                  分类: 随笔
            </span>
            <span class="tag-links">
              <i class="fa fa-tags">
              </i>
                  标签:  通告
            </span>
            </div>
        </div>
    </div>
    
     <!--更多内容-->
    <div class="row">
        <div class="col-md-12">
            <h2 class="page-title">
                <a href="block.jsp" title="">更多内容</a>
            </h2>
        </div>
    </div>
    <!--跳转至博客页面-->
    <div class="row">
        <div class="col-md-12 post-container">
            <div class="row">
                <div class="col-md-4">
                    <a class="btn btn-primary home-browser-more-btn" href="https://blog.csdn.net/ITarmi">
                        <span>浏览更多文章</span>
                    </a>
                </div>
                <div class="col-md-8">
                </div>
            </div>
        </div>
    </div>
    </div>
    
    <!-- 日历的显示 -->
    <div class="layui-col-md3" style="float:right">
<div class="site-demo-laydate"  >
  <div class="layui-inline" id="test-n1"></div>
</div>
    </div>
   
    <!-- 垂直菜单 -->
   <div class="layui-row layui-col-space5">
   <div class="layui-col-md4">
      <div class="grid-demo">1/3</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo">1/3</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
  </div>
  
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
      <div class="grid-demo grid-demo-bg1">9/12</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">3/12</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md7">
      <div class="grid-demo grid-demo-bg1">7/12</div>
    </div>
    <div class="layui-col-md5">
      <div class="grid-demo">5/12</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space30">
    <div class="layui-col-md7">
      <div class="grid-demo grid-demo-bg1">7/12</div>
    </div>
    <div class="layui-col-md5">
      <div class="grid-demo">5/12</div>
    </div>
  </div>
  
  <!-- 特效 -->
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://itbyc.com/templets/yang/js/snow.js"></script>

<style type="text/css">.snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}</style>

<div class="snow-container"></div>
</body>
</html>

这些是主要页面，因为是初学者，所以代码格式，风格可能会有点乱，甚至实现起来可能有点啰嗦。但相信大家应该能够看懂。
仅仅这些文件是跑不起来的（因为还涉及到css,js,jquery等），放出来是为了方便大家参考。如果需要完整项目跑的话，下面给出一个网盘连接：
链接：项目下载地址
提取码：9kvd

学习中，欢迎交流