我的Spring Boot 之旅——Day4-6
day4
学习ajax（一）
1.首先启动jar包。打开终端启动jar包。
2.打开navicat，打开swagger,查看数据。
3.写一个html文件，用ajax实现前端与后台数据交互。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
//获取省份信息 遍历生成option，添加到select标签内
$.ajax({
url:'http://localhost:8899/Province/findAll',
method:'get',
data:{},//因为没有data属性，所以 这一行也可以删掉
success:function(res){
//追加请选择这个option
$('#province').append($(`<option value="">请选择</option>`)); //把这个生成的节点追加到province中，append是创建节点。
//通过res生成option
// console.log(res);
// console.log(res.data);
res.data.forEach(function(item,index) { //item是数组的元素，index是元素的下标即元素在数组中的位置
// console.log(item);
//生成option
var opt = $(`<option value="`+item.id+`">`+item.name+`</option>`)
//追加到select内部
$('#province').append(opt);
});
},
error:function(error){
console.log(error);
}
})
//给保存按钮绑定点击事件
$('#save').click(function(){
//获取表单控件的值，传递给后台接口
var cityname = $('#cityname').val();
var province = $('#province').val();//通过.val的形式获取表单控件的值
$.ajax({
url:'http://localhost:8899/City/saveOrUpdate',
method:'post',
data:{
provinceId:province,
name:cityname,
},
success:function(res){
alert('保存成功');
//alert保存成功之后，清空表单数据
$('#cityname').val('');
$('#province').val('');
},
error:function(error){
console.log(error);
}
})
})
})
var arr = ['list','fairy'];
arr[1];//获取fairy的值
// var obj = {
// name:'zhangsan',
// age:12,
// friends:['lisi','fairy']
// }
// obj.name
// obj.friends
</script>
</head>
<body>
<h3>添加城市</h3>
<!-- 显示城市输入框 -->
名称: <input type="text" id="cityname"><br>
<!-- 省份下拉列表 -->
所属省份: <select id="province">
</select><br>
<!-- 保存按钮 -->
<button id="save">保存</button>
</input>
</html>
其中，js代码里面的ajax的url、method、data是在swagger里面找的。打开swagger，找到相关的province接口。
4.写完之后在浏览器中打开该文件（其实需要边写便打开看效果…），完成之后是图下这个样子，调试的时候注意打开控制台。
保存成功之后，打开数据库，查看用户在前端输入的数据是否能保存到数据库。
查看数据库更新的信息是否与用户输入的一致，就说明成功了。
问题与反思：
在写html文档中遇到的一些问题已经在上面写有注释了。需要特别注意的是，下面的day5会讲到一些方法！往下看~
day5
学习ajax（二）
昨天（上面day4）学习的是保存操作，今天学习的是删除操作，做动态表格。内容上跟昨天差不多，但是也有一丶不一样。
- 运行jar包，打开数据库，在浏览器打开swagger。
- 写html文档：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态表格</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
//设置基础路径[为了方便后期代码的修改，若后期端口冲突需要修改端口号或者后期需要修改接口，就只需要修改这里的变量就可以了]
var baseURL = 'http://localhost:8899';
/*
//声明一个函数
function test(){
console.log(11111);
console.log(11111);
console.log(11111);
console.log(11111);
}
//调用函数,函数执行
test();
*/
//事件代理
$(function(){
$('tbody').on('click','button',function(event){//用on绑定事件给button
// console.log(this);
// console.log(event.target);
// console.log(event.currentTarget);
//将this对应的dom节点转成jquery对象
//console.log($(this));
//console.log(this.id);
//console.log($(this).after('flag'));
var id = $(this).attr('flag');
$.ajax({
url:baseURL+'/CustomerService/deleteById',
method:'post',
data:{
id:id,
},
success:function(res){
if(res.status == 200){
// alert(1);
//查找数据，局部刷新页面
alert("删除成功");
toLoad();
}
else{
alert('删除错误');
}
},
error:function(error){
console.log(error);
}
})
})
})
toLoad();
function toLoad(){
//获取后台数据，加载到表格中
$.ajax({
url:baseURL+'/CustomerService/findAll',
method:'get',
data:{},
success:function(res){
console.log(res);//在使用数据之前一定要先打印检查这里是否会出错，不会出错再往下写
//清空body内容
$('tbody').empty();
res.data.forEach(function(item){
//生成tr
var newTr = $(`
<tr>
<td>`+item.id+`</td>
<td>`+item.username+`</td>
<td>`+item.realname+`</td>
<td>`+item.status+`</td>
<td>`+item.gender+`</td>
<td><button flag="`+item.id+`">删除</button></td>
</tr>`);
//追加tr
$('tbody').append(newTr);
});
},
error:function(error){
}
})
}
</script>
<style>
/* 标签选择器 */
table{
border: 1px solid #686363;
/*合并边框 */
border-collapse: collapse;
/* 表格宽度*/
width: 400px;
}
td,th{
border: 1px solid #686363;
text-align: center;
}
</style>
</head>
<body>
<h3>动态表格</h3>
<table>
<thead>
<tr>
<th>编号</th>
<th>用户名</th>
<th>真实姓名</th>
<th>状态</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body>
</html>
4.针对上面文档的一些解释：
基础路径：一般为了方便后期代码的修改，都会设置基础路径，只要设置了基础路径，改接口的url的时候直接改基础路径就可以了，不用一个一个找那么麻烦，一个一个找有时候还会错漏，所以设置基础路径会方便很多。
封装函数：为了提高代码的复用性，一般会对函数进行封装，然后可以方便地进行重复利用。这上面的toLoad()函数就是封装了用ajax获取后台数据等的内容，再在事件代理里面调用。这样不仅提高了代码的可读性、复用性，还让代码更加简洁。
事件代理：代码中有个事件代理，这样写的目的是为了让用户不能点击和操作整个表格，而是指对“删除”整个button按钮进行操作。
局部刷新页面：一般常用的网页都是在用户delete完之后，会更新表格，而不是更新整个页面。那么如何进行这个操作呢？上面代码在事件代理代码的ajax代码块里的success里面，直接调用了toLoad()函数，这样就可以对表格进行刷新，而不是对整个网页进行刷新。
forEach（）：此函数可以对数据进行遍历。
注意：在day4和day5学习的ajax中，都需要注意的是，每次写success:function(res){};的时候，在使用数据之前一定要打印检查在此之前是否有出错的地方，有的话马上检查错在哪里，要不然等到写完再检查的话就很麻烦了。
逻辑：所以看到这里，知道怎么用ajax来进行数据库与前端交互的操作了吗？首先，获取后台数据加载到标签中，然后生成追加节点（利用append）。然后进行事件代理。就差不多了。
以上是跟着老师一起敲的代码，所以为了加深印象，复习一遍后，自己也写了个删除操作。为了不与老师的接口冲突，我用到的是Welfare接口。以下为代码和运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>保存</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
var baseURL = 'http://localhost:8899';
$(function(){
$('tbody').on('click','button',function(event){
var id = $(this).attr('de');
$.ajax({
url:baseURL+'/Welfare/deleteById',
method:'post',
data:{
id:id,
},
success:function(res){
if(res.status == 200){
alert("删除成功");
onedelete();
}
else{
alert("删除失败");
}
},
error:function(error){
console.log(error);
}
})
})
})
onedelete();
function onedelete(){
$.ajax({
url:baseURL+'/Welfare/findAll',
method:'get',
data:{},
success:function(res){
console.log(res);
$('tbody').empty();
res.data.forEach(function(item){
var newTr = $(`
<tr>
<td>`+item.id+`</td>
<td>`+item.name+`</td>
<td>`+item.status+`</td>
<td><button de="`+item.id+`">删除</button></td>
</tr>
`)
$('tbody').append(newTr);
})
},
error:function(error){
}
})
}
</script>
<style>
table{
border: 1px solid rgb(219, 82, 3);
text-align: center;
border-collapse: collapse;
width: 400px;
}
th,td{
border: 1px solid rgb(219, 82, 3);
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th>
<th>描述</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
day6
学习html、css
1. html元素
<div>hello</div>
<meta/>
<br />
<input />
编写代码的结构上：
单标签 双标签
在网页的表现形式上
块级元素:div等
行内元素:span（行内元素不能设置宽高）
替代元素
2.html表单、表格、列表、图片、超链接
表单
<input type="text">
<input type="radio">
<input type="checkbox">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册页面</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('button').click(function(){
//获取单选按钮和复选按钮的值
console.log($('[type="radio"]:checked').val());
console.log($('[type="checkbox"]:checked').val());
var checked = $('[type="checkbox"]:checked');
var result = checked.map(function(index,item){
// return item;
// console.log(item);
// return 1;
return $(item).val();
})
console.log(result);
console.log(Array.from(result));
})
})
</script>
<style>
.wrap{
width: 330px;
border: 2px dashed rgb(139, 7, 7);
/* //上，左右，下 */
margin:20px auto 0;
padding: 20px;
}
span{
width:80px;
/* 将行内元素转换成行内元素并可以设置宽高 */
display: inline-block;
text-align: right;
margin: 5px;
}
/* 注册按钮居中方法 */
/* 方法一 */
/* button{ */
/* 上，右，下，左 */
/* margin: 20px calc((100% - 50px) / 2);
} */
/* 方法二 */
button{
display: block;
margin: 20px auto 0;
background-color: burlywood;
border: 3px dashed rgb(130, 192, 194);
padding: 5px 20px;
color: rgb(92, 129, 179);
/* 当光标放上去的时候可以变成手型 */
cursor: pointer;
/* 圆角边框 */
border-radius: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<form action="">
<span>用户名：</span><input type="text" placeholder="请输入用户名" /><br />
<span>密码：</span><input type="password" /><br />
<!-- 1. 用name赋值同一个名字，就可以实现互斥现象
2. label上的for的值是他所要控制的表单控件的值
（这里给单选框男女文字加上label标签，加上for，就可以实现点击文字就可以选中单选框） -->
<span>性别：</span><input type="radio" value="男" name="gender" id="male"><label for="male">男</label>
<input type="radio" value="女" name="gender" id="female"><label for="female">女</label><br />
<span>爱好：
</span><input type="checkbox" name="hobby" value="ball"/><label for="hobby">篮球</label>
</span><input type="checkbox" name="hobby" value="sing"/><label for="hobby">唱</label>
</span><input type="checkbox" name="hobby" value="rap"/><label for="hobby">rap</label>
</span><input type="checkbox" name="hobby" value="jump" /><label for="hobby">跳</label><br />
<span>个人简介：</span><br>
<textarea cols="30" rows="10"></textarea><br>
</form>
<button >提交</button>
</div>
</body>
</html>
列表
<ul>
<li>橘子</li>
<li>苹果</li>
<li>荔枝</li>
</ul>
<ol reversed>
<li>橘子</li>
<li>苹果</li>
<li>荔枝</li>
</ol>
此处提供一个关于列表的链接[:https://www.runoob.com/bootstrap/bootstrap-typography.html]
图片
<img src="" alt="" title=""/>
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接</title>
</head>
<style>
a{
text-decoration: none;
color: black;
}
a:hover{
font-size: 20px;
color: coral;
}
</style>
<body>
<div id="header">这是顶部</div>
<!-- target="_blank",可以让用户在点击此超链接的时候弹出新选项卡 -->
<a href="5-图片.html" target="_blank">页面跳转</a>
<br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="center">这是中部</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 锚点 #+需要跳转的id的值，就可以跳转到....-->
<a href="#center">回到中部</a>
<a href="#header">回到顶部</a>
</body>
</html>
3.css文字效果
color 文字颜色
font-size 文字大小
font-family 字体
等等
4.css行内与块级转换
display:inline;
display:inline-block;
display:block;
5.css浮动与清除浮动(将块级元素行内显示，同时原来的位置不保留)
float：left;
float：right;
clear:both;在兄弟元素中使用
overflow:hidden;在父元素中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.one{
background-color: coral;
float: left;
}
.tow{
width: 200px;
float: left;
background-color: darkgray;
}
.three{
background-color: darksalmon;
/* 清除浮动，一般用于兄弟元素之间 */
clear: both;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="tow"></div>
<div class="three"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.parent{
border: 3px solid black;
/* 清除子元素的浮动对父元素高度的影响 */
overflow: hidden;
}
.child{
width: 100px;
height: 100px;
border: 3px solid red;
float: left;
margin: 10px;
}
.bro{
width: 100px;
height: 100px;
background:cadetblue;
/* clear: both; 如果不考虑父元素的高度还是可以的*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="bro"></div>
</body>
</html>
day4-6总结与反思
总结因为有一天考英语六级，所以期间放了一天假（放假天=考试天），加上有点忙于复习六级，所以没有更博客，今天一下更完三天，有点忙不过来。因为没有对当天学的内容进行及时总结复习，所以其实有些老师讲过的并且没有记下的内容可能已经忘了。这几天学的ajax用心学的话会发现，其实很简单，但是java基础不好的话理解上可能就有点难。
反思
首先是对学习内容的反思：上课一定要紧跟老师的步骤，一不留神可能老师就打了几十行代码（夸张了一点）我就跟不上了，老师解释一些操作的时候应当及时在旁边注释下来，不能总想着“我会记得的，那么简单我还用记吗”，下一个真相警告就是我。day6讲的是html，其实在此之前，上选修课的时候老师已经讲过了，但由于我是懒人+大迷糊，所以已经忘得差不多了。所以要多反复练习html和css。最后js也很重要！！！
其次是对写博客的反思：没有每天都更，也就是没有每天都总结老师上课都讲了什么，愧疚- -。写博客的时候有很多地方用词都不当，还希望大家能够指出来。比如，同一个意思的，有时候用的是“页面”有时候用的是“网页”有时候用的又是其他词，做不到统一、严谨、标准，这个以后还要多多emmm学习。写博客的逻辑顺序可能还有一点不恰当，所以emmmm多多学习。