介绍
在本教程中，我们将使用 react 创建一个 qr 代码生成器 web 应用程序。对于那些希望了解集成 api、管理状态和生成动态内容的人来说，该项目是理想的选择。
项目概况
二维码生成器允许用户通过输入内容、调整大小和选择背景颜色来创建二维码。它利用公共 api 生成 qr 码并将其显示在屏幕上。用户可以出于各种目的生成、查看和下载二维码。
特征
- 内容输入：用户可以输入想要编码成二维码的内容。
- 动态大小：动态调整二维码的大小。
- 背景颜色自定义：选择二维码的背景颜色。
- api 集成：从公共二维码生成 api 获取二维码。
- 下载选项：允许用户下载生成的二维码。
使用的技术
- react：用于构建用户界面和管理组件状态。
- css：用于设计应用程序的样式。
- javascript：用于处理 api 请求和应用程序逻辑。
项目结构
项目组织如下：
├── public ├── src │ ├── components │ │ ├── qrcode.jsx │ ├── app.jsx │ ├── app.css │ ├── index.js │ └── index.css ├── package.json └── readme.md
关键部件
- qrcode.jsx：管理qr码生成和显示。
- app.jsx：渲染主布局和 qrcode 组件。
代码说明
二维码组件
qrcode 组件处理 qr 码生成逻辑并管理生成的 qr 码的显示。
import { usestate } from "react";
import axios from "axios";
const qrcode = () => {
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&size=300x300&bgcolor=ffffff"
);
const generateqr = () => {
axios
.get(
`https://api.qrserver.com/v1/create-qr-code/?data=${content}&size=${size}x${size}&bgcolor=${bgcolor}`
)
.then((res) => {
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"
/>
</div>
<div classname="input-color">
<h4>background color:</h4>
<input
type="color"
value={`#${bgcolor}`}
onchange={(e) => setbgcolor(e.target.value.substring(1))}
/>
</div>
<div classname="input-dimension">
<h4>dimension:</h4>
<input
type="range"
min="200"
max="600"
value={size}
onchange={(e) => setsize(e.target.value)}
/>
</div>
<button classname="generate-btn" onclick={generateqr}>
generate qr
</button>
</div>
<div classname="output-box">
<div classname="qr-image">
{qrcode && <img src={qrcode} alt="generated qr code" />}
</div>
{qrcode && (
<div classname="download-btn">
<a href={qrcode} 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 = () => {
return (
<div classname='app'>
<div classname="header">
<h1>qr code generator</h1>
</div>
<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.git cd qr-code-generator npm install npm start
这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。
现场演示
在这里查看二维码生成器的现场演示。
结论
qr code generator 项目是如何在 react 中集成 api 和管理动态内容的实际示例。它提供了一个简单而有效的工具来生成二维码，具有用户友好的界面。
制作人员
- 灵感：该项目的灵感来自于为各种应用程序轻松生成二维码的需求。
作者
abhishek gurjar 是一位 web 开发人员，热衷于创建交互式且有用的 web 应用程序。您可以在 github 上关注他的工作。
