一、js插件地址
qrcode.js插件Github仓库地址
下载zip解压
二、创建项目
SpringBoot项目
导入依赖
<!-- SpringBoot-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
项目结构
引入js
在/resources/static/
下创建js
文件夹,将qrcode.min.js
引入进来
页面
引入了Thymeleaf依赖,页面默认在/resources/templates/
下,在/resources/templates/
下创建index.html
页面,将js引入到页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二维码Demo</title>
</head>
<body>
<h1>生成二维码</h1>
<script type="text/javascript" src="/static/js/qrcode.min.js"></script>
<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "http://baidu.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
</body>
</html>
Controller
@Controller
public class IndexController {
@GetMapping
public String index(){
System.out.println("/");
return "index.html";
}
}
主启动类
@SpringBootApplication
public class WebApplication {
public static void main(String[] args) {
SpringApplication.run(WebApplication.class);
}
}
拦截器放行静态资源
如果不放行static下的静态资源,我们用到js文件会被拦截,导致页面找不到js文件。
@Configuration
public class WebResoucesConfig extends WebMvcConfigurationSupport {
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").
addResourceLocations("classpath:/static/");
}
}
三、效果
具体代码已上传Git仓库:使用QRcode.js生成二维码