主页:写程序的小王叔叔的博客欢迎来访👀
支持:点赞收藏关注
1 效果
网络异常,图片无法展示
|
网络异常,图片无法展示
|
2 实现方法
2.1.引入easyui基本插件及相关js文件
easyui 官网 进入官网下载最新版的js文件
<!--EASYUI--><linktype="text/css"rel="stylesheet"href="/js/jquery-easyui-1.7/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="/js/jquery-easyui-1.7/themes/mobile.css"><linktype="text/css"rel="stylesheet"href="/js/jquery-easyui-1.7/themes/icon.css"><scripttype="text/javascript"src="/js/jquery-3.3.1.min.js"></script><scripttype="text/javascript"src="/js/jquery-easyui-1.7/jquery.easyui.min.js"></script><scripttype="text/javascript"src="/js/jquery-easyui-1.7/jquery.easyui.mobile.js"></script>
2.2搭建基础版本的web端管理页面
3.搭建java端
3.1 pom.xml文件
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>1.3.0</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId></dependency><!--https://mvnrepository.com/artifact/com.liferay/org.apache.commons.fileupload --><dependency><groupId>com.liferay</groupId><artifactId>org.apache.commons.fileupload</artifactId><version>1.2.2.LIFERAY-PATCHED-1</version></dependency><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version><classifier>jdk15</classifier></dependency><!--热部署组件--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional><scope>true</scope></dependency><!--thymeleaf模板引擎--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version><classifier>jdk15</classifier></dependency><!--Gson--><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId></dependency><!--二维码--><!--https://mvnrepository.com/artifact/com.google.zxing/core --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>2.1</version></dependency><!--https://mvnrepository.com/artifact/com.google.zxing/javase --><dependency><groupId>com.google.zxing</groupId><artifactId>javase</artifactId><version>2.1</version></dependency><!--条形码--><dependency><groupId>net.sf.barcode4j</groupId><artifactId>barcode4j-light</artifactId><version>2.0</version></dependency>
3.2配置生成二维码的 工具类
/*** 二维码生成和读的工具类**/publicclassQrCodeUtil { /*** 生成包含字符串信息的二维码图片* @param outputStream 文件输出流路径* @param content 二维码携带信息* @param qrCodeSize 二维码图片大小* @param imageFormat 二维码的格式* @throws WriterException * @throws IOException */publicstaticbooleancreateQrCode(StringfilePath, Stringcontent, intqrCodeSize, StringimageFormat) throwsWriterException, IOException{ //设置二维码纠错级别MAPHashtable<EncodeHintType, ErrorCorrectionLevel>hintMap=newHashtable<EncodeHintType, ErrorCorrectionLevel>(); hintMap.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.L); // 矫错级别 QRCodeWriterqrCodeWriter=newQRCodeWriter(); //创建比特矩阵(位矩阵)的QR码编码的字符串 BitMatrixbyteMatrix=qrCodeWriter.encode(content, BarcodeFormat.QR_CODE, qrCodeSize, qrCodeSize, hintMap); // 使BufferedImage勾画QRCode (matrixWidth 是行二维码像素点)intmatrixWidth=byteMatrix.getWidth(); BufferedImageimage=newBufferedImage(matrixWidth-200, matrixWidth-200, BufferedImage.TYPE_INT_RGB); image.createGraphics(); Graphics2Dgraphics= (Graphics2D) image.getGraphics(); graphics.setColor(Color.WHITE); graphics.fillRect(0, 0, matrixWidth, matrixWidth); // 使用比特矩阵画并保存图像graphics.setColor(Color.BLACK); for (inti=0; i<matrixWidth; i++){ for (intj=0; j<matrixWidth; j++){ if (byteMatrix.get(i, j)){ graphics.fillRect(i-100, j-100, 1, 1); } } } OutputStreamoutputStream=newFileOutputStream(newFile(filePath)); returnImageIO.write(image, imageFormat, outputStream); } /*** 读二维码并输出携带的信息*/publicstaticvoidreadQrCode(InputStreaminputStream) throwsIOException{ //从输入流中获取字符串信息BufferedImageimage=ImageIO.read(inputStream); //将图像转换为二进制位图源LuminanceSourcesource=newBufferedImageLuminanceSource(image); BinaryBitmapbitmap=newBinaryBitmap(newHybridBinarizer(source)); QRCodeReaderreader=newQRCodeReader(); Resultresult=null ; try { result=reader.decode(bitmap); } catch (ReaderExceptione) { e.printStackTrace(); } System.out.println(result.getText()); } /*** @param content* @return* @throws WriterException* @throws IOException*/publicstaticStringcreateTeachQRCode(Stringid) throwsWriterException, IOException { StringqrCodeUrl="/qrcode/"+id+".jpg"; createQrCode("src\\main\\webapp\\qrcode\\"+id+".jpg",id,900,"JPEG"); returnqrCodeUrl; } }
3.3编写需要生成二维码的业务方法
value="/saveInfo", method=RequestMethod.POST) (publicCodesaveInfo( Modelmodel ,Codecode , HttpSessionsession ) throwsException { Stringrandoms=String.valueOf(UserNoStr.GenerateRandom(10));// 生成随机14位数字//本地生成文件夹Filefile=newFile(systemConfig.imagesPathNew+"imagesQrcode"); file.mkdirs(); Filefile1=newFile(systemConfig.imagesPathNew+"imagesBarcode"); file1.mkdirs(); // 二维码路径(本地图片路径)D:/image/imagesQrcode/6498766294.jpgStringqrcodeImgUrl=systemConfig.imagesPathNew+newBigInteger( randoms ) +".jpg"; //本地地址 StringlocalPath=systemConfig.ImagesPath+"/"+newBigInteger( randoms )+".jpg"; StringqrUrl=systemConfig.imagesurl+"/code/suyuanInfo/"+newBigInteger( randoms ); //System.out.println(qrUrl);// 生成二维码booleanis=QrCodeUtil.createQrCode(qrcodeImgUrl, qrUrl,900, "JPEG"); code.setImgUrl(localPath); code.setSuyuan_code(randoms); codeService.save(code); model.addAttribute("suyuan_code", code.getSuyuan_code()); model.addAttribute("imgUrl", localPath); model.addAttribute("code", code); //return "addCode";returncode; }
3.4 配置 服务器加载图片工具
publicclassWebAppConfigextendsWebMvcConfigurerAdapter { "${cbs.imagesPath}") (privateStringmImagesPath; //访问图片方法publicvoidaddResourceHandlers(ResourceHandlerRegistryregistry) { if(mImagesPath.equals("") ||mImagesPath.equals("${cbs.imagesPath}")){ StringimagesPath=WebAppConfig.class.getClassLoader().getResource("").getPath(); if(imagesPath.indexOf(".jar")>0){ imagesPath=imagesPath.substring(0, imagesPath.indexOf(".jar")); }elseif(imagesPath.indexOf("classes")>0){ imagesPath="file:"+imagesPath.substring(0, imagesPath.indexOf("classes")); } imagesPath=imagesPath.substring(0, imagesPath.lastIndexOf("/"))+"/image/"; mImagesPath=imagesPath; } LoggerFactory.getLogger(WebAppConfig.class).info("imagesPath="+mImagesPath); registry.addResourceHandler("/image/**").addResourceLocations(mImagesPath); registry.addResourceHandler("/image/**").addResourceLocations("file:/d:/image/");//前台加载图片super.addResourceHandlers(registry); } }
3.5 基本功能模块写好后,配置返现代理
解释:因为微信二维码开发,需要https的请求方式,因此服务器开发这块要有https的域名,那我们这里就做一个测试的https域名,这样就用到这个反向代理工具:本地域名映射工具NATAPP
基本的域名映射工具NATAPP配置方法请参考博客,这个博客中详细的说明了NATAPP工具的注册,登录,使用及详细的使用方法。
3.6 二维码使用
二维码生成后,以正常的img方式加载到页面中即可。
3.7 二维码外框设计
介于页面布局效果,将二维码放置到一个框框中,这样显着布局合理并且漂亮些。
二维码背景框的代码
<divstyle="margin:0 auto;margin-top:10px;height: 160px; width: 152px; background: linear-gradient(#035af3, #035af3) left top, linear-gradient(#035af3, #035af3) left top, linear-gradient(#035af3, #035af3) right top,linear-gradient(#035af3, #035af3) right top, linear-gradient(#035af3, #035af3) right bottom, linear-gradient(#035af3, #035af3) right bottom, linear-gradient(#035af3, #035af3) left bottom,linear-gradient(#035af3, #035af3) left bottom; background-repeat: no-repeat; background-size: 2px 20px, 20px 2px;"><imgid="simg"th:src="${codeInfo.imgUrl}"style="height:150px;width:145px;margin-top:5px;margin-left: 3px;"/></div>
3.8 二维码的使用
在页面中,放入下面内容,浏览器将判断是否为微信浏览器,进行提示跳转了。
<script>varua=navigator.userAgent.toLowerCase(); varisWeixin=ua.indexOf('micromessenger')!=-1; if(!isWeixin){ window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=888"; } </script>
⚠️注意 ~
💯本期内容就结束了,如果内容有误,麻烦大家评论区指出!
如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃♀️帮大家解决👨🏫!
如果我的文章有帮助到您,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~