使用maven+ssm实现一个简单的登录功能

如题,博主最近看视频学习完ssm框架之后,想自己动手做一做,熟悉一下ssm框架的使用。下面是使用的一些技术:
数据库:mysql5.5
开发工具:IDEA+MAVEN
技术要点:ssm框架,html+css,BootStrap
博主用BootStrap写了个登录界面,上图
使用maven+ssm实现一个简单的登录功能_第1张图片

这里有个BUG,我在body里加入了背景图片结果不显示,等我解决了下一篇在讲吧
下面先上项目目录结构:
使用maven+ssm实现一个简单的登录功能_第2张图片
pom.xml文件,maven引用的资源jar包


    UTF-8
    UTF-8
    4.3.4.RELEASE
    3.4.0
  
  
    
    
      junit
      junit
      3.8.1
      test
    
    
    
    
      org.springframework
      spring-core
      ${spring.version}
    
    
      org.springframework
      spring-beans
      ${spring.version}
    
    
      org.springframework
      spring-context
      ${spring.version}
    
    
      org.springframework
      spring-context-support
      ${spring.version}
    
    
    
      org.springframework
      spring-jdbc
      ${spring.version}
    
    
      org.springframework
      spring-tx
      ${spring.version}
    
    
    
      org.springframework
      spring-web
      ${spring.version}
    
    
      org.springframework
      spring-webmvc
      ${spring.version}
    
    
      org.springframework
      spring-test
      ${spring.version}
    
    
    
      javax.servlet
      javax.servlet-api
      3.0.1
      provided
    
    
      javax.servlet.jsp
      jsp-api
      2.2
      provided
    
    
      javax.servlet
      jstl
      1.2
    
    
      taglibs
      standard
      1.1.2
    
    
      com.fasterxml.jackson.core
      jackson-databind
      2.9.4
    
    
    
    
      mysql
      mysql-connector-java
      5.1.38
    
    
    
      com.alibaba
      druid
      1.0.26
    

    
      org.aspectj
      aspectjweaver
      1.8.8
    
    
    
      org.mybatis
      mybatis
      ${mybatis.version}
    
    
    
      org.mybatis
      mybatis-spring
      1.3.1
    
    
    
    
      ch.qos.logback
      logback-classic
      1.1.1
    
  

spring-dao.xml




    
    

    
    
        
        
        
        
    

    
    
        
        
        
        
        
        
        
        
    

    
    
        
        
        
        
    


spring-service.xml 这里用的是声明式事务,不过项目中还没有用到




    
    

    
    
        
        
    
    

spring-mvc.xml



    
    

    
    

    

    

    
    
        
        
        
    


jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ideassm?characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456

log4j.properties

# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

mybatis-config.xml mybatis-spring整合以后这里基本没什么代码了





    
    
        
    



web.xml配置



  TestSSM
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
  
    contextConfigLocation
    classpath:spring/spring-*.xml
  

  
  
    org.springframework.web.context.ContextLoaderListener
  


  
  
    encoding
    org.springframework.web.filter.CharacterEncodingFilter
    
      encoding
      UTF-8
    
  
  
    encoding
    /*
  
  
  
    springmvc
    org.springframework.web.servlet.DispatcherServlet
    
      contextConfigLocation
      classpath:spring/springmvc.xml
    
    
    
    
    1
  
  
    springmvc
    
    /
  


好了,到这里基本ssm框架需要的东西搭建完毕
开始正式代码部分
首先是pojo类

package com.itheima.pojo;

public class User {
    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

dao接口

package com.itheima.dao;

import com.itheima.pojo.User;

import java.util.List;

public interface UserDao {
    User queryUser(User user);
}

service

package com.itheima.service;

import com.itheima.pojo.User;

public interface UserInfoService {
    User queryUser(User user);
}

serviceImpl

package com.itheima.service.Impl;

import com.itheima.dao.UserDao;
import com.itheima.pojo.User;
import com.itheima.service.UserInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service("userservice")
public class UserInfoServiceImpl implements UserInfoService {
    @Autowired
    private UserDao userDao;

    @Override
    public User queryUser(User user) {
        return userDao.queryUser(user);
    }
}

mapper文件




    


Controller

package com.itheima.controller;

import com.itheima.pojo.User;
import com.itheima.service.UserInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Service;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;

@Controller
public class UserInfoController {
    @Autowired
    private UserInfoService userInfoService;
    @RequestMapping(value = "/login.action")
    public String login(User user){
        User userInfo = userInfoService.queryUser(user);
        if(user != null){
            return "success";
        }
        else {
            return "error";
        }
    }

    @RequestMapping(value = "/toLogin.action")
    public String toLogin(){
        return "login";
    }

}

至此,整个ssm框架基本完成,业务基本实现,下面是登录页面以及需要的css,文件
css文件

.container{
    display:table;
    height:100%;
}

.row{
    display: table-cell;
    vertical-align: middle;
}

.form-bg{
    background: #00b4ef;
}
.form-horizontal{
    background: #fff;
    padding-bottom: 40px;
    border-radius: 15px;
    text-align: center;
}
.form-horizontal .heading{
    display: block;
    font-size: 35px;
    font-weight: 700;
    padding: 35px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 30px;
}
.form-horizontal .form-group{
    padding: 0 40px;
    margin: 0 0 25px 0;
    position: relative;
}
.form-horizontal .form-control{
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    box-shadow: none;
    padding: 0 20px 0 45px;
    height: 40px;
    transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus{
    background: #e0e0e0;
    box-shadow: none;
    outline: 0 none;
}
.form-horizontal .form-group i{
    position: absolute;
    top: 12px;
    left: 60px;
    font-size: 17px;
    color: #c8c8c8;
    transition : all 0.5s ease 0s;
}
.form-horizontal .form-control:focus + i{
    color: #00b4ef;
}
.form-horizontal .fa-question-circle{
    display: inline-block;
    position: absolute;
    top: 12px;
    right: 60px;
    font-size: 20px;
    color: #808080;
    transition: all 0.5s ease 0s;
}
.form-horizontal .fa-question-circle:hover{
    color: #000;
}
.form-horizontal .main-checkbox{
    float: left;
    width: 20px;
    height: 20px;
    background: #11a3fc;
    border-radius: 50%;
    position: relative;
    margin: 5px 0 0 5px;
    border: 1px solid #11a3fc;
}
.form-horizontal .main-checkbox label{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.form-horizontal .main-checkbox label:after{
    content: "";
    width: 10px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    border: 3px solid #fff;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.form-horizontal .main-checkbox input[type=checkbox]{
    visibility: hidden;
}
.form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
    opacity: 1;
}
.form-horizontal .text{
    float: left;
    margin-left: 7px;
    line-height: 20px;
    padding-top: 5px;
    text-transform: capitalize;
}
.form-horizontal .btn{
    float: right;
    font-size: 14px;
    color: #fff;
    background: #00b4ef;
    border-radius: 30px;
    padding: 10px 25px;
    border: none;
    text-transform: capitalize;
    transition: all 0.5s ease 0s;
}
@media only screen and (max-width: 479px){
    .form-horizontal .form-group{
        padding: 0 25px;
    }
    .form-horizontal .form-group i{
        left: 45px;
    }
    .form-horizontal .btn{
        padding: 10px 20px;
    }
}

登录页面

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>



    
    
    
    
    
    
    
    
    
    Title
    


    
用户登录
Remember me

好了,现在整个项目搭建完成,可以运行了
使用maven+ssm实现一个简单的登录功能_第3张图片
好了,这里说一下感想:
首先,这个项目非常非常简陋,博主只是实现了一个登录功能
其次,博主只是想通过自己的双手去敲代码,来真真正正自己写一个项目
,以后还会有其他功能待完善
总结问题:
1.在service配置文件配置扫描包是博主配的扫描全包,即包含了pojo,dao,service
,Controller所有包,这样感觉不是很好,最好service层只配置扫描service包


    

2.在Controller中方法入参可以采取User对象方式,因为springmvc会自动帮你把前端的登录页面的form表单的参数封装成user对象传给Controller,一开始我使用的是String入参,这种方式当form表单参数过多时显得很臃肿,最好是使用对象方式,当然单个参数的有单个参数的好处,在只有几个入参的情况下还是使用基本类型入参吧。
Ojbk,博主敲代码(ˉ▽ ̄~) ~~~~~去了

你可能感兴趣的:(框架,java,新手)