验证码案例
目录
前言
一、Hutool工具介绍
1.1 Maven
1.2 介绍
1.3 实现类
二、验证码案例
2.1 需求
2.2 约定前后端交互接口
2.2.1 需求分析
2.2.2 接口定义
2.3 后端生成验证码
2.4 前端接收验证码图片
2.5 后端校验验证码
2.6 前端校验验证码
2.7 后端完整代码
前言
验证码实现方式很多，可以前端实现，也可以后端实现，网上也有比较多的插件或者工具包可以使用，咱们选择使用Hutool提供的小工具来实现。
一、Hutool工具介绍
Hutool是一个Java工具包类库，对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装，组成各种Util工具类。Hutool官网：https://hutool.cn/
1.1 Maven
如果你想在项目中使用Hutool中的某个模块，在项目的pom.xml的dependencies中加入以下内容：
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId><version>5.8.22</version>
</dependency>
1.2 介绍
验证码功能位于cn.hutool.captcha包中，核心接口为ICaptcha，此接口定义了以下方法：
createCode创建验证码，实现类需同时生成随机验证码字符串和验证码图片getCode获取验证码的文字内容verify验证验证码是否正确，建议忽略大小写write将验证码图片写出到目标流中
其中write方法只有一个OutputStream，ICaptcha实现类可以根据这个方法封装写出到文件等方法。
AbstractCaptcha为一个ICaptcha抽象实现类，此类实现了验证码文本生成、非大小写敏感的验证、写出到流和文件等方法，通过继承此抽象类只需实现createImage方法定义图形生成规则即可。
1.3 实现类
LineCaptcha线段干扰的验证码
贴栗子：
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.core.lang.Console;public class LineCaptchaTest {public static void main(String[] args) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);//图形验证码写出，可以写出到文件，也可以写出到流lineCaptcha.write("d:/line.png");//输出codeConsole.log(lineCaptcha.getCode());//验证图形验证码的有效性，返回boolean值lineCaptcha.verify("1234");//重新生成验证码lineCaptcha.createCode();lineCaptcha.write("d:/line.png");//新的验证码Console.log(lineCaptcha.getCode());//验证图形验证码的有效性，返回boolean值lineCaptcha.verify("1234");}
}控制台截图生成的验证码：
在写入的路径中查看代码生成的验证码截图：
CircleCaptcha 圆圈干扰验证码
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;
import cn.hutool.core.lang.Console;public class CircleCaptchaTest {public static void main(String[] args) {//定义图形验证码的长、宽、验证码字符数、干扰元素个数CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);//CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);//图形验证码写出，可以写出到文件，也可以写出到流captcha.write("d:/circle.png");//输出codeConsole.log(captcha.getCode());//验证图形验证码的有效性，返回boolean值captcha.verify("1234");}
}控制台截图生成的验证码：
在写入的路径中查看代码生成的验证码截图：
ShearCaptcha 扭曲干扰验证码
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import cn.hutool.core.lang.Console;public class ShearCaptchaTest {public static void main(String[] args) {//定义图形验证码的长、宽、验证码字符数、干扰线宽度ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);//ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);//图形验证码写出，可以写出到文件，也可以写出到流captcha.write("d:/shear.png");//输出codeConsole.log(captcha.getCode());//验证图形验证码的有效性，返回boolean值captcha.verify("1234");}
}控制台截图生成的验证码：
在写入的路径中查看代码生成的验证码截图：
二、验证码案例
2.1 需求
需求如下：
- 页面生成验证码
- 输入验证码，点击提交，验证用户输入验证码是否正确，正确则进行页面跳转
2.2 约定前后端交互接口
2.2.1 需求分析
后端需要提供两个服务：
- 生成验证码，并返回验证码
- 校验验证码是否正确
2.2.2 接口定义
1、生成验证码：
url:/captcha/get
param:无
return：图片的内容
2、校验验证码
url:/captcha/check
param:inputCode
return:true/false
2.3 后端生成验证码
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;@RestController
@RequestMapping("/captcha")
public class CaptchaController {@RequestMapping("/get")public void getCaptcha(HttpServletResponse response) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);//图像验证码写出，可以写出到文件，也可以写出到流，此处写出到流try {lineCaptcha.write(response.getOutputStream());} catch (IOException e) {throw new RuntimeException(e);}}
}小技巧：在我们每写完一个后端代码模块时，我们可以进行测试，看是否有错误，避免后续代码量过多发生错误时不知道哪块出错。
根据后端定义的url进行测试截图：
2.4 前端接收验证码图片
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}</style>
</head><body><h1>输入验证码</h1><div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {alert("验证码校验");});</script>
</body></html>验证前端是否有问题：
2.5 后端校验验证码
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import com.example.demo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;
import java.util.Date;@RestController
@RequestMapping("/captcha")
public class CaptchaController {private final static long session_valid_timeout = 60 * 1000;@Autowiredprivate CaptchaProperties captchaProperties;@RequestMapping("/check")public Boolean check(HttpSession session, String inputCode) {//验证码输入的内容和用户输入的进行比较//从session获取信息if (!StringUtils.hasLength(inputCode)) {return false;}String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());if (inputCode.equalsIgnoreCase(savedCode)) {//判断验证码是否过期if (saveDate != null && System.currentTimeMillis() - saveDate.getTime() < session_valid_timeout) {return true;}return true;}return false;}
}检查校验验证码是否存在问题：
1、先查看后端生成的验证码
2、根据校验验证的url进行验证
首先先输入错误的验证码观察返回ture或者false，如果返回false证明验证码输入错误或者过期，否则反正true。
先输入错误的验证码1234截图：
再输入正确的验证码截图：
2.6 前端校验验证码
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}</style>
</head><body><h1>输入验证码</h1><div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/captcha/get" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({url: "/captcha/check",type: "post",data: {inputCode: $("#inputCaptcha").val()},success: function(result) {if (result) {location.href = "success.html";} else {alert("验证码错误或者过期");}}})});</script>
</body></html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证成功页</title>
</head>
<body><h1>验证成功</h1>
</body>
</html>运行截图：
2.7 后端完整代码
package com.example.demo.controller;import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import com.example.demo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;
import java.util.Date;@RestController
@RequestMapping("/captcha")
public class CaptchaController {private final static long session_valid_timeout = 60 * 1000;@Autowiredprivate CaptchaProperties captchaProperties;@RequestMapping("/get")public void getCaptcha(HttpSession session, HttpServletResponse response) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());//设置缓存类型response.setContentType("image/jpeg");//禁止缓存response.setHeader("Progma", "No-cache");//图像验证码写出，可以写出到文件，也可以写出到流，此处写出到流try {lineCaptcha.write(response.getOutputStream());//存储sessionsession.setAttribute(captchaProperties.getSession().getKey(), lineCaptcha.getCode());session.setAttribute(captchaProperties.getSession().getDate(), new Date());} catch (IOException e) {throw new RuntimeException(e);}}@RequestMapping("/check")public Boolean check(HttpSession session, String inputCode) {//验证码输入的内容和用户输入的进行比较//从session获取信息if (!StringUtils.hasLength(inputCode)) {return false;}String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());if (inputCode.equalsIgnoreCase(savedCode)) {//判断验证码是否过期if (saveDate != null && System.currentTimeMillis() - saveDate.getTime() < session_valid_timeout) {return true;}}return false;}
}
配置文件:
captcha:width: 200height: 100session:key: captcha_session_keydate: captcha_session_datecaptcha配置：
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;@Component
@ConfigurationProperties(prefix = "captcha")
@Data
public class CaptchaProperties {private Integer width;private Integer height;private Session session;@Datapublic static class Session {private String key;private String date;}
}
相关文章：
验证码案例
目录 前言 一、Hutool工具介绍 1.1 Maven 1.2 介绍 1.3 实现类 二、验证码案例 2.1 需求 2.2 约定前后端交互接口 2.2.1 需求分析 2.2.2 接口定义 2.3 后端生成验证码 2.4 前端接收验证码图片 2.5 后端校验验证码 2.6 前端校验验证码 2.7 后端完整代码 前言…...
python身份证ocr接口功能免费体验、身份证实名认证接口
翔云人工智能API开放平台提供身份证实名认证接口、身份证识别接口，两者的相结合可以实现身份证的快速、精准核验，当用户在进行身份证实名认证操作时，仅需上传身份证照片，证件识别接口即可快速、精准的对证件上的文字信息进行快速提…...
屏幕空间反射技术在AI绘画中的作用
在数字艺术和游戏开发的世界中，真实感渲染一直是追求的圣杯。屏幕空间反射（Screen Space Reflection，SSR）技术作为一种先进的图形处理手段，它通过在屏幕空间内模拟光线的反射来增强场景的真实感和视觉冲击力。随着人工…...
JDK下载安装Java SDK
Android中国开发者官网 Android官网 (VPN翻墙) 通过brew命令 下载OracleJDK(推荐) 手动下载OracleJDK(不推荐) oracle OracleJDK下载页 查找硬件设备是否已存在JDK环境 oracle官网 备注： JetPack JavaDevelopmentKit Java开发的系统SDK OpenJDK 开源免费SDK …...
【ARM Cache 系列文章 1.2 -- Data Cache 和 Unified Cache 的详细介绍】
请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Data Cache and Unified Cache数据缓存 (Data Cache)统一缓存 (Unified Cache)数据缓存与统一缓存的比较小结 Data Cache and Unified Cache 在 ARM架构中，缓存（…...
Debian13将正式切换到基于内存的临时文件系统
以前的内存很小，旅行者一号上的计算机内存只有68KB，现在的内存可以几十G，上百G足够把系统全部装载在内存里运行，获得优异的性能和极速响应体验。 很多小型系统能做到这一点，Linux没有那么激进，不过Debian …...
设计模式-工厂方法（创建型）
创建型-工厂方法 简单工厂 将被创建的对象称为“产品”，将生产“产品”对象称为“工厂”；如果创建的产品不多，且不需要生产新的产品，那么只需要一个工厂就可以，这种模式叫做“简单工厂”，它不属于23中设计…...
分布式事务大揭秘：使用MQ实现最终一致性
本文作者：小米，一个热爱技术分享的29岁程序员。如果你喜欢我的文章，欢迎关注我的微信公众号“软件求生”，获取更多技术干货！ 大家好，我是小米，一个热爱分享技术的29岁程序员，今天我们来聊聊分布式事务中的一种经典实现方式——MQ最终一致性。这是一个在互联网公司中广…...
【IoT NTN】3GPP R18中关于各类IoT设备在NTN中的增强和扩展
博主未授权任何人或组织机构转载博主任何原创文章，感谢各位对原创的支持！ 博主链接 本人就职于国际知名终端厂商，负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作，目前牵头6G技术研究。 博客内容主要围绕…...
vs - vs2015编译gtest-v1.12.1
文章目录 vs - vs2015编译gtest-v1.12.1概述点评笔记将工程迁出到本地后，如果已经编译过工程，将工程Revert, Clean up 干净。编译用的CMake, 优先用VS2019自带的打开VS2015X64本地命令行编译gtest工程测试安装自己写个测试工程，看看编译出来的…...
你好GPT-4o——对GPT-4o发布的思考与看法
你好GPT-4o 前言 2024年5月13日，OpenAI官网发布了他们的新一代自然语言处理交互系统——GPT-4o。这是OpenAI继GPT4之后又一个新的旗舰模型。 GPT-4o（“o”代表“omni”）是迈向更自然的人机交互的一步——它接受文本、音频、图像和视频的任意…...
QT 信号和槽 多对一关联示例，多个信号，一个槽函数响应，多个信号源如何绑定一个槽函数
三个顾客 Anderson、Bruce、Castiel 都要订饭，分别对应三个按钮，点击一个按钮，就会弹出给该顾客送饭的消息。注意这个例子只使用一个槽函数，而三个顾客名称是不一样的，弹窗时显示的消息不一样，这需要一些 技…...
宝塔nginx配置
将跟php有关的注释掉： 添加： #解决vue刷新404问题try_files $uri $uri/ /index.html; location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header…...
容器化实践：DevOps环境下的容器交付流程
DevOps的兴起是为了应对市场和消费者对技术应用的不断增长的需求。它的目标是构建一个更快的开发环境，同时保持软件的高质量标准。DevOps还致力于在敏捷开发周期中提升软件的整体品质。这一目标的实现依赖于多种技术、平台和工具的综合运用。 结合容器化技术与DevO…...
Linux---sudo命令
文章目录 目录 文章目录 一.sudo命令简介 二.sudo 命令的特点 三.sudo 相关文件 四.sudo 命令授权配置 一.sudo命令简介 sudo 命令全称“SuperUser Do”，是Linux系统中的一个命令能够使普通用户以超级用户身份去执行某些命令。 二.sudo 命令的特点 sudo能够授权…...
前后端分离与实现 ajax 异步请求 和动态网页局部生成
前端 <!DOCTYPE html><!-- 来源 --> <!-- https://cloud.tencent.com/developer/article/1705089 --> <!-- https://geek-docs.com/ajax/ajax-questions/19_ajax_javascript_send_json_object_with_ajax.html --> <!-- 配合java后端可以监听 --&…...
Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略
Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略 文章目录 Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略一、引言二、CUDA、cuDNN与PyTorch-GPU介绍三、安装准备1. 查看支持的CUDA版本2. 查看已安装的CUDA版本3. 查看支持的PyTorch版本 四、卸载旧版CUDA五、下载…...
Android Dialog使用汇总
Dialog分类 AlertDialog Dialog 类是对话框的基类，官方建议我们不要直接实例化它，而是使用其子类来获取实例。AlertDialog是系统提供的一个直接子类，它能帮助我们快速构建出不同类型的弹窗。接下来就看下各种类型弹窗的使用。 1、普通对话框…...
[数据集][目标检测]足球场足球运动员身份识别足球裁判员数据集VOC+YOLO格式312张4类别
数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：312 标注数量(xml文件个数)：312 标注数量(txt文件个数)：312 标注类别…...
学习分享-声明式的 HTTP 客户端OpenFeign
OpenFeign 详细介绍 最近在学习中有用到OpenFeign，也在网上查找了相关资料，做下分享。 一、概述 OpenFeign 是一个声明式的 HTTP 客户端，它使得调用 REST API 变得更加简单和直观。通过 OpenFeign，开发者只需定义接口并添加注解…...
python Tk 获取输入框内容，分割内容
创建输入框、一个按钮和一个标签的GUI。 用户可以在输入框中输入文本，点击按钮后，程序将在控制台打印输入的文本（已经分割为列表），并在GUI中的标签上显示一些静态文本。 import tkinter as tk# 创建主窗口 root tk.…...
第十二章：净世山的终极考验
虽然击败了黑袍人，但四人并未有丝毫的松懈。他们深知，净世山的考验远不止如此。果然，随着黑袍人的倒下，整个山顶开始剧烈震动，仿佛有什么东西即将苏醒。“小心，这山顶似乎有变！”赵无极大声提醒…...
linux常用命令及其选项
1、常用命令 1.1、ls 选项说明-a显示所有文件及目录 (包括隐藏文件)-i显示inode-A同 -a选项 ，但不列出 "." (目前目录) 及 ".." (父目录)-l列出信息详细(如文件型态、权限、拥有者、文件大小等)-R递归显示(若目录下有文件，则以下之…...
虚拟存储器概述
目录 常规存储器管理方式的特征和局部性原理 缺点 局部性原理 局部性原理的应用 1. 提高内存利用率 2. 实现按需装入 3. 支持内存共享 4. 提高系统稳定性 虚拟存储器的定义与特征 虚拟存储器的特征 虚拟存储器的实现机制 虚拟存储器的工作过程 虚拟存储器的优点 虚…...
C++对象池设计与实现
目录 一、对象池简介 1.1 池化技术 1.2 什么是对象池 1.3 对象池分配策略 二、C new和delete运算符重载 三、实现一个对象池框架 3.1 策略接口 四、实现几种对象池的分配策略 4.1 数组策略 4.2 堆策略 编辑 4.3 栈策略 4.4 区块策略 一、对象池简介 1.1 池化技…...
电商系统中热库和冷库的使用与数据转换
在现代电子商务系统中，数据的高效管理和存储是关键。电商平台每日处理海量数据，这些数据不仅包括用户行为、交易记录，还涵盖库存信息、商品详情、物流信息等。为了优化数据存储和查询效率，电商系统通常采用热库（Hot St…...
【LeetCode:312. 戳气球+ 动态规划】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...
拉格朗日乘子将不等式约束转化为等式约束例子
拉格朗日乘子将不等式约束转化为等式约束例子 在优化问题中，常常需要将不等式约束转化为等式约束。使用拉格朗日乘子法，可以通过引入松弛变量将不等式约束转换为等式约束，然后构造拉格朗日函数进行求解。 拉格朗日乘子法简介 拉格朗日乘子法是求解带约束优化问题的一种方…...
有效的括号（oj题）
一、题目链接 https://leetcode.cn/problems/valid-parentheses/submissions/538110206 二、题目思路 利用栈的性质，后进先出 1.依次读取字符串，判断是否为左括号，如果是，就将其入栈。 2.如果读取的不是左括号，就说…...
快团团供货大团长如何查看帮卖团长的订单？
一、功能说明 可以看到团购中每个帮卖团长帮卖产生的订单 二、具体设置方法 1、小程序端如何操作？ 在团购页面中，点击订单管理，在这里可以选择全部团长订单，我的团订单，和帮卖团长的帮卖订单。 2、PC端如何操作&am…...
西安seo外包费用/惠州seo按天计费
1、vue2.0 响应式数据的原理 概述：Object.defineProperty() 递归数据劫持+订阅发布者模式 Vue2.0在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性，当页面取到对应属性时，会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依…...
如何在网站做投票/云搜索系统
每篇文章我们都先抛出自己的疑问，然后随着阅读的深入，我们可以逐一解答这些问题 问题抛出： 1.JDK,JRE,JVM区别？ JDK:总共分为三部分，java程序设计语言，Java虚拟机，Java API类库，JD…...
站群管理系统cms/pc网站优化排名
摘要：随着计算机技术和Internet的飞速发展,人们对web服务器的性能的要求也越来越高,负载均衡集群以其较高的性价比和良好的扩展性在web服务器中得到了广泛的应用。因此如何更好的提高集群服务器的综合处理能力便受到了更多的关注。 集群的负载均衡策略是提高集群整体…...
沈阳专业网站建设公司排名/调研报告万能模板
Scala 是一门多范式（multi-paradigm）的编程语言，设计初衷是要集成面向对象编程和函数式编程的各种特性。Scala 运行在 Java 虚拟机上，并兼容现有的 Java 程序。 下面是我的scala学习笔记连接： Scala学习笔记&#x…...
成都设计网站的公司名称/代理怎么引流推广
首先需要安装python环境 见本人发表的：python及pycharm安装python及pycharm安装_susan花雨的博客-CSDN博客 用pip install 安装 pip install xlrd pip install xlwt pip install xlsxwriter pip list查看 python合并多个表格：可以将每个表的不同she…...
天津国际工程建设监理公司网站/品牌营销推广方案
发了vue2.0之axios使用详解(一)后，有朋友问如何在实际项目中使用，下面把我平常用的两种方法分享下，自己在实际项目中总结的方法，有不好的地方还请指正，共同提高，谢谢！ [javascript] view plainc…...