Try   HackMD

建立一個SpringMVC + Spring + Hibernate 的Web專案

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

本練習專案都是建立在Spring5上

Step1: 首先要先建立一個Maven專案,可參考之前的筆記

在POM檔加入Spring MVC的dependency

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More → 

<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.3.4</version>
    </dependency>

可以在Libraries的Maven Dependencies看到新加的這些jar檔

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

然後在WEB-INF/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>SpringMVC Demo Project</display-name>
  
  <!-- Spring MVC DispatcherServlet -->
  <servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:config/spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  
</web-app>

加入HelloController

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More → 

package camiol.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class HelloController {
	
	@RequestMapping("hello")
	public ModelAndView hello() {
		return new ModelAndView("hello");
	}
}

在WEB-INF /pages 加入hello.jsp

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More → 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HelloWorld</title>
</head>
<body>
  <h1>Hello World!! Spring MVC</h1>
</body>
</html>

然後在resources的 config 加入spring-mvc.xml

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More → 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:mvc="http://www.springframework.org/schema/mvc" 
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/mvc 
                           http://www.springframework.org/schema/mvc/spring-mvc.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">
        
    
  <mvc:annotation-driven />
  <context:annotation-config/>
  <context:component-scan base-package="camiol.demo"/>
  
  <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/pages/" />
    <property name="suffix" value=".jsp" />
  </bean>
  
</beans>

最後把專案啟動, 在網址輸入http://localhost:8080/springMVC-Demo/hello

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

這樣就完成了初步專案建立!

Step2: 再來要加入連資料庫的設定:

首先我們要在POM檔加入必要的dependency

<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>camiol</groupId>
	<artifactId>springMVC-Demo</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>

	<name>springMVC-Demo Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>5.3.4</version>
		</dependency>

		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.springframework/spring-orm -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-orm</artifactId>
			<version>5.3.4</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-core -->
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-core</artifactId>
			<version>5.4.2.Final</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-c3p0 -->
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-c3p0</artifactId>
			<version>5.4.2.Final</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>4.0.1</version>
			<scope>provided</scope>
		</dependency>

		<!-- https://mvnrepository.com/artifact/javax.servlet.jsp.jstl/javax.servlet.jsp.jstl-api -->
		<dependency>
			<groupId>javax.servlet.jsp.jstl</groupId>
			<artifactId>javax.servlet.jsp.jstl-api</artifactId>
			<version>1.2.2</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>8.0.23</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.6</version>
		</dependency>

	</dependencies>


	<build>
		<finalName>springMVC-Demo</finalName>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.8.1</version>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>3.2.3</version>
				<configuration>
					<warSourceDirectory>WebContent</warSourceDirectory>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

接著在resources 的properties 加入database.properties

# DataSource
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/mydb?useUnicode=yes&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=1qaz@WSX
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# C3P0
connectionPool.init_size=10
connectionPool.min_size=10
connectionPool.max_size=20
connectionPool.timeout=600

# SQL
jdbc.dataSource.dialect=org.hibernate.dialect.MySQLDialect
jdbc.dataSource.showSql=true

在resources 的database 加入DataSource.xml和 Hibernate.xml 來設定詳細配置

DataSource.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/mvc 
                           http://www.springframework.org/schema/mvc/spring-mvc.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">

	<bean
		class="org.springframework.context.support.PropertySourcesPlaceholderConfigurer">
		<property name="location">
			<value>classpath:properties/database.properties</value>
		</property>
	</bean>

	<bean id="dataSource"
		class="com.mchange.v2.c3p0.ComboPooledDataSource">
		<property name="driverClass"
			value="${spring.datasource.driver-class-name}" />
		<property name="jdbcUrl" value="${spring.datasource.url}" />
		<property name="user" value="${spring.datasource.username}" />
		<property name="password" value="${spring.datasource.password}" />
		<property name="autoCommitOnClose" value="false"/> <!-- 連接關閉時默認將所有未提交的操作回復 Default:false -->
		<property name="checkoutTimeout" value="${connectionPool.timeout}"/>
		<property name="initialPoolSize" value="${connectionPool.init_size}"/>
		<property name="minPoolSize" value="${connectionPool.min_size}"/>
		<property name="maxPoolSize" value="${connectionPool.max_size}"/>
	</bean>

</beans>

Hibernate.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/mvc 
                           http://www.springframework.org/schema/mvc/spring-mvc.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">

	<!-- Hibernate session factory -->
	<bean id="sessionFactory"
		class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">

		<property name="dataSource">
			<ref bean="dataSource" />
		</property>
		<property name="packagesToScan">
			<list>
				<value>camiol.demo.entity</value>
			</list>
		</property>

		<property name="hibernateProperties">
			<props>
				<prop key="hibernate.dialect">${jdbc.dataSource.dialect}</prop>
				<prop key="hibernate.show_sql">${jdbc.dataSource.showSql}</prop>
			</props>
		</property>
	</bean>
	
	<bean id="transactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
		<property name="sessionFactory" ref="sessionFactory"/>
	</bean>
	<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>

設定好基本配置後, 在spring-mvc.xml那邊把剛剛的配置import進來

spring-mvc.xml 改成這樣

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/mvc 
                           http://www.springframework.org/schema/mvc/spring-mvc.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">


	<mvc:annotation-driven />
	<context:annotation-config />
	
	<!-- Database Configuration -->
	<import resource="../database/DataSource.xml" />
	<import resource="../database/Hibernate.xml" />
	
	<context:component-scan
		base-package="camiol.demo" />

	<bean id="viewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/pages/" />
		<property name="suffix" value=".jsp" />
	</bean>

</beans>

配置完後, 開始加入entity,dao,service等等class


















































package camiol.demo.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

@Entity
@Table(name = "Student")
public class Student {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private long id;
	@Column(name="Name")
	private String name;
	@Column(name="Math_Score")
	private int mathScore;
	
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getMathScore() {
		return mathScore;
	}
	public void setMathScore(int mathScore) {
		this.mathScore = mathScore;
	}
	
	public String toString() {
		Gson gson = new GsonBuilder().setPrettyPrinting().create();
		return gson.toJson(this);
	}
	
}















package camiol.demo.dao;

import java.util.List;

import camiol.demo.entity.Student;

public interface StudentDao {
	Student findById(long id);
	List<Student> findAll();
	void update(Student s);
}
























































package camiol.demo.dao.impl;

import java.util.List;

import javax.annotation.Resource;
import javax.persistence.Query;

import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import camiol.demo.dao.StudentDao;
import camiol.demo.entity.Student;

@Repository
public class StudentDaoImpl implements StudentDao {
//	有多個sessionFactory 可以用Resource來指定
//	@Resource(name = "sessionFactory") 
//	private SessionFactory sessionFactory;
	
	@Autowired
	private SessionFactory sessionFactory;
	
	@Override
	@Transactional
	public Student findById(long id) {
		String sql = "select * from Student where id = :id";
		Query query = sessionFactory.getCurrentSession().createSQLQuery(sql).addEntity(Student.class);
		query.setParameter("id", id);
		return (Student) query.getSingleResult();
	}

	@Override
	@Transactional
	public List<Student> findAll() {
		String sql = "select * from Student";
		Query query = sessionFactory.getCurrentSession().createSQLQuery(sql).addEntity(Student.class);
		
		@SuppressWarnings("unchecked")
		List<Student> resultList = query.getResultList();
		return resultList;
	}

	@Override
	@Transactional
	public void update(Student s) {
		sessionFactory.getCurrentSession().update(s);
	}

}
















package camiol.demo.service;

import java.util.List;

import camiol.demo.entity.Student;

public interface StudentService {
	List<Student> findStudent();
	Student findStudent(long id);
	void updateStudent(Student s);
}








































package camiol.demo.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import camiol.demo.dao.StudentDao;
import camiol.demo.entity.Student;
import camiol.demo.service.StudentService;

@Service
public class StudentServiceImpl implements StudentService {
	
	@Autowired
	private StudentDao dao;
	
	@Override
	@Transactional
	public List<Student> findStudent() {
		return dao.findAll();
	}

	@Override
	@Transactional
	public Student findStudent(long id) {
		return dao.findById(id);
	}

	@Override
	@Transactional
	public void updateStudent(Student s) {
		dao.update(s);
	}

}

最後我們改寫剛剛的HelloController,加入service來撈資料





























package camiol.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import camiol.demo.entity.Student;
import camiol.demo.service.StudentService;

@Controller
public class HelloController {
	@Autowired
	private StudentService service;
	
	@RequestMapping("hello")
	public ModelAndView hello() {
		List<Student> list = service.findStudent();
		System.out.println(list);
		
		System.out.println(service.findStudent(5));
		
		return new ModelAndView("hello");
	}
}

啟動專案後, 我們一樣輸入網址 http://localhost:8080/springMVC-Demo/hello

確認有正常連到該頁面後, 來看一下Eclipse這邊的console
console有印出DB的內容, 已正常連結到資料庫!

Step3: 最後一步, 我們要把回傳的資料放到網頁上顯示, 並且也能從頁面上輸入資料到資料庫來查詢

首先我們需要準備一些基礎工作, 在POM檔這邊, 加入taglib 的 dependency

<!-- https://mvnrepository.com/artifact/org.apache.taglibs/taglibs-standard-impl -->
		<dependency>
			<groupId>org.apache.taglibs</groupId>
			<artifactId>taglibs-standard-impl</artifactId>
			<version>1.2.5</version>
		</dependency>

我們之前就有先加入jstl的dependency了, 所以這邊只要加入taglib就好

然後下載jquery.min.js檔案, 放在webapp/WEB-INF/js下面

然後我們在spring-mvc.xml這個檔案裡面,加上下面的設定 

<mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>

指定好jquery.min.js的位置後, 再來我們要在hello.jsp上引入jquery和taglib

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

<script src="<c:url value='/js/jquery-3.3.1.min.js' />"></script>

我們在jsp畫面載入時, 加上alert和 按按鈕彈出alert視窗,來檢查jquery.min.js檔是否有正確載入

然後我們啟動專案,輸入 http://localhost:8080/springMVC-Demo/hello

可以看到有正常載入js檔和taglib

如果沒有反應,可以按shift+ctrl+I, 檢查一下console是否有錯誤

前置作業完成, 再來要開始把輸入的參數傳回controller和從controller那邊拿到的值顯示在JSP畫面上

我們要新增list.jsp和 view.jsp , 並且修改一下hello.jsp

修改後的Hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<c:url value='/js/jquery-3.3.1.min.js' />"></script>
<title>HelloWorld</title>
</head>
<body>
	<h1>Hello World!! Spring MVC</h1>
	<input type="button" id="getAll" value="列出全部學生" />
</body>
<script type="text/javascript">
	$(document).ready(function() {
		if ('${message}' != '') {
			alert('${message}')
		}

		$("#getAll").click(function() {
			window.location.href = "<c:url value='/list' />"
		});
	})
</script>
</html>

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<c:url value='/js/jquery-3.3.1.min.js' />"></script>
<title>List</title>
</head>
<body>
	<h1>學生列表</h1>
	<form id="viewDetail" action="view" method="post">
		<input name="id" type="hidden" /> <input name="type" type="hidden" />
		<table>
			<c:if test="${resultList.size()>0}">
				<tr>
					<td>學號</td>
					<td>名字</td>
					<td>操作</td>
				</tr>
				<c:forEach items="${resultList}" var="result" varStatus="s">
					<tr>
						<td>${result.id}</td>
						<td>${result.name}</td>
						<td><input type="button" value="查看"
							onclick="view(${result.id},'view')"></td>
					</tr>
				</c:forEach>
			</c:if>
		</table>
	</form>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		
	})
	function view(id,type){
		$('input[name="id"]').val(id);
		$('input[name="type"]').val(type);
		$("#viewDetail").submit();
	}
</script>
</html>

要使用form:form的話並須引入這個taglib

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

view.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<c:url value='/js/jquery-3.3.1.min.js' />"></script>
<title>View Detail</title>
</head>
<body>
	<h1>詳細資料</h1>
	<form:form id="viewDetail" action="view" method="post" modelAttribute="s">
		<form:input path="id" type="hidden" /> <input name="type" type="hidden" />
		<table>
			<tr>
				<td>學號</td>
				<td>名字</td>
				<td>數學成績</td>
			</tr>

			<tr>
				<td>${s.id}</td>
				<c:choose>
					<c:when test="${type eq 'view'}">
						
						<td>${s.name}</td>
						<td align="center">${s.mathScore}</td>
					</c:when>
					<c:otherwise>
							<td><form:input path="name" /> </td>
							<td align="center"><form:input path="mathScore" /></td>
					</c:otherwise>
				</c:choose>
			</tr>

		</table>
	</form:form>
	<input type="button" value="回上ㄧ頁" onclick="history.back()" />
	<c:choose>
		<c:when test="${type eq 'view'}">
			<input type="button" value="修改"
				onclick="modifyDetail(${s.id}),'modify'" />
		</c:when>
		<c:otherwise>
			<input type="button" value="確認修改" onclick="update()" />
		</c:otherwise>
	</c:choose>
</body>
<script type="text/javascript">
	$(document).ready(function() {

	})
	function modifyDetail(id,type){
		$('input[name="id"]').val(id);
		$('input[name="type"]').val(type);
		$("#viewDetail").submit();
	}
	function update(){
		$("#viewDetail").attr("action","update").submit();
	}
</script>
</html>

預計流程: 在hello.jsp上面按下列出全部學生按鈕 -> 按下去後資料庫撈出全部學生資料並跳轉到list.jsp -> 點選查看按鈕可以看到該名學生成績並跳轉到view.jsp -> 按下修改按鈕進入修改畫面一樣跳轉到view.jsp -> 按下確認修改按鈕後 redirect到hello.jsp,並帶修改成功參數顯示在畫面上

修改原本的HelloController

























































package camiol.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import camiol.demo.entity.Student;
import camiol.demo.service.StudentService;

@Controller
public class HelloController {
	@Autowired
	private StudentService service;
	
	@RequestMapping("hello")
	public ModelAndView hello() {
		return new ModelAndView("hello");
	}
	@RequestMapping("list")
	public ModelAndView list() {
		List<Student> resultList = service.findStudent();
		ModelAndView model = new ModelAndView();
		model.setViewName("list");
		model.addObject("resultList",resultList);
		
		return model;
	}
	
	@RequestMapping(value = "view" ,method = RequestMethod.POST)
	public ModelAndView view(@RequestParam long id,@RequestParam String type) {
		System.out.println(id);
		System.out.println(type);
		Student s = service.findStudent(id);
		ModelAndView model = new ModelAndView();
		model.setViewName("view");
		model.addObject("s", s);
		model.addObject("type",type);
		return model;
	}
	
	@RequestMapping(value = "update" ,method = RequestMethod.POST)
	public ModelAndView update(@ModelAttribute("s") Student s,RedirectAttributes attr) {
		service.updateStudent(s);
		
		attr.addFlashAttribute("message","修改成功");
		return new ModelAndView("redirect:hello");
	}
}

redirect 要帶參數的話並且url不會顯示參數的話,要用RedirectAttributes.addFlashAttribute("參數名稱","參數內容")來完成

啟動專案後,就可以看到下列成果:

按下"列出全部學生"按鈕後

點選6號學生"查看"按鈕後

按下"修改"按鈕後

畫面變成了修改模式, 將名字改成Camiol Chuang 數學成績改成 100,按下"確認修改"按鈕

回到了一開始的hello.jsp畫面,並且跳出修改成功提示文字

再次點選"列出全部學生"按鈕,去查詢剛剛的6號學生資料

可以看到資料已被修正過

以上就是STEP-BY-STEP 詳細的SpringMVC專案從前端到後端的完整建置步驟!

tags: Spring MVC
Last changed by 
 
camioljoyce
0
2427

Read more

Apache Tomcat 7., 8.5.x, 9.x 使用 SSL 連線安裝設定

Apache Tomcat 7., 8.5.x, 9.x 使用 SSL 連線安裝設定

Jun 20, 2024
Camiol 振義的專案研究室

在Eclipse上面快速建立一個Maven的Web專案

Jun 6, 2024
在Windows底下列出程式清單的指令

dir: 是 Windows 的一個內置指令，用於列出目錄中的文件和子目錄。

Nov 2, 2023
Session cookie without samesite flag 弱點解法

參考網站

Jul 20, 2023
Read more from camioljoyce
Published on HackMD