！！！代码放在最后
网页前端的设计：jsp编写，使用css美化（字体使用Google font，图标使用font awemome，颜色使用palettes|flat ui colors，谷歌可找到，个人觉得挺好用）
使用了简单的js进行表单验证用户名长度、密码、确认密码
项目结构
（1）建立一个名为spring的数据库，user_information的表，字段id、username、password
（2）前端jsp、css代码编写
（3）sqlMapConfig.xml的Mybatis总配置文件
（4）ApplicationContext.xml的Spring总配置文件
（5）编写User类 bean
（6）UserMapper接口和UserMapper.xml定义实现SQL语句findById、findByName、findByUser、insertUser方法
（7）UserService接口和UserServiceImpl实现类（实现addAccount和hasAccount方法）
（8）util工具包下的servlet类（LoginServlet和RegisterServlet）
配置文件：
（1）sqlMapConfig.xml
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configuration PUBLIC "-////DTD Config 3.0//EN" "/dtd/mybatis-3-config.dtd"><configuration> <typeAliases> <package name="com.dingxiang.bean"/> </typeAliases> <mappers> <mapper/> </mappers></configuration>
（2）UserMapper.xml（配置UserMapper接口实现）
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-////DTD Mapper 3.0//EN" "/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.dingxiang.mapper.UserMapper"> <select resultType="User" parameterType="Integer"> select * from spring.user_information where id=#{id} </select> <select parameterType="String" resultType="User"> select * from spring.user_information where username=#{username} </select> <select parameterType="User" resultType="User"> select * from spring.user_information where username=#{username} and password=#{password} </select> <insert parameterType="User"> insert into spring.user_information (username,password) values(#{username},#{password}) </insert></mapper>
（3）ApplicationContext.xml（配置DataSource、sqlsessionFactory、Mapper实现把User交给Spring管理，数据库实现Mybatis由Spring帮我们完成）
<?xml version="1.0" encoding="utf-8"?><beans xmlns="/schema/beans" xmlns:xsi="/2001/XMLSchema-instance" xmlns:context="/schema/context" xmlns:aop="/schema/aop" xmlns:tx="/schema/tx" xsi:schemaLocation="/schema/beans /schema/beans/spring-beans.xsd /schema/context /schema/context/spring-context.xsd /schema/aop /schema/aop/spring-aop.xsd /schema/tx /schema/tx/spring-tx.xsd"> <bean name="userService"/> <!--配置datasource--> <bean> <property name="driverClassName" value="com.mysql.jdbc.Driver"/> <property name="url" value="jdbc:mysql://localhost:3306/spring?serverTimezone=GMT"/> <property name="username" value="root"/> <property name="password" value="*****"/> </bean> <!--配置SqlSessionFactory--> <bean> <property name="dataSource" ref="dataSource"/> <property name="configLocation" value="sqlMapConfig.xml"/> </bean> <bean name="configurer"> <property name="basePackage" value="com.dingxiang.mapper"/> </bean></beans>
前端网页代码（使用js来更换显示页面，login、register和简单的表单验证）
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <meta charset="utf-8"> <title>login-register</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <link href="/css?family=Pacifico" rel="stylesheet"> <link rel="stylesheet" href="/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous"></head><body><div> <i></i>Login my own account<br/></div><div> <i></i>Register new account</div><div> <div> <i></i> </div> <form action="<%=request.getContextPath()%>/login.do" method="post"> <h1>Welcome</h1> <input type="text" name="username" placeholder="USERNAME" /> <input type="password" name="password" placeholder="PASSWORD" /> <input type="submit" name="" value="Login" /> </form></div><div> <div> <i></i> </div> <form action="<%=request.getContextPath()%>/register.do" method="post"> <h1>Welcome</h1> <input type="text" name="username" placeholder="USERNAME" onblur="checkregister_username(this)"/> <input type="password" name="password" placeholder="PASSWORD" onblur="checkregister_pass(this)"/> <input type="password" name="repassword" placeholder="REPASSWORD" onblur="checkregister_repass(this)"/> <input type="submit" name="" value="Register" /> </form></div></body></html><script type="text/javascript"> $(".bt").on("click",function(){ $(".login-box").toggleClass("showed_login"); }) $(".register").on("click",function(){ $(".register-box").toggleClass("showed_register"); }) $(".hide-bt1").on("click",function(){ $(".login-box").toggleClass("showed_login"); }) $(".hide-bt2").on("click",function(){ $(".register-box").toggleClass("showed_register"); }) function checkregister_username(username) { if (username.value.length < 3 || username.value.length > 10) { alert("用户名必须是3-10位"); } } function checkregister_pass(pass){ var repass=document.getElementById("repassword").value; var username=document.getElementById("username").value; if(username==null||username==""){ alert("请输入用户名"); } if(pass.value.length<3||pass.value.length>10){ alert("密码必须是3-10位"); } } function checkregister_repass (repass) { var pass=document.getElementById("password").value; if(repass.value!=pass){ alert("请输入密码和确认密码相等"); } }</script>
css
*{ font-family: "montserrat",sans-serif;}body{ margin: 0; padding: 0; background: #333;}.login-box{ position: absolute; top: 0; left: -100%; width: 100%; height: 100vh; background-image: linear-gradient(45deg,#9fbaa8,#31354c);}.login-form{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; text-align: center;}.login-form h1{ font-family: "Pacifico", cursive; font-weight: 400; font-size: 40px; margin-top: 0;}.text{ display: block; box-sizing: border-box; width: 240px; background: #ffffff28; border: 1px solid white; padding: 10px 20px; color: white; outline: none; margin: 10px 0; border-radius: 6px; text-align: center;}.login-bt{ font-family: "Pacifico", cursive; width: 240px; background: #c0392b; border: 0; color: white; padding: 10px; border-radius: 6px; cursor: pointer;}.login-bt:hover{ background: #e74c3c;}.hide-bt1{ color: #000; position: absolute; top: 40px; right: 40px; cursor: pointer; font-size: 24px;}.bt{ left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); color: white; border: 2px solid; padding: 10px; cursor: pointer;}.register{ left: 50%; position: absolute; top: 60%; transform: translate(-50%,-50%); color: white; border: 2px solid; padding: 10px; cursor: pointer;}.showed_login{ left: 0%;}.register-box{ position: absolute; top: 0; left: -200%; width: 100%; height: 100vh; background-image: linear-gradient(45deg,#9fbaa8,#31354c);}.register-form{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; text-align: center;}.register-form h1{ font-family: "Pacifico", cursive; font-weight: 400; font-size: 40px; margin-top: 0;}.register-bt{ font-family: "Pacifico", cursive; width: 240px; background: #c0392b; border: 0; color: white; padding: 10px; border-radius: 6px; cursor: pointer;}.register-bt:hover{ background: #e74c3c;}.showed_register{ left: 0%;}.hide-bt2{ color: #000; position: absolute; top: 40px; right: 40px; cursor: pointer; font-size: 24px;}
前端页面展示：
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>注册失败</title></head><body><h1> 已经有该用户，请重新注册。 <p><a href="index.jsp">点此后返回注册</a> </p></h1></body></html><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>登录成功</title></head><body><h1> 登录成功，欢迎<%=request.getParameter("username")%>。<P><a href="index.jsp">点此返回</a></P></h1></body></html><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>注册成功</title></head><body><h1> 注册成功，<%=request.getParameter("username")%>。<P><a href="index.jsp">点此返回登录</a></P></h1></body></html>
UserMapper接口
package com.dingxiang.mapper;import com.dingxiang.bean.User;public interface UserMapper { User findById(Integer id)throws Exception; User findByName(String username)throws Exception; User findByUser(User user)throws Exception; void insertUser(User user)throws Exception;}
UserService接口
package com.dingxiang.service;import com.dingxiang.bean.User;public interface UserService { Boolean hasAccount(String username,String password)throws Exception; void addAccount(String username,String password)throws Exception;}
UserServiceImpl实现类
package com.dingxiang.service;import com.dingxiang.bean.User;import com.dingxiang.mapper.UserMapper;import javax.annotation.Resource;public class UserServiceImpl implements UserService{ @Resource(type = UserMapper.class) private UserMapper userMapper; public UserMapper getUserMapper() { return userMapper; } public void setUserMapper(UserMapper userMapper) { this.userMapper = userMapper; } @Override public Boolean hasAccount(String username, String password) throws Exception { User user=new User(); user.setUsername(username); user.setPassword(password); if(userMapper.findByUser(user)!=null){ return false; } return false; } @Override public void addAccount(String username, String password) throws Exception { User user=new User(); user.setUsername(username); user.setPassword(password); userMapper.insertUser(user); }}
LoginServlet
package com.dingxiang.utils;import com.dingxiang.bean.User;import com.dingxiang.service.UserService;import org.springframework.context.ApplicationContext;import org.springframework.context.support.ClassPathXmlApplicationContext;import org.springframework.web.context.WebApplicationContext;import org.springframework.web.context.support.WebApplicationContextUtils;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;@WebServlet( name = "loginServlet", urlPatterns = {"/login.do"})public class LoginServlet extends HttpServlet { private static final long serialVersionUID =1L; public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { ApplicationContext ac=new ClassPathXmlApplicationContext("ApplicationContext.xml"); request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String username=request.getParameter("username"); String password=request.getParameter("password"); UserService userService= (UserService) ac.getBean("userService"); try { if(userService.hasAccount(username,password)){ response.sendRedirect("sccuess.jsp"); }else{ response.sendRedirect("index.jsp"); } } catch (Exception e) { e.printStackTrace(); } }}
RegisterServlet
package com.dingxiang.utils;import com.dingxiang.service.UserService;import org.springframework.context.ApplicationContext;import org.springframework.context.support.ClassPathXmlApplicationContext;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;@WebServlet( name = "registerServlet", urlPatterns = {"/register.do"})public class RegisterServlet extends HttpServlet { private ApplicationContext ac=null; private static final long serialVersionUID =1L; public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { doPost(request,response); } @Override public void init() throws ServletException { ac=new ClassPathXmlApplicationContext("ApplicationContext.xml"); } public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String username=request.getParameter("username"); String password=request.getParameter("password"); UserService userService= (UserService) ac.getBean("userService"); try { if(userService.hasAccount(username,password)){ request.getRequestDispatcher("chongfu.jsp").forward(request,response); }else{ userService.addAccount(username,password); response.sendRedirect("success_register.jsp"); } } catch (Exception e) { e.printStackTrace(); } }}
User类
package com.dingxiang.bean;public class User { private Integer id; private String username; private String password; @Override public String toString() { return "User{" "id=" id ", username="" username "\"" ", password="" password "\"" "}"; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } 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; }}来源：/content-2-195351.html
基于Spring Mybatis jsp servlet的用户登录注册功能（数据库查找和插入用户） jsp写的前端（css javascript） 使用IDEA
