最简单的版本：





Insert title here

	function openResult(){    /* 绑定事件 */
		var r = confirm("亲，您确定取消该订单吗？")
		if (r == true) {
            alert("确认");
		} else {
			alert("取消");
		}
	}

老马啸西风2020年8月28日大约 1 分钟

web 实战-02-如何实现模态框 modal

依赖

老马啸西风2020年8月28日大约 1 分钟

web 实战-03-AJAX 是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

工作原理

老马啸西风2020年8月28日大约 9 分钟

web 实战-04-基于 form 实现前后端交互

简单例子


  First name: 
  Last name:

老马啸西风2020年8月28日大约 6 分钟

web 实战-04-jquery 实现 ajax 请求

此处使用 CDN 引入

老马啸西风2020年8月28日大约 7 分钟

web 实战-06-字符编码（Character encoding）详解

写代码的时候，一旦遇到乱码真的是心烦意乱。

彻底搞清楚各个编码之间的关系，也是 web 开发的一项基础技能。

主要问题

gbk

utf-8

gb2312

Unicode

什么是编码

定义

编码是信息从一种形式或格式转换为另一种形式的过程；解码则是编码的逆过程。

字符编码

字符编码（Character encoding）是一套法则，使用该法则能够对自然语言的字符的一个集合（如字母表或音节表），与其他东西的一个集合（如号码或电脉冲）进行配对。

老马啸西风2020年8月28日大约 16 分钟

web 实战-07-File Compress 文件压缩 java 实现

有时候网络传输中，我们首先需要对文件进行压缩。

压缩算法也是多种多样，此处演示最常用的 zip 压缩方式。

java 实现

maven 依赖


	org.apache.ant
	ant
	1.10.1

老马啸西风2020年8月28日大约 1 分钟

web 实战-08-ajax 请求下载文件没有效果

使用 ajax 直接下载文件，发现前后端调用都是正常的，但是前端并没有按照预期下载文件。

下面做下记录，避免以后重复采坑。

最简单的下载

前端

下载：新建文本文档.txt

老马啸西风2020年8月28日大约 2 分钟

web 实战-08-EXCEL 文件导出下载的几种方式

对于文件的上传下载是非常常见的需求。

拓展阅读：

excel 导出最佳实践

那么文件下载有哪几种方式呢？

方式1：后端同步返回

说明

前端调用后端，后端直接获取文件流，然后同步返回。

示例代码

@GetMapping(value = "/download")
@CrossOrigin
@ResponseBody
public String download(@RequestParam(value = "fileToken") String fileToken, HttpServletRequest request, HttpServletResponse response){
	File file = null;
	try {
		log.info("开始下载文件 fileToken： {}", fileToken);
		file = service.buildFile(fileToken);
		String fileName = file.getName();
		// 根据客户端，选择信息
		response.addHeader("content-Type", "application/octet-stream");
		response.addHeader("content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
		try(InputStream in = new FileInputStream(file);
			ServletOutputStream out = response.getOutputStream();) {
			byte[] bs = new byte[1024];
			int len = -1;
			while ((len = in.read(bs)) != -1) {
				out.write(bs, 0, len);
			}
			out.flush();
		}
		log.info("完成下载文件 fileToken： {}", fileToken);

		// 返回结果
		return success();
	} catch (Exception e) {
		log.error("文件下载遇到错误, fileToken: {}", fileToken, e);
		return fail("99", e.getMessage());
	} finally {
		FileUtils.deleteFile(file);
	}
}

老马啸西风2020年8月28日大约 5 分钟

web 实战-09-springboot 文件上传最大大小限制

import com.alibaba.fastjson.JSON;
import com.huifu.hongpos.profit.application.constants.Constant;
import com.huifu.hongpos.profit.application.constants.RespCode;
import io.undertow.server.handlers.form.MultiPartParserDefinition;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.MissingServletRequestParameterException;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.ResponseStatus;

import java.util.HashMap;
import java.util.Map;

@ControllerAdvice
@ResponseBody
@Slf4j
public class CommonExceptionAdvice {

    @ResponseStatus(HttpStatus.OK)
    @ExceptionHandler(MultiPartParserDefinition.FileTooLargeException.class)
    public String fileTooLarge(MultiPartParserDefinition.FileTooLargeException e) {
        log.error("文件过大异常", e);
        return "文件太大";
    }

}

老马啸西风2020年8月28日大约 2 分钟