SSM整合项目

最新推荐文章于 2023-04-05 20:39:34 发布
最新推荐文章于 2023-04-05 20:39:34 发布
阅读量265 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yjh_pythonking/article/details/119849184
版权
本文介绍了一个使用SSM（Spring、SpringMVC、Mybatis）框架实现的简单用户注册与登录系统。前端通过HTML、CSS、JS构建表单，用户填写信息后数据提交至后端。后端利用JAVA处理数据，存储到MySQL数据库，并实现登录验证。项目展示了MVC模式的应用，以及前后端交互与数据库操作流程。
摘要由CSDN通过智能技术生成

        昨天星期六，总结了一些今日所学，那么今天就来说一下学完以后做的一个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 );
    }
}

四、结果展示

注册：

 数据库记录：

页面登录： 

 登录结果：

        到这里就结束了，这算是自己亲手做的第一个SSM项目吧，非常的简陋哈哈哈哈，作为一名主攻开发的，前端代码还是非常的薄弱，以后还会多做一点项目拓实自己的基础。下一篇说一下一些工具和自己感受到学习到的一些SpringBoot的运行逻辑吧！

        满怀希望就会所向披靡！

         

希望不要秃头的0.0
关注
SSM的整合项目（详细）
weixin_54721820的博客
12-30 1万+
项目场景： 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析： 提示：这里填写问题的分析： 例如：Handler 发送消息有.
SSM项目整合（详细）
qq_46092354的博客
12-03 1767
创建SSM项目整合(详细) <第一步> 创建一个maven项目，如图： <第二步>在pom.xml中导入依赖包 <dependencies> <!-- 单元测试--> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId>
ssm整合项目
07-18
SSM整合项目是一个基于Java技术栈的Web应用开发框架，主要由Spring、Spring MVC和MyBatis三个组件组成。这个项目展示了如何将这三个强大的开源框架集成在一起，以实现高效、灵活且可维护的Web应用程序。 Spring是...
ssm 整合项目
02-10
SSM整合项目是Java开发中常见的一种架构组合，它由Spring、SpringMVC和MyBatis三大组件构成，用于构建高效、灵活的企业级Web应用程序。本文将深入探讨这三大框架的整合过程及其核心概念。 首先，Spring框架是整个...
SSM整合项目程序源码
03-07
SSM整合项目程序源码是Java开发中的一个重要实践，它涉及到Spring、Spring MVC和MyBatis这三大流行框架的集成应用。SSM框架整合旨在提供一个高效、灵活且可扩展的后端架构解决方案，用于构建复杂的Web应用程序。下面...
SSM集成整合项目
01-10
这个项目是用Spring+spring Mvc+mybatis集成整合的一个小项目，用于框架入门是很好的
SSM框架整合项目
03-21
ssm框架整合项目 ssm框架整合项目 ssm框架整合项目 ssm框架整合项目 ssm框架整合项目 ssm框架整合项目 ssm框架整合项目 ssm框架整合项目
Ssm项目整合
码农阿益的博客
04-09 675
ssm整合 首先我们准备做一个关于书籍增删改查的项目 我们先明确我们需要的字段名bookID（书籍编号）和bookName（书籍名称）以及bookCounts（书籍数量）、detail（书籍描述） 1.创建数据库 明确好需要的字段名后，我们新建数据库，并插入几条数据 CREATE DATABASE `ssmbuild`; USE `ssmbuild`; DROP TABLE IF EXISTS `books`; CREATE TABLE `books` ( `bookID` INT(10) NOT NULL
ssm项目整合
最新发布
m0_61943950的博客
04-05 179
ssm整合步骤
SSM项目整合
Babington的博客
06-02 475
1、基本概念 1.1、Spring 　　Spring 是一个开源框架， Spring 是于 2003  年兴起的一个轻量级的 Java  开发框架，由 Rod Johnson  在其著作 Expert One-On-One J2EE Development and Design 中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。 Spring 使用基本的 JavaB
ssm的项目整合
保持热爱，持续学习
10-17 221
整合思路：spring 整合mybatis ，spring mvc 整合 spring 在spring的配置文件中，将mybatis进行整合，在spring mvc中 的web.xml中将spring的配置文件加载。 项目的目录结构 applicationContext.xml 是spring的核心配置文件 mybatisConfig.xml 是mybatis的核心配置文件 springMvc.xml 是springMvc的核心配置文件 mapper文件夹下存放 dao层中对应的xml文件 jdbc.pr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值