網頁

2018/3/8

在Eclipse使用Maven建立Web專案

在Eclipse使用Maven建立Web專案。

範例環境:

  • Eclipse Mars(4.5.0)
  • jdk 1.8(jdk1.8.0_60)
  • Tomcat 8(apache-tomcat-8.0.26)

Eclipse安裝好後,會先將Eclipse做以下設定(可以跳過)。

將Tomcat加入Eclipse

在Eclipse的工具列File -> New -> Others...開啟對話視窗。在Wizards欄位輸入"Maven Project"可以快速找到要建立的[Maven Project]。



點選[Maven Project]後按Next >

[Create a simple project]取消打勾,勾選[Use default Workspace location]然後按Next >



選擇Maven的Archetype,點選[maven-archetype-webapp]然後按Next >

[Group Id]輸入任意名稱,命名方式類似Package,例如com.yourname
[Artifact Id]輸入專案名稱,可任意命名;
[Version]使用預設的0.0.1-SNAPSHOT



Group Id與Artifact Id目的與Java的Package相同,都只是用來區分不同的專案

輸入[Group Id]及[Artifact Id]的同時會自動生成下面的[Package]名稱。完成後按Finish


在Eclipse左側的[Project Explorer]便可以看到新增的Maven專案,專案名稱即為剛剛輸入的Artifact Id,而目錄結構的樣子就是剛剛選擇的Archetype的結構。

此時在src/main/webapp/下的index.jsp有錯誤,先暫時忽略。



接著在專案上按滑鼠右鍵 -> Build Path -> Configure Build Path... -> Java Build Path選擇[Source]頁籤,如果看到springmvc/main/java(missing)及springmvc/test/java(missing)的錯誤,這是因為專案的JRE使用到錯誤版本。



修復方式只要點選[Libraries]頁籤,點選[JRE System Library[J2SE-1.5]]然後選擇右側的Edit



然後將[Execution environment]的版本改為jdk1.8然後按Finish即可修復。



則剛剛遺失的兩個Source會自動生成,專案目錄結構如下。


此時如果在Eclipse下方的[Marker]面板發現新的錯誤如下。
Faceted Project Problem (Java Version Mismatch)
- Java complier level does not match the version of the installed Java project facet.



修復方式為在專案上按滑鼠右鍵 -> Properties -> Project Facets,然後將Java的版本改為1.8然後按Apply



此錯誤是因為專案的Java compiler版本與Project Facet的Java版本不一致。


接著要處理的是index.jsp的錯誤,從Eclipse下方的[Markers]面板中的訊息得知錯誤原因為
The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path



也就是說在Java的Build Path少了HttServlet類別,而其實該類別是由Container例如tomcat來提供,所以修復方式是將Server加入專案的Build Path。

在專案上按滑鼠右鍵 -> Build Path -> Configure Build Path... -> Java Build Path,選擇[Libraries]頁籤,點選Add Library...



選擇[Server Runtime]按Next >



選擇安裝的Server,按Finish。(下圖中有兩個Server是因為我在Eclipse中設定了兩台Server。)



完成後index.jsp錯誤便會消失,到此完成Maven Web專案的建立。


你可能會覺得為什麼這專案的結構和Dynamic Web Project的有點不太一樣,為什麼原本src目錄變成了src/main/javasrc/test/javasrc/main/resources,因為這是Maven的標準目錄結構。

src/main/java用來擺放一般程式碼,例如商業邏輯程式等。;
src/test/java用來擺放測試程式碼,例如單元測試的程式碼;
src/main/resources用來擺放靜態資源例如properties或xml或設定檔等。


接下來在src/main/java建立第一個Servlet程式HelloWorld.java來測試。

src/main/java點滑鼠右鍵 -> New -> Servlet

在[Java package]輸入idv.matt.helloworld
[Class name]輸入HelloWorld
其餘保持預設然後按Finish便建立一個HelloWorld.java



建立好後專案目錄結構如下。



接著將HelloWorld.javadoGet()中的程式內容修改如下。

package idv.matt.helloworld;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class HelloWorld
 */
public class HelloWorld extends HttpServlet {
  private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloWorld() {
        super();
        // TODO Auto-generated constructor stub
    }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.getWriter().append("Hello World! Maven Web"); // <--- 修改這裡
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doGet(request, response);
  }

}

接著在專案上按滑鼠右鍵 -> Run As -> Run on Server來執行專案。

啟動後在瀏覽器輸入http://localhost:8080/springmvc/HelloWorld來測試是否成功。成功畫面如下。



因為Maven自動生成的web.xml為Servlet 2.3很舊,所以可改成目前的Servlet 3.1如下。

<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>Maven Web Project</display-name>
  <servlet>
    <servlet-name>HelloWorld</servlet-name>
    <servlet-class>idv.matt.helloworld.HelloWorld</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>HelloWorld</servlet-name>
    <url-pattern>/HelloWorld</url-pattern>
  </servlet-mapping>
  
</web-app>

接著把Project Facets的Dynamic Web Module也改為3.1,但這邊要到Eclipse的workspace中的專案目錄的.setting目錄中找到org.eclipse.wst.common.project.facet.core.xml來修改,即[workspace]/HelloWorld/.setting/org.eclipse.wst.common.project.facet.core.xml

org.eclipse.wst.common.project.facet.core.xml<installed facet="jst.web" />version改為3.1,修改後如下。

<?xml version="1.0" encoding="UTF-8"?>
<faceted-project>
  <fixed facet="wst.jsdt.web"/>
  <installed facet="jst.web" version="3.1"/><!-- version改為3.1 -->
  <installed facet="wst.jsdt.web" version="1.0"/>
  <installed facet="java" version="1.8"/>
</faceted-project>

接著回到Eclipse的專案然後Refresh一下再到Project Facets項目查看Dynamic Web Module的version就變為3.1了。

最後開啟專案的pom.xml並加入maven-compiler-plugin<build>,確認使用的servlet版本和jdk版本後存檔,存檔後在專案上按滑鼠右鍵 -> Maven -> Update Project...來更新專案的Maven。

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

  <build>
    <finalName>Project Name</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.8</source><!-- source compile Java version -->
          <target>1.8</target><!-- target compile Java version -->
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

參考:

8 則留言:

  1. 對剛學Spring MVC的新手來說受益良多,尤其是一開始環境設定的地方,講解非常仔細,
    完全解決我碰到的問題,超感謝

    回覆刪除
  2. 真的對新手受益良多,非常的感謝。

    回覆刪除
  3. 寫的非常詳細,非常用心
    非常感謝

    回覆刪除
  4. 感謝作者那麼用心解說
    對新手的我而言幫助非常大
    感恩^^

    回覆刪除
  5. Hi,肉豬

    我目前正準備面試,有被提問到Spring MVC相關問題
    照著你的步驟從無到有,讓我更深刻的了解

    謝謝您的分享

    回覆刪除
  6. 大大這個有示意圖嗎?

    找不到在哪裡耶 謝謝



    接著把Project Facets的Dynamic Web Module也改為3.1,但這邊要到Eclipse的workspace中的專案目錄的.setting目錄中找到org.eclipse.wst.common.project.facet.core.xml來修改,即[workspace]/HelloWorld/.setting/org.eclipse.wst.common.project.facet.core.xml。

    回覆刪除
  7. 結果我找到WORKSPACE了 感謝

    回覆刪除
  8. 很有幫助,謝謝分享^^

    回覆刪除