Artikel ini membagikan kode spesifik untuk tampilan fungsi kode verifikasi implementasi SpringMVC untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Mari kita lihat rendering terlebih dahulu:
Ide:
Pertama -tama, kode verifikasi adalah gambar, gambar yang terdiri dari huruf acak, angka, pola, dll., Jadi gambar ini jelas tidak diperbaiki, itu harus secara acak dibuat oleh backend. Frontend menggunakan SRC IG untuk terus mengakses metode pembuatan ini.
Langkah 1: Penulisan halaman front-end
Login menggunakan metode AJAX, sehingga digunakan untuk memanggil acara klik. Gambar kode verifikasi ditempatkan di tag untuk memfasilitasi mengklik dan mengubah kode verifikasi. Gambar ditampilkan menggunakan atribut SRC IMG. Karena menggunakan SpringMVC, metode latar belakang dipanggil untuk menggunakan tindakan.
<sorm> <Div ID = "Login_Tip"> Administrator Login </Div> <v> <input type = "Text" id = "user_code" name = "user_code" placeholder = "Harap masukkan akun"> </div> <Div> <input type = "kata sandi" ID = "user_account" name = "user_count" placeer "placeer" placeer "iD =" USER_ACCOUNT "NAME =" user_count " <input type = "text" id = "verifikasicode" name = "verifikasicode" placeholder = "Silakan masukkan kode verifikasi"> <a href = "javascript: void (0);" Rel = "Eksternal nofollow" onClick = "verifikasicode ()"> <img id = "randcodeimage" src = "verifikasicode/generate.action"/> </a> </div> <div style = "float: left;"> <input type = "name" name = "tombol" id = "sub_btn" pada click; id = "verifikasi_code"> <b> </b> </div> </form>
Langkah 2: Tulis kode JS
Karena login menggunakan AJXA, login backend akan memverifikasi beberapa data, dan jika salah, itu akan mengembalikan data ke halaman login. Di sini kami menjelaskan mengapa nomor acak perlu ditambahkan setelah memanggil metode untuk menghasilkan kode verifikasi. Nomor acak di sini dan nama parameter dari nomor acak ini dapat ditulis sesuka hati, dan backend tidak melakukan operasi apa pun. Ini adalah metode untuk mencegah browser dari di -cache saat memanggil metode yang sama, dan kesalahan dalam mengklik input gambar atau kode verifikasi tidak akan disegarkan secara otomatis dan gambar akan diubah.
<type script = "Text/JavaScript"> Fungsi login () {// Ini untuk mengirimkan $ .AJAX ({type: 'POST', URL: 'Uase/Query.action', // Data: $ ('#LoginInporm'). Serialize (), data: {'user_code': $ ("#User_c). : $ ("#user_account"). Val (), 'VerifikasiCode': $ ("#verifikasiCode"). Val (),}, DataType: 'json', Success: function (obj) {var rad = math.floor (math.random () * math.pow (10, 8)); windoke.href = 'uase/login.action'; "VerificationCode/Generate.action? UuUy ="+rad); } / ***Kode verifikasi Refresh* / function verifikasiCode () {var rad = math.floor (math.random ()*math.pow (10, 8)); // UUUY adalah nama parameter acak, yang tidak akan diproses oleh backend. Tujuannya adalah untuk menghindari browser yang membaca tautan yang di -cache $ ("#randCodeImage"). ATTR ("SRC", "VerificationCode/Generate.action? UuUy ="+rad); } </script>Langkah 3: Tulis kelas kontrol pengontrol latar belakang
Metode utama adalah VerificationCode, yang menggunakan beberapa metode produksi bilangan acak dan beberapa kelas tambahan. Anda bisa menggunakan semuanya. Karena saya menggunakan kode verifikasi yang dapat mengubah jenisnya, saya menggunakan kelas alat publik yang ditulis sendiri.
@RequestMapping ("/VerificationCode") Kelas Publik VerificationCodecontroller memperluas httpservlet {private static final long serialversionuid = 1l; / *** Nama yang digunakan di sini untuk menyimpan sesi*/ private static final string session_key_of_rand_code = "randcode"; // todo untuk menyatukan konstanta/ ** * */ count final statis privat = 200; / ** * Tentukan ukuran grafik (lebar) */ private static final int width = 105; / ** * Tentukan ukuran grafik (tinggi) */ Tinggi int statis privat = 35; / ***Panjang garis interferensi = 1.414*linewidth*/ private static final int linewidth = 1; @RequestMapping (value = "/generate", Method = {requestMethod.post, requestMethod.get}) public void verifikasiCode (httpservletRequest, httpservletResponse response) lemparan servletException, "" no-cache "," no-cache "," no-cache "," no-cache "," no-cache "," no-cache, "no exception {// menetapkan halaman untuk tidak. response.setheader ("cache-control", "no-cache"); response.setDateheader ("kedaluwarsa", 0); // response.setContentType ("Image/png"); // Buat gambar dalam memori final bufferedImage Image = BufferedImage baru (lebar, tinggi, bufferedImage.type_int_rgb); // Dapatkan konteks grafis Final Graphics2d Graphics = (Graphics2D) Image.getGraphics (); // atur latar belakang grafis .SetColor (color.white); // --- 1.Color.White adalah White Graphics.fillrect (0, 0, lebar, tinggi); // Isi difraksi // atur warna perbatasan // grafik.setColor (getRandColor (100, 200)); // --- 2. Ini untuk mengatur warna dengan tipe numerik. Mode warna mengacu pada penggunaan tiga warna primer: merah, hijau, dan biru. Warna -warna lain diperoleh melalui penyesuaian tiga warna. Nilai -nilai dari tiga warna primer ini adalah 0 ~ 255 grafik. Final Random Random = Random Baru (); // secara acak menghasilkan garis interferensi, membuat kode otentikasi pada gambar tidak mudah dideteksi oleh program lain untuk (int i = 0; i <count; i ++) {graphics.setColor (getRandColor (150, 200)); // --- 3. final int x = random.nextInt (lebar - linewidth - 1) + 1; // Pastikan itu ditarik di dalam batas akhir int y = random.nextInt (tinggi - linewidth - 1) + 1; final int xl = random.nextInt (linewidth); final int yl = random.nextInt (linewidth); grafik.drawline (x, y, x + xl, y + yl); } // Ambil kode otentikasi yang dihasilkan secara acak (nomor 4 digit) final string resultCode = exctractrandCode (); untuk (int i = 0; i <resultCode.length (); i ++) {// Menampilkan kode otentikasi pada gambar, dan warna fungsi panggilan adalah sama. Mungkin karena benih terlalu dekat, sehingga Anda hanya dapat secara langsung menghasilkan // grafik.setColor (warna baru (20 + acak.nextint (130), 20 + acak // .nextint (130), 20 + acak.nextint (130))); // atur font color graphics.setColor (color.black); // atur gaya font //graphics.setfont(new font ("arial black", font.italic, 18)); Graphics.setFont (font baru ("Times New Roman", Font.Bold, 24)); // atur karakter, jarak karakter, margin atas.out.print (resultCode.charat (i)); graphics.drawstring (string.valueof (resultCode.charat (i)), (23 * i) + 8, 26); } System.out.println ("Output Langsung:"+Hasilcode); // Simpan kode otentikasi ke dalam request.getSession (). SetAttribute (session_key_of_rand_code, hasilnya); // gambar mengambil efek grafik.dispose (); // output gambar ke halaman gambaro.write (gambar, "jpeg", response.getoutputStream ()); } / *** @return kode acak* / private string exctractrandCode () {string final 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.generateTestr (randcodelength); case '3': return randcodeimageenum.upper_char.generateTestr (randcodelength); case '4': return randcodeimageenum.letter_char.generateTestr (randcodelength); case '5': return randcodeimageenum.all_char.generateStr (randcodelength); case '5': return randcodeimageenum.all_char.generateStr (randcodelength); default: return randcodeimageenum.number_char.generateStr (randcodelength); }}}} /*** Deskripsi: Hasilkan warna yang berbeda sesuai dengan nomor yang diberikan* @param Ini untuk mengatur warna dengan tipe numerik. Mode warna mengacu pada penggunaan tiga warna primer: merah, hijau, dan biru. Nilai -nilai dari ketiga warna primer ini adalah 0 ~ 255 melalui penyesuaian tiga warna diperoleh. Nilai -nilai dari ketiga warna primer ini adalah 0 ~ 255. * @param Ini untuk mengatur warna dengan tipe numerik. Mode warna mengacu pada penggunaan tiga warna primer: merah, hijau, dan biru. Nilai -nilai dari ketiga warna primer ini diperoleh dengan penyesuaian tiga warna adalah 0 ~ 255. * @Return Deskripsi: return color*/ private color getRandColor (int fc, int bc) {// Dapatkan rentang warna acak yang diberikan Final acak acak = acak baru (); 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); mengembalikan warna baru (r, g, b); } / *** Kode verifikasi kelas tambahan* / enum randcodeimageenum { / *** string campuran* / all_char ("0123456789abcdefghijkmnpqrstuvwxyzabcdefghijklmnopqrsuvwxyz; /** * Karakter */letter_char ("abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"),/** * huruf kecil */lower_char ("ABCDEFGHIJKLMNOPQRSUVWXYZ")),/ABCDEFGHIJKLMNOPQRSUVWXYZ "))) Number_char ("0123456789"), /*** Upper_char ("ABCDEFGHIJKLMNOPQRSTUVWXYZ"); / *** string yang akan dihasilkan*/ private string charstr; / ** * @param charstr */ private randcodeimageenum (string final charstr) {this.charstr = charstr; } / *** Kode verifikasi acak produksi** @param codelength* Panjang kode verifikasi* @return kode verifikasi* / public string generAteStr (final int codelength) {final stringBuffer sb = new stringBuffer (); Final Random Random = New Random (); final string sourcestr = getcharstr (); untuk (int i = 0; i <codelength; i ++) {sb.append (soursestr.charat (random.nextInt (soursestr.length ()))); } return sb.toString (); } / ** * @return {@link #charstr} * / public string getCharstr () {return charstr; }}}Langkah 4: Tulis kelas alat umum
/*** Kelas Alat Parameter Proyek**/Kelas Publik Resourceutil {Private Static Final ResourceBundle Bundle = java.util.resourceBundle.getBundle ("sysconfig"); / *** Dapatkan panjang kode acak** @return panjang kode acak*/ string statis public getRandCodelength () {return bundle.getString ("randcodelength"); } / *** Dapatkan jenis kode acak** @return Jenis kode acak* / string statis publik getRandCodetype () {return bundle.getString ("randcodetype"); }}Langkah 5: Config.Properties
randcodelength = 4randCodetype = 5
Langkah 6: Di sini Anda selesai, Anda dapat mencoba efeknya