登录注册界面
登录界面:
<%@ 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="css/style.css">
</head>
<body>
<main>
<div class="form__cover"></div>
<div class="form__loader">
<div class="spinner active">
<svg class="spinner__circular" viewBox="25 25 50 50"> <circle
class="spinner__path" cx="50" cy="50" r="20" fill="none"
stroke-width="4" stroke-miterlimit="10"></circle> </svg>
</div>
</div>
<div class="form__content">
<form action="doLogin.jsp" method="post">
<h1>E Login</h1>
<div class="styled-input">
<input type="text" class="styled-input__input" name="nickname">
<div class="styled-input__placeholder">
<span class="styled-input__placeholder-text">Username</span>
</div>
<div class="styled-input__circle"></div>
</div>
<div class="styled-input">
<input type="text" class="styled-input__input" name="pwd">
<div class="styled-input__placeholder">
<span class="styled-input__placeholder-text">Password</span>
</div>
<div class="styled-input__circle"></div>
</div>
<button type="submit" class="styled-button">
<span class="styled-button__real-text-holder"> <span
class="styled-button__real-text">Submit</span> <span
class="styled-button__moving-block face"> <span
class="styled-button__text-holder"> <span
class="styled-button__text">Submit</span>
</span>
</span><span class="styled-button__moving-block back"> <span
class="styled-button__text-holder"> <span
class="styled-button__text">Submit</span>
</span>
</span>
</span>
</button>
</div>
</form>
</main>
<script src="js/index.js"></script>
</body>
</html>
用户接口+用户接口实现类
package com.zking.home.dao;
import com.zking.home.entity.Users;
/**
*
* 用户接口类
*
*/
public interface IUsersDao {
/**
* 用户登陆
*
* @param users
* @return
*/
Users userLogin(Users users);
/**
* 用户注册
*
* @param users
* @return
*/
int userRegister(Users users);
//获取最大id
int getUserMaxID();
}
package com.zking.home.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.List;
import com.zking.home.dao.IUsersDao;
import com.zking.home.entity.Users;
import com.zking.home.utils.BaseDao;
import com.zking.home.utils.DBHelper;
/**
* 用户接口实现类
*
* @author zjjt
*
*/
public class UsersDaoImpl extends BaseDao implements IUsersDao {
public static void main(String[] args) {
IUsersDao iud = new UsersDaoImpl();
Users userLogin = iud.userLogin(new Users("Lucy", "111"));
System.out.println(userLogin);
}
@Override
public Users userLogin(Users users) {
String sql = "select * from e_users where username = ? and upassword = ?";
ResultSet rs = this.executeQuery(sql, new Object[] { users.getUname(), users.getUpwd() });
try {
if (rs.next()) {
return new Users(rs.getInt(1), rs.getString(2), rs.getString(3), rs.getString(4), rs.getString(5));
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 用户注册
*/
@Override
public int userRegister(Users users) {
// 1.定义所需的对象及变量
int userid = 0;// 定义一个变量保存最终的id
int n = 0;// 所影响的行数
// 链接数据库查询到最大的id 最后+1
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "select nvl(max(userid),0) from e_users";
// 2.赋值
try {
// 获取数据库连接
conn = DBHelper.getConn();
// 将定义的sql语句传入方法返回执行对象
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
// 判断
if (rs.next()) {
userid = rs.getInt(1) + 1;
}
// 进行注册了
// 新增的sql语句
sql = "insert into e_users(userid,username,upassword,usex,udate) values (?,?,?,?,sysdate)";
ps = conn.prepareStatement(sql);
ps.setInt(1, userid);
ps.setString(2, users.getUname());
ps.setString(3, users.getUpwd());
ps.setString(4, users.getUsex());
// 4.返回所影响的行数
n = ps.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(conn, ps, rs);
}
return n;
}
@Override
public int getUserMaxID() {
int nid = 0;
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "select nvl(max(userId),0) from e_users";
try {
con = DBHelper.getConn();
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
// 判断
if (rs.next()) {
nid = rs.getInt(1) + 1;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
DBHelper.myClose(con, ps, rs);
}
return nid;
}
}
创建业务逻辑层并调用
运用Servlet的知识(上次内容中)完善doLogin.jsp类,即创建servlet包并编写实现用户功能的内容
通过的是在servlet中继承servlet并在web.xml中重新命名和配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>E_HomeLand</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.zking.home.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/login.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>LoadServlet</servlet-name>
<servlet-class>com.zking.home.servlet.LoadServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoadServlet</servlet-name>
<url-pattern>/load.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>RegisterServlet</servlet-name>
<servlet-class>com.zking.home.servlet.RegisterServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegisterServlet</servlet-name>
<url-pattern>/register.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>TypeServlet</servlet-name>
<servlet-class>com.zking.home.servlet.TypeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TypeServlet</servlet-name>
<url-pattern>/type.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>DetailServlet</servlet-name>
<servlet-class>com.zking.home.servlet.DetailServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DetailServlet</servlet-name>
<url-pattern>/detail.do</url-pattern>
</servlet-mapping>
</web-app>
package com.zking.home.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 javax.servlet.http.HttpSession;
import com.zking.home.biz.IUsersBiz;
import com.zking.home.biz.impl.UsersBizImpl;
import com.zking.home.entity.Users;
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//数据获取
String username = request.getParameter("nickname");
String password = request.getParameter("pwd");
//数据封装
Users users = new Users(username, password);
//调用业务逻辑层进行数据交互
IUsersBiz iub = new UsersBizImpl();
Users userLogin = iub.userLogin(users);
HttpSession session = request.getSession();
PrintWriter out = response.getWriter();
String path = this.getServletContext().getContextPath();
//判断并进行域对象保存
if(userLogin != null) {
session.setAttribute("userLogin", userLogin);
response.sendRedirect(path+"/index.jsp");
}else {
out.write("<script>alert('用户名或密码错误');location.href='"+path+"/Login.jsp'</script>");
}
}
}
后在主界面进行调用
主界面
实现登录+注册+修改+显示数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>E家园首页</title>
<style>
body {
font-size: 12px;
margin: 0px;
padding: 0px;
}
.con {
width: 780px;
margin: auto;
}
.top {
width: 780px;
}
.center {
width: 780px;
}
.ca {
width: 188px;
height: 500px;
float: left;
}
.cb {
width: 580px;
margin-left: 8px;
float: left;
}
.foot {
width: 780px;
}
li {
list-style: none;
}
#top li {
list-style: none;
float: left;
}
#top li img {
width: 111px;
float: left;
height: 50px;
border: 0px;
}
</style>
<script type="text/javascript">
function register() {
var mycontent = document.getElementById("mycontent");
mycontent.style.display = 'none';
var myRegister = document.getElementById("myRegister");
myRegister.style.display = 'block';
}
</script>
<c:if test="${empty map }">
<jsp:forward page="doLoad.jsp"></jsp:forward>
</c:if>
</head>
<body>
<div class="con">
<div id="top" class="top">
<div style="margin-left: 40px;">
<img src="img/logo.jpg" />
</div>
<div>
<ul style="margin-left: -40px;">
<li><a href="#"><img src="img/daohan_1.jpg" /></a></li>
<li><img src="img/daohan_2.jpg" /></li>
<li><img src="img/daohan_3.jpg" /></li>
<li><img src="img/daohan_4.jpg" /></li>
<li><img src="img/daohan_5.jpg" /></li>
<li><img src="img/daohan_6.jpg" /></li>
<li><img src="img/daohan_7.jpg" /></li>
</ul>
</div>
</div>
<div style="height: 60px;"></div>
<div id="center" class="center">
<div class="ca">
<div id="caa"
style="background-img: url(img/bg07.gif); background-repeat: repeat-y;">
<img src="img/bg06.gif" />
<table style="margin-left: 5px;">
<!-- 登录表单 -->
<div class="myLogin">
<c:if test="${empty users }">
<form action="${pageContext.request.contextPath }/login.do" method="post">
账号:<input type="text" name="username" /> <br> 密码:<input
type="password" name="password"> <input type="submit"
value="登录">
</form>
</c:if>
<c:if test="${not empty users }">
欢迎回来!${users.uname }
<button>个人中心</button>
</c:if>
<br> <br>
<button onclick="register()">立即注册</button>
</div>
</table>
<img src="img/line01.gif"
style="margin-top: 20px; margin-left: 5px;" /> <img
src="img/left01.jpg" />
<table style="margin-left: 5px;">
<tr>
<td></td>
</tr>
<tr>
<td>类别:<select></select>
</tr>
<tr>
<td>标题:<input style="width: 110px;" />
</tr>
<tr>
<td>作者:<input style="width: 110px;" />
</tr>
<tr>
<td align="center"><input type="img" src="img/button03.gif" />
</td>
</tr>
</table>
<img src="img/line02.gif" />
</div>
<div id="cab"
style="background-img: url(img/bg07.gif); background-repeat: repeat-y; margin-top: 10px;">
<img src="img/left02.gif" />
<div style="margin-left: 8px;">
站内公告<br> 站内公告<br> 站内公告<br>站内公告<br> 站内公告<br>
站内公告<br>
</div>
<img src="img/line02.gif" />
</div>
</div>
<div class="cb">
<img src="img/banner.gif" />
<div
style="margin-top: 5px; background-img: url(img/bg09.gif); background-repeat: repeat-x; height: 15px; width: 580px;">
<img src="img/dot02.gif" />栏目分类
<div>
<form action="${pageContext.request.contextPath }/register.do" method="post">
<!-- 注册 -->
<div id="myRegister"
style="display: none; background-color: pink; height: 250px">
<center>
<h1>注册界面</h1>
<form>
用户名:<input type="text" /> <br> <br>密码:<input
type="password"> <br> <br> 性别:<input
type="text"> <br> <br> <input type="submit"
value="注册">
</form>
</center>
</div>
</form>
<div class="contents" id="mycontent">
<div id="cba"
style="border-color: #CCCCCC; border-style: inset; height: 130px; width: 272px; border-width: 1px; float: left;">
<img src="img/cen01.jpg" />
<ul>
<c:forEach items="${map.get('碰哒鬼') }" var="list">
<li><a href="${pageContext.request.contextPath }/detail.do?id=${list.aid }">
${list.atitle }</a></li>
</c:forEach>
</ul>
<!-- <ul>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
</ul> -->
</div>
<div id="cba"
style="border-color: #CCCCCC; border-style: inset; height: 130px; width: 272px; border-width: 1px; float: left; margin-left: 30px;">
<img src="img/cen02.jpg" width="272px" />
<ul>
<c:forEach items="${map.get('#.NET学习笔记') }" var="list2">
<li><a href="${pageContext.request.contextPath }/detail.do?id=${list2.articleId }">
${list2.title }</a></li>
</c:forEach>
</ul>
<!-- <ul>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
</ul> -->
</div>
<div id="cba"
style="border-color: #CCCCCC; border-style: inset; height: 130px; width: 272px; border-width: 1px; float: left; margin-top: 5px;">
<img src="img/cen03.jpg" width="272px" />
<ul>
<c:forEach items="${map.get('我是女生') }" var="list3">
<li><a href="${pageContext.request.contextPath }/detail.do?id=${list3.articleId }">
${list3.title }</a></li>
</c:forEach>
</ul>
<!-- <ul>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
</ul> -->
</div>
<div id="cba"
style="border-color: #CCCCCC; border-style: inset; height: 130px; width: 272px; border-width: 1px; float: left; margin-left: 30px; margin-top: 5px;">
<img src="img/cen04.jpg" width="272px" />
<ul>
<c:forEach items="${map.get('是傻逼') }" var="list4">
<li><a href="${pageContext.request.contextPath }/detail.do?id=${list4.articleId }">
${list4.title }</a></li>
</c:forEach>
</ul>
<!-- <ul>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
</ul> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="foot" class="foot"
style="text-align: center; line-height: 20px; float: left;">
版权所有 卓京信息<br> 盗版必究
</div>
</div>
</body>
</html>
实现修改功能
<%@ 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>
<!-- 引入index.css -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div id="container">
<!-- head -->
<div class="head">
<!-- logo start-->
<div class="logo">
<img src="img/logo.jpg">
</div>
<!-- nav -->
<div class="nav">
<ul>
<li><a href="#"><img src="img/daohan_1.jpg" /></a></li>
<li><a href="#"><img src="img/daohan_2.jpg" /></a></li>
<li><a href="#"><img src="img/daohan_3.jpg" /></a></li>
<li><a href="#"><img src="img/daohan_4.jpg" /></a></li>
<li><a href="#"><img src="img/daohan_5.jpg" /></a></li>
<li><a href="#"><img src="img/daohan_6.jpg" /></a></li>
<li><a href="#"><img src="img/daohan_7.jpg" /></a></li>
</ul>
</div>
</div>
<!-- head END -->
<!-- ====================================================================== -->
<!-- main -->
<div class="main">
<!-- main_left -->
<div class="main_left">
<div class="myForm">
<img src="img/bg06.gif">
<!-- 分割线 -->
<div class="division">
<img src="img/line01.gif" /> <img src="img/left01.jpg" />
</div>
<!-- 登录表单 -->
<div class="mysearch"></div>
<img src="img/line02.gif" />
</div>
<!-- myForm END -->
<div class="notice">
<img src="img/left02.gif" />
<div class="notice_content">
站内公告<br> 站内公告<br> 站内公告<br>站内公告<br> 站内公告<br>
站内公告<br>
</div>
<img src="img/line02.gif" />
</div>
</div>
<!-- main_right -->
<div class="main_right">
<div class="carousel">
<img src="img/banner.gif">
<!-- 详情界面 -->
<table style="margin-left: 200px" border="0"
style="text-align: center;align-self: auto;">
<c:forEach items="${list }" var="list">
<tr>
<td>标题:</td>
<td>${list.title }</td>
</tr>
<tr>
<td>作者:</td>
<td>${list.writer}</td>
</tr>
<tr>
<td>内容:</td>
<td>${list.content }</td>
</tr>
<tr>
<td>时间:</td>
<td>${list.writeDate }</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
</div>
<!-- main END -->
<!-- ====================================================================== -->
<!-- footer start -->
<div class="footer">
版权所有 卓京信息<br> 盗版必究
</div>
<!-- footer end -->
</div>
</body>
</html>
注意:这次更新几乎将所有doXXX.jsp页面优化进servlet包中