В этой статье используется конкретный код для функции проверки проверки реализации SpringMVC для вашей ссылки. Конкретный контент заключается в следующем
Давайте сначала посмотрим на визуализации:
Идеи:
Прежде всего, код проверки - это изображение, картина, состоящая из случайных букв, чисел, шаблонов и т. Д., Таким образом, эта картина определенно не фиксирована, оно должно быть случайным образом создано бэкэнд. Фронталь использует IG SRC для постоянного доступа к этому методу производства.
Шаг 1: Написание страниц
Вход использует метод AJAX, поэтому он используется для вызова события Click. Изображение кода проверки помещается в тег A, чтобы облегчить щелчок и изменение кода проверки. Изображение отображается с использованием атрибута SRC IMG. Поскольку он использует Springmvc, метод справочного фона вызывается для использования действия.
<Form> <div ID = "login_tip"> andervicator login </div> <div> <input type = "text" id = "user_code" name = "user_code" Placeholder = "Пожалуйста, введите учетную запись"> </div> <div> <input type = "password" id = "user_account" name = "user_account" wareholder = "weplest wervely"> </usccount "beloea '> <> </" diveea "> </' diveea"> </user_account "</vecureea"> diveea "> </use_account". <input type = "text" id = "verificeCode" name = "verificationCode" Placeholder = "Пожалуйста, введите код проверки"> <a href = "javaScript: void (0);" rel="external nofollow" onclick="VerificationCode()"> <img id="randCodeImage" src="VerificationCode/generate.action"/> </a> </div> <div style="float:left;"> <input type="button" name="button" id="sub_btn" onclick="login()" value="Login"/> </div> <div id = "revification_code"> <b> </b> </div> </form>
Шаг 2: Напишите код JS
Поскольку вход в систему использует AJXA, вход в бэкэнд проверит некоторые данные, и если он неверен, он вернет данные на страницу входа в систему. Здесь мы объясняем, почему необходимо добавить случайное число после вызова метода для создания кода проверки. Случайное число здесь и имя параметра этого случайного числа могут быть записаны по желанию, и бэкэнд не выполняет никаких операций. Это метод предотвращения получения кэширования браузера при вызове того же метода, и ошибка при щелчке на изображение или ввод кода проверки не будет автоматически обновляться, и изображение будет изменено.
<script type = "text/javascript"> function login () {// Это должно отправить $ .ajax ({type: 'post', url: 'uase/Query.action', // data: $ ('#logininputform'). serialize (), data: {'user_code': $ ("#user_code ').). : $ ("#user_account"). val (), 'revificationCode': $ ("#verificeCode"). val (),}, dataType: 'json', успех: функция (obj) {var rad = math.floor (math.random () * math.pow (10, 8); window.location.href = 'uase/login.action'; "VerificeCode/Generate.Action? UUUY ="+RAD); } / ***Обновление кода проверки* / function verificeCode () {var rad = math.floor (math.random ()*math.pow (10, 8)); // uuuy - это случайное имя параметра, которое не будет обработано бэкэндом. Его цель состоит в том, чтобы избежать браузера, читая кэшированную ссылку $ ("#randcodeimage"). Attr ("src", "VerificationCode/Generate.Action? Uuuy ="+RAD); } </script>Шаг 3: Напишите класс управления фоновым контроллером
Основным методом является VerificationCode, который использует некоторые методы производства случайных чисел и некоторые вспомогательные классы. Вы можете использовать их все. Поскольку я использовал коды проверки, которые могут изменить тип, я использовал открытый класс инструментов, написанный собой.
@Requestmapping ("/revificationCode") public class vervificationCodecontroller Extens httpservlet {private static final long serialversionuid = 1l; / *** Имя, используемое здесь для хранения сеанса*/ private static final String session_key_of_rand_code = "randcode"; // todo объединить константу/ ** * */ private static final int count = 200; / ** * Определить графический размер (ширина) */ private static final with with = 105; / ** * Определить графический размер (высота) */ private static final int height = 35; / ***Длина интерференционной линии = 1.414*Linewidth*/ Private Static Final Linewidth = 1; @Requestmapping (value = "/Generate", method = {requestMethod.post, requestMethod.get}) public void vervicationCode (запрос httpservlectrequest, httpservletresponse response) throws servletexception, ioexception {// set the pare на ответ. response.setheader («Контроль кэша», «без каша»); response.setDateHeader («истекает», 0); // response.setContentType ("Image/png"); // Создание изображения в памяти Окончательный BufferedImage Image = new BufferedImage (ширина, высота, bufferedimage.type_int_rgb); // Получить графический контекст окончательный график2D Graphics = (Graphics2d) Image.getGraphics (); // Установить фоновую цветную graphics.setColor (color.white); // --- 1.color.white-это белая графика. FillRect (0, 0, ширина, высота); // заполнить дифракцию // Установить цвет границы // graphics.setColor (getRandcolor (100, 200)); // --- 2. Это установить цвет с помощью численного типа. Цветовой режим относится к использованию трех основных цветов: красный, зеленый и синий. Другие цвета получаются посредством регулировки трех цветов. Значения этих трех основных цветов - 0 ~ 255 Graphics.dawrect (0, 0, ширина - 1, высота - 1); окончательный случайный случайный = new Random (); // Случайно генерирует линии интерференции, делая код аутентификации в изображении нелегко обнаружить другими программами для (int i = 0; i <count; i ++) {graphics.setcolor (getrandcolor (150, 200)); // --- 3. final int x = random.nextint (ширина - ширина Line - 1) + 1; // Убедитесь, что он проведен в пределах границы окончательного int y = random.nextint (высота - ширина линии - 1) + 1; final int xl = random.nextint (linewidth); final int yl = random.nextint (linewidth); graphics.drawline (x, y, x + xl, y + yl); } // Возьмите случайно сгенерированный код аутентификации (4-значный номер) конечная строка ResultCode = ExctractrandCode (); для (int i = 0; i <resultCode.length (); i ++) {// отображать код аутентификации в изображении, а цвет функции вызова одинакова. Возможно, потому что семя слишком близко, поэтому вы можете напрямую генерировать // graphics.setColor (новый цвет (20 + random.nextint (130), 20 + случайный // .nextint (130), 20 + random.nextint (130))); // Установить Font Color Graphics.setColor (color.black); // установить стиль шрифта //Graphics.setFont(New Font ("Arial Black", font.italic, 18)); graphics.setFont (новый шрифт («Times New Roman», Font.Bold, 24)); // Установить символы, интервал символов, система верхнего поля. graphics.drawstring (string.valueof (resultcode.charat (i)), (23 * i) + 8, 26); } System.out.println ("прямой выход:"+resultCode); // Сохранить код аутентификации в session request.getSession (). Setattribute (session_key_of_rand_code, resultCode); // изображение вступает в силу graphics.dispose (); // Вывод изображения на страницу Imageio.Write (Image, "jpeg", response.getOutputStream ()); } / *** @return случайный код* / private string exctractrandCode () {final String randCodeType = resourceUtil.getRandcodeType (); int randcodelength = integer.parseint (resourceutil.getrandcodelength ()); if (randcodeType == null) {return randcodeimageenum.number_char.generatestr (randcodelength); } else {switch (randcodeType.charat (0)) {case '1': return randcodeimageenum.number_char.generatestr (randcodelength); case '2': return randcodeimageenum.lower_char.generatestest (randcodelength); case '3': return randcodeimageenum.upper_char.generatestr (randcodelength); Case '4': return randcodeimageenum.letter_char.generatestest (randcodelength); case '5': return randcodeimageenum.all_char.generatestest (randcodelength); case '5': return randcodeimageenum.all_char.generatestest (randcodelength); по умолчанию: return randcodeimageenum.number_char.generatestr (randcodelength); }}}} /*** Описание: генерируйте разные цвета в соответствии с данным номером* @param Это установить цвет с помощью численного типа. Цветовой режим относится к использованию трех основных цветов: красный, зеленый и синий. Значения этих трех основных цветов составляют 0 ~ 255 по регулировке трех цветов. Значения этих трех основных цветов - 0 ~ 255. * @param Это установить цвет с помощью численного типа. Цветовой режим относится к использованию трех основных цветов: красный, зеленый и синий. Значения этих трех основных цветов получаются путем регулировки трех цветов 0 ~ 255. * @return Описание: вернуть цвет*/ private color getrandcolor (int fc, int bc) {// Получить заданный диапазон случайных цветов. if (fc> 255) {fc = 255; } if (bc> 255) {bc = 255; } final int r = fc + random.nextint (bc - fc); final int g = fc + random.nextint (bc - fc); final int b = fc + random.nextint (bc - fc); вернуть новый цвет (r, g, b); } / *** Вспомогательный класс кода проверки* / enum randcodeimageenum { / *** mixed string* / all_char ("0123456789abcdefghijkmnpqrstuvwxyzabcdefghijklmnopqrstuvwxyz"), // удалить нижний кольцо, что не так, что не так, что не так, это не так, что не так, что не так, что не так, что не так, это не так, что не так, это не так, как это / ** * символ */ letter_char ("abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrStuvwxyz"),/ ** * Lower Crases */ lower_char ("abcdefghijklmnopqrStuvwxyz"),/ ** * № * № * № "(" 01234 "),/ ** * № * №" ("01234"),/ ** *. /*** upper_char ("abcdefghijklmnopqrstuvwxyz"); / *** Строка для генерирования*/ private String charstr; / ** * @param charstr */ private randcodeimageenum (final String charstr) {this.charstr = charstr; } / *** Производство кода случайной проверки*** @param CodeLength* Длина кода проверки* @return Verification Code* / public String Generatest (Final Int CodeLength) {Final StringBuffer SB = new StringBuffer (); окончательный случайный случайный = new Random (); конечная строка sourcestr = getCharstr (); for (int i = 0; i <codelength; i ++) {sb.append (soursestr.charat (random.nextint (soursestr.length ()))); } вернуть sb.toString (); } / ** * @return the {@link #charstr} * / public String getCharstr () {return charstr; }}}Шаг 4: Напишите общие классы инструментов
/*** Параметр проекта Класс***/Public Class Resourceutil {Private Static Final ResourceBundle Bundle = java.util.resourcebundle.getbundle ("sysconfig"); / *** Получить длину случайного кода** @return длины случайного кода*/ public static String getRandCodelength () {return bundle.getString ("randCodelength"); } / *** Получить тип случайного кода** @return Тип случайного кода* / public Static String getRandCodeType () {return bundle.getString ("randCodeType"); }}Шаг 5: config.properties
randCodelength = 4randCodeType = 5
Шаг 6: Здесь вы готовы, вы можете попробовать эффект