项目--华为商城---登录页面（一）

介绍：仿照华为商城写的一个Java项目，从前端到后台逻辑以及数据库设计，前后端完全分离，使用Ajax+json进行前后台数据的交互

登录页面的总体效果图：

技术点总结：

　　1、手机的正则检验

　　2、图形验证码----->ajax请求后台，使用servlet的image流生成一张验证码，然后发送到前台页面

package top.darkbook.servlet;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * User:Darkness Shadow
 * Date:2018/8/6
 * Time:16:00
 */

public class ImageServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getParameter("method");

        if ("createCode".equals(method) ){
            doCreateCode(req,resp);
        }else if ("checkCode".equals(method)){
            doCheckCode(req,resp);
        }


    }

    private void doCheckCode(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String code = req.getParameter("code");
        String se_code = (String) req.getSession().getAttribute("code");
    
        if(code.equalsIgnoreCase(se_code)){
            resp.getWriter().print("success");
        }else{
            resp.getWriter().print("fail");
        }
    }

    private void doCreateCode(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String str = "ZXCVBNMLKJHGFDSAWERTYUIOP123456789";
        Random r = new Random();
        StringBuffer stringBuffer = new StringBuffer();
        for (int i = 0; i < 4; i++) {
            int index = r.nextInt(str.length());
            char ch = str.charAt(index);
            stringBuffer.append(ch);
        }
        String code = stringBuffer.toString();
        req.getSession().setAttribute("code",code);

        BufferedImage bufferedImage = new BufferedImage(90,40,BufferedImage.TYPE_INT_RGB);

        Graphics g = bufferedImage.getGraphics();
        g.setColor(new Color(247,247,247));
        g.fillRect(0,0,90,40);

        g.setColor(new Color(r.nextInt(90),r.nextInt(90),r.nextInt(225),r.nextInt(225)));
        g.setFont(new Font("宋体",Font.BOLD,30));

        g.drawString(code.charAt(0)+"",10,29);
        g.drawString(code.charAt(1)+"",30,26);
        g.drawString(code.charAt(2)+"",50,28);
        g.drawString(code.charAt(3)+"",70,25);

        g.drawLine(r.nextInt(100),r.nextInt(40),r.nextInt(90),r.nextInt(40));
        g.drawLine(r.nextInt(100),r.nextInt(40),r.nextInt(90),r.nextInt(40));
        g.drawLine(r.nextInt(100),r.nextInt(40),r.nextInt(90),r.nextInt(40));
        g.drawLine(r.nextInt(100),r.nextInt(40),r.nextInt(90),r.nextInt(40));
        g.drawLine(r.nextInt(100),r.nextInt(40),r.nextInt(90),r.nextInt(40));

        //创建输出流
        OutputStream os = resp.getOutputStream();
        ImageIO.write(bufferedImage,"JPG",os);
        os.close();
    }


}

　　3、短信验证码------>填写正确的手机号，点击获取验证码，ajax请求后台，根据第三方的Api生成短信验证码，然后发送短信到填写的手机号上------>https://www.cnblogs.com/myfaith-feng/p/9569489.html

　　4、密码的正则检验---->必须包含8个字符，不能有空格、必须包含有数字、特殊字符、字母中的两种

if (value.length < 8){//value是你要验证的密码
                setMessageClass("#phonePassword",true,"至少包含8个字符","");
                return false;//长度小于8
            }
            var reg1 = /s/;
            if (!reg1.test(value)){
                setMessageClass("#phonePassword",true,"不能包含空格","");
                return false;//包含空格
            }
            var reg2 = /(?!^(d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[w~!@#$%^&*?]{7,20}$/;
            if (!reg2.test(value)){
                setMessageClass("#phonePassword",true,"至少包含字母、数字、符号中的2种","");
                return false;//少于包含字母、数字、符号中的2种
            }