使用 React 构建二维码生成器

百变鹏仔 3个月前 (09-19) #CSS

文章标签生成器

介绍

在本教程中，我们将使用 react 创建一个 qr 代码生成器 web 应用程序。对于那些希望了解集成 api、管理状态和生成动态内容的人来说，该项目是理想的选择。

项目概况

二维码生成器允许用户通过输入内容、调整大小和选择背景颜色来创建二维码。它利用公共 api 生成 qr 码并将其显示在屏幕上。用户可以出于各种目的生成、查看和下载二维码。

特征

使用的技术

项目结构

项目组织如下：

├── public├── src│   ├── components│   │   ├── qrcode.jsx│   ├── app.jsx│   ├── app.css│   ├── index.js│   └── index.css├── package.json└── readme.md

关键部件

代码说明

二维码组件

qrcode 组件处理 qr 码生成逻辑并管理生成的 qr 码的显示。

import { usestate } from "react";import axios from "axios";const qrcode = () =&gt; {  const [content, setcontent] = usestate("");  const [size, setsize] = usestate(300);  const [bgcolor, setbgcolor] = usestate("ffffff");  const [qrcode, setqrcode] = usestate(    "https://api.qrserver.com/v1/create-qr-code/?data=qr%20code%20generator&amp;size=300x300&amp;bgcolor=ffffff"  );  const generateqr = () =&gt; {    axios      .get(        `https://api.qrserver.com/v1/create-qr-code/?data=${content}&amp;size=${size}x${size}&amp;bgcolor=${bgcolor}`      )      .then((res) =&gt; {        setqrcode(res.config.url);      });  };  return (    <div classname="qr-code">      <div classname="input-box">        <div classname="input-container">          <input type="text" value="{content}" onchange="{(e)"> setcontent(e.target.value)}            placeholder="enter content"          /&gt;        </div>        <div classname="input-color">          <h4>background color:</h4>          <input type="color" value="{`#${bgcolor}`}" onchange="{(e)"> setbgcolor(e.target.value.substring(1))}          /&gt;        </div>        <div classname="input-dimension">          <h4>dimension:</h4>          <input type="range" min="200" max="600" value="{size}" onchange="{(e)"> setsize(e.target.value)}          /&gt;        </div>        <button classname="generate-btn" onclick="{generateqr}">          generate qr        </button>      </div>      <div classname="output-box">        <div classname="qr-image">          {qrcode &amp;&amp; @@##@@}        </div>        {qrcode &amp;&amp; (          <div classname="download-btn">            <a href="%7Bqrcode%7D" download="qrcode.png">              <button type="button">download</button>            </a>          </div>        )}      </div>    </div>  );};export default qrcode;

该组件管理 qr 码内容、大小、背景颜色和生成的 qr 码 url 的状态。它从 api 获取 qr 码并显示它们。

应用程序组件

app 组件渲染 qrcode 组件并为布局提供页眉和页脚。

import qrcode from './components/qrcode'import "./app.css"const app = () =&gt; {  return (    <div classname="app">      <div classname="header">        <h1>qr code generator</h1>      </div>      <qrcode></qrcode><div classname="footer">        <p>made with ❤️ by abhishek gurjar</p>      </div>    </div>  );}export default app;

该组件设置整体布局并包含 qr 代码生成器。

css 样式

css 设计应用程序以确保界面干净且用户友好。

* {  box-sizing: border-box;}body {  margin: 0;  padding: 0;  font-family: arial, sans-serif;}.app {  display: flex;  flex-direction: column;  align-items: center;  min-height: 100vh;  padding: 20px;  background-color: #134b70;  color: white;}.header {  width: 100%;  text-align: center;}.header h1 {  font-size: 30px;}.qr-code {  background-color: #000000;  display: flex;  align-items: flex-start;  padding: 60px;  gap: 100px;  border-radius: 10px;  font-family: arial, sans-serif;  box-shadow: rgba(231, 231, 231, 0.35) 0px 5px 15px;}.input-box {  display: flex;  flex-direction: column;  align-items: center;  margin-bottom: 20px;}.input-container,.input-color,.input-dimension {  margin: 10px 0;  gap: 40px;}input[type="text"] {  padding: 10px;  font-size: 16px;  width: 450px;  border: 1px solid #ccc;  border-radius: 5px;}input[type="color"] {  padding: 5px;  width: 450px;}input[type="range"] {  width: 450px;}.generate-btn {  padding: 15px 40px;  width: 450px;  font-size: 16px;  background-color: #4caf50;  color: white;  border: none;  border-radius: 5px;  cursor: pointer;  margin-top: 50px;}.generate-btn:hover {  background-color: #45a049;}.output-box {  display: flex;  flex-direction: column;  align-items: center;}.qr-image img {  border: 1px solid #000000;}.download-btn {  margin-top: 20px;}.download-btn button {  width: 300px;  padding: 12px 40px;  font-size: 16px;  background-color: #1171b1;  color: white;  border: none;  border-radius: 5px;  cursor: pointer;}.download-btn button:hover {  background-color: #134b70;}.footer {  width: 100%;  padding: 20px;  text-align: center;}

样式确保布局简洁，具有用户友好的视觉效果和响应式设计。

安装与使用

要开始此项目，请克隆存储库并安装依赖项：

git clone https://github.com/abhishekgurjar-in/qr_code_generator.gitcd qr-code-generatornpm installnpm start

这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。

现场演示

在这里查看二维码生成器的现场演示。

结论

qr code generator 项目是如何在 react 中集成 api 和管理动态内容的实际示例。它提供了一个简单而有效的工具来生成二维码，具有用户友好的界面。

制作人员

作者

abhishek gurjar 是一位 web 开发人员，热衷于创建交互式且有用的 web 应用程序。您可以在 github 上关注他的工作。

文章推荐