環(huán)境搭建

1.項目工具

本項目涉及到的工具都有在云盤提供，自行下載即可

• JDK8

• IDEA2021

• Tomcat8.5

• MySQL的客戶端工具SQLYog

• ...

2.項目搭建

通過IDEA創(chuàng)建maven項目。勾選腳手架工具。選擇maven-archetype-webapp

設(shè)置項目的基礎(chǔ)信息

3.基本配置

3.1 JDK配置

JDK使用的是JDK8。我們也需要配置下：在File中選擇 Project Structure

然后指定JDK版本即可

3.2 Maven配置

Maven會管理我們的相關(guān)jar包依賴。需要去中央倉庫下載相關(guān)的jar。但是中央倉庫在國外。下載速度很慢。這時我們需要添加下阿里云的鏡像地址。我們先找到Maven的配置信息

然后把提前給大家準(zhǔn)備的settings.xml文件放到該目錄下即可

3.3 Tomcat配置

Tomcat是我們的基礎(chǔ)Web環(huán)境。先通過提供的Tomcat壓縮文件。在本地解壓縮一個Tomcat環(huán)境。我就在E盤的Tomcat目錄下放了一個Tomcat8.5的環(huán)境。

然后在IDEA中配置Tomcat，點擊下圖中的Add Configuration 彈出下面的窗口。

然后點擊左側(cè)的Add new ...

得到下面的窗口。然后配置Tomcat8的環(huán)境

然后需要選擇下需要部署的項目

把項目的應(yīng)用路徑統(tǒng)一設(shè)置為/

Tomcat服務(wù)界面介紹

啟動Tomcat服務(wù)出現(xiàn)端口被占的情況。我們修改端口即可

看到如下的界面。表示Tomcat配置成功

啟動Tomcat在控制臺看到的亂碼情況，我們只需要調(diào)整下配置文件中的編碼方式

調(diào)整logging.properties中的如下編碼方式為GBK即可

搞定

4.項目結(jié)構(gòu)

項目是一個Maven項目。所以我們需要創(chuàng)建相關(guān)的目錄結(jié)構(gòu)。比如java 和 resources

項目結(jié)構(gòu)介紹

• java：存放相關(guān)的java代碼

• resources： 存放相關(guān)的配置文件

• webapp：web資源【圖片、css、js、jsp文件】

• target：運行時的編譯目錄

• pom.xml：maven的核心文件，我們需要添加的相關(guān)的依賴都是在該文件中配置的

5.添加依賴

然后我們可以在pom.xml中添加如下的相關(guān)依賴

注意添加了依賴后我們一定要加載依賴

看到下面信息表示添加成功

6.整合靜態(tài)資源

6.1 整合登錄頁面

前端頁面展示這塊我們就通過已經(jīng)準(zhǔn)備好的頁面靜態(tài)文件來實現(xiàn)，我們先把相關(guān)的文件導(dǎo)入進(jìn)去。先來看看頁面效果。

登錄頁面效果：

首先我們需要拷貝相關(guān)的靜態(tài)資源文件

• css

• js

• 圖片

• 插件

然后在webapp目錄下創(chuàng)建login.jsp文件。然后把靜態(tài)資源文件中的login-v2.html中的HTML代碼拷貝到login.jsp文件中。

如果要修改登錄頁面的背景圖片。你只需要添把更新的圖片保存到webapp/img目錄中。同時覆蓋文件名login-background.jpg

然后搞定！

6.2 整合首頁頁面

先來看下主頁面的布局效果

然后我們需要在webapp目錄下創(chuàng)建兩個jsp文件[main.jsp、home.jsp]

然后分別把模板資源中的index.html中的代碼拷貝到main.jsp中。然后把index_v2.html中的資源拷貝到home.jsp中。同時修改main.jsp中對首頁資源的訪問從原來的index_v2.html修改為home.jsp即可.

搞定！