Web-相关问题解决

后台数据解析：

1、问题产生

• 前端传递给后台的数据如果是对象，默认转换成json对象
• json对象在服务器端只能单个对象接收
• 如：前端传递param与ids两组数据，默认会将其转换为统一的json对象，后台用@RequestBody或@RequestParam接收时，只能接收到整体的一个对象。而我们需要的是Param对象与ids对象拆分使用

2、解决办法

• 使用QS插件，能够在json对象与查询字符串间相互解析转换
• 使用步骤：
  – 安装QS插件：npm install qs --save
  – 绑定QS到JS对象：Vue.prototype.$qs = qs
  – 使用QS插件转换json对象：data: this.$qs.stringify(params)
  – 接收对象：(Param param, @RequestParam("cids") List<Long> cids)

---

表单校验：

1、技巧一

• 使用！！表示当前位置输入状态：c = > !!c
• 当c为null时，一个！表示true，两个！表示真实情况false
• 当c有值时，一个！表示false，两个！表示真实情况true
• 当c为null，如果不用！！作为前缀，值只能为null而不是boolean值

---

上传图片：

1、注意事项

• 上传图片即上传文件，需要用MultiFile接收：@RequestParam ("file") MultiFile file
• 上传图片会造成带宽高压，增加微服务压力，所以要单独创建上传文件微服务，以求不影响其他微服务正常工作

2、后台服务保存上传图片到本地服务

• 校验文件类型，通过创建文件类型白名单，判断当前文件类型是否存在
• 校验文件内容，通过ImageIO判断文件内容是不是图片
• 保存文件到本地服务器，使用transferTo方法实现
• 返回url，进行回显，用户通过对应地址可以访问图片

@Service
public class UploadService {
    private static final List<String> CONTENT_TYPE = Arrays.asList("image/gif","application/x-jpg");    // 图片类型白名单
    private static final Logger LOGGER = LoggerFactory.getLogger(UploadService.class);
    /**
     * 上传图片
     * @param file
     * @return
     */
    public String uploadImage(MultipartFile file) {
        String filename = file.getOriginalFilename();
        // 校验文件类型
        String contentType = file.getContentType();
        if (!CONTENT_TYPE.contains(contentType)){
            LOGGER.info("文件类型不合法：{}", filename);
            return null;
        }

        try {
            // 校验文件内容
            BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
            if (bufferedImage == null){
                LOGGER.info("文件内容不合法：{}", filename);
                return null;
            }
            // 保存到文件服务器
            file.transferTo(new File("F:\\study\\project\\leyou\\uploadImage\\" + filename));
        } catch (IOException e) {
            LOGGER.info("服务器内部错误:{}", filename);
            e.printStackTrace();
        }
        // 返回url，进行回显
        return "http://image.leyou.com" + filename;
    }
}

3、通过Nginx配置回显

• 配置nginx.conf文件
• 不使用代理，直接通过本地root+路径进行配置
• 最后修改本地host映射：127.0.0.1 image.leyou.com

server {
        listen       80;
        server_name  image.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		
		location / {
			root F:\\study\\project\\leyou\\uploadImage;
		}
    }

4、配置Nginx使图片上传绕过zuul网关

• 配置精确地址映射
• 重写路径，过滤/api
• 注意事项：
  – 精确路径映射要放在上面，防止全部过滤而不通过精确路径映射
  – 重写路径时，正则匹配原始路径()代表分组
  – 重写的路径用$1表示正则匹配中的第一组匹配值，这里就表示/upload/image
  – 最后的指令有两种：last（重写路径后还要进入Nginx进行映射）、break（重写路径后直接退出Nginx并进行重定向）

	server {
        listen       80;
        server_name  api.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		
		location /api/upload {
			proxy_pass http://127.0.0.1:8082;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
			
			rewrite	"^/api/(.*)$" /$1 break;
		}
		location / {
			proxy_pass http://127.0.0.1:10010;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
		}
    }

5、FastDFS

• 分布式文件系统（Distributed File System）
  – 传统文件系统管理的文件就存储在本机
  – 分布式文件系统管理的文件存储在很多机器，这些机器通过网络连接，被统一管理，无论是上传还是下载都通过管理中心访问
• FastDFS
  – 轻量级，高性能的分布式文件管理系统
  – 具有文件存储、文件同步、文件访问（上传、下载）、存取负载均衡和在线扩容等功能
  – 适合大容量存储需求的应用或系统
• FastDFS架构
  – 主要有两个角色：Tracker Server和Storage Server
  – Tracker Server：跟踪服务器，负责调度storage节点与client通信，在访问上起到负载均衡的作用，记录storage节点的运行状态，是连接client与storage节点的枢纽
  – Storage Server：存储服务器，保存文件和文件的meta data（元数据），每个storage server会启动一个单独的线程主动向track cluster中的每个tracker server报告其状态信息，包括磁盘使用情况，文件同步情况和文件上传下载次数统计信息等
  – Group：文件组，多台Storage Server的集群。上传文件到组内的一台机器上，FastDFS会将该文件同步到同组的其它所有机器上，起到备份的作用。不同组的服务器，保存的数据不同，而且相互独立不进行通信
  – Tracker Cluster：跟踪服务器集群，由一组Tracker Server （跟踪服务器）组成
  – Storage Cluster：存储集群，由多个Group组成
• 上传和下载流程
  – client向tracker发起请求->
  – tracker响应可用storage的IP与端口号
  – client根据tracker响应信息从对应storage上传或下载文件

---