首页 > 电脑常识 > 云计算

呼之欲出!期末课设IDEA整合SSM实现登录注册—轻松实现期末弯道超车,学霸直呼内行!

admin 云计算 2021-05-25 09:28:29 ssm spring springmvc mybatis web 
后台-系统设置-扩展变量-手机广告位-内容正文底部

呼之欲出!期末课设整合SSM实现的登录注册—轻松实现期末弯道超车,学霸直呼内行!


目录

呼之欲出!期末课设整合SSM实现简单的登录注册

1 导读

2 结果欣赏

3 创建项目的具体过程

3.1 新建项目

3.2 导入jia包

3.3 自定义Classes目录

3.4 设置src资源目录结构

3.5 编写源代码以及配置文件

 3.6 配置web目录下相关资源与文件

3.7 类路径和资源路径的匹配

3.8 最终结构

3.9 运行结果

 4 最后终结


1 导读

如何整合SSM项目?如何在JavaEE课程中脱颖而出?如何掌握一些入门知识?

没错!不用思考了,跟我来,你想要找的这里应有尽有!

想在学期末取得圆满的成绩吗?

快来试试这个登录小案例,这里没有过于抽象的概念,也没有烧脑的语法结构,全是简单脱俗的操作步骤,楼下一年级学弟直呼有用,分分钟送上热门!

相信我,看完这篇文章你一定不会后悔,手把手教你搭建SSM项目,成功避坑!

赶快加入学习计划吧......

2 结果欣赏

 

3 创建项目的具体过程

3.1 新建项目

新建项目前需要配置相关的开发环境:


  1. 安装并配置了Tomcat,此处版本为tomcat9.0.35;
  2. 安装并配置了jdk,此处版本为jdk1.8.0_271(这里的版本号指的是jdk1.8版本的地271次更新版);
  3. 集成开发环境为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目录


关于这一步,其实我们需要思考两个问题:

  1. 既然idea默认了自定义classes目录为什么还需要自定义classes目录,会不会多此一举呢?
  2. 如何自定义classes目录,过程是怎么样的?

其实答案很简单:

  1. 自定义的classes目录后,我们可以将类路径和资源路径进行关联,减少不必要的问题的出现,有时候不正确的访问路径会造成404错误,处理起来也是比较头疼的,很多程序员就是因为这个404而放弃这一行选择去做销售的。
  2. 自定义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

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/yunjisuan/30868.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码