呼之欲出！期末课设整合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错误，随着项目的逐渐壮大，也许更多的问题将接踵而至，但是这一切你均可不必惊慌，这条代码之路一路有我陪伴！只要思想不滑坡，方法总比困难多！
喜欢这篇文章吗？喜欢的话不要忘记点赞加收藏哦！
有问题？评论区见，我在这里等你，不见不散！
8429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
