java web 的前后端简单交互(后端:Spring+SpringMVC+Myabatis = SSM,. 前端: CSS + HTML ) (上)

最新推荐文章于 2025-10-11 10:03:45 发布

原创最新推荐文章于 2025-10-11 10:03:45 发布 · 1.2w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring #springmvc #mybatis #javaweb

本文介绍了使用SSM（Spring+SpringMVC+Mybatis）框架搭建Java Web项目的步骤，从创建项目目录、配置数据库、编写Model、DAO、Spring配置到集成SpringMVC，最后通过Jetty/Tomcat部署并测试接口。作者强调了配置过程中的注意事项，如字符集设置，并提供了代码资源下载链接。

前言:

首先说明,我还是一个小菜鸡,最近学习到了java web 以及 java 后端如何和前端(目前只是 css+html)交互,这是是我完成的第一个project(以下代称为项目),现在把如何做的,还有一些简单的注意事项,写在博客中,也算给我做一次记忆的加深,如果哪里有问题,还请大家指出,谢谢各位.

菜鸡的javaweb下部

开始本项目之前,需要准备几个基本工具:

* JAVA-一种编程语言, JDK(我这里使用的是1.9版本)---必须

*Mysql 数据库(使用的5.7.20版本)---必须

*Navicat for Mysql(数据库可视化工具)---非必须

*Idea (java开发工具)----必须

* jetty 或者 tomcat 打开webapp 项目必须

*一个云服务器,我这里用的是阿里云的 ubuntu16.04,以及方便操作云服务器的Xshell5和Xftp 5

*云服务器要安装 1 . jdk 1.8

2 . maven

3 . mysql(并且能从本地Navicat连接到云服务器上的mysql.

4 . jetty or tomcat (web容器),用于带卡webapp

*PostMan--web接口测试工具

暂时就想起来这么多,剩下的下文用到,再说.

正文:

配置各种工具的过程省略,直接开始写代码..

第一步 :

1.打开idea,新建一个project

在弹出来的界面中依次点击,然后next

然后取名,下一步

继续下一步

照着做下来,项目目录应该是这样的

新建如图所示的项目目录

然后我们的项目目录至此就完成了.

第二步 :

使用Navicat for mysql创建数据表

demo1的数据表结构 id 设置为自增长

其中注意:为了防止中文乱码我们需要在创建表的时候在选项卡,把字符类型设置成为utf-8

第三步 :

在idea中的pom.xml中,加上我们所需要的jar包

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    <modelVersion>4.0.0</modelVersion>
    <packaging>war</packaging>

    <name>javaweb</name>
    <groupId>zwp</groupId>
    <artifactId>javaweb</artifactId>
    <version>1.0-SNAPSHOT</version>


    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <spring.version>4.2.6.RELEASE</spring.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.apache.tiles</groupId>
            <artifactId>tiles-extras</artifactId>
            <version>3.0.8</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-oxm</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</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>
        <!-- springframe end -->

        <!--aspectj start-->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.8.9</version>
        </dependency>

        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjrt</artifactId>
            <version>1.8.6</version>
        </dependency>
        <!--aspectj end-->

        <!--c3p0-->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>

        <!--servlet/jsp api start-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
        <!--servlet/jsp api end-->

        <!--junit4-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.9</version>
            <scope>test</scope>
        </dependency>

        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.3.0</version>
        </dependency>
        <!--mybatis spring整合-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.3</version>
        </dependency>

        <!--mysql driver-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>

        <!--jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.9</version>
        </dependency>
        <!--JACKSON-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.5.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.5.4</version>
        </dependency>
    </dependencies>

</project>

下来

准备工作完了以后开始敲代码

首先在目录中model下,新建Student.class

package com.model;

public class Student {
    private long id;
    private long create_time;
    private long update_time;
    private String name;
    private String username;
    private String password;
    private int QQ;
    private String major;
    private String sex;
    private String introducemyself;

    public long getId() {
        return id;
    }

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

    public long getCreate_time() {
        return create_time;
    }

    public void setCreate_time(long create_time) {
        this.create_time = create_time;
    }

    public long getUpdate_time() {
        return update_time;
    }

    public void setUpdate_time(long update_time) {
        this.update_time = update_time;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    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;
    }

    public int getQQ() {
        return QQ;
    }

    public void setQQ(int QQ) {
        this.QQ = QQ;
    }

    public String getMajor() {
        return major;
    }

    public void setMajor(String major) {
        this.major = major;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getIntroducemyself() {
        return introducemyself;
    }

    public void setIntroducemyself(String introducemyself) {
        this.introducemyself = introducemyself;
    }

    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", create_time=" + create_time +
                ", update_time=" + update_time +
                ", name='" + name + '\'' +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", QQ=" + QQ +
                ", major='" + major + '\'' +
                ", sex='" + sex + '\'' +
                ", introducemyself='" + introducemyself + '\'' +
                '}';
    }
}

然后在dao目录下新建StudentDao 接口文件

package com.dao;

import com.model.Student;

import java.util.List;

public interface StudentDao {
    public void add(Student student);
    public void update(Student student);
    public void delete(Student student);
    public List<Student> findAll();
    public Student findById(long id);
    public int findLastOne();
    public int findok();
    
}

然后在resources下暂时新建三个配置文件,分别为

spring.xml------(spring框架相关,概念很广,自己了解咯)

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

       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd
       http://www.springframework.org/schema/aop
       http://www.springframework.org/schema/aop/spring-aop.xsd">
    <!-- 扫描service包下所有使用注解的类型 -->
    <context:component-scan base-package="com.service"/>
    <context:component-scan base-package="com.Aspect"/>
    <!--找到被注解了的切面类，进行切面配置-->
    <aop:aspectj-autoproxy/>
    <!-- 配置数据库相关参数properties的属性：${url} -->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!-- 数据库连接池 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <property name="maxPoolSize" value="${c3p0.maxPoolSize}"/>
        <property name="minPoolSize" value="${c3p0.minPoolSize}"/>
        <property name="autoCommitOnClose" value="${c3p0.autoCommitOnClose}"/>
        <property name="checkoutTimeout" value="${c3p0.checkoutTimeout}"/>
        <property name="acquireRetryAttempts" value="${c3p0.acquireRetryAttempts}"/>
    </bean>
    <!-- 配置SqlSessionFactory对象 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 扫描model包 使用别名 -->
        <property name="typeAliasesPackage" value="com.model"/>
        <!-- 扫描sql配置文件:mapper需要的xml文件 -->
        <property name="mapperLocations" value="classpath:mapper.xml"/>
    </bean>
    <!-- 配置扫描Dao接口包，动态实现Dao接口，注入到spring容器中 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 注入sqlSessionFactory -->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!-- 给出需要扫描Dao接口包 -->
        <property name="basePackage" value="com.dao"/>
    </bean>

    <!-- 配置事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置基于注解的声明式事务 -->
    <tx:annotation-driven transaction-manager="transactionManager"/>
</beans>

mapper.xml ----(mybatis相关,sql语句写到这里)

<?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">

<!-- 设置为IUserDao接口方法提供sql语句配置 -->
<mapper namespace="com.dao.StudentDao">
    <insert id="add" parameterType="com.model.Student">
        INSERT INTO  demo1 (create_time,update_time,name,username,password,sex) values (#{create_time},#{update_time},#{name},#{username},#{password},3)
    </insert>
    <update id="update" parameterType="com.model.Student">
        UPDATE demo1 SET  update_time= #{update_time},
        name=#{name},
        username=#{username},
        password =#{password} where id = #{id}
    </update>
    <delete id="delete" parameterType="com.model.Student">
        DELETE FROM demo1 where id = #{id}
    </delete>

    <select id="findById" resultType="com.model.Student" parameterType="com.model.Student">
        SELECT * FROM demo1 WHERE id = #{id}
    </select>

    <select id="findAll" resultType="com.model.Student" >
        select * from   demo1
    </select>

    <select id="findLastOne"  resultType="java.lang.Integer">
        select count(*) from demo1
    </select>

    <select id="findok"  resultType="java.lang.Integer">
        select count(classes) from demo1 where classes = 1
    </select>

</mapper>

jdbc.properties-----(spring.xml中加载的的文件,连接池相关)

全部完成后,写一个测试,看看自己的代码有没有问题.

这里我在dao包下,创建了一个测试文件取名为StudentDaoTest

如果完全安装我的操作来,那么应该,下方有绿条,并显示出findAll的结果

到这里,我们的spring+mybatis就完成了

第四步 :

在spring+mybatis的基础上,加入springMVC

首先,在resources的基础上加入spring-mvc.xml配置文件

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

    <!-- 扫描web相关的bean -->
    <context:component-scan  base-package="com.controller">
        <context:include-filter type="annotation"
                                expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 开启SpringMVC注解模式 -->
    <mvc:annotation-driven/>

    <!-- 静态资源默认servlet配置 -->
    <mvc:default-servlet-handler/>
    <!--与前端交互时候用到-->
    <!--<mvc:resources mapping="css/**" location="WEB-INF/views/task9/css/"/>-->
    <!--<mvc:resources location="/WEB-INF/views/task9/img/" mapping="/img/**"/>-->
    <!-- 配置jsp 显示ViewResolver -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    <!-- Tiles 配置相关bean,与前端交互时候用到 -->
    <!--<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" p:order="1"/>-->
    <!--<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">-->
        <!--<property name="definitions">-->
            <!--<list>-->
                <!--<value>/WEB-INF/tiles/tiles.xml</value>-->
            <!--</list>-->
        <!--</property>-->
    <!--</bean>-->


</beans>

web.xml也要配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <error-page>
    <error-code>405</error-code>
    <location>/</location>
  </error-page>

  <!--设置spring 配置文件的位置-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath*:spring.xml</param-value>

  </context-param>
  <!--配置spring listener-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>


  <!--解决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>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <!--下方过滤器可以让web  添加method PUT和DELETE方法-->
  <filter>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>HiddenHttpMethodFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!--springmvc前端控制器配置-->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath*:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

</web-app>

springmvc.xml相关配置完成后,开始controller包下新建StudentController.class文件

package com.controller;


import com.model.Student;
import com.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class StudentController {
    @Autowired
    private StudentService studentService;

    @RequestMapping(value = "/demo",method = RequestMethod.GET)
    @ResponseBody
    public List<Student> findAll(Model model){
        List<Student>student =studentService.findAll();

        System.out.println(student);
        return student;
    }

}

写好以后,代码层面的工作结束,开始配置jetty或者 tomcat,如何配置不赘述

下面任务栏出来以下表明成功,会弹出一个网页

然后后缀加上你的value值,如果你的数据库有数据,就会出现一下类似的界面

以上,SSM项目就搭建成功,下面就可以开始和前端的页面进行交互了.

最后,我放上我的代码,有需要的可以下载试试.

链接: https://pan.baidu.com/s/1oIqKG97-eL0eOsfF9w0M8w

密码: pa44

数据表格式也在贴一下

java web 的前后端简单交互(后端:Spring+SpringMVC+Myabatis = SSM,. 前端: CSS + HTML ) (上)

前言:

正文:

配置各种工具的过程省略,直接开始写代码..

3 条评论