SSH框架实现登陆界面

文前提醒,本教程版本较老。如果您是出于自学缘故,建议不要阅读本篇教程,而是找一个更新版本的去学习。

软件框架及版本:

Stucts 1.2 + Spring 3.0 + Hibernate3.3,J2EE 5.0,MyEclipse8.5

事先准备工作:

1.安装JDK,MyEclipse(只测试了8.5),MySQL,JDBC(高版本可能报错),Navicat for MySQL(可选)
2.新建数据表:

create database test;
use test;
CREATE TABLE `user` (
  `id` INTEGER NOT NULL auto_increment,
  `username` varchar(40) character set utf8 NOT NULL,
  `password` varchar(40) collate utf8_unicode_ci NOT NULL
  PRIMARY KEY  (`id`)
)DEFAULT CHARSET=utf8;
 COLLATE=utf8_unicode_ci;
insert into user values(null, 'test', '123');

将上述语句输入MySQL终端或Navicat等可视化软件

SSH框架搭建步骤

1.新建一个项目。打开MyEclipse,新建一个Web项目,起名就叫SSH吧,点击完成,若弹出提示点Yes即可。

SSH框架实现登陆界面_第1张图片
新建项目

SSH框架实现登陆界面_第2张图片
Web Project

2.添加Struts框架。右键这个项目,选择MyEclipse->Add Struts Capabilities。 在弹出的菜单中把包的路径改一下, Base package for new classes选项中的路径com.yourcompany.struts改成com.sshlogin.struts, 点击完成。
SSH框架实现登陆界面_第3张图片
image.png

SSH框架实现登陆界面_第4张图片
image.png

3.添加Spring框架。右键这个项目,选择MyEclipse->Add Spring Capabilities。在菜单中选择如下6个库,点击下一步。更改Folder路径,选择SSH项目WebRoot文件夹下的WEB-INF,完成。
SSH框架实现登陆界面_第5张图片
image.png

SSH框架实现登陆界面_第6张图片
image.png

SSH框架实现登陆界面_第7张图片
image.png

SSH框架实现登陆界面_第8张图片
image.png

SSH框架实现登陆界面_第9张图片
image.png

4.连接数据库。点击右上角的图标"打开透视图",选择MyEclipse Database Explorer。在窗口中右键->New 新建一个数据库连接。
SSH框架实现登陆界面_第10张图片
image.png

Driver template 选择 MySQL Connector/J
Driver name 起名叫test
Connection URL 更改为jdbc:mysql://自己的IP地址:端口号/数据库名称
User name 填写MySQL的用户名
Password 填写MySQL的密码
Driver JARs 点击Add JARs按钮,浏览到事先准备的 mysql-connector-java-5.0.8-bin.jar
Save password 选上(JDBC版本过高可能会导致连接失败)
SSH框架实现登陆界面_第11张图片
image.png

点击Test Driver,测试结果:数据库配置正确,点击完成。
SSH框架实现登陆界面_第12张图片
image.png

双击添加的test连接,展开目录,可以发现我们事先创建的user表。
SSH框架实现登陆界面_第13张图片
image.png

SSH框架实现登陆界面_第14张图片
image.png

5.添加Hibernate框架。右键SSH项目,选择MyEclipse->Add Spring Capabilities。点击下一步。配置中选择第二项"Spring configuration file"。把Spring与Hibernate整合到一起,点击下一步。
SSH框架实现登陆界面_第15张图片
image.png

在菜单中选第二项"Existing Spring configuration file",点击下一步。
SSH框架实现登陆界面_第16张图片
image.png

DB Driver选择在添加Spring框架时配置的test,点击下一步。
SSH框架实现登陆界面_第17张图片
image.png

取消Create SessionFactory class?这个选项,点击完成。
SSH框架实现登陆界面_第18张图片
image.png

现在的目录结构如下,SSH框架大体搭建完成。
SSH框架实现登陆界面_第19张图片
image.png

6.测试功能。

先部署一下项目,访问首页看看效果。选择项目"Run As"->选择MyEclipse Server Application。

SSH框架实现登陆界面_第20张图片
image.png

等待一段时间的卡顿之后就可以看到初始主页了,或者在浏览器中输入 http://localhost:8080/SSHLogin/
SSH框架实现登陆界面_第21张图片
image.png

登录功能实现

切换到MyEclipse DataBase Explorer视图,通过Spring框架的逆向工程功能把user表逆向成Java实体类。右键user表选择"Hibernate Reverse Engineering"。

SSH框架实现登陆界面_第22张图片
image.png

SSH框架实现登陆界面_第23张图片
image.png

Java src folder 选择SSH项目下的src文件夹。
Java package 填写com.sshlogin.user
勾选前三个选项:Create POJO、Java Data Obect和Java Data Access Object。POJO类是数据库表格所对应的Java类,JDO类是MyEclipse自动生成的对数据库的一些操作,这里会封装一些常用的操作,基本上可以满足我们的各种需要了,选择下一步。
SSH框架实现登陆界面_第24张图片
image.png

Id Generator 选择 native,点击完成。
SSH框架实现登陆界面_第25张图片
image.png

此时的目录结构如下,我们可以看到系统生成了3个类,一个配置文件。 User 继承自AbstractUser,是User表的实体类。
UserDAO 封装了一些对数据库的常用操作。
User.hbm.xml 是hibernate-mapping映射配置文件,配置了哪个 实体类映射哪个表,配置了实体类的哪个属性映射表里的哪列。
如果这些东西不用hibernate生成,那么我们就要自己写,要浪费很多时间,hibernate的作用就体现出来了。
SSH框架实现登陆界面_第26张图片
image.png

现在来写测试页。打开WEB-INF文件夹下的struts-config.xml文件,切换到设计视图(design)。右键->New->Form Action and JSP。
SSH框架实现登陆界面_第27张图片
image.png

填写Form表单属性:
Use case: login
Name:loginForm
在下方Form Properties中添加两个属性
username: JSP input type text
password: JSP input type password
SSH框架实现登陆界面_第28张图片
image.png

SSH框架实现登陆界面_第29张图片
image.png

切换到JSP选项,填写JSP属性:
勾选Create JSP form
点击完成。
SSH框架实现登陆界面_第30张图片
image.png

此时的目录结构如下,可以看到在WebRoot/form/下 生成了一个login.jsp页。
SSH框架实现登陆界面_第31张图片
image.png

现在添加两个页面:登录成功页和登录失败页,实现登录后的跳转。
在WebRoot/jsp/下新建两个JSP页。起名为loginSuccess.jsp和loginFail.jsp。
SSH框架实现登陆界面_第32张图片
image.png

SSH框架实现登陆界面_第33张图片
image.png

在loginSuccess.jsp页面body中添加"Login Successfully"。
在loginFail.jsp页面body中添加" Login failed."。
也可以随意换成其他的描述,中文可能会乱码
SSH框架实现登陆界面_第34张图片
image.png

把登录页、登录成功页、登录失败页3个页面相关联。
切换到struts-config.xml的设计视图。右键login.jsp->New->Forward。
SSH框架实现登陆界面_第35张图片
image.png

loginSuccess:
选择Local Action Forward
浏览Action Path:/login
填写name:loginSuccess
浏览Path:/form/loginSuccess.jsp
完成
loginFail:
选择Local Action Forward
浏览Action Path:/login
填写name:loginFail
浏览Path:/form/loginFail.jsp
SSH框架实现登陆界面_第36张图片
image.png

SSH框架实现登陆界面_第37张图片
image.png

现在来写具体的执行代码。打开LoginAction.java。可以看到自动生成的代码如下图:
SSH框架实现登陆界面_第38张图片
image.png

将代码修改如下

/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 */
package com.sshlogin.struts.action;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.sshlogin.struts.form.LoginForm;
import com.sshlogin.user.User;
import com.sshlogin.user.UserDAO;

/** 
 * MyEclipse Struts
 * Creation date: 06-06-2018
 * 
 * XDoclet definition:
 * @struts.action path="/login" name="loginForm" input="/form/login.jsp" scope="request" validate="true"
 */
public class LoginAction extends Action {
    /*
     * Generated Methods
     */

    /** 
     * Method execute
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return ActionForward
     */
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {
        LoginForm loginForm = (LoginForm) form;// TODO Auto-generated method stub
        String username = loginForm.getUsername();
        String password = loginForm.getPassword();
        
        User instance = new User();
        instance.setUsername(username);
        instance.setPassword(password);
        ClassPathXmlApplicationContext beans = new ClassPathXmlApplicationContext("../applicationContext.xml");
        UserDAO userDAO = (UserDAO)beans.getBean("UserDAO");
        List list = userDAO.findByExample(instance);
        
        if(list.size() > 0){
            return mapping.findForward("loginSuccess");
        }
        return mapping.findForward("loginFail");
    }
}

重启服务器,测试登陆功能,输入上面插入的测试数据,test,123


SSH框架实现登陆界面_第39张图片
image.png

SSH框架实现登陆界面_第40张图片
image.png

SSH框架实现登陆界面_第41张图片
image.png

SSH框架实现登陆界面_第42张图片
image.png

至此登陆功能就已经完成了,感谢你的浏览。另外希望软件架构老师换本新一点教材和实验。

本文在这个教程基础上进行改编:SSH框架搭建详细图文教程,如果有更多需求可以参考这个教程

你可能感兴趣的:(SSH框架实现登陆界面)