SSM 重構註冊登錄界面
正文以前
以前有作過一個練手的商品管理的小項目，而後用 SSM 重構了，接下來又作了一個模擬註冊登陸的界面，而後前兩天用 SSM 重構了這個項目的後臺代碼，修改了一點前端頁面，後臺功能不變css
接下來還有在此基礎上作新的功能：保持登錄狀態，查看我的信息等，而後把註冊登錄界面整合至商品管理的項目，一步一步擴大html
正文
1. 項目截圖
下面的文檔中有給出截圖前端
2. 功能實現
- 註冊、登錄
常規的註冊登錄操做java
- 驗證碼
輸出驗證碼，單擊驗證碼圖片可刷新mysql
- 驗證用戶
註冊是驗證用戶名、電話號碼和郵箱是否已被註冊，登錄時驗證用戶是否已註冊以及密碼是否正確，兩個過程當中都有檢測驗證碼的準確性git
3. 具體說明
我仍是放上項目的 README 文檔吧：github
Registration-login-interface2
Version 0.1
使用 SSM 框架來對原先的 Registration-login-interface 進行重構，頁面作細微改動，後臺使用框架，來達到一樣的效果：web
0.1 版本是使用框架進行重構，接下來的 0.2 版本將會是添加一些功能：用戶保持登錄狀態，添加一張 SQL 表來存放用戶信息，並在頁面中進行我的信息添加和修改spring
1. 文件結構
關於建包和建立哪些類，很少說，直接上一整個項目的圖：sql
2. 配置文件（config 包）
將 Spring 和 MyBatis 整合的方式，在以前的 new-p-m 和 mybatis-spring 官方文檔 中都能找到答案，這裏直接給出配置：
數據庫信息（db.properties)：
jdbc.driver = com.mysql.jdbc.Driver jdbc.url = jdbc:mysql://localhost:3306/user jdbc.username = xxx（你本身的用戶名） jdbc.password = xxx（你本身的密碼）
spring-mvc.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:mvc="http://www.springframework.org/schema/mvc"
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">
<!-- 組件掃描 -->
<context:component-scan base-package="controller"/>
<context:component-scan base-package="service"/>
<!-- 註解驅動 -->
<mvc:annotation-driven/>
<!-- 配置視圖解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
<!-- 這兩行代碼是爲了避免讓靜態資源被 servlet 攔截 -->
<mvc:resources mapping="/image/**" location="image"/>
<mvc:resources mapping="../../css/**" location="css"/>
</beans>
複製代碼
spring-mybatis.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"
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">
<!-- 將數據庫信息配置在外部文件中，使用佔位符來代替具體信息的配置 -->
<context:property-placeholder location="classpath:config/db.properties"/>
<!-- 配置數據源 -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
<property name="driverClassName" value="${jdbc.driver}"/>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!-- sqlSessionFactory 的配置，這是基於 MyBatis 的應用的核心 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 使用上面定義的數據源來進行配置 -->
<property name="dataSource" ref="dataSource"/>
</bean>
<!-- 查找下面指定的類路徑中的映射器 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 定義 Mapper 配置器的位置 -->
<property name="basePackage" value="mapper"/>
</bean>
<!-- 以後要用到的兩個 Bean -->
<bean id="exceptionService" class="service.impl.ExceptionServiceImpl"/>
<bean id="verifyCode" class="util.VerifyCode"/>
</beans>
複製代碼
3. web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/classes/config/spring/spring-mybatis.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:config/spring/spring-mvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>*.action</url-pattern>
</servlet-mapping>
</web-app>
複製代碼
第 2 步中配置的兩個文件做爲上下文配置信息，最後的 url 映射是 xxx.action 的形式
4. 實體類（User.java）
爲了節省篇幅，這裏不給出實體類代碼，和 Registration-login-interface 中的實體類是同樣的
5. 自定義異常
自定義的異常是調用父類方法來實現的，因用戶註冊或登錄時輸入有誤而拋出
public class UserException extends Exception { //自定義異常 public UserException(String message) { super(message); } }
6. 映射器
MyBatis-Spring 提供的 MapperFactoryBean 可以進行動態代理，可以將數據映射器接口注入到 Service 層中的 Bean 裏，注意，必定要是接口，不能是實現類，因此咱們這裏寫了一個 UserMapper：
public interface UserMapper {
void addUser(User user);
User findUserByName(String username);
User findUserByPhone(String phone);
User findUserByEmail(String email);
}
複製代碼
映射器接口對應着一個同名的 XML 映射器文件文件：UserMapper.xml
這個映射器中寫的是 SQL 語句，這裏面有四句，添加，按照名稱、電話號碼和郵箱進行查找，映射文件的命名空間（namespace）對應着映射器接口的名稱，SQL 語句的 id 對應着接口中的方法，不能有誤
<mapper namespace="mapper.UserMapper">
<insert id="addUser" parameterType="domain.User">
INSERT INTO user(username,password,phone,email)
VALUES (#{username}, #{password}, #{phone}, #{email})
</insert>
<select id="findUserByName" parameterType="String" resultType="domain.User">
SELECT * FROM user WHERE username = #{username}
</select>
<select id="findUserByPhone" parameterType="String" resultType="domain.User">
SELECT * FROM user WHERE phone = #{phone}
</select>
<select id="findUserByEmail" parameterType="String" resultType="domain.User">
SELECT * FROM user WHERE email = #{email}
</select>
</mapper>
複製代碼
6. 驗證碼
SSM 版本的驗證碼沒有變化，仍是 Registration-login-interface 中的驗證碼，不作更改
7. Service 層
Service 層有兩個接口，一個是關於註冊和登錄的：
public interface UserService {
public void addUser(User user) throws UserException;
public void login(User user) throws UserException;
}
複製代碼
另外一個是檢測註冊和登錄過程當中的錯誤狀況：
@Service
public interface ExceptionService {
//_user 是從數據庫中查找出的記錄，user 是用戶輸入
public void loginException(User user, User db_user) throws UserException;
public void addUserException1(User user) throws UserException;
public void addUserException2(User user) throws UserException;
}
複製代碼
先寫 ExceptionService 的實現，在註冊和登錄過程當中要使用：
//先建立 Bean，接下來會用到
private final UserMapper userMapper;
@Autowired
public ExceptionServiceImpl(UserMapper userMapper) {
this.userMapper = userMapper;
}
//先判斷輸入格式是否有誤
public void addUserException1(User user) throws UserException{
if (user.getUsername() == null || user.getUsername().trim().isEmpty()){
throw new UserException("用戶名不能爲空");
}else if (user.getUsername().length() < 5 || user.getUsername().length() > 15){
throw new UserException("用戶名必須爲5-15個字符");
}
if (user.getPassword() == null || user.getPassword().trim().isEmpty()){
throw new UserException("密碼不能爲空");
}else if (user.getPassword().length() < 5 || user.getPassword().length() > 15){
throw new UserException("密碼必須爲5-15個字符");
}
if (user.getPhone() == null || user.getPhone().trim().isEmpty()){
throw new UserException("電話號碼不能爲空");
}
if (user.getEmail() == null || user.getEmail().trim().isEmpty()){
throw new UserException("郵箱不能爲空");
}
}
//再判斷輸入的信息是否已被註冊
public void addUserException2(User user) throws UserException{
//這三者都必須是惟一的
if (userMapper.findUserByName(user.getUsername()) != null){
throw new UserException("該用戶名已被註冊");
} else if (userMapper.findUserByPhone(user.getPhone()) != null){
throw new UserException("該電話號碼已被註冊");
} else if (userMapper.findUserByEmail(user.getEmail()) != null){
throw new UserException("該郵箱已被註冊");
}
}
//登入檢測
public void loginException(User user, User db_user) throws UserException {
if(db_user == null){
throw new UserException("該用戶不存在");
}
if(!user.getPassword().equals(db_user.getPassword())){
throw new UserException("密碼錯誤");
}
}
//驗證碼檢測
@Override
public void verifyCodeException(String inputVerifyCode, String code) throws UserException {
if (inputVerifyCode == null || inputVerifyCode.trim().isEmpty()){
throw new UserException("驗證碼不能爲空");
} else if (inputVerifyCode.length() != 4){
throw new UserException("驗證碼長度應爲 4 位");
} else if (!inputVerifyCode.equals(code)){
throw new UserException("驗證碼錯誤");
}
}
複製代碼
而後是 UserService 的實現：
//先是用構造器注入來建立 UserMapper 和 ExceptionService 兩個 Bean
private final UserMapper userMapper;
private final ExceptionService exceptionService;
@Autowired
public UserServiceImpl(UserMapper userMapper, ExceptionService exceptionService) {
this.userMapper = userMapper;
this.exceptionService = exceptionService;
}
public void addUser(User user) throws UserException {
//先判斷用戶的輸入是否有錯
exceptionService.addUserException1(user);
//再判斷用戶的信息是否已被註冊
exceptionService.addUserException2(user);
userMapper.addUser(user);
}
//根據用戶輸入名字去數據庫查找有沒有這個用戶，若是沒有，就會拋出異常
public void login(User user) throws UserException {
User db_user = userMapper.findUserByName(user.getUsername());
exceptionService.loginException(user, db_user);
}
複製代碼
可能有人會以爲爲何登錄的方法沒有返回值，其實若是登入成功，也就是沒有拋出異常，在 Controller 中就能夠接着執行後面的方法，若是用戶名或密碼錯誤，是會拋出異常，中斷程序的
8. Controller
到了關鍵的一步，Controller 負責處理 DispatcherServlet 分發的請求：
首先是使用構造器注入來建立三個 Bean：
private final UserService userService;
private final VerifyCode verifyCode;
private final ExceptionService exceptionService;
@Autowired
public UserController(UserService userService, VerifyCode verifyCode, ExceptionService exceptionService) {
this.userService = userService;
this.verifyCode = verifyCode;
this.exceptionService = exceptionService;
}
複製代碼
userService 就是用於註冊和登錄的，verifyCode 就是用於獲得驗證碼，exceptionService 是用來檢測註冊和登錄過程當中是否出現錯誤
在註冊和登錄以前，都須要獲得帶有表單的頁面：
//在註冊以前須要先獲得註冊的界面
@RequestMapping("/preAdd")
public ModelAndView preAdd(){
return new ModelAndView("addUser");
}
//一樣的，須要先獲得界面
@RequestMapping("preLogin")
public ModelAndView preLogin(){
return new ModelAndView("login");
}
複製代碼
而後是註冊的過程，先調用 addUser() 方法，若是用戶註冊的時候出現了問題，好比說用戶名、電話號碼或者郵箱已被註冊，就直接拋出異常，就沒有執行驗證碼驗證的方法了，若是沒問題，就接着檢測驗證碼輸入，將表單輸入與驗證碼文本進行比較
@RequestMapping("/addUser")
public ModelAndView addUser(User user, HttpServletRequest request){
ModelAndView modelAndView;
//若是下面的 try 語句塊沒有拋出異常，則返回 addUserSuccessful.jsp
modelAndView = new ModelAndView("addUserSuccessful");
try{
//先調用添加用戶的方法，看看有沒有由於不符規定的輸入而致使異常拋出
userService.addUser(user);
//而後再看有沒有由於驗證碼錯誤而致使異常拋出
exceptionService.verifyCodeException(request.getParameter("verifyCode"), verifyCode.getText());
} catch (UserException e){
//若是捕獲異常，就帶着異常信息返回註冊界面
modelAndView = new ModelAndView("addUser");
modelAndView.addObject("message", e.getMessage());
}
return modelAndView;
}
複製代碼
登錄的過程，也是先先檢查用戶輸入信息是否有誤，再檢查驗證碼信息
//登錄的邏輯和上面是同樣的
@RequestMapping("/login")
public ModelAndView login(User user, HttpServletRequest request) {
ModelAndView modelAndView;
modelAndView = new ModelAndView("loginSuccessful");
try {
userService.login(user);
exceptionService.verifyCodeException(request.getParameter("verifyCode"), verifyCode.getText());
} catch (UserException e){
modelAndView = new ModelAndView("login");
modelAndView.addObject("message", e.getMessage());
}
return modelAndView;
}
複製代碼
最後是關於輸出驗證碼圖片的操做：
//獲得驗證碼，而後用於 jsp 文件的 <img> 標籤的 src 屬性中
@RequestMapping("/getVerifyCode")
public void setVerifyCode(HttpServletResponse response)
throws IOException{
//設置響應格式
response.setContentType("image/jpg");
//獲得圖片
BufferedImage image = verifyCode.getImage();
//輸出
verifyCode.output(image, response.getOutputStream());
}
複製代碼
相關文章
- 1. 登錄註冊界面
- 2. HTML+CSS做登錄註冊界面
- 3. 註冊與登錄界面的美化
- 4. 簡易QT登錄註冊界面
- 5. 簡單登錄註冊界面
- 6. bootstrap實現登錄註冊界面
- 7. 登陸註冊界面
- 8. 保持登陸狀態的註冊登錄界面
- 9. Android+JavaEE實現登錄註冊（2）——Android登錄界面設計
- 10. 變量作用域、登錄界面、註冊界面
- 更多相關文章...
- • 登錄MySQL數據庫 - MySQL教程
- • Eclipse 重構菜單 - Eclipse 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 登錄註冊界面
- 2. HTML+CSS做登錄註冊界面
- 3. 註冊與登錄界面的美化
- 4. 簡易QT登錄註冊界面
- 5. 簡單登錄註冊界面
- 6. bootstrap實現登錄註冊界面
- 7. 登陸註冊界面
- 8. 保持登陸狀態的註冊登錄界面
- 9. Android+JavaEE實現登錄註冊（2）——Android登錄界面設計
- 10. 變量作用域、登錄界面、註冊界面