SSM商城項目（三）

時間 2019-11-18

標籤 ssm 商城項目简体版

原文原文鏈接

1. 學習計劃

一、商品類目選擇css

二、圖片上傳html

a) 圖片服務器FastDFSjava

b) 圖片上傳功能實現node

三、富文本編輯器的使用KindEditorlinux

2. 商品類目選擇

2.1. 原型

2.2. 功能分析

item-add.jsp

經過全局搜索selectItemCat找到，出如今common.jsnginx

    // 初始化選擇類目組件
    initItemCat : function(data){
        $(".selectItemCat").each(function(i,e){
            var _ele = $(e);
            if(data && data.cid){
                _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
            }else{
                _ele.after("<span style='margin-left:10px;'></span>");
            }
            _ele.unbind('click').click(function(){
                $("<div>").css({padding:"5px"}).html("<ul>")
                .window({
                    width:'500',
                    height:"450",
                    modal:true,
                    closed:true,
                    iconCls:'icon-save',
                    title:'選擇類目',
                    onOpen : function(){
                        var _win = this;
                        $("ul",_win).tree({
                            url:'/item/cat/list',
                            animate:true,
                            onClick : function(node){
                                if($(this).tree("isLeaf",node.target)){
                                    // 填寫到cid中
                                    _ele.parent().find("[name=cid]").val(node.id);
                                    _ele.next().text(node.text).attr("cid",node.id);
                                    $(_win).window('close');
                                    if(data && data.fun){
                                        data.fun.call(this,node);
                                    }
                                }
                            }
                        });
                    },
                    onClose : function(){
                        $(this).window("destroy");
                    }
                }).window('open');
            });
        });
    }

展現商品分類列表，使用Eac++

初始化tree請求的url：/item/cat/listweb

參數：正則表達式

初始化tree時只須要把第一級節點展現，子節點異步加載。算法

long id（父節點id）

syUI的tree控件展現。

返回值：json。

數據格式：

[{

"id": 1,

"text": "Node 1",

"state": "closed"

},{

"id": 2,

"text": "Node 2",

"state": "closed"

}]
state：若是節點下有子節點「closed」，若是沒有子節點「open」

建立一個pojo來描述tree的節點信息，包含三個屬性id、text、state。放到e3-common工程中。

package cn.e3mall.common.pojo;

import java.io.Serializable;

public class EasyUITreeNode implements Serializable{
    private long id;
    private String text;
    private String state;
    public long getId() {
        return id;
    }
    public void setId(long id) {
        this.id = id;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public String getState() {
        return state;
    }
    public void setState(String state) {
        this.state = state;
    }
}

查詢的表：

tb_item_cat

查詢列：

Id、name、isparent

查詢條件parentId

2.3. Dao層

tb_item_cat

可使用逆向工程生成的代碼

2.4. Service層

參數：long parentId

業務邏輯：

一、根據parentId查詢節點列表

二、轉換成EasyUITreeNode列表。

三、返回。

返回值：List<EasyUITreeNode>

@Service
public class itemCatServiceImpl implements itemCatService {

    @Autowired
    private TbItemCatMapper itemCatMapper;    
    
    @Override
    public List<EasyUITreeNode> getCatList(long parentId) {
        // 一、根據parentId查詢節點列表
        TbItemCatExample example = new TbItemCatExample();
        //設置查詢條件
        Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(parentId);
        List<TbItemCat> list = itemCatMapper.selectByExample(example);
        // 二、轉換成EasyUITreeNode列表。
        List<EasyUITreeNode> resultList = new ArrayList<>();
        for (TbItemCat tbItemCat : list) {
            EasyUITreeNode node = new EasyUITreeNode();
            node.setId(tbItemCat.getId());
            node.setText(tbItemCat.getName());
            node.setState(tbItemCat.getIsParent()?"closed":"open");
            //添加到列表
            resultList.add(node);
        }
        // 三、返回。
        return resultList;
    }

}

發佈服務

applicationContext-service.xml

2.5. 表現層

2.5.1. 引用服務

springmvc.xml

2.5.2. Controller

初始化tree請求的url：/item/cat/list

參數：

long id（父節點id）

返回值：json。

數據格式：List<EasyUITreeNode>

@Controller
public class ItemCatController {
   @Autowired
   private itemCatService service;
   
   @RequestMapping("/item/cat/list")
   @ResponseBody
   public List<EasyUITreeNode> getItemCatList(@RequestParam(value="id",defaultValue="0")Long parentId){
      return  service.getCatList(parentId);
   }
}

2.6. 測試

把改變過代碼的工程安裝一下（maven install）

啓動兩個tomcat服務器

3. 圖片上傳分析

傳統方式：

集羣環境：

解決方案：

搭建一個圖片服務器，專門保存圖片。可使用分佈式文件系統FastDFS。

4. 什麼是nginx

Nginx是一款高性能的http 服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器。由俄羅斯的程序設計師Igor Sysoev所開發，官方測試nginx可以支支撐5萬併發連接，而且cpu、內存等資源消耗卻很是低，運行很是穩定。

5. 應用場景

一、http服務器。Nginx是一個http服務能夠獨立提供http服務。能夠作網頁靜態服務器。

二、虛擬主機。能夠實如今一臺服務器虛擬出多個網站。例如我的網站使用的虛擬主機。

三、反向代理，負載均衡。當網站的訪問量達到必定程度後，單臺服務器不能知足用戶的請求時，須要用多臺服務器集羣可使用nginx作反向代理。而且多臺服務器能夠平均分擔負載，不會由於某臺服務器負載高宕機而某臺服務器閒置的狀況。

6. nginx安裝

下載nginx：

官方網站：

http://nginx.org/

使用的版本是1.8.0版本。

Nginx提供的源碼。

6.1. 要求的安裝環境

一、須要安裝gcc的環境。yum install gcc-c++

二、第三方的開發包。

PCRE(Perl Compatible Regular Expressions)是一個Perl庫，包括 perl 兼容的正則表達式庫。nginx的http模塊使用pcre來解析正則表達式，因此須要在linux上安裝pcre庫。

yum install -y pcre pcre-devel

注：pcre-devel是使用pcre開發的一個二次開發庫。nginx也須要此庫。

zlib庫提供了不少種壓縮和解壓縮的方式，nginx使用zlib對http包的內容進行gzip，因此須要在linux上安裝zlib庫。

yum install -y zlib zlib-devel

OpenSSL 是一個強大的安全套接字層密碼庫，囊括主要的密碼算法、經常使用的密鑰和證書封裝管理功能及SSL協議，並提供豐富的應用程序供測試或其它目的使用。

nginx不只支持http協議，還支持https（即在ssl協議上傳輸http），因此須要在linux安裝openssl庫。

yum install -y openssl openssl-devel

6.2. 安裝步驟

第一步：把nginx的源碼包上傳到linux系統

第二步：解壓縮

[root@localhost heima]# tar zxf nginx-1.8.0.tar.gz

第三步：進入nginx-1.8.0，使用configure命令建立一makeFile文件。

./configure \

--prefix=/usr/local/nginx \

--pid-path=/var/run/nginx/nginx.pid \

--lock-path=/var/lock/nginx.lock \

--error-log-path=/var/log/nginx/error.log \

--http-log-path=/var/log/nginx/access.log \

--with-http_gzip_static_module \

--http-client-body-temp-path=/var/temp/nginx/client \

--http-proxy-temp-path=/var/temp/nginx/proxy \

--http-fastcgi-temp-path=/var/temp/nginx/fastcgi \

--http-uwsgi-temp-path=/var/temp/nginx/uwsgi \

--http-scgi-temp-path=/var/temp/nginx/scgi

注意：啓動nginx以前，上邊將臨時文件目錄指定爲/var/temp/nginx，須要在/var下建立temp及nginx目錄

[root@localhost sbin]# mkdir /var/temp/nginx/client -p

第四步：make

第五步：make install

6.3. 啓動nginx

進入sbin目錄

[root@localhost sbin]# ./nginx

關閉nginx：

[root@localhost sbin]# ./nginx -s stop

推薦使用：

[root@localhost sbin]# ./nginx -s quit

重啓nginx：

一、先關閉後啓動。

二、刷新配置文件：

[root@localhost sbin]# ./nginx -s reload

6.4. 訪問nginx

默認是80端口。

注意：是否關閉防火牆。

7. 配置虛擬主機

就是在一臺服務器啓動多個網站。

如何區分不一樣的網站：

一、域名不一樣

二、端口不一樣

7.1. 經過端口區分不一樣虛擬機

Nginx的配置文件：

/usr/local/nginx/conf/nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
    }
}

能夠配置多個server，配置了多個虛擬主機。

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
    }
    server {
        listen       81;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html-81;
            index  index.html index.htm;
        }
    }
}

複製一個HTML目錄

修改index.xml

從新加載配置文件

[root@localhost nginx]# sbin/nginx -s reload

7.2. 經過域名區分虛擬主機

7.2.1. 什麼是域名

域名就是網站。

www.baidu.com

www.taobao.com

www.jd.com

Tcp/ip

Dns服務器：把域名解析爲ip地址。保存的就是域名和ip的映射關係。

一級域名：

Baidu.com

Taobao.com

Jd.com

二級域名：

www.baidu.com

Image.baidu.com

Item.baidu.com

三級域名：

1.Image.baidu.com

Aaa.image.baidu.com

一個域名對應一個ip地址，一個ip地址能夠被多個域名綁定。

本地測試能夠修改hosts文件。

修改window的hosts文件：（C:\Windows\System32\drivers\etc）

能夠配置域名和ip的映射關係，若是hosts文件中配置了域名和ip的對應關係，不須要走dns服務器。

8. 反向代理

8.1. 什麼是反向代理

正向代理

反向代理：

反向代理服務器決定哪臺服務器提供服務。

返回代理服務器不提供服務器。也是請求的轉發。

8.2. Nginx實現反向代理

兩個域名指向同一臺nginx服務器，用戶訪問不一樣的域名顯示不一樣的網頁內容。

兩個域名是www.sian.com.cn和www.sohu.com

nginx服務器使用虛擬機192.168.101.3

第一步：安裝兩個tomcat，分別運行在8080和8081端口。

第二步：啓動兩個tomcat。

第三步：反向代理服務器的配置

upstream tomcat1 {
    server 192.168.25.148:8080;
    }
    server {
        listen       80;
        server_name  www.sina.com.cn;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass   http://tomcat1;
            index  index.html index.htm;
        }
    }
    upstream tomcat2 {
    server 192.168.25.148:8081;
    }
    server {
        listen       80;
        server_name  www.sohu.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass   http://tomcat2;
            index  index.html index.htm;
        }
    }

第四步：nginx從新加載配置文件

第五步：配置域名

在hosts文件中添加域名和ip的映射關係

192.168.25.148 www.sina.com.cn

192.168.25.148 www.sohu.com

9. 負載均衡

若是一個服務由多條服務器提供，須要把負載分配到不一樣的服務器處理，須要負載均衡。

upstream tomcat2 {

server 192.168.25.148:8081;

server 192.168.25.148:8082;

}

能夠根據服務器的實際狀況調整服務器權重。權重越高分配的請求越多，權重越低，請求越少。默認是都是1

 upstream tomcat2 {
    server 192.168.25.148:8081;
    server 192.168.25.148:8082 weight=2;
    }

10. Nginx的高可用（瞭解）

要實現nginx的高可用，須要實現備份機。

10.1. 什麼是負載均衡高可用

nginx做爲負載均衡器，全部請求都到了nginx，可見nginx處於很是重點的位置，若是nginx服務器宕機後端web服務將沒法提供服務，影響嚴重。

爲了屏蔽負載均衡服務器的宕機，須要創建一個備份機。主服務器和備份機上都運行高可用（High Availability）監控程序，經過傳送諸如「I am alive」這樣的信息來監控對方的運行情況。當備份機不能在必定的時間內收到這樣的信息時，它就接管主服務器的服務IP並繼續提供負載均衡服務；當備份管理器又從主管理器收到「I am alive」這樣的信息時，它就釋放服務IP地址，這樣的主服務器就開始再次提供負載均衡服務。

10.2. keepalived+nginx實現主備

10.2.1. 什麼是keepalived

keepalived是集羣管理中保證集羣高可用的一個服務軟件，用來防止單點故障。

Keepalived的做用是檢測web服務器的狀態，若是有一臺web服務器死機，或工做出現故障，Keepalived將檢測到，並將有故障的web服務器從系統中剔除，當web服務器工做正常後Keepalived自動將web服務器加入到服務器羣中，這些工做所有自動完成，不須要人工干涉，須要人工作的只是修復故障的web服務器。

10.2.2. keepalived工做原理

keepalived是以VRRP協議爲實現基礎的，VRRP全稱Virtual Router Redundancy Protocol，即虛擬路由冗餘協議。

虛擬路由冗餘協議，能夠認爲是實現路由器高可用的協議，即將N臺提供相同功能的路由器組成一個路由器組，這個組裏面有一個master和多個backup，master上面有一個對外提供服務的vip（VIP = Virtual IP Address，虛擬IP地址，該路由器所在局域網內其餘機器的默認路由爲該vip），master會發組播，當backup收不到VRRP包時就認爲master宕掉了，這時就須要根據VRRP的優先級來選舉一個backup當master。這樣的話就能夠保證路由器的高可用了。