SSM整合项目

关注

原创最新推荐文章于 2026-04-11 11:59:26 发布 347 阅读 AI 写同款· GEO 优化 ›

eclipse创建springboot项目和springboot整合ssm 我们之前学过javaweb或者spring都知道依赖都是自己在pom.xml写的，springboot直接避免这一情况，选择你要导入的依赖即可，最初我们选择SpringWeb即可（在web里）但是后面我们要整合ssm于是我们还要在sql中选择mybatis framwork 和 mysql driver。注意：type这是你要创建springboot项目的类型，分别为maven，gradle，我们选择maven，同时你要创建Name：springboot_01_base_config。阅读详情

昨天星期六，总结了一些今日所学，那么今天就来说一下学完以后做的一个SSM小项目把做的很简单，别喷我啊0.0，这个项目主要是从前端页面根据表单使用户注册账号并存入数据库中，然后用户进行登录再去从数据库中进行数据比对，如果数据库中存在相同数据则登陆成功，否则登陆失败。

一个项目无非就是MVC吗，而我喜欢先做前端页面，因为前端可以接收用户的需求，再又后端去控制，最后拿到数据以及返回，所以我先从前端说起吧。

一、前端页面的实现

实现语言：HTML、CSS、JS

实现工具：HBuilder X

注册表单：

<!--注册表单-->
        <div class="form_register" style="position:absolute">  
            <form action="http://127.0.0.1:8080/user/add" method="post">
                <h1>注册表单</h1>
                <div class="form_item">
                    <label for="username">用户名：</label>
                    <input type="text" name="username" id="username" placeholder="请输入用户名" required >
                </div>
                <div class="form_item">
                    <label for="password">密码：</label>
                    <input type="password" name="password" id="password" placeholder="请输入密码名" required>
                </div>
                <div class="form_item">
                    <label for="email">电子邮箱：</label>
                    <input type="email" name="email" id="email" placeholder="请输入电子邮件" required>
                </div>
                <div class="form_item">
                    <label for="tel">电话：</label>
                    <input type="tel" name="tel" id="tel" placeholder="请输入手机号码" required>
                </div>
                <div class="form_item">
                    <input type="submit" value="注册">
                </div>
            </form>
            <div class="info">已有账号？点击<span class="switch login_Btn">登录</span></div>
        </div>

登录表单：

<div class="form_login" style="height:0;">
			
			<form action="http://127.0.0.1:8080/user/go" method="post">
				<h1>登录表单</h1>
				<div class="form_item">
					<label for="username">用户名：</label>
					<input type="text" name="username" id="username" placeholder="请输入用户名" required>
				</div>
				<div class="form_item">
					<label for="password">密码：</label>
					<input type="password" name="password" id="password" placeholder="请输入密码名" required>
				</div>
				<div class="form_item">
					<input type="submit" value="登录">
				</div>
			</form>
			<div class="info">没有账号？点击<span class="switch register_Btn">注册账号</span></div>
			
         </div>

CSS修饰：

html{
    height: 100%;
}
body{
    background: url('../images/mn.jpg') no-repeat center/cover;
}
.form{
    width: 500px;
    height: 600px;
    margin: 30px auto;
}
.form_register,.form_login{
    width: 500px;
    background-color:rgba(0, 188, 212, 0.7);
    border-radius: 5px;
    box-shadow: 0 0 3px #ccc;  
    overflow: hidden;
    transition: height 1s;
}
.form_register{
    height: 548px;
}

.form form{
   padding: 25px 40px;
}
.form .form_item{
    display: flex;
    margin: 25px 0;
    vertical-align: middle;
}
.form input{
    outline: none;
    text-indent: 10px;
    flex: 1;
    width: auto;
    border: none;
    border-radius: 3px;
    height: 36px;
}
.form form label{
    width: 90px;
    float: left;
    line-height: 36px;
}
h1{
    text-align: center;
    padding: 0;;
    margin: 30px 0 30px 0;
}
.form form input[type='submit']{
    background-color: rgba(244, 22, 7, 0.7);
    color: aliceblue;
    height: 45px;
    font-size: 20px;
    cursor:pointer;
    margin-top: 20px;
}
.form .info{
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
}
.form .info span{
    color: crimson;
    margin-left: 3px;
}
.form .info span:hover{
    cursor: pointer;
    border-bottom: 1px solid crimson;
}

JS动态实现：

window.onload=function(){
    var form_login = document.querySelector('.form_login')
    var form_register = document.querySelector('.form_register')
    var switchBtns = document.querySelectorAll('.switch')

    switchBtns.forEach(function(item){
        item.addEventListener('click',function(){
            if(this.innerText=='注册账号'){
                addStyle(form_login,{ height: '0',transitionDelay:'0s'})
                addStyle(form_register,{height: '548px',transitionDelay: '1.2s'})
            }else if(this.innerText=='登录'){
                addStyle(form_login,{ height: '422px', transitionDelay: '1.2s'})
                addStyle(form_register,{height: '0',transitionDelay:'0s'})
            }
        })
    })

    function addStyle(ele,orignStyle){
        for(var item in orignStyle){
            if(ele){
                ele.style[item] = orignStyle[item] 
            }
        }
    }
   
}

页面效果展示：

二、数据库的实现

实现语言：sql语言

实现工具：navicat

表设计：

这里本来类型用int，但是int最高只能写11位，所以又换成了varchar类型

三、后端代码实现

实现语言：JAVA

实现工具：IDEA

所用框架：Spring 、SpringMVC 、Mybatis、SpringBoot

核心配置文件：


spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql:///logon?useUnicode=true&characterEncoding=utf8&useSSL=false
    username: root
    password: root
#SpringBoot整合Mybatis配置
mybatis:
  #指定UserMapper.xml文件的位置
  mapper-locations: classpath:*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

映射文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="cn.tedu.dao.LogonMapper">
    <insert id="in">
        insert into user values(#{username},#{password},#{tel},#{email})
    </insert>

    <select id="select" resultType="cn.tedu.pojo.Logon">
        select username,password from user where username=#{username} and password=#{password}
    </select>

</mapper>

业务层：

package cn.tedu.service;

import cn.tedu.dao.LogonMapper;
import cn.tedu.pojo.Logon;
import cn.tedu.pojo.up;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class LogonServiceimpl implements LogonService{
    @Autowired
    private LogonMapper logonMapper;
    @Override
    public void in(Logon logon) {
        logonMapper.in(logon);
    }
    @Override
    public boolean select(up u) {
        Logon select = logonMapper.select(u);
        if (select.getUsername().equals(u.getUsername())){
            if(select.getPassword().equals(u.getPassword())){
                return true;
            }
        }
        return false;

    }
}

数据层：

@Data
@NoArgsConstructor
@AllArgsConstructor
@Accessors(chain = true)
@Component
public class Logon {
    private String username;
    private String password;
    private String tel;
    private String email;
}

@Data
@NoArgsConstructor
@AllArgsConstructor
@Accessors(chain = true)
@Component
public class up {
    private String username;
    private String password;
}

持久层：

@Service
public interface LogonMapper {
    void in(Logon logon);
    Logon select(up u);
}

控制层：

package cn.tedu.Controller;
import cn.tedu.pojo.Logon;
import cn.tedu.pojo.up;
import cn.tedu.service.LogonServiceimpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
@CrossOrigin
@Controller
@RequestMapping("user")
public class UserController {
    @Autowired
    private LogonServiceimpl logonService;
    @RequestMapping("add")
    public Object add(Logon l){
        logonService.in(l);
        return "Logon";
    }
    @RequestMapping("go")
    public Object go(up u){
        boolean s = logonService.select(u);
        if (s==false){
            return "false";
        }
        return "go";
    }
}

返回页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码错误，请重新输入</title>
</head>
<body>
<script>
    alert("密码有误，请重新输入")
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
<script>
    alert("登陆成功");//打网页就弹出
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册成功</title>
</head>
<body>
<script>
    alert("注册成功")
</script>
</body>
</html>

启动类：

package cn.tedu;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("cn.tedu.dao")
public class RunApp {
    public static void main(String[] args) {
        SpringApplication.run(RunApp.class );
    }
}