使用QRcodejs.JS生成二维码

最新推荐文章于 2024-06-21 21:10:05 发布

Liu_Shihao

最新推荐文章于 2024-06-21 21:10:05 发布

阅读量429

点赞数 1

分类专栏： SpringBoot 文章标签： java js

本文链接：https://blog.csdn.net/DreamsArchitects/article/details/110127217

版权

SpringBoot 专栏收录该内容

60 篇文章 4 订阅

订阅专栏

文章目录

一、js插件地址
二、创建项目
三、效果

一、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生成二维码

Liu_Shihao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用QRcodejs.JS生成二维码

文章目录一、js插件地址二、创建项目导入依赖引入js页面Controller主启动类拦截器放行静态资源三、效果一、js插件地址qrcode.js插件Github仓库地址下载zip解压二、创建项目SpringBoot项目导入依赖  <parent> <groupId>org.springframework.boot</groupId> <artifactId
复制链接

扫一扫