第三天：商品添加功能

1.计划

1、商品类目选择

2、图片上传

3、图片服务器搭建

4、kindEditor富文本编辑器的使用

5、商品添加功能

2. 实现商品类目选择功能

2.1. 需求

在商品添加页面，点击“选择类目”显示商品类目列表：

2.2. 实现步骤：

1、按钮添加点击事件，弹出窗口，加载数据显示tree

2、将选择类目的组件封装起来，通过TT.iniit()初始化，最终调用initItemCat()方法进行初始化

3、创建数据库、以及tb _item_cat表，初始化数据

4、编写Controller、Service、Mapper

2.3. EasyUI tree数据结构

数据结构中必须包含：

Id：节点id

Text：节点名称

State：如果不是叶子节点就是close，叶子节点就是open。Close的节点点击后会在此发送请求查询子项目。

可以根据parentid查询分类列表。

2.4. Mapper

package com.npf.manager.mapper.itemcat;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.npf.manager.entity.ItemCat;

/**
 * 
 * @author Jack
 *
 */
public interface ItemCatMapper {
    
    public List<ItemCat> selectByParentId(@Param("parentId")Long parentId);

}

2.5. Service

package com.npf.manager.service.itemcat.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.npf.manager.entity.ItemCat;
import com.npf.manager.mapper.itemcat.ItemCatMapper;
import com.npf.manager.service.itemcat.ItemCatService;

@Service
public class ItemCatServiceImpl implements ItemCatService {

    @Autowired
    private ItemCatMapper itemCatMapper;
    
    @Override
    public List<ItemCat> selectByParentId(Long parentId) {
        List<ItemCat> list = itemCatMapper.selectByParentId(parentId);
        return list;
    }

}

2.6. Controller

package com.npf.manager.web.itemcat;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.npf.manager.entity.ItemCat;
import com.npf.manager.service.itemcat.ItemCatService;
import com.npf.pfniecommon.ui.EUTreeNode;

@RestController()
@RequestMapping("/item/cat")
public class ItemCatController {

    @Autowired
    private ItemCatService itemCatService;
    
    @RequestMapping("/list")
    public List<EUTreeNode> getItemCat(@RequestParam(value="id", defaultValue="0") Long parentId){
        List<ItemCat> list = itemCatService.selectByParentId(parentId);
        List<EUTreeNode> nodeList = new ArrayList<EUTreeNode>();
        for(ItemCat cat : list){
            EUTreeNode node = new EUTreeNode();
            node.setId(cat.getId());
            node.setText(cat.getName());
            node.setState(cat.getIsParent()?"closed":"open");
            nodeList.add(node);
        }
        return nodeList;
    }
}

3. 图片上传

3.1. 图片服务器

3.1.1. 传统项目中的图片管理

传统项目中，可以在web项目中添加一个文件夹，来存放上传的图片。例如在工程的根目录WebRoot下创建一个images文件夹。把图片存放在此文件夹中就可以直接使用在工程中引用。

优点：引用方便，便于管理

缺点：

1、如果是分布式环境图片引用会出现问题。

2、图片的下载会给服务器增加额外的压力。

传统图片管理方式在分布式环境中的问题：

3.1.2. 分布式环境的图片管理

分布式环境一般都有一个专门的图片服务器存放图片。我们使用虚拟机搭建一个专门的服务器来存放图片。在此服务器上安装一个nginx来提供http服务，安装一个ftp服务器来提供图片上传服务。

3.1.3.搭建图片服务器

第一步：安装vsftpd提供ftp服务

1. yum -y install vsftpd

2. 添加一个ftp用户

此用户就是用来登录ftp服务器用的。这样一个用户建完，可以用这个登录，记得用普通登录不要用匿名了。登录后默认的路径为 /home/ftpuser.

3.给ftp用户添加密码

4. 防火墙开启21端口

因为ftp默认的端口为21，而centos默认是没有开启的，所以要修改iptables文件. vim /etc/sysconfig/iptables

还要运行下,重启iptables. service iptables restart

5.修改selinux

外网是可以访问上去了，可是发现没法返回目录（使用ftp的主动模式，被动模式还是无法访问），也上传不了，因为selinux作怪了。

修改selinux：

执行以下命令查看状态：

getsebool -a | grep ftp  
allow_ftpd_anon_write --> off
allow_ftpd_full_access --> off
allow_ftpd_use_cifs --> off
allow_ftpd_use_nfs --> off
ftp_home_dir --> off
ftpd_connect_db --> off
ftpd_use_passive_mode --> off
httpd_enable_ftp_server --> off
tftp_anon_write --> off

执行上面命令，再返回的结果看到两行都是off，代表，没有开启外网的访问.

 setsebool -P allow_ftpd_full_access on
 setsebool -P ftp_home_dir on

这样应该没问题了（如果，还是不行，看看是不是用了ftp客户端工具用了passive模式访问了，如提示Entering Passive mode，就代表是passive模式，默认是不行的，因为ftp passive模式被iptables挡住了，下面会讲怎么开启，如果懒得开的话，就看看你客户端ftp是否有port模式的选项，或者把passive模式的选项去掉。如果客户端还是不行，看看客户端上的主机的电脑是否开了防火墙，关吧）。

5.关闭匿名访问

修改/etc/vsftpd/vsftpd.conf文件：

重启ftp服务：service vsftpd restart

6. 设置开机启动vsftpd ftp服务

chkconfig vsftpd on

7.运行一下测试案例

package com.npf.test;

import java.io.File;
import java.io.FileInputStream;

import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;

public class FTPTest {
    
    public static void main(String[] args) throws Exception {
        FTPClient ftpClient = new FTPClient();
        ftpClient.connect("192.168.100.20");
        ftpClient.login("ftpuser", "123456");
        File file = new File("C:\\Users\\Jack\\Desktop\\1.jpg");
        FileInputStream inputStream = new FileInputStream(file);
        ftpClient.setFileType(FTP.BINARY_FILE_TYPE);
        ftpClient.storeFile("123.jpg", inputStream);
        inputStream.close();
        ftpClient.logout();
    }

}

运行结束之后，我们可以看到在FTP的服务器上面有我们上传的文件:

第二步：安装nginx提供http服务

1.nginx安装环境

nginx是C语言开发，建议在linux上运行，本教程使用Centos6.5作为安装环境。

(1). gcc: 安装nginx需要先将官网下载的源码进行编译，编译依赖gcc环境，如果没有gcc环境，需要安装gcc：yum install gcc-c++

(2). PCRE: PCRE(Perl Compatible Regular Expressions)是一个Perl库，包括 perl 兼容的正则表达式库。nginx的http模块使用pcre来解析正则表达式，所以需要在linux上安装pcre库。

yum install -y pcre pcre-devel

注：pcre-devel是使用pcre开发的一个二次开发库。nginx也需要此库。

(3). zlib: zlib库提供了很多种压缩和解压缩的方式，nginx使用zlib对http包的内容进行gzip，所以需要在linux上安装zlib库。

yum install -y zlib zlib-devel

(4). openssl: OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议，并提供丰富的应用程序供测试或其它目的使用。nginx不仅支持http协议，还支持https（即在ssl协议上传输http），所以需要在linux安装openssl库。

yum install -y openssl openssl-devel

2. 编译安装

将nginx-1.8.0.tar.gz拷贝至linux服务器。

解压：tar -zxvf nginx-1.8.0.tar.gz

cd nginx-1.8.0

1、 configure

./configure --help查询详细参数. 参数设置如下：

./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

注意：上边将临时文件目录指定为/var/temp/nginx，需要在/var下创建temp及nginx目录

2、编译安装

make

make install

安装成功查看安装目录：

3. 启动nginx

cd /usr/local/nginx/sbin/

./nginx

查询nginx进程：

2195是nginx主进程的进程id，2196是nginx工作进程的进程id

注意：执行./nginx启动nginx，这里可以-c指定加载的nginx配置文件，如下：

./nginx -c /usr/local/nginx/conf/nginx.conf

如果不指定-c，nginx在启动时默认加载conf/nginx.conf文件，此文件的地址也可以在编译安装nginx时指定./configure的参数（--conf-path= 指向配置文件（nginx.conf））

4.停止nginx

方式1，快速停止：

cd /usr/local/nginx/sbin

./nginx -s stop

此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。

方式2，完整停止(建议使用)：

cd /usr/local/nginx/sbin

./nginx -s quit

此方式停止步骤是待nginx进程处理任务完毕进行停止。

5. 重启nginx

方式1，先停止再启动（建议使用）：

对nginx进行重启相当于先停止nginx再启动nginx，即先执行停止命令再执行启动命令。如下：

./nginx -s quit

./nginx

方式2，重新加载配置文件：

当nginx的配置文件nginx.conf修改后，要想让配置生效需要重启nginx，使用-s reload不用先停止nginx再启动nginx即可将配置信息在nginx中生效，如下：

./nginx -s reload

6.测试

nginx安装成功，启动nginx，即可访问虚拟机上的nginx：

7.niinx代理FTP服务

修改/usr/local/ningx/conf/nginx.conf

user root;
#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 /home/ftpuser/www;
            #root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

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


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

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

}

重启测试。访问：http://npfdev1/images/2017/07/23/1500787492404856.jpg

参考: nginx在linux上的安装

3.1.4.SpringMVC中实现图片上传

1. 获取资源配置文件的内容

第一步：创建资源配置文件

posted @ 2017-07-22 11:12 pfnie 阅读(204) 评论(0) 收藏举报

刷新页面返回顶部

pfnie