如何使用IDEA整合SSM框架并实现在网页上显示数据

2021-08-19 14:53:23 浏览数 (2937)

SSM框架是现在非常热门的一门框架技术，那么如何在IDEA软件将SSM框架整合？并在网页上显示数据呢？下面，分享的这篇文章详解讲述了IDEA整合SSM框架并在网页上显示数据的过程，希望对大家有所帮助！

第一步、

创建一个maven工程。配置Tomcat，并测试是否正常访问HelloWorld.
这一步就省略了。
不懂得看这个博客：

idea创建maven项目

创建出来是这样的：

在这里插入图片描述

我们从这里开始整合ssm。

第二步、

在pom.xml导入依赖，以下依赖是ssm常用的一些依赖，都导进去，没有坏处。

 <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
    <jackson.version>2.9.0</jackson.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.1.3.RELEASE</version>
    </dependency>
    <!-- aop联盟，提供了aop规范，Spring AOP就是实现了这个规范 -->
    <dependency>
      <groupId>aopalliance</groupId>
      <artifactId>aopalliance</artifactId>
      <version>1.0</version>
    </dependency>
    <!-- aspectj，实现了aop规范，比spring AOP实现的使用起来简单，所以引入它 -->
    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.9.2</version>
    </dependency>

    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-dbcp2</artifactId>
      <version>2.7.0</version>
    </dependency>
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-pool2</artifactId>
      <version>2.8.0</version>
    </dependency>
    <!-- 集成aspectjweaver -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>5.1.3.RELEASE</version>
    </dependency>
    <!--spring集成测试  -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>5.1.3.RELEASE</version>
    </dependency>

    <!-- mybatis -->
    <!-- mysql数据库驱动，以及使用的数据源 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.46</version>
    </dependency>
    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.5.2</version>
    </dependency>
    <!-- mybatis依赖，spring对jdbc的支持，spring集成mybatis以及对事务的支持 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.5</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.1.3.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>5.1.3.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.10</version>
    </dependency>

    <!-- JSONObject的依赖 -->
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
      <classifier>jdk15</classifier>
    </dependency>
    <dependency>
      <groupId>commons-beanutils</groupId>
      <artifactId>commons-beanutils</artifactId>
      <version>1.7.0</version>
    </dependency>
    <dependency>
      <groupId>commons-collections</groupId>
      <artifactId>commons-collections</artifactId>
      <version>3.1</version>
    </dependency>
    <dependency>
      <groupId>commons-lang</groupId>
      <artifactId>commons-lang</artifactId>
      <version>2.5</version>
    </dependency>
    <dependency>
      <groupId>net.sf.ezmorph</groupId>
      <artifactId>ezmorph</artifactId>
      <version>1.0.3</version>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.2</version>
    </dependency>


    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.2.6</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp.jstl</groupId>
      <artifactId>jstl-api</artifactId>
      <version>1.2-rev-1</version>
    </dependency>
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>
    <dependency>
      <groupId>org.apache.taglibs</groupId>
      <artifactId>taglibs-standard-spec</artifactId>
      <version>1.2.5</version>
    </dependency>
    <dependency>
      <groupId>org.apache.taglibs</groupId>
      <artifactId>taglibs-standard-impl</artifactId>
      <version>1.2.5</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>${jackson.version}</version>
    </dependency>

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>easyexcel</artifactId>
      <version>2.1.1</version>
    </dependency>
    <dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi</artifactId>
      <version>3.17</version>
    </dependency>

    <dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi-ooxml</artifactId>
      <version>3.17</version>
    </dependency>

  </dependencies>

  <build>
    <resources>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.xml</include>
        </includes>
      </resource>
    </resources>
  </build>

第三步、

创建数据表。
创建一个名称为category_的数据表，只有两个字段，一个id, 一个name，id自增。随便插入点数据。

DROP TABLE IF EXISTS `category_`;
CREATE TABLE `category_` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records 
-- ----------------------------
INSERT INTO `category_` VALUES ('1', 'sadf');
INSERT INTO `category_` VALUES ('2', 'safa');
INSERT INTO `category_` VALUES ('3', 'adfasdfas');
INSERT INTO `category_` VALUES ('4', '张阿道夫');
INSERT INTO `category_` VALUES ('5', '违法收费');
INSERT INTO `category_` VALUES ('6', '发生的v');
INSERT INTO `category_` VALUES ('7', 'sdfsd');
INSERT INTO `category_` VALUES ('8', '34535');

在这里插入图片描述

第四步、

编写实体类；DAO层；Service层；Controller层。

像我这样，在java文件夹目录下，创建这几个包。

在这里插入图片描述

然后在包下创建对应的java文件或配置文件，最终的项目结构是这样的：
（那些打马赛克的东西你们用不到，小孩子别看那些。）

在这里插入图片描述

接下来开始写实体类：

实体类名称最好见名知意，跟数据表名称要对上。因为使用了lombok插件，所以使用@Data注解，减少代码量。

Category.java

package com.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Category {
    private int id;
    private String name;
}

然后是DAO层，这里写的多是接口，只写方法，不实现。

CategoryDao.java

package com.dao;
import com.entity.Category;
import java.util.List;

public interface CategoryDao {
    public int add(Category category);
    public void delete(int id);
    public Category get(int id);
    public int update(Category category);
    public List<Category> list();
}

然后在DAO层下创建对应的Mapper.xml文件。
注意namespace要对上，还有id对应上方法名。

CategoryMapper.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.dao.CategoryDao">
    <insert id="add" parameterType="Category" >
        insert into category_ ( name ) values (#{name})
    </insert>

    <delete id="delete" parameterType="Category" >
        delete from category_ where id= #{id}
    </delete>

    <select id="get" parameterType="_int" resultType="Category">
        select * from   category_  where id= #{id}
    </select>

    <update id="update" parameterType="Category" >
        update category_ set name=#{name} where id=#{id}
    </update>
    <select id="list" resultType="Category">
        select * from   category_
    </select>
</mapper>

然后是Service层，这里才是你要实现业务的地方。这里也是接口，在impl实现类里才是写真正实现的。
这里只实现一个：查询所有数据。

CategoryService.java

package com.service;

import com.entity.Category;

import java.util.List;

public interface CategoryService {
    List<Category> list();
}

然后写实现类。

CategoryServiceImpl.java

package com.service.impl;

import com.dao.CategoryDao;
import com.entity.Category;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.service.CategoryService;
import java.util.List;
@Service
public class CategoryServiceImpl implements CategoryService {
    @Autowired
    CategoryDao categoryDao;
    @Override
    public List<Category> list() {
        return categoryDao.list();
    }
}

然后写Controller层。

IndexController.java

package com.controller;
import com.entity.Category;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import com.service.CategoryService;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/")
public class IndexController {
    @Autowired
    CategoryService categoryService;

    @RequestMapping("listCategory")
    public ModelAndView listCategory(){
        ModelAndView mav = new ModelAndView();
        List<Category> cs= categoryService.list();
        // 放入转发参数
        mav.addObject("cs", cs);
        // 放入jsp路径
        mav.setViewName("listCategory");
        return mav;
    }
}

OK,写到这里，你已经成功一半啦！给自己鼓鼓掌！
接下来，我们一鼓作气，写好配置文件并访问数据吧！

第五步、

编写配置文件。

在resources目录下，创建两个配置文件。

注意把数据库，密码，改成自己的，

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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="
     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
     http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
     http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
     http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
     http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:annotation-config />
    <context:component-scan base-package="com.service" />

    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName">
            <value>com.mysql.jdbc.Driver</value>
        </property>
        <property name="url">
            <value>jdbc:mysql://localhost:3306/ssm?characterEncoding=UTF-8</value>

        </property>
        <property name="username">
            <value>root</value>
        </property>
        <property name="password">
            <value>root</value>
        </property>
    </bean>

    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="typeAliasesPackage" value="com.entity" />
        <property name="dataSource" ref="dataSource"/>
        <property name="mapperLocations" value="classpath:com/dao/*.xml"/>
    </bean>

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.dao"/>
    </bean>

</beans>

springMVC.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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

    <context:annotation-config/>

    <context:component-scan base-package="com.controller">
        <context:include-filter type="annotation"
                                expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
        </mvc:message-converters>
    </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>

最后就是web.xml了。

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:web="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

  <!-- spring的配置文件-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <!-- spring mvc核心：分发servlet -->
  <servlet>
    <servlet-name>mvc-dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!-- spring mvc的配置文件 -->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springMVC.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>mvc-dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

</web-app>

第六步、

创建listCategory.jsp文件。
在WEB-INF目录下创建jsp文件夹，将jsp文件都放在这里，因为我们在springMVC.xml中配置过的，就不过多解释了。

不知道在哪创建的可以回头看一下我的那个项目路径，根据那个来即可

listCategory.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/5/12
  Time: 12:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="UTF-8" import="java.util.*"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
    <title>Title</title>
</head>
<body>


<table align='center' border='1' cellspacing='0'>
    <tr>
        <td>id</td>
        <td>name</td>
    </tr>
    <c:forEach items="${cs}" var="c" varStatus="st">
        <tr>
            <td>${c.id}</td>
            <td>${c.name}</td>

        </tr>
    </c:forEach>
</table>
</body>
</html>

这里得到数据的思路我就不多说了吧，懂得都懂。就是jsp页面中通过jstl标签来获取到Controller中返回的数据。

OK,到这里，大功告成！启动Tomcat,测试一下。

没问题吧，注意这里的访问路径，http://localhost:8885/listCategory ，不是直接访问jsp页面，是访问controller中的请求路径。
ok,就到这吧，

在这里插入图片描述

这里有一个小小的改进，就是controller的改变，使用@ResponseBody注解来返回数据，然后前端通过ajax来异步请求数据。

ListController.java

package com.controller;

import com.entity.Category;
import com.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@Controller
@RequestMapping("/")
public class ListController {
    @Autowired
    CategoryService categoryService;

    @RequestMapping("list/allCategory")
    @ResponseBody
    public List<Category> findAll(){
        List<Category> list = categoryService.list();
        System.out.println(list.size());
        return  list;
    }

    @RequestMapping("/listall")
    public String listAll(){
        return "listall";
    }
}

在jsp文件夹下创建listall.jsp页面。

listall.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/5/14
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>首页</title>
</head>
<body>

<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>id</td>
        <td>姓名</td>

    </tr>
    <tbody id="content">
    </tbody>

</table>
<script src="https://atts.w3cschool.cn/attachments/jquery.min.js">
</script>
<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            $.post("list/allCategory",function (data) {
                console.log(data);
                var html = "";
                for(var i = 0; i <data.length;i++){
                    html += "<tr>" +
                        "<td>"+ data[i].id+"</td>"+
                        "<td>"+ data[i].name+"</td>"+
                        +"</tr>";
                }
                $('#content').html(html);

            })
        })
    })

</script>
</body>
</html>

然后访问测试listall页面：

先访问list/allCategory请求路径，看看数据是否正常回显。

在这里插入图片描述

然后访问listall, 点击一下获取数据，OK,没问题吧，老铁们。

在这里插入图片描述

到此这篇关于IDEA整合SSM框架实现网页上显示数据的文章就介绍到这了,更多相关IDEA整合SSM内容，请搜索W3Cschool以前的文章或继续浏览下面的相关文章，希望大家以后多多支持我们！

w3cschool 编程狮，随时随地学编程

如何使用IDEA整合SSM框架并实现在网页上显示数据

第一步、

第二步、

第三步、

第四步、

第五步、

第六步、