mysql 8.0 (oracle) changed the driver package path,
Before 8.0. After com.mysql.jdbc.Driver
8.0. com.mysql.cj.jdbc.Driver
The core code is also changed, and a parameter
is added to the back of the database. Time zone: otherwise the date calculation is offset, 8 hours. The
new driver will automatically prompt you to add this parameter.
?serverTimezone=Asia/Shanghai
String driver = "com.mysql.cj.jdbc.Driver";
//访问本机的mysql数据库，端口3307，数据库名
String url = "jdbc:mysql://localhost:3307/mysql-db" +
"?serverTimezone=Asia/Shanghai";
Understand the database, understand how java access the database, front-end technology
Two eras:
1）html+css（前端技术）+jsp+servlert/springmvc+spring+mybaits(jdbc)
2）h5+css3+ vue+nodejs/springmvc+spring+mybatis
html upgrade h5, css upgrade css3
2) HTML to make web pages + css to beautify the page
Handy tools for web development: HBuilderX domestic, VsCode abroad
Be your first webpage hello.html
1) Open HBuilderX to create a new project (the project is essentially a directory)
2) Create hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个网页</title>
</head>
<body>
hello World!
</body>
</html>
Two ways to browse the page:
1) Open the browser directly, it is recommended to use Google Chrome
file:///C:/2011/hb2011/hello.html
to directly access local files, html+css+javascript
2) hbuilder directly browse
http://127.0.0.1:8848/hb2011/hello.html
vue+json/java
Use nodejs to build your own web service
This way will automatically refresh
To achieve Yonghe receipt printing:
1) Draw the page html, and write all the page text first
2) Page beautification css
There are many labels, layout
formtable
tr row
td cell (column)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永和小票</title>
<!-- style样式表 美化页面-->
<style>
/*设置body盒子大小*/
body{
width: 350px;
}
/*把分割线设置为虚线*/
hr{
border: 1px dashed;
}
/*设置请您留意取餐账单号字号*/
.bill{
font-size: 36px;
}
/*设置结账单和自取顾客联偏右*/
.self{
padding-left: 150px;
}
/*设置账单号字体*/
.a{
font-size: 36px;
}
/*设置间隔*/
.note{
padding-top: 30px;/*设置顶部间距*/
padding-bottom: 10px;/*上下间距*/
}
.qrimg{
text-align:center;
}
</style>
</head>
<body>
<div>顾客联</div>
<br /><!--换行-->
<div class="bill">请您留意取餐账单号</div>
<div class="self">自取顾客联</div>
<div>永和大王(北三环西路店)</div>
<div>010-62112313</div>
<div class="self">--结账单--</div>
<div class="a">账单号：P0000009</div>
<div>账单类型:堂食</div>
<div>人数:1</div>
<div>收银员:张静</div>
<div>开单时间:2018-04-17 07:24:11</div>
<div>结账时间:2018-04-17 07:24:22</div>
<hr /><!--分割线-->
<table border="0"><!--表格-->
<tr><!---->
<td width="50px" align="center">数量</td>
<td width="200px">品项</td>
<td width="50px" align="center">金额</td>
</tr>
<tr>
<td valign="top" align="center">1</td><!--valign="top" 顶上-->
<td>油条豆浆套餐<br />
1 X --非矾油条<br />
1 X --现磨豆浆 (热/甜)<br />
</td>
<td valign="top" align="center">7.00</td>
</tr>
</table>
<hr />
<table border="0" width="325px">
<tr>
<td>支付宝花呗一元早餐</td>
<td align="center">-3.00</td>
</tr>
<tr>
<td>合计</td>
<td align="center">4.00</td>
</tr>
<tr>
<td>支付宝</td>
<td align="center">1.00</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td align="center">3.00</td>
</tr>
</table>
<hr />
<div>打印时间: 2018-04-17 07:24:23</div>
<hr />
<div class="note">
根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，
如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，
根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，
扫描时请保持小票平整。</div>
<div class="qrimg"><img src="img/qr.png"></div>
<div>官网：www.yonghe.com.cn</div>
<div>加盟热线：86-21-60769397 或 86-21-60799002</div>
<br />
<br />
</body>
</html>
Effect picture:
image:
1）<img src="images/qr.png"/>
2）二维码就是一个网站的链接 http://act.codeboy.com
Tools: google QR code api
Encapsulate, directly write a method CreateQR.make(url, width, height, path)
which is java class, specify the path, and generate the file qr.png under the path
Development of static website:
1) html markup language <mark>, showing different content (text, table, line, picture) on the page
<title>网页浏览器上名字
<style>里面是样式定义，固定语法
There are two ways to lay out html pages:
1.1) table layout (convenient)
1.2) div layout (mainstream)
<div>会自动换行
<span>不会换行， 块
<hr><hr/> 一根线
<table>表格
<tr>行
<td>单元格
border
td.width cell width
td.align cell position: horizontal: left/center/right
td.valign cell position: vertical: top/center/middle/bottom
在网页html中是不直接认换行（<br><br/>）和空格（ ）
中文段落要空两个汉字：7个
2) CSS style sheet, beautify the page (font size, dotted line)
There are two types of style references:
1.1) Write the style attribute directly (private, not public, needed elsewhere, write it again)
<div style="font-size: 48px; color: red;">顾客联</div>
1.2) Define a global style (public)
Define a style, the style starts with ., referenced on the label class attribute class="bill"
.bill{
font-size: 28px;
}