SSM框架整合---实现简单登录注册功能

   SSM整合小demo, 使用idea创建maven项目,在html页面实现简单的注册登录.(以后开发减少使用jsp)

  下面从创建项目后,每一步及所遇到的问题进行阐述.

一. 添加依赖

     设置为war包, 让idea生成webapp文件夹以及web.xml文件

     <packing>war<packing>

<properties>
    <spring.version>4.2.4.RELEASE</spring.version>
    <mybatis.version>3.2.8</mybatis.version>
    <mybatis.spring.version>1.2.2</mybatis.spring.version>
    <mysql.version>5.1.32</mysql.version>
    <druid.version>1.0.9</druid.version>
</properties>
<dependencies>
    <!-- 版本根据自己的maven仓库进行选择 -->
    <!-- Spring -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-beans</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-aspects</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context-support</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-test</artifactId>
        <version>${spring.version}</version>
    </dependency>
    <!--mybatis-->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>${mybatis.version}</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>${mybatis.spring.version}</version>
    </dependency>

    <!-- MySql -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>${mysql.version}</version>
    </dependency>
    <!-- 使用阿里的druid连接池 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>${druid.version}</version>
    </dependency>
    <!--json @responseBody/@requestBody-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.28</version>
    </dependency>

</dependencies>
<build>

    <plugins>
        <!-- java编译插件 -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.2</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
                <encoding>UTF-8</encoding>
            </configuration>
        </plugin>
        <!--tomcat-->
        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>2.2</version>
            <configuration>
                <!-- 指定端口 -->
                <port>9098</port>
                <!-- 请求路径 -->
                <path>/</path>
            </configuration>
        </plugin>
    </plugins>
</build>

一. 创建数据表

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(32) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

        id简单设置为自增

二. 配置文件

1. web.xml

<!--
    必须配置:
        1. spring初始化容器
        2. applicationContext-*.xml 扫描
        3. springMVC的DispatcherServlet以及springmvc.xml扫描
-->

<!-- 解决post乱码 -->
<filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>utf-8</param-value>
    </init-param>
    <init-param>
        <param-name>forceEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

<!--初始页面-->
<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>
<!-- 上下文的位置 -->
<context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring/applicationContext-*.xml</param-value>
</context-param>
<!-- Spring的监听器 -->
<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>


<!-- 前端控制器 -->
<servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <!-- 此处不配置 默认找 /WEB-INF/[servlet-name]-servlet.xml -->
        <param-value>classpath:spring/springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <!-- 1:*.do *.action 拦截以.do结尾的请求 (不拦截 jsp .js.css .png)
        2:/ 拦截所有请求（不拦截.jsp) 建议使用此种 方式 （拦截 .js.css .png) (放行静态资源）
        3:/* 拦截所有请求（包括.jsp) 此种方式 不建议使用 -->
    <url-pattern>*.do</url-pattern>
</servlet-mapping>

2. springmvc.xml

<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-4.0.xsd  http://www.springframework.org/schema/mvc
      http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd  http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    <!-- 配置扫描器 -->
    <context:component-scan base-package="controller所在包名"/>
    <!-- 配置处理器映射器  适配器 @requestBody/@responseBody json与对象之间的转换 -->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes" value="application/json"/>
                <property name="features">
                    <array>
                        <value>WriteMapNullValue</value>
                        <value>WriteDateUseDateFormat</value>
                    </array>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <!-- 配置视图解释器 jsp -->
    <bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--<property name="prefix" value="/WEB-INF/jsp/"/> 这里使用html,就不使用jsp了-->
        <property name="suffix" value=".html"/><!-- 这里把配置文件放在webapp目录下,不再配置前缀 -->
    </bean>
</beans>

3. application-*.xml

       (1) application-service.xml

<context:component-scan base-package="service所在包名" />
<!--若有需要 配置事务-->

       (2) application-dao.xml

<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-4.0.xsd
      http://www.springframework.org/schema/context  http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    <!-- 配置 读取properties文件 jdbc.properties        数据库连接源信息 -->
    <context:property-placeholder location="classpath:properties/db.properties" />
    <!-- 配置 数据源 -->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driver}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
    </bean>
    <!-- 配置 Mybatis的工厂 -->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!-- sqlMapConfig.xml文件位置 -->
        <property name="configLocation" value="classpath:mybatis/SqlMapConfig.xml" />
        <!-- pojo别名 -->
        <property name="typeAliasesPackage" value="实体类所在包名"></property>
    </bean>
    <!-- 配置dao层mapper接口扫描 -->    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.alibaba.mapper" />
    </bean>
</beans>

            (2.1) sqlMapConfig.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>

</configuration>

            (2.2) jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:端口号/数据库名?characterEncoding=utf-8
jdbc.username=用户名
jdbc.password=密码

最后配置文件放好位置, 都能被扫描到就行

三. html页面

    1.  index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <center>
        <h1>hello World</h1>
            <a href="login.html">登录</a>!<br>
            <a href="regist.html">注册</a>!
    </center>
</body>
</html>

    2.  regist.html

<!DOCTYPE html>
<html>
<head>
    <script src="/jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function(){
                $.post("/user/regist.do",$("#registForm").serialize(),function(data){
                    if(data == "OK"){
                        window.location.href = "index.html";
                    }else{
                        alert("注册失败");
                    }
                })
            })
        });

    </script>
</head>
<body>
<center>
    <form id="registForm" method="post">
        用户名:<input name="username" type="text"><br>
        密码:<input name="password" type="text"><br>
        <input id="btn" type="button" value="注册">
    </form>
</center>
</body>

</html>

    3. login.html

<!DOCTYPE html>
<html>
<head>
    <script src="/jquery-2.2.3.min.js"></script>
<body>
    <center>
        <form name="loginForm" action="/user/login.do" method="post">
            用户名:<input name="username" type="text"><br>
            密码:<input name="password" type="text"><br>
            <input type="submit" value="登录">
        </form>
    </center>
</body>
</html>

四. 后台分层

    其中pojo字段对应数据表

    1.controller 

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    @ResponseBody
    @RequestMapping("/regist")
    public String regist(User user){
        userService.regist(user);
        return "OK";
    }
    @RequestMapping("/login")
    public String login(User user){
        User userExist = userService.login(user);
        if(userExist == null){
            System.out.println("用户不存在!");
            return "/regist";

        }else{
            return "/index";
        }
    }
}

    2. service

public interface UserService {
    void regist(User user);

    User login(User user);
}

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public void regist(User user) {
        userMapper.regist(user);
    }

    @Override
    public User login(User user) {
        return userMapper.login(user);
    }
}

    3. dao (mapper)

public interface UserMapper {

    void regist(User user);

    User login(User user);
}

        mapper.xml

<?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="com.alibaba.mapper.UserMapper">
    <insert id="regist" parameterType="User">
        insert into user
        values(#{id},#{username},#{password})
    </insert>

    <select id="login" parameterType="user" resultType="user">
        SELECT
            id,username,password
        FROM
        USER
        <where>
            <if test="username !=null and username != ''">
                and username = #{username}
            </if>
            <if test="password !=null and password != ''">
                AND password = #{password}
            </if>
        </where>
    </select>
</mapper>

问题:

1. 关于dao层接口和mapper.xml文件位置问题

        一般为了整体条理性, 将他们分别放在不同的包下, 但要保证在编译后, 它们在同一文件夹下, 所以, 可以在resource下新建一个和dao层相同名称的文件夹, 将xml文件放在这里. 

        其中, 包名和文件名必须一致

            idea可能存在bug, 一次性创建包会出现编译后, 找不到编译后的xml文件, 造成找不到方法语句的错误

BindingException: Invalid bound statement (not found)

查看编译文件, 发现两个文件在不同的包下, 

这是为什么呢?

我们找到这个demo的磁盘路径, 发现xml的包名变成了一个"字符串", idea并没有分包,呈现一层一层的结构

因此, 建包要一层一层建立, 就不能图方便一次性创建完了.  建立后, 再重新编译. 两个文件就在同一包下了, 解决问题!

    2. controller接收/返回数据格式的问题

        (1). 要注意前端传入的数据的格式 可以debug或者console.log()或alert()查看一下. 或在controller接收时输出一下

        (2). @RequestBody:  接收http请求的json数据，将json数据转换为java对象             

              @ResponseBody:  将controller方法返回java对象转换为json, 响应给客户端

              @RestController = @Controller + @ResponseBody.

              了解后, 再根据自己需要, 选择数据格式所需的注解.