前言：為了大家學習的友善，我自己完成了一個登入注冊的小案例供大家參考，如有疑問？請私信部落客，小主辛苦總結，望大家轉載請标明出處。
**項目介紹：**本項目使用的是spring整合jdbc實作使用者的登入和注冊，帶前端頁面以及驗證碼的功能實作登入使用maven管理jar包，使用mysql資料庫，驗證碼使用的是拖動滑塊實作的目前比較流行的驗證碼實作方式，在登入頁面會顯示目前通路頁面的事件顯示，當使用者沒有登入時登入界面會顯示請先登入的提示，使用者名和密碼輸錯會進行提示的功能，前端頁面使用的目前流行的前端架構Bootstrap架構實作的。
項目完成後最終界面如圖：
點選登入後出現驗證碼如圖(驗證碼使用的是當下流行的驗證碼拖動滑塊)：
登陸成功如圖顯示：
登入失敗如圖顯示：
項目準備：
一：代碼結構如圖
二：maven管理jar導入下面的依賴如下：
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet.jsp.jstl/jstl -->
<dependency>
<groupId>javax.servlet.jsp.jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!--ioc01-core-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<!--ioc01-bean-->
<!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<!--ioc01-context-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<!--ioc01-expression-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-expression</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<!--Aop依賴-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<!--cglib技術-->
<dependency>
<groupId>cglib</groupId>
<artifactId>cglib</artifactId>
</dependency>
<!--spring-web-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<!--spring整合jdbc-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>5.1.5.RELEASE</version>
</dependency>
<!--spring連接配接mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.37</version>
</dependency>
<!--DataSource資料源-->
<dependency>
<groupId>commons-dbcp</groupId>
<artifactId>commons-dbcp</artifactId>
<version>1.4</version>
</dependency>
<!--DataSource資料源 c3p0-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.12</version>
</dependency>
三：使用到的表代碼sql:
1： 首先建立spring的資料庫
2:在spring資料庫下建立user表
/*
Navicat MySQL Data Transfer
Source Server : mysql
Source Server Version : 50727
Source Host : localhost:3306
Source Database : spring
Target Server Type : MYSQL
Target Server Version : 50727
File Encoding : 65001
Date: 2020-03-07 19:33:21
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(2) NOT NULL AUTO_INCREMENT,
`username` varchar(255) DEFAULT NULL,
`password` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=36 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'admin', 'admin');
INSERT INTO `user` VALUES ('22', 'root', 'root');
三：在resources目錄下建立資料庫連接配接資訊檔案jdbc.properties檔案：
jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/spring?useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456
四：在resources目錄下建立日志檔案log4j.properties檔案：
# Set root category priority to INFO and its only appender to CONSOLE.
#log4j.rootCategory=INFO, CONSOLE debug info warn error fatal
log4j.rootCategory=debug, CONSOLE, LOGFILE
# Set the enterprise logger category to FATAL and its only appender to CONSOLE.
log4j.logger.org.apache.axis.enterprise=FATAL, CONSOLE
# CONSOLE is set to be a ConsoleAppender using a PatternLayout.
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
# LOGFILE is set to be a File appender using a PatternLayout.
log4j.appender.LOGFILE=org.apache.log4j.FileAppender
log4j.appender.LOGFILE.File=d:\\springjdbc日志\\mybatis黑馬.log
log4j.appender.LOGFILE.Append=true
log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
log4j.appender.LOGFILE.layout.ConversionPattern=%d{ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
五：在resources目錄下spring.xml檔案檔案：
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:aop="http://www.springframework.org/schema/aop"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx https://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">
<!--掃包-->
<context:component-scan base-package="com.mybatis.dao.impl"/>
<context:component-scan base-package="com.mybatis.service.impl"/>
<!--ioc容器工具類-->
<bean class="com.mybatis.util.SpringBeanUtil"/>
<!--讀取屬性檔案-->
<context:property-placeholder location="classpath:jdbc.properties"/>
<!--配置DataSource spring提供的預設資料源沒有連接配接池效率低-->
<bean id="dataSource1" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="${jdbc.driverClassName}"/>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!--dbcp連接配接池-->
<bean id="dataSource2" class="org.apache.commons.dbcp.BasicDataSource">
<property name="driverClassName" value="${jdbc.driverClassName}"/>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="${jdbc.driverClassName}"/>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!--配置jdbcTemplate-->
<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource" ref="dataSource"/>
</bean>
<!--配置事務管理器-->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
</bean>
<!--方式二基于注解-->
<!--配置注解驅動-->
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
開始建立項目：
**一：在entity包下建立實體類User，代碼如下：**
package com.mybatis.entity;
/**
* package_name:com.mybatis.entity
*
* @author:徐亞遠 Date:2020/2/21 15:30
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
public class User {
private Integer id;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
private String username;
private String password;
public User() {
}
public User(Integer id, String username, String password) {
this.id = id;
this.username = username;
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
**在vo包下建立實體類UserVO，代碼如下：**
package com.mybatis.vo;
/**
* package_name:com.mybatis.vo
*
* @author:徐亞遠 Date:2020/2/22 17:13
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
public class UserVo {
private String username;
private String password;
private String driving;
@Override
public String toString() {
return "UserVo{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
", driving='" + driving + '\'' +
'}';
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getDriving() {
return driving;
}
public void setDriving(String driving) {
this.driving = driving;
}
public UserVo() {
}
public UserVo(String username, String password, String driving) {
this.username = username;
this.password = password;
this.driving = driving;
}
}
****二：在dao包下建立接口UserDao，代碼如下：****
package com.mybatis.dao;
import com.mybatis.entity.User;
/**
* package_name:com.mybatis.dao
*
* @author:徐亞遠 Date:2020/2/21 15:28
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
public interface UserDao {
User login(String username, String password);
Integer insert(User user);
}
三：在dao報下建立名為impl的包（如不明白結構如圖)，在impl包下建立UserDaoImpl類和UserMapper類，代碼如下：
UserDaoImpl類如下：
package com.mybatis.dao.impl;
import com.mybatis.dao.UserDao;
import com.mybatis.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.PreparedStatementCreator;
import org.springframework.jdbc.support.GeneratedKeyHolder;
import org.springframework.jdbc.support.KeyHolder;
import org.springframework.stereotype.Repository;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.List;
/**
* package_name:com.mybatis.dao.impl
*
* @author:徐亞遠 Date:2020/2/21 15:28
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
@Repository("userDao")
public class UserDaoImpl implements UserDao {
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public User login(String username, String password) {
String sql = "select id,username,password from user where username=?";
List<User> users = jdbcTemplate.query(sql, new Object[]{username},new UserMapper());
if (users !=null && users.size()>0){
return users.get(0);
}
return null;
}
@Override
public Integer insert(final User user) {
KeyHolder keyHolder = new GeneratedKeyHolder();
jdbcTemplate.update(new PreparedStatementCreator() {
@Override
public PreparedStatement createPreparedStatement(Connection connection) throws SQLException {
String sql = "insert into user(username,password)values(?,?)";
PreparedStatement ps = connection.prepareStatement(sql,PreparedStatement.RETURN_GENERATED_KEYS );
ps.setString(1,user.getUsername() );
ps.setString(2,user.getPassword() );
return ps;
}
}, keyHolder);
return keyHolder.getKey().intValue();
}
}
UserMapper類代碼如下：
package com.mybatis.dao.impl;
import com.mybatis.entity.User;
import org.springframework.jdbc.core.RowMapper;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* package_name:com.mybatis.dao.impl
*
* @author:徐亞遠 Date:2020/2/22 15:41
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
public class UserMapper implements RowMapper {
@Override
public Object mapRow(ResultSet resultSet, int i) throws SQLException {
return new User(resultSet.getInt("id"),resultSet.getString("username"),resultSet.getString("password"));
}
}
四：在service包下建立UserService接口代碼如下：
package com.mybatis.service;
import com.mybatis.entity.User;
import com.mybatis.vo.UserVo;
/**
* package_name:com.mybatis.service
*
* @author:徐亞遠 Date:2020/2/21 15:27
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
public interface UserService {
User login(String username,String password);
void regist(UserVo userVo);
}
在service包下建立impl包，在impl包下建立UserServiceImpl類代碼如下：
package com.mybatis.service.impl;
import com.mybatis.dao.UserDao;
import com.mybatis.entity.User;
import com.mybatis.service.UserService;
import com.mybatis.vo.UserVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
/**
* package_name:com.mybatis.service.impl
*
* @author:徐亞遠 Date:2020/2/21 15:33
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
@Service("userService")
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
/**
* @Transactional基于注解的配置事務 也可以用于類上面
*/
@Override
@Transactional(propagation = Propagation.SUPPORTS, isolation = Isolation.READ_COMMITTED, readOnly = true)
public User login(String username, String password) {
User user = userDao.login(username, password);
if (user != null && user.getUsername().equals(username) && user.getPassword().equals(password)) {
return user;
}
return null;
}
@Override
@Transactional(propagation = Propagation.REQUIRED,isolation = Isolation.READ_COMMITTED,rollbackFor = Exception
.class,timeout = 5000)
public void regist(UserVo userVo) {
//把傳遞過來的userVo,轉換為entity可能涉及多張表
User user = new User();
user.setUsername(userVo.getUsername());
user.setPassword(userVo.getPassword());
Integer id = userDao.insert(user);
//int i = 9 / 0;
}
}
五：在util包下建立SpringBean類代碼如下：
package com.mybatis.util;
import org.springframework.beans.BeansException;
import org.springframework.beans.factory.BeanInitializationException;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.context.*;
/**
* package_name:com.mybatis.util
*
* @author:徐亞遠 Date:2020/2/21 17:44
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
public class SpringBeanUtil implements ApplicationContextAware {
private static ApplicationContext ac;
/**
* Set the ApplicationContext that this object runs in.
* Normally this call will be used to initialize the object.
* <p>Invoked after population of normal bean properties but before an init callback such
* as {@link InitializingBean#afterPropertiesSet()}
* or a custom init-method. Invoked after {@link ResourceLoaderAware#setResourceLoader},
* {@link ApplicationEventPublisherAware#setApplicationEventPublisher} and
* {@link MessageSourceAware}, if applicable.
*
* @param applicationContext the ApplicationContext object to be used by this object
* @throws ApplicationContextException in case of context initialization errors
* @throws BeansException if thrown by application context methods
* @see BeanInitializationException
*/
@Override
public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
ac = applicationContext;
}
public static Object getBean(String beanName){
return ac.getBean(beanName);
}
public static Class getBean(Class clazz){
return (Class) ac.getBean(clazz);
}
}
六：在servlet包下建立UserServlet類代碼如下：
package com.mybatis.servlet;
import com.mybatis.entity.User;
import com.mybatis.service.UserService;
import com.mybatis.util.SpringBeanUtil;
import com.mybatis.vo.UserVo;
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 java.io.IOException;
/**
* package_name:com.mybatis.servlet
*
* @author:徐亞遠 Date:2020/2/21 15:39
* 項目名:springDemo01
* Description: servlet是web容器管理的,不能交友spring容器管理
* Version: 1.0
**/
@WebServlet("*.user")
public class UserServlet extends HttpServlet {
private UserService userService;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String path = req.getServletPath();
if ("/login.user".equals(path)){
req.getRequestDispatcher("WEB-INF/login.jsp").forward(req, resp);
} else if ("/regist.user".equals(path)){
req.getRequestDispatcher("WEB-INF/regist.jsp").forward(req,resp );
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//req.setCharacterEncoding("utf-8");
String path = req.getServletPath();
if ("/login.user".equals(path)){
login(req,resp );
} else if ("/regist.user".equals(path)){
regist(req,resp );
}
}
public void login(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
userService = (UserService) SpringBeanUtil.getBean("userService");
User user = userService.login(username,password );
req.getSession().setAttribute("user",user );
if (user !=null){
req.getSession().setAttribute("username",user.getUsername() );
req.getRequestDispatcher("/WEB-INF/success.jsp").forward(req,resp );
} else {
req.setAttribute("error","使用者名或密碼錯誤" );
req.getRequestDispatcher("/WEB-INF/login.jsp").forward(req,resp );
}
}
public void regist(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
String driving = req.getParameter("driving");
//把資料封裝成userVo,因為資料可能對應多張表
UserVo userVo = new UserVo(username,password,driving);
userService = (UserService) SpringBeanUtil.getBean("userService");
userService.regist(userVo);
req.getRequestDispatcher("WEB-INF/login.jsp").forward(req,resp );
}
}
七：在filter包下建立LoginFilter類如下：
package com.mybatis.filter;
import com.mybatis.entity.User;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* package_name:com.mybatis.filter
*
* @author:徐亞遠 Date:2020/3/7 16:44
* 項目名:springDemo01
* Description:TODO
* Version: 1.0
**/
@WebFilter("/*")
public class LoginFilter implements Filter {
/**
* @param filterConfig
*/
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
/**
* @param request
* @param response
* @param chain
*/
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,
ServletException {
System.out.println("攔截器");
HttpServletRequest req = (HttpServletRequest) request;
HttpServletResponse resp = (HttpServletResponse) response;
String uri = req.getRequestURI();
System.out.println("uri:" + uri);
boolean flag = uri.contains("*.user");
System.out.println("flag:" + flag);
if (uri.contains("/login.user") || uri.contains("/regist.user") || uri.contains("/css/") ||
uri.contains("/js/") || uri.contains("/image/")) {
chain.doFilter(request, response);
} else {
User user = (User) req.getSession().getAttribute("user");
if (user != null) {
chain.doFilter(request, response);
} else {
System.out.println("請先登入");
req.getSession().setAttribute("error_login_msg","你還沒有登入,請先登入!" );
req.getRequestDispatcher("WEB-INF/login.jsp").forward(req, resp);
}
}
}
@Override
public void destroy() {
}
}
八：在web-inf目錄下的web.xml檔案中配置：
<?xml version="1.0" encoding="UTF-8"?>
<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" id="WebApp_ID" version="3.0">
<!--初始化spring容器-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--解決中文亂碼-->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
在image目錄下的17.gif圖檔如下：
在css目錄下的index.css檔案代碼如下：
/* 通用 */
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
width: 100%;
}
p {
font-family: 'weir雅黑';
}
.clear {
clear: both;
}
a {
color: #000;
}
a:hover {
color: #000;
text-decoration: none;
}
/* login界面 */
.login_body {
overflow: hidden;
background: url("../image/17.gif") no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
.my-container {
position: relative;
width: 400px;
height: auto;
left: 50%;
margin-left: -200px;
margin-top: 10%;
}
.head-photo {
width: auto;
height: auto;
text-align: center;
margin: 10px auto;
font-size: 30px;
}
.head-main {
margin-top: 20px;
}
.my-ver {
width: 100%;
}
.cover {
background: #000;
width: 100%;
height: 100%;
opacity: 0.2;
}
.head-register {
position: fixed;
height: 440px;
width: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -240px;
background: #66CCCC;
}
.head-register .reg-container {
width: 350px;
height: auto;
margin: 20px auto;
}
.alert-warningmy {
margin-top: 5px;
margin-left: 118px;
height: auto;
color: red;
}
/* index界面 */
.logo {
float: left;
height: 80px;
width: auto;
margin: 0 auto;
margin-left: 100px;
}
.navbar-nav li {
float: right;
}
.nav-left {
height: 100%;
}
.fun {
width: 80%;
margin: 20px auto;
height: 60px;
border-bottom: 1px solid rgb(187, 212, 158);
}
.fun_duo {
width: 80%;
margin: 20px auto;
height: 60px;
}
.fun p {
font-size: 20px;
line-height: 80px;
font-weight: bold;
}
.fun:hover {
cursor: pointer;
border-right: 6px solid rgb(78, 199, 125)
}
.main {
/* box-shadow: 2px 2px 2px 2px; */
width: 100%;
height: 80%;
background: rgb(255, 254, 254);
}
.new .my-btn {
width: auto;
height: auto;
margin-top: 40px;
float: right;
}
在web-inf目錄下建立login.jsp頁面代碼如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<title>使用者資訊管理系統</title>
<!--修改模态框 出現的位置-->
<style type="text/css">
.modal.fade {
top: 50px;
}
#rightheader{
color: burlywood;
}
</style>
</head>
<body class="login_body">
<div id="rightheader">
<body>
<script type="text/javascript">
function open() {
var clock1 = document.getElementById("rightheader");
var date = new Date();
var datetime = date.toLocaleString();
clock1.innerHTML = datetime;
}
setInterval("open()", "1000");
//驗證碼的實作
function vali() {
// 2088556198
//1300085971
var valicode = new TencentCaptcha('2088556198', function (res) {
if (res.ret == 0) {
var form = document.getElementById("loginForm");
form.submit();
}
else {
alert("驗證出錯！");
}
});
valicode.show();
}
</script>
</body>
</div>
<div class="my-container">
<div class="container">
<div class="row">
<div class="col-md-12" style="background-color:rgb(202, 225, 235);">
<!-- 頭像 -->
<div class="head-photo">
登入
</div>
<!-- form表單 -->
<div class="head-main">
<form id="loginForm" action="${pageContext.request.contextPath}/login.user" method="post">
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">賬号:</span>
</div>
<input type="text" class="form-control" placeholder="username" id="user"
name="username">
</div>
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">密碼:</span>
</div>
<input type="password" class="form-control" placeholder="password" id="password"
name="password" autocomplete="off">
</div>
<!-- 錯誤資訊提示 -->
<div class="clear"></div>
<div class=" alert-warningmy">
<strong>${error}</strong>
</div>
<div class="head-button" style="margin-top:5px;margin-bottom: 20px">
<%--id="login_form"--%>
<input id="btnOK" onclick="vali()" type="button" class="btn btn-primary btn-block"
value="登入"></input>
<button type="button" class="btn btn-success btn-block" data-toggle="modal"
data-target="#myModal">注冊
</button>
</div>
<div class=" alert-warningmy">
<strong>${error_login_msg}</strong>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 注冊框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框頭部 -->
<div class="modal-header">
<h4 class="modal-title">注冊使用者資訊</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主體 -->
<div class="modal-body">
<form action="${pageContext.request.contextPath}/regist.user" method="post">
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">username:</span>
</div>
<%--id=usr--%>
<input type="text" class="form-control" placeholder="username" id="username" name="username"
autocomplete="off">
</div>
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">password:</span>
</div>
<input type="text" class="form-control" placeholder="password" id="pas" name="password"
autocomplete="off">
</div>
<input type="submit" class="btn btn-primary btn-block" style="margin-top:10px" value="确認"/>
<button type="reset" class="btn btn-success btn-block">重置</button>
</form>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
</body>
</html>
在web-inf目錄下建立success.jsp頁面代碼如下：
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2020/2/21
Time: 16:10
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h2>登入成功 歡迎您:${username}</h2>
</body>
</html>