1. 程式人生 > >架構探險-第一章:從一個簡單的Web應用開始

架構探險-第一章:從一個簡單的Web應用開始

一,前言

最近一段時間研究Spring原始碼,買了幾本原始碼相關的書,
這本架構探險,從零開始寫java Web框架,
作者是smartFrameWork開源框架創始人,阿里巴巴架構師,
我目前正在學習這本書,隨即寫成筆記,供自己和他人查閱,
本篇是本書的第一章,簡單的使用IDEA建立了一個web專案
並配置Maven和tomcat將服務執行起來,
並將原始碼託管到開源中國,本文將原始碼託管到了GitHub
(哦,對了,這本書的序言是開源中國創始人紅薯編寫的)

二,使用IDEA構建Maven專案

IDEA預設整合了Maven

點選"Create New Project"
選擇"Maven"點選Next
輸入GroupId,ArtifactId,Version,點選Next
輸入專案名稱,選擇專案檔案路徑,點選Next建立專案

這裡寫圖片描述
這裡寫圖片描述
專案建立完成目錄如下:
這裡寫圖片描述

三,調整Maven配置

專案建立完成自動生成的pom.xml

<?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/xsd/maven-4.0.0.xsd"
>
<modelVersion>4.0.0</modelVersion> <groupId>org.smart4j</groupId> <artifactId>chapter</artifactId> <version>1.0.0</version> </project>

開啟pom.xml檔案,IDEA右上角彈出氣泡

這裡寫圖片描述

1,Import Changes : 
    手動生效
2,Enable Auto-Import : 
    自動生效,當pom檔案發生變化時自動生效

建議使用手動生效方式,這樣能夠確定自己做過那些事情
這裡我們點選Import Changes按鈕,使Maven配置立即生效

為pom.xml新增常用配置:

<?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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.smart4j</groupId>
    <artifactId>chapter</artifactId>
    <version>1.0.0</version>

    <!--1,(必須)需要統一原始碼編碼方式,否則Maven編譯原始碼時會出現警告,選用UTF-8-->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <build>
        <plugins>
            <!--2,(必須)統一原始碼編譯輸出的JDK版本,本例使用JDK 1.6-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.3</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
            <!--3,(可選)使用Maven打包時可跳過單元測試-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.18.1</version>
                <configuration>
                    <skipTests>true</skipTests>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>
所有plugin需要新增到pom.xml檔案中build/plugins標籤下
Maven外掛和依賴都來自於Maven中央倉庫 : http://search.maven.org
當使用手動生效方式時,每次修改pom.xml後需要點選一次Import Changes使配置生效

四,搭建Web專案框架

將新建的Maven專案調整為Web專案結構:

1) main目錄下新增webapp目錄
2) webapp目錄下新增WEB-INF目錄
3) WEB-INF目錄下新增web.xml檔案

這裡寫圖片描述

當在WEB-INF目錄下新增web.xml檔案後,
IDEA識別出項目使用web框架(即Servlet框架),
此時IDEA右上角彈出氣泡,單擊Configure,
彈出對話方塊對專案進行配置,點選OK,
即可將當前專案轉變為Web專案

這裡寫圖片描述

web.xml新增如下程式碼,使用Servlet3.0框架

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http:/java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http:/java.sun.com/xml/ns/javaee 
         http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">

</web-app>
實際上,Servlet3.0框架可以省略web.xml檔案,
可以使用java註解進行配置,無需在web.xml中配置

五,新增Java Web的Maven依賴

Web專案需要打包成war,需要在pom.xml中配置packaging為war(預設為jar)
<!--配置專案的打包方式,預設jar-->
<packaging>war</packaging>

新增java Web所需Servlet,JSP,JSTL等依賴,完整maven配置pom.xml如下:

<?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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.smart4j</groupId>
    <artifactId>chapter</artifactId>
    <version>1.0.0</version>

    <!--配置專案的打包方式,預設jar-->
    <packaging>war</packaging>

    <!--1,(必須)需要統一原始碼編碼方式,否則Maven編譯原始碼時會出現警告,選用UTF-8-->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <!--Servlet provided:只參與編譯,不參與打包(tomcat中也有servlet-api包,會衝突)-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--JSP provided:只參與編譯,不參與打包-->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
        <!--JSTL runtime:執行時生效,不參與編譯-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
            <scope>runtime</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!--2,(必須)統一原始碼編譯輸出的JDK版本,本例使用JDK 1.6-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.3</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
            <!--3,(可選)使用Maven打包時可跳過單元測試-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.18.1</version>
                <configuration>
                    <skipTests>true</skipTests>
                </configuration>
            </plugin>
            <!--通過Maven將應用不是到Tomcat中-->
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <path>/${project.artifactId}</path>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

六,編寫一個簡單的Web應用

1,編寫Servlet類

寫一個HelloServlet,
接收Get請求/hello,
轉發到/WEB-INF/jsp/hello.jsp頁面
hello.jsp頁面顯示系統當前時間

在java目錄下建立包,名為org.smart4j.chapter1,並建立HelloServlet.java

package org.smart4j.chapter1;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * Created by Brave on 18/4/27.
 */
@WebServlet("/hello")//使用註解配置請求路徑,對外發布Servlet服務
public class HelloServlet extends HttpServlet {//繼承HttpSevlet,成為一個HttpSevlet類

    /**
     * 重寫doGet方法,接收Get請求
     */
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // 獲取當前系統時間
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String currentTime = dateFormat.format(new Date());
        // 新增到HttpServletRequest請求物件中
        req.setAttribute("currentTime", currentTime);
        // 轉發至/WEB-INF/jsp/hello.jsp頁面
        req.getRequestDispatcher("/WEB-INF/jsp/hello.jsp").forward(req, resp);
    }
}
使用Servlet3.0框架不需要再web.xml中新增任何配置,使用WebServlet註解即可
還有更多註解API,使專案擁有一個"零配置"的web.xml

2,編寫jsp頁面

在webapp目錄下建立jsp目錄並建立hello.jsp

推薦將JSP放到WEB-INF內部,這樣無法通過瀏覽器地址直接請求放在內部的JSP
必須通過Servlet程式進行轉發(forward)或重定向(redirect)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Hello</title>
</head>
<body>

    <h1>Hello!</h1>
    <%--使用JSTL表示式獲取HelloServlet傳遞的currentTime請求屬性--%>
    <h2>當前時間:${currentTime}</h2>
</body>
</html>

此時的專案目錄如下:
這裡寫圖片描述

3,IDEA中配置tomcat,啟動服務

在IDEA中配置一個Tomcat
1) 點選IDEA工具欄"Edit Configurations..."彈出對話方塊
2) 點選左上角"+"號,選擇TomcatServer->Local選項
3) 輸入Tomcat的Name,取消勾選"After Lunch"選項
4) 單擊Application server下拉框右側"Configure...",配置Tomcat
5) 切換到Deployment選項卡,單擊右邊"+",選擇"Artifact..."選項
6) 彈出的Select Artifact to Deploy對話方塊,選擇chapter1:war exploded
7) 回到Run/Debug Configurations對話方塊,在Application context輸入/chapter1
8)切換回Server,在On frame deactivation下拉框中選擇"Update resource"

IDEA工具欄,選擇RUN或Debug啟動Tomcat並部署Web應用

這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述

啟動服務:

這裡寫圖片描述

這裡寫圖片描述

七,將程式碼放入本地Git倉庫

IDEA找到VCS選單,
點選"Import into Version Control/Create Git Repository..."
彈出對話方塊,選中專案根目錄,點選OK
此時,IDEA在本地建立了一個Git庫,
此時程式碼檔案為紅色,表示未加入版本控制

這裡寫圖片描述

右鍵點選專案根目錄(或在CVS選單下),選擇Git/Add,將專案檔案新增至git版本控制
此時程式碼檔案為綠色,表示已新增版本控制

這裡寫圖片描述

右鍵點選專案根目錄(或在CVS選單下),選擇"Git/Commit Directory..."
填寫Commit Message,點選Commit,提交程式碼到本地Git倉庫
此時程式碼檔案為黑色,表示原生代碼版本和Git相同

這裡寫圖片描述

勾選Optimize imports,可以優化專案import,自動刪除無用的import

八,將程式碼推送至GitHub遠端倉庫

1,在IDEA配置GitHub賬號:
這裡寫圖片描述

2,登陸GitHub建立倉庫,命名為SmartFrameWorkLearn:

https://github.com/BraveWangDev/SmartFrameWorkLearn

3,建立完成將本地倉庫推送至GitHub倉庫:

Brave:chapter1 Brave$ git remote add origin https://github.com/BraveWangDev/SmartFrameWorkLearn.git
Brave:chapter1 Brave$ git push -u origin master

這裡寫圖片描述

4,登陸GitHub程式碼倉庫檢視上傳結果:

這裡寫圖片描述