Spring MVC開發環境的搭建和實例

一、安裝jdk

二、安裝tomcat

三、安裝maven
　　新增環境變量MAVEN-HOME，並在path變量中添加bin路徑

四、安裝IntelliJ IDEA

五、創建maven web項目
選擇jdk,勾選create from archetype,選擇org.apache.maven.archetypes:maven-archetype-webapp
maven會在后台生成web項目，需要等待，如果卡住，可參考
文章1： http://www.cnblogs.com/beiyeren/p/4566485.html
文章2：http://blog.csdn.net/cleverlzc/article/details/50864582

六、maven自動導入jar包
pom.xml

<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>
  <groupId>com.zyz</groupId>
  <artifactId>test1</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>test1 Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <version.spring>4.3.0.RELEASE</version.spring>
  </properties>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.8.2</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.3.3</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${version.spring}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${version.spring}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${version.spring}</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.freemarker/freemarker -->
    <dependency>
      <groupId>org.freemarker</groupId>
      <artifactId>freemarker</artifactId>
      <version>2.3.23</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
    </dependency>

  </dependencies>
  <build>
    <finalName>test1</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

 

七、配置 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">

  <!--當前的項目名-->
  <display-name>mvc-test</display-name>

  <!--監聽applicationContext-jdbc.xml文件加載-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!--指定spring配置的xml文件的位置-->
  <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>WEB-INF/applicationContext*.xml</param-value>
  </context-param>

  <servlet>
    <servlet-name>mvc-dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>mvc-dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

<!--處理中文post請求,防止出現亂碼-->
  <filter>
    <filter-name>encodingFilter</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>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

 

八、xxx-servlet.xml(mvc-dispatcher-servlet.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"
       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.xsd">
    <!--指定注解掃描的包-->
    <context:component-scan base-package="com.zyz" />
    <!--處理image,js等靜態資源-->
    <mvc:default-servlet-handler/>
    <!--開啟注解-->
    <mvc:annotation-driven />
    <!--jsp視圖解析-->
    <!--<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
        <!--<property name="prefix" value="/WEB-INF/jsp/"></property>-->
        <!--<property name="suffix" value=".jsp"></property>-->
    <!--</bean>-->

    <!--freemarker配置-->
    <bean id="freeMarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
        <property name="templateLoaderPath" value="WEB-INF/ftl/"></property>
        <property name="defaultEncoding" value="UTF-8"></property><!--支持中文必要條件1-->
    </bean>
    <!--freemarker視圖解析-->
    <bean id="ftlViewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
        <property name="suffix" value=".ftl"></property>
        <property name="contentType" value="text/html;charset=UTF-8"></property><!--支持中文必要條件2-->
    </bean>
</beans>

 

九、配置mysql數據庫

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

    <!--配置mysql數據庫-->
    <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/school?useUnicode=true&amp;characterEncoding=UTF-8</value>
        </property>
        <property name="username">
            <value>root</value>
        </property>
        <property name="password">
            <value>root</value>
        </property>
    </bean>

    <!--jdbcTemplate和數據庫關聯-->
    <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
        <property name = "dataSource" ref="dataSource"/>
    </bean>
</beans>

 

十、主要代碼

dao

package com.zyz.dao;

import com.zyz.model.Teacher;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.PreparedStatementSetter;
import org.springframework.stereotype.Repository;

import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by zyz on 2016-8-3.
 */
@Repository
public class TeacherDao {
    @Autowired
    private JdbcTemplate jdbcTemplate;
    public List<Teacher> getTeachers(){
        List<Teacher> teachers=new ArrayList<Teacher>();
        String sql="select tno,tname,dno from teacher";
        teachers=jdbcTemplate.query(sql,new BeanPropertyRowMapper<Teacher>(Teacher.class));
        return teachers;
    }
    public void addTeacher(Teacher teacher){
        String sql="insert into teacher(tno,tname,dno) values(?,?,?)";
        jdbcTemplate.update(sql, new PreparedStatementSetter() {
            @Override
            public void setValues(PreparedStatement ps) throws SQLException {
                ps.setString(1,teacher.getTno());
                ps.setString(2,teacher.getTname());
                ps.setString(3,teacher.getDno());
            }
        });
    }
}

 

service

package com.zyz.service;

import com.zyz.dao.TeacherDao;
import com.zyz.model.Teacher;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Created by zyz on 2016-8-3.
 */
@Service
public class TeacherService {
    @Autowired
    private TeacherDao teacherDao;
    public List<Teacher> getTeachers(){
        return teacherDao.getTeachers();
    }
    public void addTeacher(Teacher teacher){
        teacherDao.addTeacher(teacher);
    }
}

 

action

package com.zyz.action;

import com.zyz.service.TeacherService;
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;


/**
 * Created by zyz on 2016-8-3.
 */
@Controller
@RequestMapping("/teacher")
public class TeacherController {
    @Autowired
    private TeacherService teacherService;

    @RequestMapping(value = "/list",method = RequestMethod.GET)
    public String listTeacher(Model model){
        model.addAttribute("teachers",teacherService.getTeachers());
        return "listTeacher";
    }

    @RequestMapping(value = "/add",method = RequestMethod.GET)
    public String addTeacher(){
        return "addTeacher";
    }
}

 

api

package com.zyz.api;

import com.zyz.model.Teacher;
import com.zyz.service.TeacherService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

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

/**
 * Created by zyz on 2016-8-4.
 */
@RestController
@RequestMapping("/teacher")
public class TeacherApi {
    @Autowired
    private TeacherService teacherService;
    @RequestMapping(value = "/add",method = RequestMethod.POST)
    public ResponseData add(@RequestBody Teacher teacher){
        List<Msg> msgs=new ArrayList<Msg>();
        if(teacher.getTno()==null || teacher.getTno().equals("")){
            msgs.add(new Msg("tnoMsg","工號不能為空."));
        }
        if(teacher.getTname()==null || teacher.getTname().equals("")){
            msgs.add(new Msg("tnameMsg","姓名不能為空."));
        }
        if(teacher.getDno()==null || teacher.getDno().equals("")){
            msgs.add(new Msg("dnoMsg","部門號不能為空."));
        }
        if(msgs.size()==0){
            teacherService.addTeacher(teacher);
            return new ResponseData(true,"添加成功.");
        }else {
            return new ResponseData(false,"添加失敗.",msgs);
        }
    }
}

 

ajax

/**
 * Created by zyz on 2016-8-2.
 */
$(function () {
    // 將所有class為msg的元素內容清空,這些元素通常提示錯誤信息的,每次提交前都要清除,以顯示本次的信息
    function clearMsg() {
        $(".msg").html('');
    }
    //獲取表單數據,返回一個json對象,准備提交給服務器,注意此處json對象的屬性必須和對應model對象Person的屬性名保持一致
    function formData() {
        return {
            tno:$("#tno").val(),
            tname:$("#tname").val(),
            dno:$("#dno").val()
        };
    }
    function add() {
        var url="/teacher/add";//通過該url找到對應api類的某個方法來接收ajax請求並作出響應(返回一個json對象)
        var data=formData();//此處的data是一個json對象
        clearMsg();
        $.ajax({
            type:'POST',//處理異步請求數據的api類@RequestMapping(value="/add",method=RequestMethod.POST)
            url: url,
            dataType:'json',
            contentType: 'application/json',
            data:JSON.stringify(data),
            //將一個json對象轉換成json對象字符串,因為在api中參數@RequestBody接受的是一個json對象字符串,而不是一個json對象
            success:function (responseData) {//此處success是表示響應成功,即狀態碼為200,responseData參數表示返回的數據
                if(responseData.success==true){
                    //ResponseData是一個json對象,是由后台類(ResponseData(success,desc,msgs)類)的對象返回到前台形成的一個json對象,
                    // 此處的success僅表示該json對象的一個屬性,
                    alert(responseData.desc);
                    window.location.href="/teacher/list";
                }else {//如果驗證失敗,則 顯示錯誤信息
                    var msgs=responseData.msgs;
                    for(var i=0;i<msgs.length;i++){
                        $('#'+msgs[i].id).html(msgs[i].msg);
                    }
                }
            }
        });
    }
    // 定義一個初始化的方法
    function init() {
        $("#add").on("click",function () {//給添加按紐綁定事件
            add();
        });
    }
    init();//調用初始化事件
})

 

ftl

listTeacher.ftl

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>教師列表</title>
</head>
<body>
<a href="/teacher/add">添加教師</a>
<table border="1">
    <tr>
        <th>工號</th>
        <th>姓名</th>
        <th>部門號</th>
    </tr>
    <#list teachers as teacher>
        <tr>
            <td>${teacher.tno}</td>
            <td>${teacher.tname}</td>
            <td>${teacher.dno}</td>
        </tr>
    </#list>
</table>
</body>
</html>

 

addTeacher.ftl

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加教師</title>
    <style>
        .msg{
            color:red;
        }
    </style>
</head>
<body>
    工號:<input type="text" id="tno"><span id="tnoMsg" class="msg"></span><br>
    姓名:<input type="text" id="tname"><span id="tnameMsg" class="msg"></span><br>
    部門號:<input type="text" id="dno"><span id="dnoMsg" class="msg"></span><br>
    <input type="button" id="add" value="添加">
    <script src="/js/common/jquery.min.js"></script>
    <script src="/js/teacher/add.js"></script>
</body>
</html>