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。这样的话就能够保证路由器的高可用了。

keepalived主要有三个模块，分别是core、check和VRRP。core模块为keepalived的核心，负责主进程的启动、维护以及全局配置文件的加载和解析。check负责健康检查，包括常见的各类检查方式。VRRP模块是来实现VRRP协议的。

详细参考：Keepalived权威指南中文.pdf

10.2.3. keepalived+nginx实现主备过程

初始状态

主机宕机

主机恢复

10.2.4. 高可用环境

两台nginx，一主一备：192.168.101.3和192.168.101.4

两台tomcat服务器：192.168.101.5、192.168.101.6

10.2.5. 安装keepalived

分别在主备nginx上安装keepalived，参考“安装手册”进行安装：