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

# 建立一個SpringMVC + Spring + Hibernate 的Web專案 [![hackmd-github-sync-badge](https://hackmd.io/wF-EIZsjSO-oE0pmSyQVkA/badge)](https://hackmd.io/wF-EIZsjSO-oE0pmSyQVkA) - [GitHub位置](https://github.com/camioljoyce/springMVC-Demo) **本練習專案都是建立在Spring5上** **Step1:** 首先要先建立一個Maven專案,可參考之前的筆記 - [在Eclipse上面快速建立一個Maven的Web專案](https://hackmd.io/VrNS_xVIRRy86WQTC94rBA) 在POM檔加入Spring MVC的dependency ![](https://i.imgur.com/v3RuX1a.jpg) ```\  <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.4</version> </dependency> ``` 可以在Libraries的Maven Dependencies看到新加的這些jar檔 ![](https://i.imgur.com/uXQuQwC.jpg) 然後在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>  <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 ![](https://i.imgur.com/yQFOBfU.jpg) ```java=\ 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 ![](https://i.imgur.com/9j0hgoN.jpg) ```javascript=\ <%@ 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 ![](https://i.imgur.com/jeZ1unL.jpg) ```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/> <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 ![](https://i.imgur.com/Cai79sL.jpg) **這樣就完成了初步專案建立!** --- **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>  <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>  <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>5.3.4</version> </dependency>  <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>5.4.2.Final</version> </dependency>  <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-c3p0</artifactId> <version>5.4.2.Final</version> </dependency>  <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency>  <dependency> <groupId>javax.servlet.jsp.jstl</groupId> <artifactId>javax.servlet.jsp.jstl-api</artifactId> <version>1.2.2</version> </dependency>  <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.23</version> </dependency>  <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 ![](https://i.imgur.com/CYfEhhU.jpg) ```\ # 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"/>  <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">  <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 />  <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 ![](https://i.imgur.com/rOuf42r.jpg) ```java= 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); } } ``` ```java= 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); } ``` ```java= 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); } } ``` ```java= 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); } ``` ```java= 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來撈資料 ```java= 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 ![](https://i.imgur.com/YOrNk62.jpg) 確認有正常連到該頁面後, 來看一下Eclipse這邊的console ![](https://i.imgur.com/cwrn6OW.jpg) console有印出DB的內容, 已正常連結到資料庫! --- **Step3:** 最後一步, 我們要把回傳的資料放到網頁上顯示, 並且也能從頁面上輸入資料到資料庫來查詢首先我們需要準備一些基礎工作, 在POM檔這邊, 加入taglib 的 dependency ```\  <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下面 ![](https://i.imgur.com/HFI5GMA.jpg) 然後我們在spring-mvc.xml這個檔案裡面,加上下面的設定 ![](https://i.imgur.com/77ju57d.jpg) ```\ <mvc:resources location="/WEB-INF/js/" mapping="/js/**"/> ``` 指定好jquery.min.js的位置後, 再來我們要在hello.jsp上引入jquery和taglib ![](https://i.imgur.com/E9dZYPP.jpg) ```\ <%@ 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 ![](https://i.imgur.com/imutN4F.jpg) 可以看到有正常載入js檔和taglib :::warning 如果沒有反應,可以按shift+ctrl+I, 檢查一下console是否有錯誤 ::: **前置作業完成, 再來要開始把輸入的參數傳回controller和從controller那邊拿到的值顯示在JSP畫面上** 我們要新增list.jsp和 view.jsp , 並且修改一下hello.jsp ![](https://i.imgur.com/a8nbNwx.jpg) 修改後的Hello.jsp ```javascript=\ <%@ 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 ```javascript=\ <%@ 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 ```javascript= <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %> ``` view.jsp ```javascript=\ <%@ 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> ``` :::info 預計流程: 在hello.jsp上面按下列出全部學生按鈕 -> 按下去後資料庫撈出全部學生資料並跳轉到list.jsp -> 點選查看按鈕可以看到該名學生成績並跳轉到view.jsp -> 按下修改按鈕進入修改畫面一樣跳轉到view.jsp -> 按下確認修改按鈕後 redirect到hello.jsp,並帶修改成功參數顯示在畫面上 ::: 修改原本的HelloController ```java= 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("參數名稱","參數內容")來完成** **啟動專案後,就可以看到下列成果:** ![](https://i.imgur.com/yzJCT8y.jpg) **按下"列出全部學生"按鈕後** ![](https://i.imgur.com/vkOYPAT.jpg) **點選6號學生"查看"按鈕後** ![](https://i.imgur.com/3MkYAgO.jpg) **按下"修改"按鈕後** ![](https://i.imgur.com/xw2BDAx.jpg) **畫面變成了修改模式, 將名字改成Camiol Chuang 數學成績改成 100,按下"確認修改"按鈕** ![](https://i.imgur.com/YlnNAYy.jpg) **回到了一開始的hello.jsp畫面,並且跳出修改成功提示文字** ![](https://i.imgur.com/U1E0GPh.jpg) **再次點選"列出全部學生"按鈕,去查詢剛剛的6號學生資料** ![](https://i.imgur.com/7CRHM0s.jpg) **可以看到資料已被修正過** ![](https://i.imgur.com/EUvXLhE.jpg) **以上就是STEP-BY-STEP 詳細的SpringMVC專案從前端到後端的完整建置步驟!** ###### tags: `Spring MVC`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.