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