呼之欲出！期末课设整合SSM实现的登录注册—轻松实现期末弯道超车，学霸直呼内行！
目录
1 导读
如何整合SSM项目？如何在JavaEE课程中脱颖而出？如何掌握一些入门知识？
没错！不用思考了，跟我来，你想要找的这里应有尽有！
想在学期末取得圆满的成绩吗？
快来试试这个登录小案例，这里没有过于抽象的概念，也没有烧脑的语法结构，全是简单脱俗的操作步骤，楼下一年级学弟直呼有用，分分钟送上热门！
相信我，看完这篇文章你一定不会后悔，手把手教你搭建SSM项目，成功避坑！
赶快加入学习计划吧......
2 结果欣赏
3 创建项目的具体过程
3.1 新建项目
新建项目前需要配置相关的开发环境：
- 安装并配置了Tomcat，此处版本为tomcat9.0.35；
- 安装并配置了jdk，此处版本为jdk1.8.0_271（这里的版本号指的是jdk1.8版本的地271次更新版）；
- 集成开发环境为IDEA2019企业版
（1）开始一个新的JavaEEweb项目，首先选择菜单栏File选项，->New->Project,开始新建一个新的项目：
（2） 选中java Enterprise，找到右边的选项列表，下拉找到Web Application选项并勾选，项目会默认在web目录下的WEB-INF下新建一个web.xml配置文件，完成后选择next：
（3）配置项目信息：
| Project name | 配置项目的名称 |
| Project location | 选择项目的地址 |
（5）以上信息完成后，点击Finsh后项目新建成功，我们可以看到loginDemo目录下有一个名为src子目录和一个web子目录；
1.其中src为资源目录，也就是说我们接下来的java代码均放在次目录下；
2.其次就是web子目录，里面包括一个index.jsp文件和WEB-INF子目录，其中index.jsp为tomcat运行默认启动页面，如需更改此配置可通过修改tomcat相关配置文件，一般我们不做修改！WEB-INF是java的WEB应用的安全目录，只对服务端开放，对客户端是不可见的。
3.2 导入jia包
因为我们这里是整合SSM，所以我们需要导入Spring、Mybatis、SpringMVC三者所依赖的相关jar包。
（1）此处我们在web\WEB-INF目录下新建一个libs目录用于存放jar包。
（2） 添加完需要的jar包到libs目录下后需要进行一步必要的操作：右击libs目录，弹出对话框后选择Add as Libray...选项，目的是将这些依赖的jar包添加到项目的依赖环境。
另一种添加jar包到依赖的方法是：先打开项目结构找到modul，选择Dependencies选项，单击+，再选择项目下的libs目录添加jar到依赖。
3.3 自定义Classes目录
关于这一步，其实我们需要思考两个问题：
- 既然idea默认了自定义classes目录为什么还需要自定义classes目录，会不会多此一举呢?
- 如何自定义classes目录，过程是怎么样的？
其实答案很简单：
- 自定义的classes目录后，我们可以将类路径和资源路径进行关联，减少不必要的问题的出现，有时候不正确的访问路径会造成404错误，处理起来也是比较头疼的，很多程序员就是因为这个404而放弃这一行选择去做销售的。
- 自定义classes的过程分三部，先在web/WEB-INF下新建一个classes文件夹，然后再项目结构中更改Modul中的path为这个classes。
1.自定义类路径，首先我们在web/WEB-INF目录下创建一个名为classes的目录：
2.第二步，选择File->Project Structure...打开项目结构:
3.第三步，选中Modules，loginExp（这是项目名称），找到Path后单击，更改output path，这里选择Use module compile output path（使用模块编译输出路径），然后找到web/WEB-INF/classes目录，将Output path以及Test output path均改为这个classes目录；
4.修改为下图所示，最后点击apply；
3.4 设置src资源目录结构
在src目录下创建main包，之后在main包下创建一个名为java和一个名为resources的子包，其中java包下对应所有的java类，而resources包下存放相关配置文件。
- java包下应包含controllre层、dao层、持久层、以及service层。
- resources包下应创建srping配置文件、SpringMVC配置文件、mybatis核心配置文件等。
1.创建结构如下：
2.定义文件类型：
IDEA 中需指定 Sources 文件夹、 Resources 资源文件夹，否则在新建 Java 类时不能建 Java 类型，且编译时不知道如何处理
3.指定java包为Sources文件夹，resources包为Resources资源文件夹，结果如下：
3.5 编写源代码以及配置文件
编写结果如下图所示：
1.相关项目文件已打包到：https://download.csdn.net/download/qq_44140450/18944748；
2.这里只展示部分配置文件：
（1）mybatis.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>
-
<package name="com.myProject.pojo.User"/>
-
</typeAliases>
-
<mappers>
-
<!--映射文件的位置-->
-
<mapper resource="com/myProject/dao/mapperDao/userMapper.xml"/>
-
</mappers>
-
</configuration>
(2)springDao.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"
-
xsi:schemaLocation=
"http://www.springframework.org/schema/beans
-
http://www.springframework.org/schema/beans/spring-beans.xsd">
-
<!--配置数据源-->
-
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
-
<property name="driverClassName" value="com.mysql.jdbc.Driver"/>
-
<property name="url" value="jdbc:mysql://localhost:3306/testdata?characterEncoding=UTF8"/>
-
<property name="username" value="root"/>
-
<property name="password" value=""/>
-
<property name="initialSize" value="1"/>
-
<property name="minIdle" value="1"/>
-
<property name="loginTimeout" value="100"/>
-
<property name="maxActive" value="20"/>
-
</bean>
-
-
<!--配置SqlSessionFactory-->
-
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
-
<property name="dataSource" ref="dataSource"/>
-
<property name="configLocation" value="classpath:mybatis.xml"/>
-
</bean>
-
-
<!--配置映射文件Mapper对于的dao和mybatis工厂-->
-
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
-
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
-
<property name="basePackage" value="com.myProject.dao"/>
-
</bean>
-
</beans>
(3)userService.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"
-
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
-
http://www.springframework.org/schema/cache/spring-tx.xsd">
-
<context:component-scan base-package="com.myProject.service.implUserService"/>
-
-
<bean id="userServiceImpl" class="com.myProject.service.implUserService.UserServiceImpl">
-
<property name="userDao" ref="userDao"/>
-
</bean>
-
-
<bean name="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
-
<property name="dataSource" ref="dataSource"/>
-
</bean>
-
</beans>
(4)userServlet.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:mvc=
"http://www.springframework.org/schema/mvc"
-
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/mvc
-
http://www.springframework.org/schema/mvc/spring-mvc.xsd
-
http://www.springframework.org/schema/context
-
http://www.springframework.org/schema/context/spring-context.xsd">
-
<context:component-scan base-package="com.myProject.controller"/>
-
<context:component-scan base-package="com.myProject.service.implUserService"/>
-
<mvc:annotation-driven/>
-
<mvc:default-servlet-handler/>
-
-
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
-
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
-
<property name="prefix" value="/WEB-INF/jsp/"/>
-
<property name="suffix" value=".jsp"/>
-
</bean>
-
-
</beans>
(5)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">
-
<servlet>
-
<servlet-name>dispatcherServlet
</servlet-name>
-
<servlet-class>org.springframework.web.servlet.DispatcherServlet
</servlet-class>
-
<init-param>
-
<param-name>contextConfigLocation
</param-name>
-
<param-value>classpath:applicationContext.xml
</param-value>
-
</init-param>
-
<load-on-startup>1
</load-on-startup>
-
</servlet>
-
<servlet-mapping>
-
<servlet-name>dispatcherServlet
</servlet-name>
-
<url-pattern>/
</url-pattern>
-
</servlet-mapping>
-
</web-app>
(6) 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: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">
-
-
<import resource="classpath:userServlet.xml"/>
-
<import resource="classpath:springDao.xml"/>
-
<import resource="classpath:userService.xml"/>
-
-
</beans>
3.6 配置web目录下相关资源与文件
1.index.jsp
-
<%--
-
Created
by
IntelliJ
IDEA.
-
User: 四原色
-
Date:
2021/
5/
23
-
Time:
10:36
-
To
change
this
template
use
File |
Settings |
File
Templates.
-
--%>
-
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>登录
</title>
-
<style>
-
body {
-
margin: 0;
-
padding: 0;
-
font-family: sans-serif;
-
background-color: #68bcab;
-
<%--background: url(${pageContext.request.contextPath}/img/bj.jpg) no-repeat;--%>
-
background-size: 100% 100%;
-
background-attachment: fixed;
-
}
-
-
.box {
-
/*绝对定位 */
-
position: absolute;
-
-
/* 居中 */
-
top: 50%;
-
left: 80%;
-
transform: translate(-50%, -50%);
-
-
/* 整个登陆图层的宽度 */
-
width: 450px;
-
/* height: 650px; */
-
-
/* 登陆图层内部元素跟图层边框的四周距离 */
-
padding: 40px;
-
-
/* 背景颜色 纯白 不透明度0.6 */
-
background: rgba(46, 41, 82, 0.39);
-
-
/* 设置box-sizing模式为border-box 这样内含图层的padding和border都会算在其大小中 */
-
box-sizing: border-box;
-
-
/* 添加阴影 x轴 y轴 blur 颜色*/
-
box-shadow: 0 15px 20px rgba(0, 0, 0, .8);
-
-
/* 设置圆角 */
-
/* border-top-left-radius: 30px;
-
border-bottom-right-radius: 30px; */
-
}
-
-
/* 设置box类中的h2标签属性 */
-
.box h2 {
-
margin: 0 0 50px;
-
padding: 0;
-
font-size: 48px;
-
color: #fff;
-
text-align: center;
-
}
-
-
/* 设置box类中的inputBox类为相对定位 */
-
.box .inputBox {
-
position: relative;
-
width: 350px;
-
height: 125px;
-
}
-
-
/* 设置box类中的inputBox类中的input标签属性 */
-
.box .inputBox input {
-
text-align: center;
-
/* 宽度和父亲容器一致 */
-
width: 100%;
-
border-radius: 0px 0px 28px 28px;
-
/* 上下内边距为10px 左右内边距为0px */
-
padding: 10px 0 5px;
-
-
/* 字体大小22px */
-
font-size: 30px;
-
letter-spacing: 1px;
-
color: #fff;
-
margin-bottom: 30px;
-
border: none;
-
border-bottom: 2px solid #fff;
-
outline: none;
-
background: transparent;
-
transition: all 0.3s;
-
}
-
.box .inputBox input:hover {
-
box-shadow: 0 10px 5px #a3c6c5;
-
}
-
/* 设置box类中inputBox类中的label标签 */
-
.box .inputBox label {
-
/* 绝对定位
-
注意到上面已经把inputBox设置成了position: relative
-
所以这里的label是相对于inputBox的绝对定位 而不是相对于body
-
*/
-
font-size: 30px;
-
position: absolute;
-
top: 0;
-
left: 0;
-
padding: 10px 0;
-
color: #fff;
-
pointer-events: none;
-
-
/* 设置label标签的过渡动画时间为0.8秒 */
-
transition: .8s;
-
}
-
-
.box .inputBox input:focus~label {
-
/* Username提示向上移动20px 并且缩小字体 修改颜色 */
-
top: -25px;
-
left: 0;
-
font-size: 22px;
-
/* color:rgb(225, 240, 137); */
-
color: hsl(251, 62%, 34%);
-
}
-
-
/* 监听input内容有效 保持label元素的属性 */
-
.box .inputBox input:valid~label {
-
top: -25px;
-
left: 0;
-
font-size: 22px;
-
/* color:rgb(225, 240, 137); */
-
color: hsl(251, 62%, 34%);
-
}
-
-
/* 选择box类中type为submit的input标签 */
-
.box input[type="submit"] {
-
font-size: 30px;
-
border: none;
-
outline: none;
-
color: #fff;
-
background: #ee6d6d;
-
padding: 10px 20px;
-
cursor: pointer;
-
border-radius: 48px;
-
/* 相对定位 享对于其父亲box类*/
-
position: relative;
-
-
/* 实现按钮水平居中 */
-
/* 从父亲的左边宽度50%处开始 */
-
left: 50%;
-
top: 70%;
-
/* 把元素沿着横向(x轴)移动自身宽度的50% */
-
transform: translate(-50%);
-
transition: all 0.3s;
-
}
-
.box input[type="submit"]:hover {
-
transform: scale(1.1) translate(-45%);
-
box-shadow: 0 0 12px #ee6d6d;
-
}
-
-
.point {
-
position: absolute;
-
top: 10%;
-
left: 90%;
-
-
color: #fff;
-
}
-
-
.dotted {
-
top: 227px;
-
left: 193px;
-
width: 8px;
-
height: 8px;
-
background-color: #5000e4;
-
border-radius: 50%;
-
}
-
-
.point div[class^="pulse"] {
-
border-radius: 50%;
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
transform: translate(-50%, -50%);
-
width: 8px;
-
height: 8px;
-
box-shadow: 0 0 12px #8a02fa;
-
animation: purse 1.2s linear infinite;
-
}
-
-
@keyframes purse {
-
0% {}
-
-
70% {
-
width: 40px;
-
height: 40px;
-
opacity: 1;
-
}
-
-
100% {
-
box-shadow: 0 0 12px hsl(286, 89%, 40%);
-
width: 70px;
-
height: 70px;
-
opacity: 0;
-
}
-
}
-
-
.point div.pulse2 {
-
animation-delay: 0.4s;
-
}
-
-
.point div.pulse3 {
-
animation-delay: 0.8s;
-
}
-
.box a {
-
position: relative;
-
display: block;
-
left: 0;
-
margin-top: 40px;
-
text-align: right;
-
color: #fff;
-
font-size: 18px;
-
transition: all 0.5s;
-
text-decoration: none;
-
}
-
-
.box a:hover {
-
transform: translateX(-2%) scale(1.1);
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<h2>Login
</h2>
-
<form action="${pageContext.request.contextPath}/submit/loginMainPage" method="post">
-
<div class="point">
-
<div class="dotted">
</div>
-
<div class="pulse1">
</div>
-
<div class="pulse2">
</div>
-
<div class="pulse3">
</div>
-
</div>
-
<div class="inputBox">
-
<input type="text" name="ACCOUNT" autocomplete="off" required="required">
-
<label>填写账号
</label>
-
</div>
-
<div class="inputBox">
-
<input type="password" name="PASSWORD" autocomplete="off" required="required">
-
<label>填写密码
</label>
-
</div>
-
<input type="submit" name="" value="登 录">
-
</form>
-
<a href="${pageContext.request.contextPath}/submit/register">没有账号？去登录
</a>
-
</div>
-
</body>
-
</html>
-
2.register.jsp
-
<%--
-
Created
by
IntelliJ
IDEA.
-
User: 四原色
-
Date:
2021/
5/
23
-
Time:
11:04
-
To
change
this
template
use
File |
Settings |
File
Templates.
-
--%>
-
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>注册
</title>
-
<style>
-
*{
-
margin:
0;
-
padding:
0;
-
}
-
body{
-
background-color:
#191919;
-
}
-
.box{
-
position: absolute;
-
width:
25%;
-
height:
60%;
-
top:
50%;
-
left:
50%;
-
transform:
translateY(-
50%)
translateX(-
50%);
-
background-color:
#fff;
-
box-shadow:
0
0
12px
#333;
-
border-radius:
8px;
-
}
-
.cbox{
-
position: absolute;
-
width:
25%;
-
height:
60%;
-
top:
50%;
-
left:
50%;
-
transform:
translateY(-
50%)
translateX(-
50%);
-
-
background-image:
linear-gradient(
315deg,#
03a9f4,#ff0058);
-
filter:
blur(
30px);
-
}
-
.box
h2{
-
margin:
40px;
-
font-size:
36px;
-
}
-
.box
input{
-
position: relative;
-
width:
80%;
-
height:
35px;
-
margin-top:
50px;
-
top:
50%;
-
left:
50%;
-
letter-spacing:
1px;
-
outline: none;
-
border: none;
-
border-bottom:
2px solid
#666;
-
transform:
translateY(-
50%)
translateX(-
50%);
-
font-size:
24px;
-
}
-
.box
input
[type="submit"]{
-
width:
60%;
-
height:
50px;
-
top:
80%;
-
margin-bottom:
15px;
-
border-radius:
8px;
-
transition:
0.3s;
-
color:
#fff;
-
background-color:
#036ba7;
-
border-bottom:
0;
-
}
-
.box
input
[type="submit"]
:hover{
-
box-shadow:
0
0
12px
#910037;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="cbox">
</div>
-
<div class="box">
-
<h2>Register
</h2>
-
<form action="${pageContext.request.contextPath}/submit/registerMainPage" method="post">
-
-
<input type="text" name="ACCOUNT" autocomplete="off" required="required" placeholder="填写账号">
-
-
<input type="password" name="PASSWORD" autocomplete="off" required="required" placeholder="填写密码">
-
-
<input type="password" name="ackPASSWORD" autocomplete="off" required="required" placeholder="确认密码">
-
<input type="submit" name="" value="注 册">
-
</form>
-
-
</div>
-
</body>
-
</html>
3.7 类路径和资源路径的匹配
相关资料查看文章：https://blog.csdn.net/qq_44140450/article/details/116952582
3.8 最终结构
3.9 运行结果
运行结果如下，界面比较简单：
4 最后总结
建一个SSM项目事实上并非难事，最难得问题其实是在建项目过程中去解决遇到的问题，如果比较粗心的话，经常会犯一些500或者404错误，随着项目的逐渐壮大，也许更多的问题将接踵而至，但是这一切你均可不必惊慌，这条代码之路一路有我陪伴！只要思想不滑坡，方法总比困难多！
喜欢这篇文章吗？喜欢的话不要忘记点赞加收藏哦！
有问题？评论区见，我在这里等你，不见不散！
转载：https://blog.csdn.net/qq_44140450/article/details/117134958
查看评论