如何使用IDEA整合SSM框架并實現(xiàn)在網(wǎng)頁上顯示數(shù)據(jù)

櫥窗的光 2021-08-19 14:53:23 瀏覽數(shù) (2858)

反饋

SSM框架是現(xiàn)在非常熱門的一門框架技術(shù)，那么如何在IDEA軟件將SSM框架整合？并在網(wǎng)頁上顯示數(shù)據(jù)呢？下面，分享的這篇文章詳解講述了IDEA整合SSM框架并在網(wǎng)頁上顯示數(shù)據(jù)的過程，希望對大家有所幫助！

第一步、

創(chuàng)建一個maven工程。配置Tomcat，并測試是否正常訪問HelloWorld.
這一步就省略了。
不懂得看這個博客：

idea創(chuàng)建maven項目

創(chuàng)建出來是這樣的：

在這里插入圖片描述

我們從這里開始整合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聯(lián)盟，提供了aop規(guī)范，Spring AOP就是實現(xiàn)了這個規(guī)范 -->
    <dependency>
      <groupId>aopalliance</groupId>
      <artifactId>aopalliance</artifactId>
      <version>1.0</version>
    </dependency>
    <!-- aspectj，實現(xiàn)了aop規(guī)范，比spring AOP實現(xiàn)的使用起來簡單，所以引入它 -->
    <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數(shù)據(jù)庫驅(qū)動，以及使用的數(shù)據(jù)源 -->
    <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>

第三步、

創(chuàng)建數(shù)據(jù)表。
創(chuàng)建一個名稱為category_的數(shù)據(jù)表，只有兩個字段，一個id, 一個name，id自增。隨便插入點數(shù)據(jù)。

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', '發(fā)生的v');
INSERT INTO `category_` VALUES ('7', 'sdfsd');
INSERT INTO `category_` VALUES ('8', '34535');

在這里插入圖片描述

第四步、

編寫實體類；DAO層；Service層；Controller層。

像我這樣，在java文件夾目錄下，創(chuàng)建這幾個包。

在這里插入圖片描述

然后在包下創(chuàng)建對應的java文件或配置文件，最終的項目結(jié)構(gòu)是這樣的：
（那些打馬賽克的東西你們用不到，小孩子別看那些。）

在這里插入圖片描述

接下來開始寫實體類：

實體類名稱最好見名知意，跟數(shù)據(jù)表名稱要對上。因為使用了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層，這里寫的多是接口，只寫方法，不實現(xiàn)。

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層下創(chuàng)建對應的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層，這里才是你要實現(xiàn)業(yè)務的地方。這里也是接口，在impl實現(xiàn)類里才是寫真正實現(xiàn)的。
這里只實現(xiàn)一個：查詢所有數(shù)據(jù)。

CategoryService.java

package com.service;

import com.entity.Category;

import java.util.List;

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

然后寫實現(xiàn)類。

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();
        // 放入轉(zhuǎn)發(fā)參數(shù)
        mav.addObject("cs", cs);
        // 放入jsp路徑
        mav.setViewName("listCategory");
        return mav;
    }
}

OK,寫到這里，你已經(jīng)成功一半啦！給自己鼓鼓掌！
接下來，我們一鼓作氣，寫好配置文件并訪問數(shù)據(jù)吧！

第五步、

編寫配置文件。

在resources目錄下，創(chuàng)建兩個配置文件。

注意把數(shù)據(jù)庫，密碼，改成自己的，

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核心：分發(fā)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>

第六步、

創(chuàng)建listCategory.jsp文件。
在WEB-INF目錄下創(chuàng)建jsp文件夾，將jsp文件都放在這里，因為我們在springMVC.xml中配置過的，就不過多解釋了。

不知道在哪創(chuàng)建的可以回頭看一下我的那個項目路徑，根據(jù)那個來即可

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>

這里得到數(shù)據(jù)的思路我就不多說了吧，懂得都懂。就是jsp頁面中通過jstl標簽來獲取到Controller中返回的數(shù)據(jù)。

OK,到這里，大功告成！啟動Tomcat,測試一下。

沒問題吧，注意這里的訪問路徑，http://localhost:8885/listCategory ，不是直接訪問jsp頁面，是訪問controller中的請求路徑。
ok,就到這吧，

在這里插入圖片描述

這里有一個小小的改進，就是controller的改變，使用@ResponseBody注解來返回數(shù)據(jù)，然后前端通過ajax來異步請求數(shù)據(jù)。

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文件夾下創(chuàng)建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="獲取數(shù)據(jù)"/>
<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請求路徑，看看數(shù)據(jù)是否正?；仫@。

在這里插入圖片描述