说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期我会考虑完成该项目的后台管理。希望本教程提供的内容,可以成为JavaWeb初学者一套较为完整的练手项目。

到目前为止,我们的登录页面除了引用一下外部的header.jsp,还什么都没有做。为了让页面更加得漂亮,并且省去自己写css的麻烦,我们可以直接采用layui框架来绘制登录页面。百度搜索一下layui,找到layui的官方,你自然就会找到其下载链接了。https://www.layui.com/

点击下载按钮,将最新版的layui下载下来。下载完毕后,解压,放到项目的static文件夹中。

image.png

可以点击这个layui网站顶部导航栏里面的示例,去学习每一个组件的用法。基本来说,就是写一个html标签,然后加上一个对应的class样式即可。也有一些诸如弹窗之类的插件,则需要写上对应的JavaScript代码。

回到login.jsp:


OK,让我们开始尝试,首先,得需要一个div面板。layui框架给我们提供了面板的解决方案 -- 卡片面板。

点击查看代码。

试着将需要的代码复制出来。

粘贴到login.jsp

因为用到了layui的css样式,所以我们还需要引入对应的css文件。

<link rel="stylesheet" href="static/layui-v2.4.5/layui/css/layui.css" />

保存,看效果:

哎呀我去,什么鬼?原来,layui.css影响了我们header.jsp中默认的a标签样式,字体变成黑色了。


那我们只好在header.jsp中对a标签进行设置。

这样就变回来了。

继续,我们发现卡片面板已经被完全复制过来。

为了方便对其进行css操作,给它加上一个id。经过对比,还发现少了一个div的结束符,加上即可。最终代码如下:

	<div id="login" 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>

我们知道用户登录需要填写用户名和密码,也就是需要表单元素,那么layui里面自然也给我提供了很多的表单元素,我们直接复制一些代码过来即可。页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="static/css/public.css" />
<link rel="stylesheet" href="static/css/header.css" />
<link rel="stylesheet" href="static/layui-v2.4.5/layui/css/layui.css" />
</head>
<body>
	<!-- 头部页面 -->
	<%@include file="common/header.jsp" %>

	<div id="login" 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">
	         	<!-- 这里写登录页面的主体 -->
	         	<form class="layui-form" action="" lay-filter="example">
				  <div class="layui-form-item">
				    <label class="layui-form-label">用户名</label>
				    <div class="layui-input-block">
				      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">密码</label>
				    <div class="layui-input-block">
				      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
				    </div>
				  </div>
			</form>
	        </div>
	      </div>
	    </div>
    </div>
	
</body>
</html>

效果:

image.png

最后,再加上登录和重置按钮。

image.png

这样一来,登录页面就算是画好了,接着,是页面的背景。

将下面的样式和html代码拷贝到login.jsp中。

    <div id="sky">
		<div class="clound s1"></div>
		<div class="clound s2"></div>
		<div class="clound s3"></div>
		<div class="clound s4"></div>
		<div class="clound s5"></div>
	</div>
<style type="text/css">
#sky {
		background:-webkit-linear-gradient(top,#CADCE9 0%,#fff 100%);
		background:linear-gradient(top,#CADCE9 0%,#fff 100%);
		padding:100px 0;
	}
	.clound {
		width:200px;
		height:60px;
		background:#fff;
		border-radius:200px;
		position:relative;
	}
	.clound:before,.clound:after {
		content:"";
		width:100px;
		height:80px;
		background:#fff;
		border-radius:100px;
		position:absolute;
		top:-15px;
		left:10px;
		transform:rotate(30deg)}
	.clound:before {
		width:120px;
		height:120px;
		border-radius:120px;
		top:-55px;
		right:15px;
		left:auto;
	}
	@-webkit-keyframes moveclouds {
		0% {
		margin-left:1000px;
	}
	100% {
		margin-left:-1000px;
	}
	}
	@keyframes moveclouds {
		0% {
		margin-left:1000px;
	}
	100% {
		margin-left:-1000px;
	}
	}
	.s1 {
		-webkit-animation:moveclouds 15s infinite ease;
		animation:moveclouds 15s infinite ease;
	}
	.s2 {
		left:200px;
		-webkit-animation:moveclouds 18s infinite ease;
		animation:moveclouds 18s infinite ease;
		transform:scale(0.6);
		opacity:0.6}
	.s3 {
		left:-200px;
		top:-200px;
		-webkit-animation:moveclouds 20s infinite ease;
		animation:moveclouds 20s infinite ease;
		transform:scale(0.7);
		opacity:0.7}
	.s4 {
		left:-300px;
		top:-200px;
		-webkit-animation:moveclouds 25s infinite ease;
		animation:moveclouds 25s infinite ease;
		transform:scale(0.8);
		opacity:0.8}
	.s5 {
		left:-400px;
		top:-100px;
		-webkit-animation:moveclouds 28s infinite ease;
		animation:moveclouds 25s infinite ease;
		transform:scale(0.9);
		opacity:0.9}
		
		#login {
			position:absolute;
			left:0;
			top:0;
			width:300px;
			height:450px;
		}
		
		
		#login .layui-col-md6{
			position: absolute;
		    width: 500px;
		    left: 500px;
		    top: 200px;
		    z-index: 999;
		}
</style>

最终效果:

写在结尾

本教程原本写于2016年,它曾经花费了我非常多的精力和时间。现在由于工作的关系,楼主打算重新拾起当年的热情,开始动笔对该教程进行重制和进阶。如有问题和建议可以在下方留言,我会视具体情况加以改进和修改。

随便回复一个评论,再刷新一下页面,即可看到网盘链接,教程会持续更新。

image.png


隐藏资源

资源内容:******,隐藏资源

此资源,你需要回复评论后才能查看