免費(fèi)瀏覽的網(wǎng)站資源平臺(tái)
這里寫自定義目錄標(biāo)題
- 開發(fā)永和小票
- 開發(fā)步驟
- 1、對頁面進(jìn)行需求分析
- 使用CSS的方式
- Order.html
- 問題：html代碼和css樣式代碼交織
- idea開發(fā)后端程序
- 使用chatGPT給我們打工
- QRCreate.java
開發(fā)永和小票
開發(fā)步驟
1、對頁面進(jìn)行需求分析
- 頁面是很多文字組成，文字有大有小
- 文字位置，居中，默認(rèn)居左
- 畫線，虛線
- 表格，單元格居左，單價(jià)居右，表格寬度
- 段落，空2個(gè)中文字符位置
- 圖片，二維碼，上部有距離，左邊有距離
- 整個(gè)可以有寬度限制
使用CSS的方式
1）嵌入css代碼
2）樣式表文件
Order.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body style="font-size:10px;width:280px;"><div>顧客聯(lián)</div><div style="font-size: 22px;font-weight: bold;">請您留意取餐賬單號(hào)</div><div style="padding-left: 58px;">自取顧客聯(lián)</div><div>永王（北三環(huán)西路店）</div><div>010-12345678</div><div style="padding-left: 65px;">--結(jié)賬單--</div><div style="font-size: 22px;font-weight: bold;">賬單號(hào)：P000009</div><div>賬單類型：堂食</div><div>人數(shù)：1</div><div>收銀員：張靜</div><div>開單時(shí)間：2023-06-19 07:24:11</div><div>結(jié)賬實(shí)際：2023-06-19 07:25:25</div><hr style="border: 1px dashed;"/><table border="0"><tr align="center"><td width="50">數(shù)量</td><td>品項(xiàng)</td><td width="50">金額</td></tr><tr><td valign="top">1</td><td>油條豆?jié){套餐<br/>1X--非礬油條<br/>1X--現(xiàn)磨豆?jié){（熱/甜）</td><td valign="top" align="right">7.00</td></tr></table><hr style="border: 1px dashed;"/><table><tr><td width="200">支付寶花唄一元早餐 1</td><td align="right">-3.00</td></tr><tr>/td><td>合計(jì)<<td align="right">4.00</td></tr><tr><td>支付寶</td><td align="right">1.00</td></tr><tr><td>支付寶補(bǔ)貼</td><td align="right">3.00</td></tr></table><hr style="border: 1px dashed;"/><div>打印時(shí)間：2023-06-19 07:24:55</div><hr style="border: 1px dashed;"/><div style="padding-top:8px;text-indent: 2em;">根據(jù)相關(guān)稅法規(guī)定，電子發(fā)票的開票日期同網(wǎng)上申請電子發(fā)票的日期，如您需要當(dāng)日的電子發(fā)票請務(wù)必在消費(fèi)當(dāng)日通過掃描下方二維碼，根據(jù)指引步驟開具您的增值稅電子普通發(fā)票。此二維碼30天有效，掃描時(shí)請保持小票平整。</div><!-- padding的順序：上右下左 --><img src="qr.png" style="padding: 20px 0px 20px 80px;"/><div>官網(wǎng)：www.yonghe.com</div><div>加盟熱線：86-21-60769397 或 86-21-60799002</div></body>
</html>問題：html代碼和css樣式代碼交織
代碼量少，無所謂。但是如果非常多，結(jié)構(gòu)不清晰，代碼調(diào)試難度就上升。
怎么解決呢？
能否把html代碼和css代碼剝離？
抽取出樣式表文件，創(chuàng)建css目錄，創(chuàng)建base.css文件，把樣式放入其中。
idea開發(fā)后端程序
以二維碼為例，利用谷歌zxing的工具類包，使用工具類創(chuàng)建一個(gè)SpringBoot項(xiàng)目（Maven idea自帶）
1）完成idea安裝和配置，寫一個(gè)HelloController，SpringMVC。保證環(huán)境OK。
2）引入谷歌zxing依賴，寫法問chatGPT，它怎么成為我們的最佳的編程助手，最終實(shí)現(xiàn)自己定制二維碼。
使用chatGPT給我們打工
QRCreate.java
package com.yutain.hello;import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.WriterException;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;
import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
import com.google.zxing.qrcode.encoder.Encoder;public class QRCreate {public static void main(String[] args) throws Exception {make("https://blog.csdn.net/nutony", "d:/qr.png");}public static void make(String website, String filepath) throws WriterException, IOException {// 二維碼文本內(nèi)容
// String qrCodeText = "http://www.yutianedu.com";String filepath = "d:/qr.png";// 二維碼圖片寬度（像素）int width = 300;// 二維碼圖片高度（像素）int height = 300;// 二維碼圖片類型String fileType = "png";// 設(shè)置字符集編碼Encoder.encode(website, ErrorCorrectionLevel.Q, null).toString();// 設(shè)置二維碼生成參數(shù)QRCodeWriter qrWriter = new QRCodeWriter();BitMatrix bitMatrix = qrWriter.encode(website, BarcodeFormat.QR_CODE, width, height);// 將BitMatrix轉(zhuǎn)換為BufferedImageBufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);for (int x = 0; x < width; x++) {for (int y = 0; y < height; y++) {image.setRGB(x, y, bitMatrix.get(x, y) ? 0xFF000000 : 0xFFFFFFFF);}}// 保存或顯示二維碼圖片ImageIO.write(image, fileType, new File(filepath));}
}