JavaScript方面
基础用法
1.循环遍历js对象(Ajax中)
@RequestMapping ( "showFirst" )
@ResponseBody
public List< Category> showFirst ( ) {
return categoryService. queryFirst ( ) ;
}
$. ajax ( {
datatype: "json" ,
type: "POST" ,
url: "${pageContext.request.contextPath}/category/showFirst" ,
success: function ( result) {
let index
for ( index in result) {
$ ( "#firstCategory" ) . append ( "<option value=" + result[ index] . id+ ">" + result[ index] . name+ "</option>" )
}
}
} )
常见场景
1. 页面跳转(DOM)
window. location. href= "${pageContext.request.contextPath}/back/main/main.jsp"
JQuery方面
基础用法
1. 引入jQuery文件
< script type= "text/javascript" src= "${pageContext.request.contextPath}/back/js/jquery-3.3.1.js" > < / script>
常见场景
1. 点击更换验证码
< a class = " code_pic" id = " vcodeImgWrap" name = " change_code_img" href = " javascript:void(0);" >
< img id = " imgVcode" src = " ${pageContext.request.contextPath}/admin/code" class = " Ucc_captcha Captcha-image" >
</ a>
< a id = " vcodeImgBtn" name = " change_code_link" class = " code_picww" href = " javascript:void(0);" > 换张图</ a>
$ ( "#vcodeImgWrap, #vcodeImgBtn" ) . click ( function ( ) {
$ ( "#imgVcode" ) . prop ( "src" , "${pageContext.request.contextPath}/admin/code?time=" + new Date ( ) . getTime ( ) . toString ( ) )
} )
附:SpringBoot验证码Controller代码和验证码工具类代码
@RequestMapping ( "code" )
public void securityCode ( HttpServletResponse response, HttpSession session) throws IOException {
response. setContentType ( "image/png" ) ;
String code = SecurityCodeUtil. generateVerifyCode ( 4 ) ;
session. setAttribute ( "code" , code) ;
BufferedImage image = SecurityCodeUtil. getImage ( 100 , 40 , code) ;
ImageIO. write ( image, "png" , response. getOutputStream ( ) ) ;
}
package ace. gjh. util;
import javax. imageio. ImageIO;
import java. awt. *;
import java. awt. geom. AffineTransform;
import java. awt. image. BufferedImage;
import java. io. File;
import java. io. FileOutputStream;
import java. io. IOException;
import java. io. OutputStream;
import java. util. Arrays;
import java. util. Random;
public class SecurityCodeUtil {
public static final String VERIFY_CODES = "23456789ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz" ;
private static Random random = new Random ( ) ;
public static String generateVerifyCode ( int verifySize) {
return generateVerifyCode ( verifySize, VERIFY_CODES) ;
}
public static String generateVerifyCode ( int verifySize, String sources) {
if ( sources == null || sources. length ( ) == 0 ) {
sources = VERIFY_CODES;
}
int codesLen = sources. length ( ) ;
Random rand = new Random ( System. currentTimeMillis ( ) ) ;
StringBuilder verifyCode = new StringBuilder ( verifySize) ;
for ( int i = 0 ; i < verifySize; i++ ) {
verifyCode. append ( sources. charAt ( rand. nextInt ( codesLen - 1 ) ) ) ;
}
return verifyCode. toString ( ) ;
}
public static String outputVerifyImage ( int w, int h, File outputFile, int verifySize) throws IOException {
String verifyCode = generateVerifyCode ( verifySize) ;
outputImage ( w, h, outputFile, verifyCode) ;
return verifyCode;
}
public static String outputVerifyImage ( int w, int h, OutputStream os, int verifySize) throws IOException {
String verifyCode = generateVerifyCode ( verifySize) ;
outputImage ( w, h, os, verifyCode) ;
return verifyCode;
}
public static void outputImage ( int w, int h, File outputFile, String code) throws IOException {
if ( outputFile == null) {
return ;
}
File dir = outputFile. getParentFile ( ) ;
if ( ! dir. exists ( ) ) {
dir. mkdirs ( ) ;
}
try {
outputFile. createNewFile ( ) ;
FileOutputStream fos = new FileOutputStream ( outputFile) ;
outputImage ( w, h, fos, code) ;
fos. close ( ) ;
} catch ( IOException e) {
throw e;
}
}
public static BufferedImage getImage ( int w, int h, String code) {
int verifySize = code. length ( ) ;
BufferedImage image = new BufferedImage ( w, h, BufferedImage. TYPE_INT_RGB) ;
Random rand = new Random ( ) ;
Graphics2D g2 = image. createGraphics ( ) ;
g2. setRenderingHint ( RenderingHints. KEY_ANTIALIASING, RenderingHints. VALUE_ANTIALIAS_ON) ;
Color[ ] colors = new Color [ 5 ] ;
Color[ ] colorSpaces = new Color [ ] { Color. WHITE, Color. CYAN,
Color. GRAY, Color. LIGHT_GRAY, Color. MAGENTA, Color. ORANGE,
Color. PINK, Color. YELLOW} ;
float [ ] fractions = new float [ colors. length] ;
for ( int i = 0 ; i < colors. length; i++ ) {
colors[ i] = colorSpaces[ rand. nextInt ( colorSpaces. length) ] ;
fractions[ i] = rand. nextFloat ( ) ;
}
Arrays. sort ( fractions) ;
g2. setColor ( Color. GRAY) ;
g2. fillRect ( 0 , 0 , w, h) ;
Color c = getRandColor ( 200 , 250 ) ;
g2. setColor ( c) ;
g2. fillRect ( 0 , 2 , w, h - 4 ) ;
Random random = new Random ( ) ;
g2. setColor ( getRandColor ( 160 , 200 ) ) ;
for ( int i = 0 ; i < 20 ; i++ ) {
int x = random. nextInt ( w - 1 ) ;
int y = random. nextInt ( h - 1 ) ;
int xl = random. nextInt ( 6 ) + 1 ;
int yl = random. nextInt ( 12 ) + 1 ;
g2. drawLine ( x, y, x + xl + 40 , y + yl + 20 ) ;
}
float yawpRate = 0.05f ;
int area = ( int ) ( yawpRate * w * h) ;
for ( int i = 0 ; i < area; i++ ) {
int x = random. nextInt ( w) ;
int y = random. nextInt ( h) ;
int rgb = getRandomIntColor ( ) ;
image. setRGB ( x, y, rgb) ;
}
shear ( g2, w, h, c) ;
g2. setColor ( getRandColor ( 100 , 160 ) ) ;
int fontSize = h - 4 ;
Font font = new Font ( "Algerian" , Font. ITALIC, fontSize) ;
g2. setFont ( font) ;
char [ ] chars = code. toCharArray ( ) ;
for ( int i = 0 ; i < verifySize; i++ ) {
AffineTransform affine = new AffineTransform ( ) ;
affine. setToRotation ( Math. PI / 4 * rand. nextDouble ( ) * ( rand. nextBoolean ( ) ? 1 : - 1 ) , ( w / verifySize) * i + fontSize / 2 , h / 2 ) ;
g2. setTransform ( affine) ;
g2. drawChars ( chars, i, 1 , ( ( w - 10 ) / verifySize) * i + 5 , h / 2 + fontSize / 2 - 10 ) ;
}
g2. dispose ( ) ;
return image;
}
public static void outputImage ( int w, int h, OutputStream os, String code) throws IOException {
BufferedImage image = getImage ( w, h, code) ;
ImageIO. write ( image, "jpg" , os) ;
}
private static Color getRandColor ( int fc, int bc) {
if ( fc > 255 )
fc = 255 ;
if ( bc > 255 )
bc = 255 ;
int r = fc + random. nextInt ( bc - fc) ;
int g = fc + random. nextInt ( bc - fc) ;
int b = fc + random. nextInt ( bc - fc) ;
return new Color ( r, g, b) ;
}
private static int getRandomIntColor ( ) {
int [ ] rgb = getRandomRgb ( ) ;
int color = 0 ;
for ( int c : rgb) {
color = color << 8 ;
color = color | c;
}
return color;
}
private static int [ ] getRandomRgb ( ) {
int [ ] rgb = new int [ 3 ] ;
for ( int i = 0 ; i < 3 ; i++ ) {
rgb[ i] = random. nextInt ( 255 ) ;
}
return rgb;
}
private static void shear ( Graphics g, int w1, int h1, Color color) {
shearX ( g, w1, h1, color) ;
shearY ( g, w1, h1, color) ;
}
private static void shearX ( Graphics g, int w1, int h1, Color color) {
int period = random. nextInt ( 2 ) ;
boolean borderGap = true ;
int frames = 1 ;
int phase = random. nextInt ( 2 ) ;
for ( int i = 0 ; i < h1; i++ ) {
double d = ( double ) ( period >> 1 )
* Math. sin ( ( double ) i / ( double ) period
+ ( 6.2831853071795862D * ( double ) phase)
/ ( double ) frames) ;
g. copyArea ( 0 , i, w1, 1 , ( int ) d, 0 ) ;
if ( borderGap) {
g. setColor ( color) ;
g. drawLine ( ( int ) d, i, 0 , i) ;
g. drawLine ( ( int ) d + w1, i, w1, i) ;
}
}
}
private static void shearY ( Graphics g, int w1, int h1, Color color) {
int period = random. nextInt ( 40 ) + 10 ;
boolean borderGap = true ;
int frames = 20 ;
int phase = 7 ;
for ( int i = 0 ; i < w1; i++ ) {
double d = ( double ) ( period >> 1 )
* Math. sin ( ( double ) i / ( double ) period
+ ( 6.2831853071795862D * ( double ) phase)
/ ( double ) frames) ;
g. copyArea ( i, 0 , 1 , h1, 0 , ( int ) d) ;
if ( borderGap) {
g. setColor ( color) ;
g. drawLine ( i, ( int ) d, i, 0 ) ;
g. drawLine ( i, ( int ) d + h1, i, h1) ;
}
}
}
public static void main ( String[ ] args) throws IOException {
String generateVerifyCode = generateVerifyCode ( 6 ) ;
System. out. println ( generateVerifyCode) ;
BufferedImage image = getImage ( 255 , 80 , generateVerifyCode) ;
ImageIO. write ( image, "png" , new FileOutputStream ( new File ( "D:\\1.png" ) ) ) ;
}
}
2. Ajax请求
$ ( "#submitLoginBtn" ) . click ( function ( ) {
$. ajax ( {
data: 'username=' + $ ( "#txtUsername" ) . val ( ) + '&password=' + $ ( "#txtPassword" ) . val ( ) + '&imageCode=' + $ ( "#code" ) . val ( ) ,
datatype: "json" ,
url: '${pageContext.request.contextPath}/admin/login' ,
type: 'POST' ,
success: function ( result) {
if ( result. status) {
window. location. href= "${pageContext.request.contextPath}/back/main/main.jsp"
} else {
$ ( "#message" ) . text ( result. message)
}
}
} )
} )
@RequestMapping ( "login" )
@ResponseBody
public Map< String, Object> login ( Admin adminLogin, String imageCode, HttpSession session) {
Map< String, Object> map = new HashMap < > ( ) ;
Admin admin = adminService. queryByUsername ( adminLogin. getUsername ( ) ) ;
String code = ( String) session. getAttribute ( "code" ) ;
if ( ! code. equalsIgnoreCase ( imageCode) ) {
map. put ( "status" , false ) ;
map. put ( "message" , "验证码错误!" ) ;
return map;
}
if ( admin != null) {
map. put ( "status" , true ) ;
if ( admin. getPassword ( ) . equals ( adminLogin. getPassword ( ) ) ) {
session. setAttribute ( "admin" , admin) ;
map. put ( "message" , "登录成功!" ) ;
} else {
map. put ( "message" , "密码错误!" ) ;
}
} else {
map. put ( "status" , false ) ;
map. put ( "message" , "用户名输入错误!" ) ;
}
return map;
}