因為沒怎麽做網頁端的功能，一直不知道登陸驗證碼是怎麽實現的，這次學習梳理一下：

1. web 端展示的是圖片，有後臺服務(如sevlet返回一個圖片)

2. 每次展示/刷新圖片，請求一次服務端，web端生成一個唯一ID傳到服務端，服務端保存該唯一ID與生成的驗證碼的對應關系，並返回圖片

3. 登陸請求參數包含用戶名和密碼，唯一ID和用戶錄入的驗證碼

4. 登陸後臺服務要驗證用戶錄入的驗證碼與根據唯一ID找到的服務端緩存的驗證碼是否一致，如果不一致則報錯。如果一致，在繼續校驗用戶名和密碼是否正確

vue web端代碼

通過改變圖片的src達到重新請求、刷新圖片的目的。剛好我們要傳輸uuid到服務端

<template>
    <div>
        <h4>{{newsTitle}}</h4>
        <hr>
        <!--  每次uuid的值發送變化則刷新圖片-- >
        <img :src="this.codeurl+this.uuid"  @click="getCaptcha()" >
        <button @click="getCaptcha()" >刷新</button>
    </div>
</template>
<script>
    import store from ‘../vuex/store.js‘;
    export default {
        data(){
            return {
                newsTitle :‘驗證碼‘,
                uuid :‘‘,
                codeurl : "http://127.0.0.1:8088/EasyUI/VerifyCode.do?uuid=",
                currentcode:‘0000‘,
                captchaPath:‘‘
            }
        },
        store,
        methods:{
            getUUID(){
               /* 獲取一個唯一ID */
                var uuid =  ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, c => {
                        return (c === ‘x‘ ? (Math.random() * 16 | 0) : (‘r&0x3‘ | ‘0x8‘)).toString(16)
                    });
                return uuid;    
            },
            getCaptcha(){
                /* 刷新驗證碼圖片 */
                this.uuid = this.getUUID();
                console.log(uuidtmp);
            },
                    },
        mounted(){
            /* 初始化驗證碼圖片 */
            this.uuid = ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, c => {
                        return (c === ‘x‘ ? (Math.random() * 16 | 0) : (‘r&0x3‘ | ‘0x8‘)).toString(16)
                    });
            
        }
    }
</script>

<style>

</style>    

服務端代碼：servlet 主要是生成隨機驗證碼及其圖片

-- 生成圖片的代碼來源於網絡

package Serverlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
 
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

    /**
     * Servlet implementation class LoginServlet
     */
    @WebServlet(name="VerifyCode.do", urlPatterns="/VerifyCode.do") 
    public class VerifyCodeServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public VerifyCodeServlet() {
            super();
            // TODO Auto-generated constructor stub
        }
        
        /**
         * Initialization of the servlet. <br>
         * @throws ServletException if an error occurs
         */
        public void init() throws ServletException {
            // Put your code here
        }

        /**
         * Destruction of the servlet. <br>
         */
        public void destroy() {
            super.destroy(); // Just puts "destroy" string in log
            // Put your code here
        }

        /**
         * The doGet method of the servlet. <br>
         *
         * This method is called when a form has its tag value method equals to get.
         * 
         * @param request the request send by the client to the server
         * @param response the response send by the server to the client
         * @throws ServletException if an error occurred
         * @throws IOException if an error occurred
         */
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {

            this.doPost(request, response);
        }

        /**
         * The doPost method of the servlet. <br>
         *
         * This method is called when a form has its tag value method equals to post.
         * 
         * @param request the request send by the client to the server
         * @param response the response send by the server to the client
         * @throws ServletException if an error occurred
         * @throws IOException if an error occurred
         */
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {

            response.setContentType("image/jpeg");
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            
            String uuid = request.getParameter("uuid");
            
            System.out.println(uuid);
            
            //聲明驗證碼
            int width = 80;
            int height = 30;
            String data = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789abcdefghijklmnpqrstuvwxyz";    //隨機字符字典，其中0，o，1，I 等難辨別的字符最好不要
            Random random = new Random();//隨機類
            //1 創建圖片數據緩存區域（核心類）
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);//創建一個彩色的圖片
            //2 獲得畫板(圖片，ps圖層)，繪畫對象。
            Graphics g = image.getGraphics();
            //3 選擇顏色，畫矩形3，4步是畫一個有內外邊框的效果
            g.setColor(Color.BLACK);
            g.fillRect(0, 0, width, height);
            //4白色矩形
            g.setColor(Color.WHITE);
            g.fillRect(1, 1, width-2, height-2);
            
            /**1 提供緩存區域，為了存放4個隨機字符，以便存入session */
            StringBuilder builder = new StringBuilder();
            
            //5 隨機生成4個字符
            
            //設置字體顏色
            g.setFont(new Font("宋體", Font.BOLD&Font.ITALIC, 25));
            
            for(int i = 0 ; i < 4 ;i ++){
                //隨機顏色
                g.setColor(new Color(random.nextInt(255),random.nextInt(255), random.nextInt(255)));
                
                //隨機字符
                int index = random.nextInt(data.length());
                String str = data.substring(index, index + 1);
                
                //String str = code.substring(i,i+1);
                
                /**2 緩存*/
                builder.append(str);
                
                //寫入
                g.drawString(str, (width / 6) * (i + 1) , 20);                     
            }
            
            //給圖中繪制噪音點，讓圖片不那麽好辨別
            for(int j=0,n=random.nextInt(100);j<n;j++){
                g.setColor(Color.RED);
                g.fillRect(random.nextInt(width),random.nextInt(height),1,1);//隨機噪音點
            }
            
            /**3 獲得隨機數據，並保存session*/
            String tempStr = builder.toString();
            request.getSession().setAttribute("sessionCacheData",tempStr);
            
            //.. 生成圖片發送到瀏覽器 --相當於下載
            ImageIO.write(image, "jpg", response.getOutputStream());

        }
    }

以上未含包含uuid與驗證碼的對應關系以及登陸驗證的代碼

登陸驗證碼的實現