ssm實現用戶注冊以及登錄功能
> 前端bootstrap（http://v3.bootcss.com/getting-started/）
IDE是eclipse
首先看下工程結構
數據庫表
DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `uid` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(100) NOT NULL, `password` varchar(100) NOT NULL, `age` varchar(100) DEFAULT NULL, `sex` varchar(100) DEFAULT NULL, `email` varchar(100) DEFAULT NULL, `phone` varchar(200) DEFAULT NULL, PRIMARY KEY (`uid`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; INSERT INTO `user` VALUES ('1', '曹操', '123456', '22', '男', '123@163.com', '123456'); INSERT INTO `user` VALUES ('2', '小喬', '123456', '22', '女', '123@163.com', '123456');
相關的jar包（jar包下載可以參考如下：https://gitee.com/smfx1314/upload/tree/master/WebContent/WEB-INF/lib）
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>ssm-bbs3</display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <!-- 配置spring監聽器 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 加載spring配置文件applicationContext.xml --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <!-- 配置前端控制器 --> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>*.do</url-pattern>//此處可以用“/”，“*.do”,絕對不可以使用“/*” </servlet-mapping> <!-- 配置字符編碼 --> <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>
applicationContext.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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 掃描service包下的注解 --> <context:component-scan base-package="com.ssm.service"></context:component-scan> <!--1. 配置數據庫 --> <!-- 加載配置文件 --> <!-- <context:property-placeholder location="classpath:jdbc.properties"/> --> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="driverClass" value="com.mysql.jdbc.Driver"></property> <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/forum"></property> <property name="user" value="root"></property> <property name="password" value="1234"></property> </bean> <!--2. 配置sqlSessionFactory, 並將數據源注入 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 引入數據源 --> <property name="dataSource" ref="dataSource"></property> <!--載入mybatis配置文件--> <property name="configLocation" value="classpath:mybatis-config.xml"/> <!--載入配置mapper映射的xml--> <property name="mapperLocations" value="classpath:com/ssm/mapper/*.xml"/> </bean> <!-- 配置掃描Mapper接口 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.ssm.mapper"/> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> </bean> <!-- 配置事務管理器 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"></property> </bean>
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
mybatis-config.xml的配置
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <typeAliases> <typeAlias alias="User" type="com.ssm.entity.User"/>//配置別名 </typeAliases> </configuration>
springmvc的配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" 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/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 掃描controller包下的注解 --> <context:component-scan base-package="com.ssm.controller"></context:component-scan> <!-- 開啟注解 --> <mvc:annotation-driven/>//此處相當於配置映射器和處理器 <!--靜態資源訪問--> <mvc:default-servlet-handler/> <!-- 視圖解析器--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"></property> <property name="suffix" value=".jsp"></property> </bean> </beans>
UserController
package com.ssm.controller; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.view.RedirectView; import com.ssm.entity.User; import com.ssm.service.UserService; /** * 注意：如果@Controller不指定其value【@Controller】， * 則默認的bean名字為這個類的類名首字母小寫，如果指定value【@Controller(value=”UserAction”)】 * 或者【@Controller(“UserAction”)】， * 則使用value作為bean的名字。 * @author smfx1314 * */ @Controller @Scope("prototype") @RequestMapping("/user") public class UserController{ //注入userService @Autowired private UserService userService; /** * 用戶登錄 * @param user * @param model * @return */ @RequestMapping(value="/userlogin.do",method=RequestMethod.POST) public ModelAndView login(String username,String password,ModelAndView mv,HttpSession session) { User user=userService.login(username, password); if(user!=null){ //登錄成功，將user對象設置到HttpSession作用范圍域中 session.setAttribute("user", user); //轉發到main請求 /*mv.setView(new RedirectView("/smmbookapp/main"));*/
//登錄成功，跳轉頁面 mv.setViewName("mainPage"); }else { //登錄失敗，設置失敗信息，並調轉到登錄頁面 mv.addObject("message","登錄名和密碼錯誤，請重新輸入");
// 登錄失敗，跳轉頁面 mv.setViewName("error"); } return mv; } /** * 跳轉到用戶注冊頁面 */ @RequestMapping(value="/registerpage.do") public String registerpage() { return "user/registerpage"; } /** * 用戶注冊 */ @RequestMapping(value="/userregister.do",method=RequestMethod.POST) public String register(User user) { String username=user.getUsername(); // 如果數據庫中沒有該用戶，可以注冊，否則跳轉頁面 if (userService.findByUserName(username) == null) { // 添加用戶 userService.register(user);
// 注冊成功跳轉到主頁面 return "mainPage"; }else { // 注冊失敗跳轉到錯誤頁面 return "error"; } } }
User實體類
package com.ssm.entity; public class User { // 用戶屬性 private Integer userid; private String username; private String password; private String age; private String sex; private String email; private String phone; public Integer getUserid() { return userid; } public void setUserid(Integer userid) { this.userid = userid; } 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 getAge() { return age; } public void setAge(String age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } @Override public String toString() { return "User [userid=" + userid + ", username=" + username + ", password=" + password + ", age=" + age + ", sex=" + sex + ", email=" + email + ", phone=" + phone + "]"; } }
UserService接口
package com.ssm.service; import com.ssm.entity.User; /** * UserService * * @author smfx1314 * */ public interface UserService { // 通過用戶名及密碼核查用戶登錄 User login(String username, String password); //增加用戶 void register(User user); //根據用戶名查詢 User findByUserName(String user); }
UserServiceImpl實現類
package com.ssm.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import com.ssm.entity.User; import com.ssm.mapper.UserMapper; import com.ssm.service.UserService; /** * UserServiceImpl * @author smfx1314 * */ @Service @Transactional public class UserServiceImpl implements UserService{ //注入UserMapper接口
@Autowired private UserMapper userMapper; /** * 登錄 * 根據用戶名和密碼進行查詢 */ @Override public User login(String username, String password) { return userMapper.findByUserNameAndPassword(username, password); } /** * 注冊 * 增加用戶 */ @Override public void register(User user) { userMapper.addUser(user); } /** * 根據用戶名查詢 */ @Override public User findByUserName(String username) { return userMapper.findByUserName(username); } }
UserMapper接口
package com.ssm.mapper; import org.apache.ibatis.annotations.Param; import org.apache.ibatis.annotations.Select; import com.ssm.entity.User; public interface UserMapper { //根據用戶名和密碼查找。mybatis中有多個參數時，需要使用@Param注解 User findByUserNameAndPassword(@Param("username")String username,@Param("password")String password); //增加用戶 void addUser(User user); //根據用戶名查詢 User findByUserName(String username); }
UserMapper.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.ssm.mapper.UserMapper"> <!-- 根據用戶名和密碼查詢 --> <select id="findByUserNameAndPassword" resultType="User"> select * from user where username=#{username} and password=#{password} </select> <!-- 增加用戶 --> <insert id="addUser" parameterType="User"> insert into user(username,password,age,sex,email,phone) values(#{username},#{password},#{age},#{sex},#{email},#{phone}) </insert> <!-- 根據用戶名查詢 --> <select id="findByUserName" resultType="User"> select * from user where username=#{username} </select> </mapper>
index.jsp首頁
<%@ 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"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>歡迎來到程序員論壇交流</title> <script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/bootstrap.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/resource/js/login.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap-theme.css"> <link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/resource/css/style.css"/> <style type="text/css"> .control-group{ text-align: center; } .img-responsive{ margin-top:-10px; } </style> </head> <body> <!-- 導航條 --> <nav class="navbar navbar-default navbar-fixed-top navbar-right" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="${pageContext.request.contextPath }/resource/img/logo.jpg" class="img-responsive" alt=""></a><span style="line-height: 50px;">程序改變世界</span> <!-- 搜索框--> <!-- <form class="navbar-form navbar-right" action="" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="輸入要查詢的內容"> </div> <button type="submit" class="btn btn-default">提交</button> </form> --> </div> <div id="navbar" class="navbar-collapse collapse"> <!-- 導航欄 --> <ul class="nav navbar-nav navbar-right"> <li class="login-header"><a href="javascript:void(0);"><span class="glyphicon glyphicon-home"></span>登陸</a></li> <li><a href="${pageContext.request.contextPath }/user/registerpage.do"><span class="glyphicon glyphicon-user"></span> 注冊</a></li> </ul> </div> </div> </nav> <!-- 輪播banner --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 圖片 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="${pageContext.request.contextPath }/resource/img/banner1.jpg" align="center"> <div class="carousel-caption"> </div> </div> </div> <!-- 左右箭頭 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- 登錄彈窗 --> <div class="login"> <form action="${pageContext.request.contextPath }/user/userlogin.do" method="post"> <div class="login-title">登錄會員<span><a href="javascript:void(0);" class="close-login">關閉</a></span></div> <div class="login-input-content"> <div class="login-input"> <label>用 戶 名：</label> <input type="text" placeholder="請輸入用戶名" name="username" id="username" class="list-input"/> </div> <div class="login-input"> <label>登錄密碼：</label> <input type="password" placeholder="請輸入登錄密碼" name="password" id="password" class="list-input"/> </div> </div> <div class="control-group"> <div class="controls" > <button class="btn btn-success" style="width:120px;" >確認</button> </div> </div> </form> </div> <!--展示圖片--> <div class="container"> <!--手機、平板、桌面--> <div class="row"> <div class="col-xs-6 col-xs-4"> <h2></h2> <a href="#" class="thumbnail"><img src="${pageContext.request.contextPath }/resource/img/1.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-xs-4"> <h2></h2> <a href="#" class="thumbnail"><img src="${pageContext.request.contextPath }/resource/img/2.jpg" alt="..."> </a> </div> <div class="col-xs-6 col-xs-4"> <h2></h2> <a href="#" class="thumbnail"><img src="${pageContext.request.contextPath }/resource/img/3.jpg" alt="..."> </a> </div> </div> </div> <!--內容--> <hr> <!--底部導航--> <footer id="footer" class="bs-docs-footer"> <div class="container"> <ul class="nav navbar-nav navbar-right"> <li><a href="https://github.com/">GitHub</a></li> <li><a href="../about/">關於</a></li> </ul> <p>版權所有</p> </div> </footer> </div> </body>
</html>
register.jsp注冊頁面代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title>注冊頁面</title> <meta name="description" content="User login page" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <!-- bootstrap & fontawesome --> <link rel="stylesheet" href="${pageContext.request.contextPath }/resource/register/assets/css/bootstrap.min.css" /> <link rel="stylesheet" href="${pageContext.request.contextPath }/resource/register/assets/font-awesome/4.2.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="${pageContext.request.contextPath }/resource/register/assets/fonts/fonts.googleapis.com.css" /> <link rel="stylesheet" href="${pageContext.request.contextPath }/resource/register/assets/css/ace.min.css" /> <link rel="stylesheet" href="${pageContext.request.contextPath }/resource/register/assets/css/ace-rtl.min.css" /> </head> <body class="login-layout"> <div class="center"> <h1> <i class="ace-icon fa fa-leaf green"></i> <span class="white" id="id-text2">會員注冊</span> </h1> <h4 class="blue" id="id-company-text">© 程序員論壇</h4> </div> <div class="space-6"></div> <div class="widget-body" style="width:500px;margin-left: 33%;"> <div class="widget-main"> <h4 class="header blue lighter bigger"> <i class="ace-icon fa fa-coffee green"></i> 請輸入您的信息 </h4> <div class="space-6"></div> <form action="${pageContext.request.contextPath }/user/userregister.do" method="post"> <fieldset> <label class="block clearfix"> <span class="block input-icon input-icon-right"> 用戶名<input type="text" name="username" class="form-control" placeholder="用戶名" /> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> 密碼<input type="password" name="password" class="form-control" placeholder="密碼" /> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> 年齡<input type="text" name="age" class="form-control" placeholder="年齡" /> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> 性別<input type="text" name="sex" class="form-control" placeholder="性別" /> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> 郵箱<input type="text" name="email" class="form-control" placeholder="郵箱" /> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> 手機號<input type="text" name="phone" class="form-control" placeholder="手機號" /> </span> </label> <div class="space"></div> <div class="clearfix" style="text-align: center;"> <input type="submit" value="提交" style="width:100px;"> </div> <div class="space-4"></div> </fieldset> </form> </div> </div> </body> </html>
下面看下整體效果
登錄效果
注冊頁面效果