0. 項(xiàng)目基本需求:

1稿辙、實(shí)現(xiàn)用戶的注冊(cè)與登錄昆码。
2、相冊(cè)管理邻储，圖片上傳赋咽，圖片標(biāo)注，圖片瀏覽
3芥备、相冊(cè)分類管理
4冬耿、相片分享，調(diào)用微博萌壳、微信的分享功能分享到互聯(lián)網(wǎng)

最終效果演示：

Animation.gif

增加相冊(cè):

createAlbum_2.png

album_2.png

改相冊(cè)名:

editAlbumName.png

Coffe.png

1.架構(gòu)選型和設(shè)計(jì)

注冊(cè)亦镶、登錄流程.png

ER.png

1.1 前端

使用 Vue 和 element-ui -2.2 實(shí)現(xiàn)的SPA應(yīng)用

1.2 后端

使用Java 的Spring boot 框架 , 數(shù)據(jù)庫(kù)層使用的是MongoDb

1.2.1 實(shí)現(xiàn):

• Java負(fù)責(zé)提供處理圖片的RESTful API
• 上傳到永久化存儲(chǔ)的阿里云OSS .
• 上傳后進(jìn)行壓縮(分別是 原圖/ 720P / 預(yù)覽圖)和保存圖片相關(guān)信息(如原圖,720P,預(yù)覽圖的OSS保存地址,文件上傳時(shí)間, 寬度,高度)

2. 代碼編寫(xiě)

2.1 前提知識(shí)儲(chǔ)備

element-ui 文檔
http://element.eleme.io/

webpack零基礎(chǔ)入門(mén)
http://webpackbook.rails365.net/467000

vue 文檔
https://cn.vuejs.org/

2.2 前端構(gòu)建

首先是 登錄界面 :

login.png

可以自適應(yīng):

login-2.png

這里說(shuō)一下登錄邏輯:
通過(guò)向后臺(tái)發(fā)起登錄請(qǐng)求，該請(qǐng)求帶著登錄的賬號(hào)和密碼兩個(gè)參數(shù)袱瓮，如果請(qǐng)求成功的話缤骨，服務(wù)器會(huì)返回以下JSON信息：

{ msg: "login success", status: "1", token: "588e51e77f1b4b96b3eee0469344d994" }

對(duì)應(yīng)的后臺(tái)API處理邏輯如下:

    @PostMapping("login")
    public JSONObject login(HttpSession session,@RequestBody Map<String,String> reqMap){
        JSONObject msg;

        User user=new User();
        user.setAccount(reqMap.get("account"));
        user.setPassword(reqMap.get("password"));


        if(userDao.checkUserAccountPwd(user)){
            String token=Tools.GetGUID();
            msg=Tools.makeMsgJSON("login success","1",token);
            session.setAttribute("account",user.getAccount());
            session.setAttribute("token",token);

        }else{
            msg=Tools.makeMsgJSON("fail","0","");
        }
        return msg;

    }

前端發(fā)起請(qǐng)求使用了 axios 發(fā)起ajax:
若獲取到status為1則將 token 存儲(chǔ)到sessionStorage 中，然后使用 $router.push() 跳轉(zhuǎn)頁(yè)面

login.vue

  methods:{
      login(){
          this.$refs["loginForm"].validate((valid) => {
              if(valid){
                  axios.post("/api/login",this.loginForm).then(res=>{
                      console.log(res);
                     
                      if(res.data.status==="0"){
                          this.$message({
                            message: '對(duì)不起,賬號(hào)或密碼錯(cuò)誤',
                            type: 'error'
                            });
                      }else{
                          sessionStorage.setItem("account",res.data.token);
                          this.$router.push("/album");
                      }
                    });
                }else{
                    return false;
                }
        });
      },
  }
};

關(guān)于相冊(cè)集的CSS樣式

Coffe.png

類似于多卡片堆疊的效果是通過(guò)設(shè)置 多層 box-shadow 來(lái)實(shí)現(xiàn)的:

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 
            0 8px 0 -3px #f6f6f6, 
            0 9px 1px -3px rgba(0, 0, 0, 0.2),
            0 16px 0 -6px #f6f6f6,
            0 17px 2px -6px rgba(0, 0, 0, 0.2);

防止跨域

這里注意一點(diǎn)就是 , webpack 服務(wù)器是 8080 端口 ,而API的后端服務(wù)器則是 9090端口 尺借，由于瀏覽器禁止跨域绊起，所以前端請(qǐng)求 /api/login的時(shí)候，需要把它轉(zhuǎn)發(fā)到 服務(wù)器端口的 /api/login中 ,這里需要在 前端項(xiàng)目根目錄config 中的index.js中 添加 ProxyTable:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
    dev: {

        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:9090/api/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
}

2.3 后端構(gòu)建

后端項(xiàng)目結(jié)構(gòu)一覽

相冊(cè)需要相冊(cè)集管理燎斩，所以在實(shí)體類中需要 Album 和 Photo 類,
然后分別為它們實(shí)現(xiàn) DAO接口類
相應(yīng)地建立增刪改查的DAO實(shí)現(xiàn)類

最后在 ApiController 響應(yīng) Http 請(qǐng)求即可

項(xiàng)目結(jié)構(gòu)：

album-photo-project.png

數(shù)據(jù)庫(kù) 使用的是 MongoDB , 本項(xiàng)目連接到的是 /test 數(shù)據(jù)庫(kù)

mongodb.png

以Album相冊(cè)集的增刪改操作 作為示例
建立對(duì)應(yīng)的 實(shí)體類 虱歪， 接口類 ， 實(shí)現(xiàn)類 ：

實(shí)體類 Album:

public class Album {
    private String albumName;
    private String userAccount;
    private String albumPreviewURL;

    public Album(String albumName, String userAccount, String albumPreviewURL) {
        this.albumName = albumName;
        this.userAccount = userAccount;
        this.albumPreviewURL = albumPreviewURL;
    }
// 省略一系列的getter栅表、setter
}

Album DAO 接口類

package com.hjg.demo.DAO;

import com.hjg.demo.Entity.Album;

public interface AlbumDao {
    public void createAlbum(Album album);
    public String findAllAlbum(String account);
    public void updateAlbumName(String oldValue,String newValue,String account);
    public void deleteAlbum(String AlbumName,String account);
}

Album DAO Impl 實(shí)現(xiàn)類

@Component
public class AlbumDaoImpl implements AlbumDao {
    @Autowired
    MongoTemplate mongoTemplate;

    @Autowired
    private PhotoDao photoDao;

    @Override
    public void createAlbum(Album album) {
        Query query=new Query(Criteria.where("albumName").is(album.getAlbumName()));
        Album isExistedAlbum=mongoTemplate.findOne(query,Album.class);
        if (isExistedAlbum==null){
            mongoTemplate.save(album);
        }

    }


    public String findAllAlbum(String account) {
        Query query=new Query(Criteria.where("userAccount").is(account));
        List<Album> list=mongoTemplate.find(query,Album.class);
        String rs= JSONArray.fromObject(list).toString();
        return rs;

    }

    @Override
    public void updateAlbumName(String oldAlbumName,String newAlbumName,String account) {
        Query query=new Query(Criteria.where("userAccount").is(account).and("albumName").is(oldAlbumName));
        Update update=new Update().set("albumName",newAlbumName);
        mongoTemplate.updateFirst(query,update,Album.class);

        //同時(shí)更新該相冊(cè)內(nèi)的圖片
        photoDao.updatePhotoAlbumName(oldAlbumName,newAlbumName,account);
    }


    @Override
    public void deleteAlbum(String AlbumName,String account) {
        Query query=new Query(Criteria.where("userAccount").is(account).and("albumName").is(AlbumName));
        mongoTemplate.remove(query,Album.class);

    }
}

然后是 Api中的代碼:

@RestController
@RequestMapping("/api")
public class ApiController {

    @Autowired
    private UserDao userDao;

    @Autowired
    private AlbumDao albumDao;

    @Autowired
    private PhotoDao photoDao;

    @RequestMapping("getAlbumList")
    public String getAlbumList(HttpSession session){
        String account=session.getAttribute("account").toString();
        return albumDao.findAllAlbum(account);

    }

    @RequestMapping("editAlbumName")
    public JSONObject editAlbumName(HttpSession session,@RequestBody Map<String,String> reqMap){
        String account=session.getAttribute("account").toString();

        albumDao.updateAlbumName(
                reqMap.get("oldAlbumName").toString(),
                reqMap.get("newAlbumName").toString(),
                session.getAttribute("account").toString()
        );
        return Tools.makeMsgJSON("修改成功","1","");
    }

    @RequestMapping("addAlbum")
    public  JSONObject addAlbum(HttpSession session,@RequestBody Map<String ,String > reqMap){
        String account=session.getAttribute("account").toString();
        String albumPreviewURL=reqMap.get("albumPreviewURL");
        albumPreviewURL=albumPreviewURL==""? "http://placehold.it/600x300/cdcdcd/ffffff?text=ORZ":albumPreviewURL;

        Album album=new Album(reqMap.get("albumName"),session.getAttribute("account").toString(),albumPreviewURL);


        albumDao.createAlbum(album);

        return Tools.makeMsgJSON("添加成功","1","");
    }

    @RequestMapping("deleteAlbum")
    public  JSONObject deleteAlbum(HttpSession session,@RequestBody Map<String ,String > reqMap){
        String account=session.getAttribute("account").toString();
        albumDao.deleteAlbum(reqMap.get("albumName"),account);

        return Tools.makeMsgJSON("刪除成功","1","");
    }

上傳文件:

原有思路是通過(guò)上傳到服務(wù)器然后再上傳到 阿里云 OSS ,但是這樣一來(lái)一回會(huì)耗費(fèi)兩層流量,所以采用的是在用戶端直傳到阿里云OSS , 為了安全性 ,所以需要 服務(wù)器端的簽名.

采用官方給出的DEMO:
主要簽名邏輯如下:

    public JSONObject getSignature(){
        JSONObject sign=null;
        try {

            long expireTime = 30;
            long sysTime=System.currentTimeMillis();
            long expireEndTime = sysTime + expireTime * 1000;
            Date expiration = new Date(expireEndTime);


            //條件限制
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);

            //計(jì)算出簽名
            String postSignature = client.calculatePostSignature(postPolicy);

            //返回簽名等參數(shù)
            Map<String, String> respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessKeyId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            respMap.put("sysTime",String.valueOf(sysTime/1000));
            sign = JSONObject.fromObject(respMap);
            System.out.println(sign.toString());

        }catch (Exception e){
            e.printStackTrace();
        }
        return sign;
    }

然后發(fā)現(xiàn)了很煩人的事情 , 因?yàn)闆](méi)有回調(diào).
從官方文檔中想要獲取回調(diào) , OSS會(huì)主動(dòng)向服務(wù)器發(fā)起回調(diào)信息 , 所以對(duì)于沒(méi)有公網(wǎng)IP的本地調(diào)試服務(wù)器來(lái)說(shuō)非常不方便.

無(wú)奈之下,只能先上傳到服務(wù)器中,獲取圖片相關(guān)信息,如圖片歸屬人,圖片歸屬相冊(cè)集,寬高大小等等信息保存到本地?cái)?shù)據(jù)庫(kù)后再上傳到OSS.

在啟動(dòng)程序中加入:

package com.hjg.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.MultipartConfigFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.session.data.mongo.config.annotation.web.http.EnableMongoHttpSession;

import javax.servlet.MultipartConfigElement;

@SpringBootApplication
@EnableMongoHttpSession
public class AlbumPhotoApplication {

    public static void main(String[] args) {
        SpringApplication.run(AlbumPhotoApplication.class, args);
    }

    @Bean
    public MultipartConfigElement multipartConfigElement() {

        MultipartConfigFactory factory = new MultipartConfigFactory();

        //// 設(shè)置文件大小限制 ,超了笋鄙，頁(yè)面會(huì)拋出異常信息，這時(shí)候就需要進(jìn)行異常信息的處理了;

        factory.setMaxFileSize("15MB"); //KB,MB

        /// 設(shè)置總上傳數(shù)據(jù)總大小

        factory.setMaxRequestSize("100MB");

        //Sets the directory location where files will be stored.

//      factory.setLocation("./tmp/upload");
        factory.setLocation("G:/spring-boot-examples-master/album-photo/tmp/");

        return factory.createMultipartConfig();

    }

}

API Controller 中獲取表單的圖片上傳怪瓶，然后使用element-ui的上傳組件,上傳地址填入 /api/uploadPhoto 即可:

    @PostMapping("uploadPhoto")
    public String uploadPhoto(HttpSession session, HttpServletRequest req,String albumName){
        String account=session.getAttribute("account").toString();
//        String albumName=albumName;
        String path=account;

        //上傳到阿里云
        List<MultipartFile> files=((MultipartHttpServletRequest) req).getFiles("file");
        AlbumOSS albumOSS=new AlbumOSS();
        albumOSS.UploadFiles(files,path);

        //保存圖片到數(shù)據(jù)庫(kù)
        for (MultipartFile file:files){
            photoDao.savePhoto(account,albumName,path+"/"+file.getOriginalFilename());
        }
        return "ok";
    }

前端:

<el-upload
  class="upload-demo"
  action="/api/uploadPhoto"
  :data="uploadParams"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleUploadSuccess"
  :before-remove="beforeRemove"
  multiple
  :file-list="fileList">

  <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
</el-upload>

3. 測(cè)試

3.1 測(cè)試單元

image.png

以 AlbumDaoImpl 的測(cè)試類為實(shí)例:

package com.hjg.demo.DAO;

import com.hjg.demo.Entity.Album;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

@RunWith(SpringRunner.class)
@SpringBootTest
public class AlbumDaoImplTest {
    @Autowired
    private AlbumDao albumDao;

    @Test
    public void createAlbum() throws Exception {
        Album album=new Album("人像","123","http://placehold.it/600x300/45a2ff/ffffff?text=人像");
        albumDao.createAlbum(album);
    }

    @Test
    public void updateAlbumName() throws Exception {
        albumDao.updateAlbumName("風(fēng)景","卡通","123");
//        albumDao.updateAlbumName();
    }
    @Test
    public void findAllAlbum() throws Exception{
        String rs=albumDao.findAllAlbum("123");
        System.out.println(rs);

    }

    @Test
    public void deleteAlbum() throws Exception {
        albumDao.deleteAlbum("卡通","123");
    }

}

4. 部署

4.1 安裝:

部署環(huán)境：

① 基礎(chǔ)的 JDK 環(huán)境 : Java 1.8
② Web 服務(wù)器: Tomcat
③ 數(shù)據(jù)庫(kù): Mongodb

JDK 1.8

在命令行模式下載壓縮包：
* cd /opt
* sudo wget http://211.138.156.198:82/1Q2W3E4R5T6Y7U8I9O0P1Z2X3C4V5B/download.oracle.com/otn-pub/java/jdk/8u72-b15/jdk-8u72-linux-x64.tar.gz

• 默認(rèn) CentOS 有安裝 openJDK萧落，建議先卸載掉

  • 檢查 JDK 命令：java -version
  • 查詢本地 JDK 安裝程序情況； rpm -qa|grep java

    • 查詢出來(lái)的結(jié)果如下：

      java-1.6.0-openjdk-1.6.0.38-1.13.10.0.el6_7.x86_64
      java-1.7.0-openjdk-1.7.0.95-2.6.4.0.el6_7.x86_64
      tzdata-java-2015g-2.el6.noarch
      

    • 卸載上面三個(gè)文件（--nodeps 的作用：忽略依賴的檢查）：

    • sudo rpm -e --nodeps java-1.6.0-openjdk-1.6.0.38-1.13.10.0.el6_7.x86_64

    • sudo rpm -e --nodeps java-1.7.0-openjdk-1.7.0.95-2.6.4.0.el6_7.x86_64

    • sudo rpm -e --nodeps tzdata-java-2015g-2.el6.noarch

• JDK 1.8 安裝

  • 以安裝 jdk-8u72-linux-x64.tar.gz 為例
  • 在 /usr 目錄下創(chuàng)建一個(gè) program 用來(lái)存放各種解壓后的軟件包
  • 使用第三方源：EPEL洗贰、RepoForge找岖，如果出現(xiàn) yum install XXXXX 安裝不成功的話，很有可能就是沒(méi)有相關(guān)源
  • 解壓安裝包：sudo tar -zxvf jdk-8u72-linux-x64.tar.gz
  • 移到解壓包到安裝目錄下：mv jdk1.8.0_72/ /usr/program/
  • 配置環(huán)境變量：

    • 編輯配置文件：sudo vim /etc/profile

    • 在該文件的最尾巴敛滋，添加下面內(nèi)容：

        JAVA_HOME=/usr/program/jdk1.8.0_72
        JRE_HOME=$JAVA_HOME/jre
        PATH=$PATH:$JAVA_HOME/bin
        CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
        export JAVA_HOME
        export JRE_HOME
        export PATH
        export CLASSPATH
      

    • 執(zhí)行命令许布，刷新該配置（必備操作）：source /etc/profile

    • 檢查是否使用了最新的 JDK：java -version

Linux平臺(tái)安裝MongoDB

MongoDB 提供了 linux 各發(fā)行版本 64 位的安裝包，可以在官網(wǎng)下載安裝包绎晃。

下載完安裝包爹脾，并解壓 tgz 帖旨。

curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0.6.tgz    # 下載 tar -zxvf mongodb-linux-x86_64-3.0.6.tgz  # 解壓 mv  mongodb-linux-x86_64-3.0.6/ /usr/local/mongodb # 將解壓包拷貝到指定目錄

MongoDB 的可執(zhí)行文件位于 bin 目錄下，所以可以將其添加到 PATH 路徑中：

export PATH=<mongodb-install-directory>/bin:$PATH

<mongodb-install-directory> 為MongoDB 的安裝路徑灵妨。如/usr/local/mongodb 。

創(chuàng)建數(shù)據(jù)庫(kù)目錄

MongoDB的數(shù)據(jù)存儲(chǔ)在data目錄的db目錄下落竹，但是這個(gè)目錄在安裝過(guò)程不會(huì)自動(dòng)創(chuàng)建泌霍，所以需要手動(dòng)創(chuàng)建data目錄，并在data目錄中創(chuàng)建db目錄述召。

以下將data目錄創(chuàng)建于根目錄下(/)朱转。

注意：/data/db 是 MongoDB 默認(rèn)的啟動(dòng)的數(shù)據(jù)庫(kù)路徑(--dbpath)。

mkdir -p /data/db

命令行中運(yùn)行 MongoDB 服務(wù)

在命令行中執(zhí)行mongo安裝目錄中的bin目錄執(zhí)行mongod命令來(lái)啟動(dòng)mongdb服務(wù)积暖。

注意：如果數(shù)據(jù)庫(kù)目錄不是/data/db藤为，可以通過(guò) --dbpath 來(lái)指定。

$ ./mongod 2015-09-25T16:39:50.549+0800 I JOURNAL [initandlisten] journal dir=/data/db/journal 
2015-09-25T16:39:50.550+0800 I JOURNAL [initandlisten] recover :  no journal files present,  no recovery needed 
2015-09-25T16:39:50.869+0800 I JOURNAL [initandlisten] preallocateIsFaster=true  3.16  
2015-09-25T16:39:51.206+0800 I JOURNAL [initandlisten] preallocateIsFaster=true  3.52  
2015-09-25T16:39:52.775+0800 I JOURNAL [initandlisten] preallocateIsFaster=true  7.7

Tomcat8

先進(jìn)入home目錄下夺刑，創(chuàng)建tomcat8文件夾

[root@hjg /]# cd home
[root@hjg home]# mkdir tomcat8
[root@hjg home]# ls

然后將apache-tomcat-8.5.8.tar.gz復(fù)制到新創(chuàng)建的文件夾中缅疟，解壓文件

[root@hjg tomcat8]# tar -zvxf apache-tomcat-8.5.8.tar.gz

解壓之后，進(jìn)入解壓的文件

[root@hjg apache-tomcat-8.5.8]# ls
bin  conf  lib  LICENSE  logs  NOTICE  RELEASE-NOTES  RUNNING.txt  temp  webapps  work

bin目錄中存放Tomcat的一些腳本文件遍愿，最重要的也是用的最多就是啟動(dòng)和關(guān)系tomcat服務(wù)腳本存淫。
conf：存放Tomcat服務(wù)器的各種全局配置文件，其中最重要的是server.xml和web.xml
webapps：Tomcat的主要Web發(fā)布目錄沼填，默認(rèn)情況下把Web應(yīng)用文件放于此目錄
logs：存放Tomcat執(zhí)行時(shí)的日志文件

那么進(jìn)入bin目錄將tomcat啟動(dòng)

[root@hjg apache-tomcat-8.5.8]# cd bin
[root@hjg bin]# ./startup.sh
Using CATALINA_BASE:   /home/tomcat8/apache-tomcat-8.5.8
Using CATALINA_HOME:   /home/tomcat8/apache-tomcat-8.5.8
Using CATALINA_TMPDIR: /home/tomcat8/apache-tomcat-8.5.8/temp
Using JRE_HOME:        /usr
Using CLASSPATH:       /home/tomcat8/apache-tomcat-8.5.8/bin/bootstrap.jar:/home/tomcat8/apache-tomcat-8.5.8/bin/tomcat-juli.jar
Tomcat started.

執(zhí)行后發(fā)現(xiàn)最后有提示Tomcat started桅咆，表示服務(wù)已經(jīng)啟動(dòng)。

對(duì)于結(jié)束服務(wù)可以在bin目錄執(zhí)行./shutdown.sh坞笙。也可以使用下面命令

[root@hjg bin]# kill -9 50
[root@hjg bin]# ps -ef|grep tomcat
root      5  5  0 :8 pts/0    00:00:00 grep --color=auto tomcat

kill -9后面的數(shù)字就是服務(wù)的進(jìn)程號(hào)岩饼，如果想啟動(dòng)再次執(zhí)行./shutdown.sh就可以了。再次把服務(wù)打開(kāi)薛夜，然后在本機(jī)訪問(wèn)Linux Tomcat 籍茧，發(fā)現(xiàn)并不能訪問(wèn)，但是在Linxu內(nèi)部的瀏覽器卻是可以的却邓，這種原因一般是防火墻的問(wèn)題硕糊。關(guān)閉下防火墻就可以訪問(wèn)了

[root@hjg sysconfig]# systemctl stop firewalld

安裝好Tomcat后，把jar包直接放到webapps下面

導(dǎo)出項(xiàng)目為jar包

Export To jar.png

部署項(xiàng)目只需要把項(xiàng)目復(fù)制到Tomcat的Webapps下即可腊徙。這也是最簡(jiǎn)單的一種方式简十。如果想更改tomcat服務(wù)接口，那么可以到tomcat下的conf目錄撬腾，里面有個(gè)server.xml文件螟蝙。重要的配置信息在這里

  <Connector port="8080" protocol="HTTP/."
               connectionTimeout="0000"
               redirectPort="8" />
  <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">