云监控（华为） | 实训学习day4（10）
SpringBoot增删改的细节研究一、Spring boot增的安全性
1.开启数据库的事务
SpringBoot中Service层有事务（保证操作乐成）
两个用户操作，同时增长同一条数据（用户名，密码同等）
验证内容，开启事务
Set autocommit=0 不提交，操作表在内存中
https://i-blog.csdnimg.cn/direct/4a8c313a03cf4816906135fcb9735076.png
两个用户开启事务，插入同一条数据，会出现线程阻塞，某个用户不停死机。
当业务出现问题时，会有rollback方法回滚。
Commit提交，提交后会内存数据到表中。
https://i-blog.csdnimg.cn/direct/cf9980e5c99149648b9adc64dbe00e49.png
当B乐成commit后，数据表有新的数据，B乐成等待A的动作，A动作取消，B就乐成。
看出：插入同一条数据，会出现线程阻塞，某个用户不停死机
实质：插入同一个id，id是主键primary key
Sql语句:
https://i-blog.csdnimg.cn/direct/dcbb2ce5694c450e868a8cd49404a0c6.png
原因：用户不知道id
https://i-blog.csdnimg.cn/direct/86e3cbe33403479da01ae26402d3b8bb.png
结论：
插入数据时，insert不要求用户输入primary key，这是主键值，就可以乐成解决插入数据的阻塞问题。
解决学号：学号用户输入，查询学号是否重，然后插入。
二、Spring boot删的安全性
两个事务，删除同一id的用户
https://i-blog.csdnimg.cn/direct/316b258dff0149aa85866f10cdfef53e.png(1)有无阻塞：在删除同一id时有阻塞问题.
(2)数据是否安全.数据是安全,,回滚不删除,提交就删除了.
解决阻塞:不允许删除同一个id,用户把表加载内存,不存在一个id
进入事务前,先查是否有id,有id中可以删除,没有id不允许删除.
三、Spring boot更新的安全性
两个事务，两个用户同时更新一个数据的
https://i-blog.csdnimg.cn/direct/b5ad7296007641a3aed12a17eb91a095.png
得现结论:更新时数据不安全
解决方法: （乐观锁，灰心锁）
[*] 加锁. Synchronized,速率降落
https://i-blog.csdnimg.cn/direct/bdf3263a5d734cdba2317851d5710978.png
[*] 乐观锁
CAB模式 内存有一个旧值，修改时把旧值改新值，修改时旧值与内存旧值对比，如果同等允许修改，差别等不允许改。
实现：在数据表多一个字段version版本。
为myuser表添加一列
https://i-blog.csdnimg.cn/direct/89ae48e6496147ccb45d742b28880e03.png
https://i-blog.csdnimg.cn/direct/8d0cd850f3134da98df5e8d3c44d1893.png
查询表时有版本version
https://i-blog.csdnimg.cn/direct/af85a6a478744891b7f24421a07a0beb.png
利用乐观锁
[*]为表增长一列version
[*]发生更新，更新一次，把version值加1,更新条件是id和version一起作用的结果；
第一步，改sql语句
https://i-blog.csdnimg.cn/direct/b1f3bcb4d53043fbb58fcd0336456283.png
第二步：表加一列version,对应java bean多一个字段version
https://i-blog.csdnimg.cn/direct/3a12b552bf634e20bc46442e0658a515.png
末了提交更新的页面多一个version的提交
Updatepage页面多一个version的提交
https://i-blog.csdnimg.cn/direct/d267d9fff3eb49b48b576f3d1f3e2168.png
四、前端页面
利用bootstrap
https://i-blog.csdnimg.cn/direct/907b08b2b170440196e3a227ff51db6b.png
开发按API文档
移动端
自顺应：内容随宽度缩小而缩小
响应式：宽度达到一定水平时，元素发生厘革（折叠或隐蔽）
不利用文档中的支持文件
百度页面搜索bootcdn
https://i-blog.csdnimg.cn/direct/b2d27ab4e9cb4f23a3f49e23367e23b8.png
网站调用前端框架,速率快
击bootcdn的开源页面
https://i-blog.csdnimg.cn/direct/abb15be3858d4362907cf29ef0feb7e9.png
在网站中搜bootstrap
https://i-blog.csdnimg.cn/direct/a0f1c1ab14794d009d7cdb05ce40c50c.png
第一个链接就是网站
https://i-blog.csdnimg.cn/direct/c6e056b175b144e680ab1296e2464a1f.png
进入链接
一个是css文件,没有后缀 ,只有bootstrap
https://i-blog.csdnimg.cn/direct/73d57254fe414ac6897209319f10a627.png
点击后面的复制link标签
复制到myuser.html的head中
https://i-blog.csdnimg.cn/direct/20b931ae9ec64a71afbef731f3e23bf6.png
再找js,bootstrap5找bundle后缀的
https://i-blog.csdnimg.cn/direct/bebac2ecc72147858db66762dbc695e7.png
复制的script标签,放在myuser.html的head中.
https://i-blog.csdnimg.cn/direct/d83d55c21b26483b96270379500db6ee.png
从官方得到,须要两个
https://i-blog.csdnimg.cn/direct/72e8a3275714493bae074bbdb0aa4304.png
相识bootstrap 一行12列
https://i-blog.csdnimg.cn/direct/bc064bf5b38c498da2c8a597b0d277bb.png
布局以row和col为准,container居中,text-center笔墨居中.
https://i-blog.csdnimg.cn/direct/212e3f5485244288a47cba0993e05031.png
三列左右留空白
把table表格放中心
https://i-blog.csdnimg.cn/direct/df69c65a00664e6296a6f0532399c3ec.png
看bootstrap,左边有tables
https://i-blog.csdnimg.cn/direct/00ebad9456274693abda7649a592c5ce.png
表格项设置
https://i-blog.csdnimg.cn/direct/7a5ea09c0db34c7d8c0b604b75509fbe.png
在表格上，利用table表格样式，table-warning表示告诫色，黄色，table-striped表示单数行深色，偶数行淡色
另有按钮
https://i-blog.csdnimg.cn/direct/eb516e3bdaaf43efa3cab2f7a7859291.png
这里可以选择合适的
https://i-blog.csdnimg.cn/direct/f6824121cf8c432a9e9fc1b67024cf40.png
赤色的按钮删除，蓝色的用于修改。
Btn-danger赤色, btn-primary 蓝色
加入配景图片
可以网络地点
https://i-blog.csdnimg.cn/direct/3c551005c1784e788ab0fbb8036cd5a5.png
加在body上
https://i-blog.csdnimg.cn/direct/18aaa76ff5fa4847ad84f3ed7fc65ec9.png
加图片的相干属性
https://i-blog.csdnimg.cn/direct/0bd81614f6964a01815d1b6879e686dc.png
[*] 改addpage
与输入表单有关的找输入框组
https://i-blog.csdnimg.cn/direct/d5f60b91ce294bb2a6e767c0836ea968.png
用到的输入框组，选择合适的样式
https://i-blog.csdnimg.cn/direct/b1258211ce3341cf8245362aae025dce.png
然后设置按钮的样式.
https://i-blog.csdnimg.cn/direct/a30ff59188f34170ba2f3520940dba76.png
利用br调解竖向距离。
https://i-blog.csdnimg.cn/direct/d270edb9b25143d6a8a1908e3478d599.png
末了可以加配景
https://i-blog.csdnimg.cn/direct/c242dad4606c4c6ebb6e575d6aef4f8b.png
[*] updatepage页面
同addpage页面，然后代码做修改.
https://i-blog.csdnimg.cn/direct/8caa6b13077d44818527388622f32d1c.png
代码实现
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
</div>
<div class="col">
<br/>
<br/>
<h3>注册页面</h3>
<br/>
<!--添加用户使用表单form，action提交地址(由谁处理）-->
<form action="/user/add" method="post">
<div class="input-group input-group-lg">
<span class="input-group-text">用户名：</span>
<input type="text" class="form-control" name="username"/>
</div>
<br/>
<div class="input-group input-group-lg">
<span class="input-group-text">密 码：</span>
<input type="text" class="form-control" name="password"/>
</div>
<br/>
<button type="submit" class="btn btn-outline-success">注册</button>
</form>
</div>
<div class="col">
</div>
</div>
</div>
</body>
</html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>显示用户</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.js"></script>
</head>
<body >
<div class="container text-center">
<div class="row">
<div class="col"></div>
<div class="col">
<br/>
<h1 class="text-center">用户列表展示</h1>
<br/>
<table class="table table-bordered border-primary">
<tr class="table-info">
<br/>
<td class="table-info">id</td>
<td class="table-info">用户名</td>
<td class="table-info">用户密码</td>
<td class="table-info">操作</td>
</tr>
<tr th:each="item:${myusers}" class="table-info">
<td th:text="${item.id}" class="table-info"></td>
<td th:text="${item.username}" class="table-info"></td>
<td th:text="${item.password}" class="table-info"></td>
<td>
<button type="button" th:onclick="|ondel(${item.id})|"class="btn btn-danger">删除</button>
<button type="button" th:onclick="|onupdate(${item.id})|" class="btn btn-primary">修改</button>
</td>
</tr>
</table>
</div>
<div class="col">
</div>
</div>
</div>
<script>
function onupdate(id){
//修改不需要跳转，显示原始信息
window.location.href="/user/orign?id="+id;
}
function ondel(id){
//先确认是否删除
answer=confirm("是否需要执行删除操作？")
if(answer==true){
// 地址栏地址
window.location.href="/user/del?id="+id;
}
}
</script>
</body>
</html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>更新页面</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
</div>
<div class="col">
<br/>
<br/>
<br/>
<h3>用户信息更新</h3>
<br/>
<br/>
<form action="/user/update" method="post">
<input type="hidden" th:value="${oneuser.id}" name="id"/>
<input type="hidden" th:value="${oneuser.version}" name="version"/>
<div class="input-group input-group-lg">
<span class="input-group-text">用户名：</span>
<input th:value="${oneuser.username}" name="username"/>
</div>
<br/>
<div class="input-group input-group-lg">
<span class="input-group-text">密 码：</span>
<input th:value="${oneuser.password}" name="password"/>
</div>
<br/>
<br/>
<button type="submit" class="btn btn-outline-dark">更新</button>
</form>
</div>
<div class="col">
</div>
</div>
</div>
</body>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]