devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaWeb个人博客项目：手把手教你实现博客后台系统之登录与注册模块4_利用java制作博客网站注册,登录

作者：Monodyee | 2024-05-28 06:54:59

赞

踩

利用java制作博客网站注册,登录

后台系统的所有界面图以及之前的准备工作欢迎看我之前的博文>3<

有任何问题欢迎下方评论=W=

一、图片效果

①项目目录图1与图2

②登录模块图

③注册模块图

二、设置字符集过滤器

①Java Resources的src-->建立package，命名为filter-->创建一个DoFilter的java文件，具体代码如下

（PS.这个过滤器我也是仿照csdn一个老哥的做的，在此感谢这位老哥>3<）

DoFilter.java文件：

  1. package filter;
  2.  
  3. import java.io.IOException;
  4.  
  5. import javax.servlet.Filter;
  6. import javax.servlet.FilterChain;
  7. import javax.servlet.FilterConfig;
  8. import javax.servlet.ServletException;
  9. import javax.servlet.ServletRequest;
  10. import javax.servlet.ServletResponse;
  11.  
  12. public class DoFilter implements Filter {
  13.  
  14. 		public DoFilter(){
  15. 			System.out.println("过滤器构造");
  16. 		}
  17. 		public void destroy() {
  18. 			System.out.println("过滤器销毁");
  19. 		}
  20. 		public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException {
  21. 			request.setCharacterEncoding("utf-8"); //将编码改为utf-8
  22. 			response.setContentType("text/html;charset=utf-8");
  23. 			chain.doFilter(request, response);
  24. 		}
  25. 	 
  26. 		public void init(FilterConfig arg0) throws ServletException {
  27. 			System.out.println("过滤器初始化");
  28. 		}
  29. 	 
  30. 	}
  31.

②在WebContent-->WEB-INF-->web.xml中，设置如下内容

web.xml文件：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  3.   <display-name>MyBlog</display-name>
  4.   <filter>
  5.     <filter-name>Dofilter</filter-name>
  6.     <filter-class>filter.DoFilter</filter-class>
  7.   </filter>
  8.   <filter-mapping>
  9.     <filter-name>Dofilter</filter-name>
  10.     <url-pattern>/*</url-pattern>
  11.   </filter-mapping>
  12.   <!-- 欢迎页，即进入项目的第一个界面 -->
  13.   <welcome-file-list>
  14.     <welcome-file>login.jsp</welcome-file>
  15.   </welcome-file-list>
  16. </web-app>

三、EL与JSTL表达式

①先载入JSTL的Jar包，在项目右键BuildPath-->Configure Build Path的Libraries里-->Add Jars-->选择目标Jar包

②为确保载入Jar包成功，应该在WebContent-->WEB-INF-->lib的文件夹中查看是否有如下内容，这次用的便是有jstl前缀的jar包

③在WebContent-->新建一个jsp文件，取名为base.jsp-->写入如下内容

（关于layui、bootstrap等框架资源百度即可，按照目录结构放入其中）

base.jsp文件：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  4. <c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
  5. <link rel="stylesheet" href="${ctx }/js/layui/css/layui.css">
  6. <script src="${ctx }/js/jquery-3.2.1.min.js"></script>
  7. <script src="${ctx }/js/layui/layui.js"></script>
  8. <script src="${ctx}/js/bootstrap/js/bootstrap.min.js"></script>

四、登录模块

①逻辑分析（以下为我画的管理员登录业务流程图）

 

②详细的数据库之前的博文已经写了，为了更好阅读这里再写一次

建数据库，命名为blog-->建表,命名为dai_adm，设计表的字段如下

属性名

类型

长度

允许空

是否主键

说明

adm_id

tinyint

4

NOT NULL

主键

管理员id、自增

adm_name

varchar

20

NOT NULL

 

管理员名称

adm_password

varchar

20

NOT NULL

 

管理员密码

 

③既然是登录，自然要与数据库进行对接，这里我使用的是mysql数据库，要求要加载好mysql的jar包，步骤同之前JSTL的Jar包设置步骤

  3.1 在Java Resources的src下-->新建package，命名为util-->新建一个config.properties文件，内容如下

（由于我mysql是接入3306端口，数据库连接时使用的用户名是root，没有设置密码，所以这么设置，如果你有密码,pwd=你的密码）

config.properties文件：

  1. driverClass=com.mysql.jdbc.Driver
  2. url=jdbc:mysql://localhost:3306/blog?useUnicode=true&characterEncoding=utf-8&useSSL=false
  3. #mysql username
  4. user=root
  5. #mysql password
  6. pwd=

  3.2 在Java Resources的src下-->util包中-->新建一个class文件，命名为DBUtil，代码如下

DBUtil.java文件：

  1. package util;
  2.  
  3.  
  4. import java.io.InputStream;
  5. import java.sql.Connection;
  6. import java.sql.DriverManager;
  7. import java.sql.SQLException;
  8. import java.util.Properties;
  9.  
  10. public class DBUtil {
  11. 	private static String driverClass;
  12. 	private static String url;
  13. 	private static String user;
  14. 	private static String pwd;
  15. 	
  16. 	//static block静态块
  17. 	static{
  18. 		//产生properties类的实例
  19. 		Properties prop = new Properties();
  20. 		//转换成文件流
  21. 		InputStream is = DBUtil.class.getClassLoader().getResourceAsStream("util/config.properties");
  22. 		
  23. 		try {
  24. 			prop.load(is);
  25. 			driverClass = prop.getProperty("driverClass").trim();
  26. 			url = prop.getProperty("url").trim();
  27. 			user = prop.getProperty("user").trim();
  28. 			pwd = prop.getProperty("pwd").trim();
  29. 			Class.forName(driverClass);
  30. 			
  31. 			//当前类的位置
  32. 			System.out.println(DBUtil.class.getResource(""));
  33. 			//当前类的根目录的位置
  34. 			System.out.println(DBUtil.class.getClassLoader().getResource(""));
  35. 		} catch (Exception e) {
  36. 			e.printStackTrace();
  37. 		}		
  38. 	}
  39. 	
  40. 	public static Connection getConnection(){
  41. 		// 数据库的连接
  42. 		Connection conn = null;
  43. 		try {
  44. 			conn = DriverManager.getConnection(url, user,pwd);
  45. 		} catch (SQLException e) {
  46. 			e.printStackTrace();
  47. 		}
  48. 		return conn;
  49. 	}
  50. 	public static void closeConnection(Connection conn) throws SQLException {
  51. 		conn.close();
  52. 	}
  53. 	
  54. }

④这个项目使用了MVC结构，登录模块也就是对管理员进行操作，这里先写pojo层，再写dao层

  4.1 在src中-->新建一个package，命名为pojo-->新建一个class文件，命名为Adm，内容如下

Adm.java文件：

  1. package pojo;
  2.  
  3. public class Adm{
  4. 	private Integer adm_id;
  5. 	private String adm_name;
  6. 	private String adm_password;
  7. 	
  8. 	public Integer getAdm_id() {
  9. 		return adm_id;
  10. 	}
  11. 	public void setAdm_id(Integer adm_id) {
  12. 		this.adm_id = adm_id;
  13. 	}
  14. 	public String getAdm_name() {
  15. 		return adm_name;
  16. 	}
  17. 	public void setAdm_name(String adm_name) {
  18. 		this.adm_name = adm_name;
  19. 	}
  20. 	public String getAdm_passward() {
  21. 		return adm_password;
  22. 	}
  23. 	public void setAdm_passward(String adm_password) {
  24. 		this.adm_password = adm_password;
  25. 	}
  26. }

   4.2 由于后来要做分页功能，所以还要封装一个类-->pojo包中-->新建一个class，命名为ChangePage，内容如下

ChangePage.java文件：

  1. package pojo;
  2.  
  3. public class ChangePage {
  4. 	private int page; //默认第一页
  5. 	private int limit; //默认一页10条数据
  6. 	private int startRow = (page-1)*limit;//mysql里语句随之发生改变
  7. 	private String sort;//排序字段
  8. 	private String order;//排序关键字
  9. 	public int getPage() {
  10. 		return page;
  11. 	}
  12. 	public void setPage(int page) {
  13. 		this.page = page;
  14. 	}
  15. 	public int getLimit() {
  16. 		return limit;
  17. 	}
  18. 	public void setLimit(int limit) {
  19. 		this.limit = limit;
  20. 	}
  21. 	public int getStartRow() {
  22. 		return (page-1)*limit;
  23. 	}
  24. 	public void setStartRow(int startRow) {
  25. 		this.startRow = startRow;
  26. 	}
  27. 	public String getSort() {
  28. 		return sort;
  29. 	}
  30. 	public void setSort(String sort) {
  31. 		this.sort = sort;
  32. 	}
  33. 	public String getOrder() {
  34. 		return order;
  35. 	}
  36. 	public void setOrder(String order) {
  37. 		this.order = order;
  38. 	}
  39. }

 4.3 在src中-->新建一个package，命名为dao-->新建一个interface文件，命名为AdmDao，内容如下

AdmDao.java文件：

  1. package dao;
  2.  
  3. import java.util.ArrayList;
  4.  
  5. import pojo.Adm;
  6.  
  7. public interface AdmDao {
  8. 	//1.查询管理员,返回一个管理员类型  这是login里头的方法
  9. 	public Adm getAdm(String username,String password);
  10. 	//2查询所有的管理员
  11. 	public ArrayList<Adm> getAllAdm();
  12. 	//3.添加管理员
  13. 	public boolean insertAdm(String username,String pwd);
  14. 	//4.根据id删除管理员
  15. 	public boolean deleteAdm(int id);
  16. 	//5.修改管理员信息
  17. 	public boolean updateAdm(Adm a);
  18. 	//6.根据adm_name查询是否存在该用户，即id唯一，用户名唯一
  19. 	public boolean queryIsExist(String username);
  20. 	//7.根据id，查询一个管理员
  21. 	public Adm getOneAdm(int adm_id);
  22. 	//8 分页查询所有的管理员
  23. 	public ArrayList<Adm> getPageAdm(int page,int limit);
  24. 	
  25. }

4.4 写AdmDao的实现类，本应该放在不同的包里，我当时为了简便，依然放在了dao包

dao包-->新建class文件，命名为AdmDaoImpl-->实现AdmDao接口，代码如下

AdmDaoImpl.java文件：

  1. package dao;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7. import java.util.ArrayList;
  8. import pojo.Adm;
  9. import pojo.ChangePage;
  10. import util.DBUtil;
  11.  
  12. public class AdmDaoImpl implements AdmDao {
  13.  
  14. 	// 分页方法
  15. 	@Override
  16. 	public ArrayList<Adm> getPageAdm(int page, int limit) {
  17. 		ArrayList<Adm> adm = new ArrayList<Adm>();
  18. 		Connection conn = DBUtil.getConnection();
  19. 		ChangePage cp = new ChangePage();
  20. 		cp.setLimit(limit);
  21. 		cp.setPage(page);
  22. 		int startRow = cp.getStartRow();
  23. 		String sql = "select * from dai_adm limit " + startRow + "," + limit + "";
  24. 		// 预编译
  25. 		try {
  26. 			PreparedStatement prep = conn.prepareStatement(sql);
  27. 			ResultSet rst = prep.executeQuery();
  28. 			while (rst.next()) {
  29. 				Adm ad = new Adm();
  30. 				ad.setAdm_id(rst.getInt(1));
  31. 				ad.setAdm_name(rst.getString("adm_name"));
  32. 				ad.setAdm_passward(rst.getString("adm_password"));
  33. 				adm.add(ad);
  34. 			}
  35. 		} catch (SQLException e) {
  36. 			e.printStackTrace();
  37. 		} finally {
  38. 			try {
  39. 				DBUtil.closeConnection(conn);
  40. 			} catch (SQLException e) {
  41. 				e.printStackTrace();
  42. 			}
  43. 		}
  44. 		return adm;
  45. 	}
  46.  
  47. 	// 查询所有的管理员
  48. 	@Override
  49. 	public ArrayList<Adm> getAllAdm() {
  50. 		ArrayList<Adm> adm = new ArrayList<Adm>();
  51. 		Connection conn = DBUtil.getConnection();
  52. 		// 在数据库中添加记录
  53. 		String sql = "select * from dai_adm";
  54. 		// 预编译
  55. 		try {
  56. 			PreparedStatement prep = conn.prepareStatement(sql);
  57. 			ResultSet rst = prep.executeQuery();
  58. 			while (rst.next()) {
  59. 				Adm ad = new Adm();
  60. 				ad.setAdm_id(rst.getInt(1));
  61. 				ad.setAdm_name(rst.getString("adm_name"));
  62. 				ad.setAdm_passward(rst.getString("adm_password"));
  63. 				adm.add(ad);
  64. 			}
  65. 		} catch (SQLException e) {
  66. 			e.printStackTrace();
  67. 		} finally {
  68. 			try {
  69. 				DBUtil.closeConnection(conn);
  70. 			} catch (SQLException e) {
  71. 				e.printStackTrace();
  72. 			}
  73. 		}
  74. 		return adm;
  75. 	}
  76.  
  77. 	@Override
  78. 	public Adm getAdm(String username, String password) {
  79. 		Adm a = null;
  80. 		Connection conn = DBUtil.getConnection();
  81. 		String sql = "select * from dai_adm where adm_name = ? and adm_password = ?";
  82. 		// 预编译
  83. 		PreparedStatement prep;
  84. 		try {
  85. 			prep = conn.prepareStatement(sql);
  86. 			prep.setString(1, username);
  87. 			prep.setString(2, password);
  88. 			ResultSet rst = prep.executeQuery();
  89. 			if (rst.next()) {
  90. 				System.out.println("啊啊啊，我是servlet，我已经查到信息了！！！");
  91. 				a = new Adm();
  92. 				a.setAdm_id(rst.getInt("adm_id"));
  93. 				a.setAdm_name(rst.getString("adm_name"));
  94. 				a.setAdm_passward(rst.getString("adm_password"));
  95. 				return a;
  96. 			} else {
  97. 				// System.out.println(username+","+password);
  98. 			}
  99. 		} catch (Exception e) {
  100. 			e.printStackTrace();
  101. 		} finally {
  102. 			try {
  103. 				DBUtil.closeConnection(conn);
  104. 			} catch (SQLException e) {
  105. 				e.printStackTrace();
  106. 			}
  107. 		}
  108. 		return a;
  109. 	}
  110.  
  111. 	// 3.添加管理员
  112. 	@Override
  113. 	public boolean insertAdm(String username, String pwd) {
  114. 		Connection conn = DBUtil.getConnection();
  115. 		// 在数据库中添加记录
  116. 		String sql = "insert into dai_adm(adm_name,adm_password) values(?,?)";
  117. 		// 预编译
  118. 		PreparedStatement prep;
  119. 		try {
  120. 			prep = conn.prepareStatement(sql);
  121. 			prep.setString(1, username);
  122. 			prep.setString(2, pwd);
  123. 			prep.executeUpdate();
  124. 			return true;
  125. 		} catch (SQLException e) {
  126. 			e.printStackTrace();
  127. 			return false;
  128. 		} finally {
  129. 			try {
  130. 				DBUtil.closeConnection(conn);
  131. 			} catch (SQLException e) {
  132. 				e.printStackTrace();
  133. 			}
  134. 		}
  135. 	}
  136.  
  137. 	@Override
  138. 	public boolean deleteAdm(int adm_id) {
  139. 		Connection conn = DBUtil.getConnection();
  140. 		// 在数据库中删除记录
  141. 		String sql = "delete from dai_adm where adm_id = ?";
  142. 		// 预编译
  143. 		PreparedStatement prep;
  144. 		try {
  145. 			prep = conn.prepareStatement(sql);
  146. 			prep.setInt(1, adm_id);
  147. 			prep.executeUpdate();
  148. 			return true;
  149. 		} catch (SQLException e) {
  150. 			e.printStackTrace();
  151. 			return false;
  152. 		} finally {
  153. 			try {
  154. 				DBUtil.closeConnection(conn);
  155. 			} catch (SQLException e) {
  156. 				e.printStackTrace();
  157. 			}
  158. 		}
  159. 	}
  160.  
  161. 	@Override
  162. 	public boolean updateAdm(Adm a) {
  163. 		Connection conn = DBUtil.getConnection();
  164. 		// 在数据库中修改记录
  165. 		String sql = "update dai_adm set adm_name = ?,adm_password = ? where adm_id=?";
  166. 		// 预编译
  167. 		PreparedStatement prep;
  168. 		try {
  169. 			prep = conn.prepareStatement(sql);
  170. 			prep.setString(1, a.getAdm_name());
  171. 			prep.setString(2, a.getAdm_passward());
  172. 			prep.setInt(3, a.getAdm_id());
  173. 			prep.executeUpdate();
  174. 			return true;
  175. 		} catch (SQLException e) {
  176. 			e.printStackTrace();
  177. 			return false;
  178. 		} finally {
  179. 			try {
  180. 				DBUtil.closeConnection(conn);
  181. 			} catch (SQLException e) {
  182. 				e.printStackTrace();
  183. 			}
  184. 		}
  185. 	}
  186.  
  187. 	@Override
  188. 	public boolean queryIsExist(String username) {
  189. 		Connection conn = DBUtil.getConnection();
  190. 		// 在数据库中查询记录
  191. 		String sql = "select * from dai_adm where adm_name = ?";
  192. 		// 预编译
  193. 		PreparedStatement prep;
  194. 		try {
  195. 			prep = conn.prepareStatement(sql);
  196. 			prep.setString(1, username);
  197. 			ResultSet rst = prep.executeQuery();
  198. 			if (rst.next()) {
  199. 				return true;
  200. 			} else {
  201. 				return false;
  202. 			}
  203.  
  204. 		} catch (SQLException e) {
  205. 			e.printStackTrace();
  206.  
  207. 		} finally {
  208. 			try {
  209. 				DBUtil.closeConnection(conn);
  210. 			} catch (SQLException e) {
  211. 				e.printStackTrace();
  212. 			}
  213. 		}
  214. 		return false;
  215. 	}
  216.  
  217. 	@Override
  218. 	public Adm getOneAdm(int adm_id) {
  219. 		Adm a = null;
  220. 		Connection conn = DBUtil.getConnection();
  221. 		// 在数据库中修改记录
  222. 		String sql = "select * from dai_adm where adm_id = ?";
  223. 		// 预编译
  224. 		PreparedStatement prep;
  225. 		try {
  226. 			prep = conn.prepareStatement(sql);
  227. 			prep.setInt(1, adm_id);
  228. 			ResultSet rst = prep.executeQuery();
  229. 			a = new Adm();
  230. 			if (rst.next()) {
  231. 				a.setAdm_id(rst.getInt(1));
  232. 				a.setAdm_name(rst.getString("adm_name"));
  233. 				a.setAdm_passward(rst.getString("adm_password"));
  234. 				return a;
  235. 			}
  236.  
  237. 		} catch (Exception e) {
  238. 			e.printStackTrace();
  239. 		} finally {
  240. 			try {
  241. 				DBUtil.closeConnection(conn);
  242. 			} catch (SQLException e) {
  243. 				e.printStackTrace();
  244. 			}
  245. 		}
  246. 		return a;
  247. 	}
  248.  
  249. }

      PS：这里有一个方法叫做getAllAdm（），还有一个方法叫做getPageAdm（）。

      前者我是用来获得总共有多少条管理员信息，后者我是用来获得分页信息与分页数据的，前者本来不需要在数据库上走那么多步骤。

      因为ResultSet创建的对象可以使用last()方法跳到最后一条数据，然后再使用getRow()方法获得总数，这里建议大家按照这种方法。

 

⑤Service层：src-->新建package包，命名为servlet-->新建一个Servlet文件，命名为LoginServlet-->在URL mappings中改名为/login-->键入代码，如下

LoginServlet.java文件：

  1. package servlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import dao.AdmDao;
  13. import dao.AdmDaoImpl;
  14. import pojo.Adm;
  15.  
  16. /**
  17.  * Servlet implementation class LoginServlet
  18.    WebServlet里的/login就是刚刚改的URL Mappings的内容
  19.  */
  20. @WebServlet("/login")
  21. public class LoginServlet extends HttpServlet {
  22. 	private static final long serialVersionUID = 1L;
  23.        
  24.     /**
  25.      * @see HttpServlet#HttpServlet()
  26.      */
  27.     public LoginServlet() {
  28.         super();
  29.         // TODO Auto-generated constructor stub
  30.     }
  31.  
  32. 	/**
  33. 	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  34. 	 * void getSession()方法相当于得到一个session对象，而void setAttribute()和String Attribute分别是对属性赋值和得到属性值的方法。
  35. 	 */
  36. 	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  37. 		//response.getWriter().append("Served at: ").append(request.getContextPath());
  38. 		request.setCharacterEncoding("utf-8");
  39. 		response.setContentType("text/html;charset=utf-8");
  40. 		
  41. 		PrintWriter out = response.getWriter();
  42. 		String name = request.getParameter("username");
  43. 		String pwd = request.getParameter("pwd");
  44. 		
  45. 		AdmDao a = new AdmDaoImpl();
  46. 		Adm adm = a.getAdm(name	, pwd);
  47. 		System.out.println(a.toString());
  48. 		if(adm!=null) {
  49. 			request.getSession().setAttribute("admin",adm);			
  50. 			//重定向到成功页面
  51. 			response.sendRedirect("index.jsp"); 
  52. 		}else {
  53. 			//out.println("啊啊啊，我应该转发到失败的界面了");
  54. 			request.setAttribute("errMsg", "账号或密码错误，请重新输入信息！");
  55. 			//转发到login界面
  56. 			request.getRequestDispatcher("login.jsp").forward(request, response); 
  57. 			return;
  58. 		}
  59. 		
  60. 	}
  61.  
  62. 	/**
  63. 	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  64. 	 */
  65. 	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  66. 		// TODO Auto-generated method stub
  67. 		doGet(request, response);
  68. 	}
  69.  
  70. }

⑥WebContent-->新建jsp文件，命名为login.jsp-->键入代码，如下（使用了bootstrap和layui框架）

login.jsp文件：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. 	pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css">
  8. <link rel="stylesheet" href="./css/b_register.css">
  9. <%@include file="base.jsp"%>
  10. <title>登录</title>
  11. </head>
  12. <body>
  13. 	<%
  14. 		String errorMsg = (String) request.getAttribute("errMsg");
  15. 		if (errorMsg == null) {
  16. 			errorMsg = "";
  17. 		}
  18. 	%>
  19. 	<div id="box">
  20. 		<!--  action="${ctx}/login" -->
  21. 		<form id="myform" method="post" action="${ctx}/login">
  22. 			<div class="form-group">
  23. 				<label for="username">用户名</label> <input type="text"
  24. 					class="form-control" id="username" name="username"
  25. 					placeholder="请输入用户名："> <span id="tip"
  26. 					style="color: red; margin-top: 20px;"><%=errorMsg%></span>
  27.  
  28. 			</div>
  29.  
  30. 			<div class="form-group">
  31. 				<label for="pwd">密码</label> <input type="password"
  32. 					class="form-control" id="pwd" name="pwd" placeholder="请输入密码：">
  33. 			</div>
  34.  
  35. 			<button type="submit" class="btn btn-default btn_" id="btn">确定</button>
  36. 			<span style="margin-left: 250px;"></span> <a href="register.jsp"><button
  37. 					type="button" class="btn btn-default btn_">注册</button></a>
  38. 		</form>
  39. 	</div>
  40. 	<script type="text/javascript">
  41. 		layui.use([ 'layer' ], function() {
  42. 			layui.use([ 'form' ], function() {
  43. 				var form = layui.form;
  44. 			});
  45. 			//	点击提交执行的内容
  46. 			$('#username').blur(function() {
  47. 				//或者取长度
  48. 				if ($("#username").val() == "") {
  49. 					layer.msg("用户名不能输入为空哦！", {
  50. 						icon : 2
  51. 					});
  52. 					return;
  53. 				}
  54. 			});
  55. 			//点击提交，表单验证
  56. 			$('#btn').click(function() {
  57. 				if ($("#pwd").val() === "") {
  58. 					layer.msg("密码不能输入为空哦！", {
  59. 						icon : 2
  60. 					});
  61. 					return;
  62. 				}
  63. 			});
  64. 		});
  65. 	</script>
  66. </body>
  67. </html>

5.1 这里CSS目录如下（CSS并不重要，可以自己调整）

5.2 b_register的css样式如下

b_register.css文件：

  1. @CHARSET "UTF-8";
  2. *{
  3. 	margin:0;
  4. 	padding:0;
  5. }
  6. body{
  7.     background:url("./image/19.jpg") no-repeat;
  8. }
  9. #box{
  10. 	width:520px;
  11. 	height:400px;
  12. 	margin:200px auto;
  13. 	border-radius:20px;
  14. 	background-color: rgba(0, 0, 0, 0.3);
  15. 	box-shadow:1px 2px 5px black;
  16. 	padding: 1px;
  17. 	position:relative;
  18. 	background-image: url(./image/18.gif); 
  19.     opacity: 0.8;
  20. }
  21. #myform{
  22. 	margin:30px;
  23. }
  24. span{
  25. 	margin-left:100px;
  26. }
  27. .btn_{
  28. 	color:tomato;
  29. 	margin-top:30px;
  30. }

5.3 base的css样式如下

base.css文件：

  1. @charset "UTF-8";
  2. body {
  3. 	width: 100%;
  4. 	height: 100%;
  5. 	background: url('../css/image/18.gif');
  6. 	overflow: hidden;
  7. }
  8.  
  9.  #box {
  10. 	height:550px;
  11. 	display:flex;
  12. 	align-items:center;
  13. 	justify-content:center;
  14. 	align-content:center;  
  15. 	
  16. }

⑤当输入用户名或密码错误时，应该有的提示

⑥当输入密码正确时，应进入后台主界面，这里大家在WebContent里新建一个jsp文件，取名为index即可，这里放一张后台图，具体的下篇博文再更

五、注册模块 

①逻辑分析（以下为我画的管理员注册业务流程图，注册成功即自动跳转登录页面）

②Service层：这里主要就是首先判断你是否输入用户名，用户名输入过后判断是否这个用户名已经存在（用户名和id都是唯一的），然后再验证你两次密码是否相同，最后再进入注册。

所以说前台可以判断1是是否输入2是密码两次是否一致；

后台连接数据库后应该是进行了两个操作1是判断用户名是否存在2是进行往数据库里增加数据

 

2.1 src-->在servlet包里-->新建一个Servlet文件，命名为RegisterServlet-->在URL mappings中改名为/register-->键入代码，如下

RegisterServlet.java文件：

  1. package servlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import dao.AdmDao;
  13. import dao.AdmDaoImpl;
  14.  
  15. /**
  16.  * Servlet implementation class RegisterServlet
  17.    WebServlet里的/register就是刚刚改的URL Mappings的内容
  18.  */
  19. @WebServlet("/register")
  20. public class RegisterServlet extends HttpServlet {
  21. 	private static final long serialVersionUID = 1L;
  22.        
  23.     /**
  24.      * @see HttpServlet#HttpServlet()
  25.      */
  26.     public RegisterServlet() {
  27.         super();
  28.         // TODO Auto-generated constructor stub
  29.     }
  30.  
  31. 	/**
  32. 	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  33. 	 */
  34. 	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  35. 		String result = "false";
  36. 		PrintWriter writer = null;
  37. 		try {
  38. 			PrintWriter out = response.getWriter();
  39. 			//1.接收参数
  40. 			String username = request.getParameter("username");
  41. 			String pwd = request.getParameter("pwd");
  42. 			AdmDao a = new AdmDaoImpl();
  43. 			boolean flag= a.insertAdm(username,pwd);
  44. 		    if(flag){
  45. 		    	result = "true";
  46. 			}
  47. 		    writer =  response.getWriter();
  48. 		    writer.write(result);
  49. 		}catch(Exception e) {
  50. 			e.printStackTrace();
  51. 		}finally {
  52. 			writer.flush();
  53. 			writer.close();
  54. 		}
  55. 		
  56. 		
  57. 	}
  58.  
  59. 	/**
  60. 	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  61. 	 */
  62. 	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  63. 		// TODO Auto-generated method stub
  64. 		doGet(request, response);
  65. 	}
  66.  
  67. }

2.2 src-->在servlet包里-->新建一个Servlet文件，命名为QueryAdmIsExist-->在URL mappings中改名为/isExist-->键入代码，如下

QueryAdmIsExist.java文件：

  1. package servlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import dao.AdmDao;
  13. import dao.AdmDaoImpl;
  14.  
  15. /**
  16.  * Servlet implementation class QueryAdmIsExist
  17.  */
  18. @WebServlet("/isExist")
  19. public class QueryAdmIsExist extends HttpServlet {
  20. 	private static final long serialVersionUID = 1L;
  21.        
  22.     /**
  23.      * @see HttpServlet#HttpServlet()
  24.      */
  25.     public QueryAdmIsExist() {
  26.         super();
  27.         // TODO Auto-generated constructor stub
  28.     }
  29.  
  30. 	/**
  31. 	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  32. 	 */
  33. 	protected void doGet(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
  34. 		request.setCharacterEncoding("utf-8");
  35. 		resp.setCharacterEncoding("utf-8");
  36. 		resp.setContentType("text/html;charset=utf-8");
  37. 		//根据姓名查询用户是否存在 改的更完善了一点
  38. 		String result = "false";
  39. 		PrintWriter writer = null;
  40. 		try {
  41. 			String username = request.getParameter("username");
  42. 			AdmDao a = new AdmDaoImpl();
  43. 			boolean flag = a.queryIsExist(username);
  44. 			if(flag==true) {
  45. 				result = "true";
  46. 			}
  47. 			writer =  resp.getWriter();
  48. 			writer.write(result);
  49. 		} catch (Exception e) {
  50. 			e.printStackTrace();
  51. 		}finally {
  52. 			writer.flush();
  53. 			writer.close();
  54. 		}
  55. 		
  56. 	}
  57.  
  58. 	/**
  59. 	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  60. 	 */
  61. 	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  62. 		// TODO Auto-generated method stub
  63. 		doGet(request, response);
  64. 	}
  65.  
  66. }

③在WebContent下-->新建jsp文件，命名为register.jsp-->键入代码，如下（这里使用的是ajax，和上面登录模块不一样，注意区别）

register.jsp文件：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css">
  8. <link rel="stylesheet" href="./css/b_register.css">
  9. <%@include file="base.jsp"%>
  10. <title>注册</title>
  11. </head>
  12. <body>
  13. <div id="box">
  14. <form id="myform"  method="post">
  15.   <div class="form-group">
  16.     <label for="username">用户名</label>
  17.     <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名：">
  18.     <span id="tip" style="color:red;margin-top:20px;"></span>
  19.   </div>
  20.   
  21.   <div class="form-group">
  22.     <label for="pwd">密码</label>
  23.     <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码：">
  24.   </div>
  25.    <div class="form-group">
  26.     <label for="conFirmPwd">确认密码</label>
  27.     <input type="password" class="form-control" id="conFirmPwd" name="conFirmPwd" placeholder="请再次输入密码：">
  28.   </div>
  29.   <button type="button" class="btn btn-default btn_" id = "btn">提交</button>
  30.   <span style="margin-left:250px;"></span>
  31.   <a href="login.jsp"><button type="button" class="btn btn-default btn_">返回</button></a>
  32. </form>
  33. </div>
  34. </body>
  35. <script>
  36. layui.use([ 'layer' ], function() {
  37. 	/* alert(0); */
  38. 	layui.use([ 'form' ], function() {
  39. 		var form = layui.form;
  40. 	});
  41. 	var isOk = false;
  42. 	//	点击提交执行的内容
  43. 	$('#username').blur(function() {
  44. 		//或者取长度
  45. 		if ($("#username").val() == "") {
  46. 			layer.msg("不能输入为空哦！", {
  47. 				icon : 2
  48. 			});
  49. 			return;
  50. 		}else {
  51. 				$.post('isExist', 
  52. 				{
  53. 					username : $('#username').val()
  54. 				},
  55. 				function(result) { 
  56. 					//alert(typeof result);
  57. 					if(result=="true"){
  58. 						//alert(1);
  59. 						isOk = false;
  60. 						//利用jquery对元素设置样式
  61. 						$('#username').css("border", "1px solid red");
  62. 						//html() 设置标签之间的 内容
  63. 						$('#tip').html('该用户已存在');
  64. 						$('#tip').css("color", "red");
  65. 						return;
  66. 					}else{
  67. 						//alert(2);
  68. 						isOk = true;
  69. 						//利用jquery对元素设置样式
  70. 						$('#username').css("border", "1px solid gray");
  71. 						//html() 设置标签之间的 内容
  72. 						$('#tip').html('该用户名可用');
  73. 						$('#tip').css("color", "green");
  74. 					}
  75. 					
  76. 			}, "text");
  77. 		}
  78. 	});
  79. 	//点击提交，表单验证
  80. 	$('#btn').click(function() {
  81. 		if (!isOk) {
  82. 			return;
  83. 		}	
  84. 	  if($("#pwd").val() !== $("#conFirmPwd").val()){
  85. 			layer.msg("两次密码输入不同！",{
  86. 				icon : 2
  87. 			});
  88. 			return;
  89. 		}
  90. 		 //提交表单
  91.    	   $.post("register",//后台地址
  92. 			{
  93. 				username: $("#username").val(),
  94. 					 pwd:$("#pwd").val(),
  95. 			},//需要提交到后台的数据
  96. 			function(result){
  97. 				//alert(typeof result);
  98. 				//alert(result);
  99. 				if (result) {
  100. 					//添加成功
  101. 					layer.msg("注册成功", {
  102. 						icon : 1
  103. 					});
  104. 					window.location.href = "login.jsp";
  105. 				}else{
  106. 					layer.msg("注册失败",{
  107. 						icon : 2
  108. 					});
  109. 					// 这里使用JQuery实现会有问题 
  110. 					document.getElementById("myform").reset();
  111. 					$('#tip').html("");
  112. 				}
  113. 			},
  114. 			"json"); 
  115. 		//清空表单
  116. 	});
  117. });
  118. </script>
  119. </html>

④注册时用户名存在或可用的区别图片如下

欢迎关注我的个人微信公众号【大胖猫的马太效应】，回复关键字JavaWeb博客后台管理系统获得本后台项目所有源码噢~ 

最后有任何问题欢迎给我留言，我看到就一定会回复的>w< 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/636116
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号