EasyMall 項目記錄-環境搭建

本文轉載自查看原文 2018-09-16 11:59 1356 Java-Web

一、搭建項目運行的環境

（1）修改hosts文件

更改：C:\Windows\System32\drivers\etc目錄下hosts文件

添加：127.0.0.1 www.easymall.com

（2）配置虛擬主機

在tomcat的conf/server.xml中配置一個新的虛擬主機

添加：<Host name="www.easymall.com"appBase="E:\web\www.easymall.com"></Host>

（3）映射虛擬路徑

在E盤下創建一個www.easymall.com文件夾，文件夾是空的，但是必須創建，如果不配置，那么訪問的就是默認的webapps目錄。

（4）在eclipse中創建EasyMall項目

（5）虛擬主機關聯EasyMall這個Web應用

先把工程部署到tomcat服務器上，tomcat文件夾里面會自動生成一個www.easymall.com文件夾，在文件夾里面創建ROOT.xml文件

創建：D:\Jave-Web\課前資料\tomcat\tomcat-7\conf\Catalina\www.easymall.com\ROOT.xml

添加：<Context docBase="D:\workspace-web\myeclipse\EasyMall\WebRoot" />

docBase指向的路徑為D:\workspace-web\myeclipse\EasyMall\WebRoot

ROOT.xml可以將EasyMall配置成www.easymall.com虛擬主機的默認web應用

這種配置的情況下，在MyEclipse中不再需要發布EasyMall項目

因為發布項目默認是將EasyMall項目中的WebRoot文件夾發送到tomcat的webapps文件夾下，相當於為localhost配置一個web應用

二、將項目的頁面導入，變成jsp頁面

（1）導入資源

將這四個文件里面的文件復制到EasyMall工程里面

復制完成之后

（2）創建jsp文件

創建_foot.jsp, _head.jsp, regist.jsp三個文件，並將_foot.html, _head.html, regist.html文件中的內容對應的復制進去，並把index.html文件中的內容復制到index.jsp里面

然后刪除所有html文件，只保留jsp文件

此時四個文件里面的內容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/index.css"/>
        <title>歡迎光臨EasyMall</title>
    </head>
    <body>
        <div id="index">
            <div id="line1">
                <img src="img/index/banner_big.jpg"/>
            </div>
            <div id="line2">
                <img id="line2_1" src="img/index/adv1.jpg"/>
                <img id="line2_2" src="img/index/adv2.jpg"/>
                <img id="line2_3" src="img/index/adv_l1.jpg"/>
            </div>
            <div id="line3">
                <img id="line3_1" src="img/index/adv3.jpg"/>
                <img id="line3_2" src="img/index/adv4.jpg"/>
                <div id="line3_right">
                    <img id="line3_3" src="img/index/adv_l2.jpg"/>
                    <img id="line3_4" src="img/index/adv_l3.jpg"/>
                </div>
            </div>
            <div id="line4">
                <img src="img/index/217.jpg"/>
            </div>
            <div id="line5">
                <span id="line5_1">
                    <img src="img/index/icon_g1.png"/>&nbsp;&nbsp;500強企業 品質保證
                </span>
                <span id="line5_2">
                    <img src="img/index/icon_g2.png"/>&nbsp;&nbsp;7天退貨 15天換貨 
                </span>
                <span id="line5_3">
                    <img src="img/index/icon_g3.png"/>&nbsp;&nbsp;100元起免運費 
                </span>
                <span id="line5_4">
                    <img src="img/index/icon_g4.png"/>&nbsp;&nbsp;448家維修網點 全國聯保 
                </span>
            </div>
        </div>
    </body>
</html>

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/foot.css"/>
<div id="common_foot">
    <p>
        Copyright © 2011-2015 達內軟件技術有限公司 版權所有 保留一切權利 蘇B2-20130048號 | 京ICP備09062682號-9
        <br>
        網絡文化經營許可證蘇網文[2012]0401-019號
    </p>
</div>

_foot.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<link rel="stylesheet" href="css/head.css"/>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<div id="common_head">
    <div id="line1">
        <div id="content">
            <a href="#">登錄</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">注冊</a>
        </div>
    </div>
    <div id="line2">
        <img id="logo" src="img/head/logo.jpg"/>
        <input type="text" name=""/>
        <input type="button" value="搜 索"/>
        <span id="goto">
            <a id="goto_order" href="#">我的訂單</a>
            <a id="goto_cart" href="#">我的購物車</a>
        </span>
        <img id="erwm" src="img/head/qr.jpg"/>
    </div>
    <div id="line3">
        <div id="content">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">手機數碼</a></li>
                <li><a href="#">電腦平板</a></li>
                <li><a href="#">家用電器</a></li>
                <li><a href="#">汽車用品</a></li>
                <li><a href="#">食品飲料</a></li>
                <li><a href="#">圖書雜志</a></li>
                <li><a href="#">服裝服飾</a></li>
                <li><a href="#">理財產品</a></li>
            </ul>
        </div>
    </div>
</div>

_head.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
    <head>
        <title>歡迎注冊EasyMall</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/regist.css"/>
    </head>
    <body>
        <form action="#" method="POST">
            <h1>歡迎注冊EasyMall</h1>
            <table>
                <tr>
                    <td class="tds">用戶名：</td>
                    <td>
                        <input type="text" name="username"/>
                    </td>
                </tr>
                <tr>
                    <td class="tds">密碼：</td>
                    <td>
                        <input type="password" name="password"/>
                    </td>
                </tr>
                <tr>
                    <td class="tds">確認密碼：</td>
                    <td>
                        <input type="password" name="password2"/>
                    </td>
                </tr>
                <tr>
                    <td class="tds">昵稱：</td>
                    <td>
                        <input type="text" name="nickname"/>
                    </td>
                </tr>
                <tr>
                    <td class="tds">郵箱：</td>
                    <td>
                        <input type="text" name="email"/>
                    </td>
                </tr>
                <tr>
                    <td class="tds">驗證碼：</td>
                    <td>
                        <input type="text" name="valistr"/>
                        <img src="img/regist/yzm.jpg" width="" height="" alt="" />
                    </td>
                </tr>
                <tr>
                    <td class="sub_td" colspan="2" class="tds">
                        <input type="submit" value="注冊用戶"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

regist.jsp

（3）查看結果

啟動tomcat服務器，打開谷歌瀏覽器，輸入www.easymall.com，回車

三、在index.jsp中引入_head.jsp和_foot.jsp的內容

雖然瀏覽時看見頁面，但是我們發現頁面中只有index文件里面的內容，並沒有_foot，_head兩個文件的內容，此時我們要修改一下index文件

（1）修改index.jsp文件，引入_head.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" buffer="0kb" %>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/index.css"/>
        <title>歡迎光臨EasyMall</title>
    </head>
    <body>
    <!-- JSP的腳本片段，允許在jsp中執行java代碼,引入_head.jsp中的內容 -->
    <% 
        request.getRequestDispatcher("/_head.jsp").include(request, response);
    %>
        <div id="index">
            <div id="line1">
                <img src="img/index/banner_big.jpg"/>
            </div>
            <div id="line2">
                <img id="line2_1" src="img/index/adv1.jpg"/>
                <img id="line2_2" src="img/index/adv2.jpg"/>
                <img id="line2_3" src="img/index/adv_l1.jpg"/>
            </div>
            <div id="line3">
                <img id="line3_1" src="img/index/adv3.jpg"/>
                <img id="line3_2" src="img/index/adv4.jpg"/>
                <div id="line3_right">
                    <img id="line3_3" src="img/index/adv_l2.jpg"/>
                    <img id="line3_4" src="img/index/adv_l3.jpg"/>
                </div>
            </div>
            <div id="line4">
                <img src="img/index/217.jpg"/>
            </div>
            <div id="line5">
                <span id="line5_1">
                    <img src="img/index/icon_g1.png"/>&nbsp;&nbsp;500強企業 品質保證
                </span>
                <span id="line5_2">
                    <img src="img/index/icon_g2.png"/>&nbsp;&nbsp;7天退貨 15天換貨 
                </span>
                <span id="line5_3">
                    <img src="img/index/icon_g3.png"/>&nbsp;&nbsp;100元起免運費 
                </span>
                <span id="line5_4">
                    <img src="img/index/icon_g4.png"/>&nbsp;&nbsp;448家維修網點 全國聯保 
                </span>
            </div>
        </div>
        
    <!-- 引入 _foot.jsp中的內容-->
    <% 
        request.getRequestDispatcher("/_foot.jsp").include(request, response);
    %>
    </body>
</html>

效果：

四、修改_head.jsp內容，讓注冊的超鏈接正常跳轉 regist.jsp頁面

此時頁面布局正常了，但是點擊注冊按鈕並不能彈出注冊界面

需要修改_head.jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<link rel="stylesheet" href="css/head.css"/>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<div id="common_head">
    <div id="line1">
        <div id="content">
            <a href="#">登錄</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <!-- 由於當前項目是虛擬主機的默認web應用，因此項目映射的URL應該是“” -->
            <!-- <a href="/EasyMall/regist.jsp">注冊</a> -->
            <a href="/regist.jsp">注冊</a>
        </div>
    </div>
    <div id="line2">
        <img id="logo" src="img/head/logo.jpg"/>
        <input type="text" name=""/>
        <input type="button" value="搜 索"/>
        <span id="goto">
            <a id="goto_order" href="#">我的訂單</a>
            <a id="goto_cart" href="#">我的購物車</a>
        </span>
        <img id="erwm" src="img/head/qr.jpg"/>
    </div>
    <div id="line3">
        <div id="content">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">手機數碼</a></li>
                <li><a href="#">電腦平板</a></li>
                <li><a href="#">家用電器</a></li>
                <li><a href="#">汽車用品</a></li>
                <li><a href="#">食品飲料</a></li>
                <li><a href="#">圖書雜志</a></li>
                <li><a href="#">服裝服飾</a></li>
                <li><a href="#">理財產品</a></li>
            </ul>
        </div>
    </div>
</div>

完成

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue項目環境搭建（webpack4從零搭建）--僅個人記錄自己記錄java環境搭建之-maven 1、大型項目的接口自動化實踐記錄--robotframework環境搭建 appium環境搭建及項目實戰 vue項目環境搭建及運行 Erlang學習記錄(一)——Windows下的環境搭建 ubuntu搭建php開發環境記錄記錄nginx 搭建集群環境踏過的坑 vue項目ide（vue項目環境搭建） mall商城項目搭建過程記錄