JavaWeb

小小李学java

已于 2023-12-16 13:47:56 修改

阅读量239

点赞数

文章标签： web

于 2023-12-05 22:06:08 首次发布

本文链接：https://blog.csdn.net/m0_71644905/article/details/134818431

版权

1.初识Web前端

（1）介绍：

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定

三个组成部分：

HTML：负责网页的结构（页面元素和内容）

CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等

JavaScript：负责网页的行为（交互效果）

2.HTML 、CSS

（1）HTML介绍：

HTML（HyperText Markup Language）：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

标记语言：由标签构成的语言：

HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频

HTML代码直接在浏览器中运行，HTML标签由浏览器解析

（2）CSS介绍：

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）

（3）HTML快速入门：

1.新建文本文件，后缀名改为 .html

2.编写 HTML 结构标签

3.在<body>中填写内容

HTML结构标签：

<html>
	<head>    
		   <title>标题</title>
	</head>
	<body>
    
	</body>
</html>

特点：

1.HTML标签不区分大小写

2.HTML标签属性值单双引号都可以

3.HTML语法松散

3.基础标签

（1）图片标签：

图片标签：

<img>

src：指定图像的url（绝对路径 / 相对路径）
width：图像的宽度（像素 / 相对于父元素的百分比）
height：图像的高度（像素 / 相对于父元素的百分比）

（2）标题标签：

标题标签：
<h1> - <h6>

（3）水平线标签：

水平线标签：
<hr>

（4）<span>标签：

<span> 是一个在开发网页时大量会用到的没有语义的布局标签

特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

（5）音频、视频标签：

音频标签：
    <audio>
        src：规定音频的url
        controls：显示播放控件  

视频标签：
    <video>
        src：规定视频的url
        controls：显示播放控件
        width：播放器的宽度
        height：播放器的高度

（6）换行、段落标签：

换行：<br> ; 段落：<p>

注意：
    在HTML中无论输入多少个空格，只会显示一个。 可以使用空格占位符：&nbsp;

（7）文本加粗标签：

<b> <strong>

（8）表格标签：

<table>：定义表格
<tr>：定义表格中的行，一个 <tr> 表示一行
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格

（9）表单标签：

<form>
表单项：不同类型的 input 元素、下拉列表、文本域等
    <input>：定义表单项，通过type属性控制输入形式
    <select>：定义下拉列表
    <textarea>：定义文本域

属性：
     action：规定当提交表单时向何处发送表单数据，URL
     method：规定用于发送表单数据的方式。GET、POST

表单项：

    <input>：定义表单项，通过type属性控制输入形式
    <select>：定义下拉列表
    <textarea>：定义文本域

<input>的type取值：

    text	默认值，定义单行的输入字段
    password	定义密码字段
    radio	定义单选按钮
    checkbox	定义复选框
    file	定义文件上传按钮
    date/time/datetime-local	定义日期/时间/日期时间
    number	定义数字输入框
    email	定义邮件输入框
    hidden	定义隐藏域
    submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

4.CSS样式

font-size：字体大小 （注意：记得加px）
line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式
width：设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000；
padding：内边距
margin：外边距

注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …

5.CSS引入方式

（1）行内样式：

写在标签的style属性中（不推荐）

行内样式：
<h1 style="...">

例：
<h1 style="属性名: 属性值; 属性名: 属性值;">内容</h1>

（2）内嵌样式：

写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

内嵌样式：
<style> … </style>

例：
<style>
  h1 {
     属性名: 属性值; 
     属性名: 属性值;
  }
</style>

（3）外联样式：

写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

外联样式:
xxx.css     <link href="css/xxx.css">

6.颜色表示形式

（1）关键字：

表示含义：预定义的颜色名取值：red、green、blue...

（2）rgb表示法：

表示含义：红绿蓝三原色，每项取值范围：0-255

取值：rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)

（3）十六进制表示法：

表示含义：#开头，将数字转换成十六进制表示

取值：#000000、#ff0000、#cccccc，简写：#000、#ccc

（4）颜色属性：

color: 设置文本内容的颜色

7.CSS选择器

（1）介绍：

用来选取需要设置样式的元素(标签)

（2）分类：

1.元素选择器：

元素选择器：

元素名称 {
    color: red;
}

例：

<h1> Hello CSS </h1>

h1 {
    color: red;
}

2.id选择器：

id选择器：

#id属性值 {
    color: red;
}

例：

<h1 id="hid"> CSS id Selector</h1>

#hid {
    color: red;
}

3.类选择器：

类选择器：

.class属性值 {
    color: red;
}

例：

<h1 class="cls">CSS class Selector</h1>

.cls {
    color: red;
}

（3）选择器优先级：

id选择器 > 类选择器 > 元素选择器

8.超链接

（1）标签：

<a href="..." target="...">央视网</a>

（2）属性：

	href：指定资源访问的url
	target：指定在何处打开资源链接
	_self：默认值，在当前页面打开
	_blank：在空白页面打开


text-decoration：规定添加到文本的修饰，none表示定义标准的文本

（3）案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

        a {
            color: black;
            text-decoration: none; /* 设置文本为一个标准的文本 */
        }
    </style>
</head>
<body>

    <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>

    <hr>
    <span id="time">2023年03月02日 21:50</span>  <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
    <hr>

</body>
</html>

9.盒子模型

（1）介绍：

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

（2）组成：

内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

10.JavaScript

（1）介绍：

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似

JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准

ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)

ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的

（2）JS引入方式：

1.内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可改善显示速度

<script>
    alert("Hello JavaScript")
</script>

建议：将<script></script>放在<body>的底部

2.外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签

<script src="js/demo.js"></script>

demo.js

11.JS基础语法

（1）书写语法：

1.区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

2.每行结尾的分号可有可无

3.注释：

单行注释：// 注释内容

多行注释：/* 注释内容 */

4.大括号表示代码块

//判断
if(count == 3){
    alert(count);
}

（2）输出语句：

1.使用 window.alert() 写入警告框

2.使用 document.write() 写入 HTML 输出

3.使用 console.log() 写入浏览器控制台

<script>
    window.alert("Hello JavaScript"); //浏览器弹出警告框
    
    document.write("Hello JavaScript"); //写入HTML,在浏览器展示
    console.log("Hello JavaScript"); //写入浏览器控制台
</script>

（3）变量：

1.JavaScript 中用 var 关键字（variable 的缩写）来声明变量

var a = 20;
a = "张三";

2.JavaScript 是一门弱类型语言，变量可以存放不同类型的值

3.变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

数字不能开头

建议使用驼峰命名

注意事项：

1.ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明

2.ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

声明：
	var：声明变量，全局作用域/函数作用域，允许重复声明
	let：声明变量，块级作用域，不允许重复声明
	const：声明常量，一旦声明，常量的值不能改变

12.数据类型

（1）JavaScript中分为：原始类型和引用类型

 number：数字（整数、小数、NaN(Not a Number)）
 string：字符串，单双引皆可
 boolean：布尔。true，false
 null：对象为空
 undefined：当声明的变量未初始化时，该变量的默认值是 undefined
 使用 typeof 运算符可以获取数据类型

（2）运算符：

 算术运算符：+ , - , * , / , % , ++ , --
 赋值运算符：= , += , -= , *= , /= , %=
 比较运算符：> , < , >= , <= , != , == , === 
 逻辑运算符：&& , || , !
 三元运算符：条件表达式 ? true_value: false_value

== 会进行类型转换，=== 不会进行类型转换

var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10); //true

（3）类型转换：

1.字符串类型转为数字：

将字符串字面值转为数字。如果字面值不是数字，则转为NaN

2.其他类型转为boolean

Number：0 和 NaN为false，其他均转为true

String：空字符串为false，其他均转为true

Null 和 undefined ：均转为false

13.流程控制语句

if…else if …else…

 switch

 for 

 while

 do … while

14.JS函数

（1）介绍：

函数（方法）是被设计为执行特定任务的代码块

（2）定义：

JavaScript 函数通过 function 关键字进行定义

语法：

方式一：

function functionName(参数1,参数2..){
   //要执行的代码
}

function add(a , b){
    return a + b;
}

调用：

var result = add(10,20);
alert(result)

方式二：

var functionName = function (参数1,参数2..){
    //要执行的代码
}

var add = function(a , b){
    return a + b;
}

调用：

var result = add(10,20);
alert(result)

注意：

1.形式参数不需要类型。因为JavaScript是弱类型语言

2.返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：

函数名称(实际参数列表)

var result = add(10,20);
alert(result)

JS中，函数调用可以传递任意个数的参数

15.JS对象

（1）Array：

JavaScript 中 Array对象用于定义数组

定义：

方式一：

var 变量名 = new Array(元素列表); 
var arr = new Array(1,2,3,4);

方式二：

var 变量名 = [ 元素列表 ]; 
var arr = [1,2,3,4];

访问：

arr[ 索引 ] = 值; 
arr[10] = "hello";

注意：
    JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据

属性和方法：

属性：
length	设置或返回数组中元素的数量。

方法：
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度。
splice()	从数组中删除元素。

（2）String：

String字符串对象创建方式：

方式一：
var 变量名 = new String("…") ; 
var str = new String("Hello String");

方式二：
var 变量名 = "…" ; 
var str = "Hello String";
var str = 'Hello String';

属性和方法：

属性：
length	字符串的长度。

方法：
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

（3）JavaScript自定义对象：

定义格式：

var 对象名 = {
属性名1: 属性值1, 
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};

var user = {
    name:"Tom", 
    age:20, 
    gender:"male",
    eat: function(){
        alert("用膳~");
    }
};

var user = {
    name:"Tom", 
    age:20, 
    gender:"male",
    eat(){
        alert("用膳~");
    }
};

调用格式：

对象名.属性名;
console.log(user.name);

对象名.函数名();
user.eat();

（4）JSON：

概念：JavaScript Object Notation，JavaScript对象标记法

JSON 是通过 JavaScript 对象标记法书写的文本

{
    name:"Tom", 
    age:20, 
    gender:"male"
};


{
    "name":"Tom",
    "age":20,
    "gender":"male"
}

JSON-基础语法：

定义：
    var 变量名 = '{"key1": value1, "key2": value2}';
示例：
    var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}';

JSON字符串转为JS对象：
    var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串：
    var jsonStr = JSON.stringify(jsObject);


value 的数据类型为：
    数字（整数或浮点数）
    字符串（在双引号中）
    逻辑值（true 或 false）
    数组（在方括号中）
    对象（在花括号中）
    null

（5）BOM：

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

Window：

介绍：浏览器窗口对象

获取：直接使用window，其中 window. 可以省略

window.alert("Hello Window");
alert("Hello Window");

属性：
     history：对 History 对象的只读引用
     location：用于窗口或框架的 Location 对象
     navigator：对 Navigator 对象的只读引用

方法：
     alert()：显示带有一段消息和一个确认按钮的警告框。
     confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
     setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
     setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location：

介绍：地址栏对象

获取：使用 window.location 获取，其中 window. 可以省略

window.location.属性;
location.属性;

属性：
    href：设置或返回完整的URL
    location.href = "https://www.taobao.com";

（6）DOM：

概念：Document Object Model ，文档对象模型，将标记语言的各个组成部分封装为对应的对象

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
    Core DOM - 所有文档类型的标准模型：
        Document：整个文档对象
        Element：元素对象
        Attribute：属性对象
        Text：文本对象
        Comment：注释对象

    XML DOM - XML 文档的标准模型  
    HTML DOM - HTML 文档的标准模型
    Image：<img>
    Button ：<input type='button'>


<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <h1>DOM对象标题</h1>
        <a href="https://taobao.com">淘宝</a>
    </body>
</html>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

Document对象中提供了以下获取Element元素对象的函数：

1.根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div');

3.根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');

案例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM-案例</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">小米锅巴</div>   <br>
    <div class="cls">宫保鸡丁</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";


    //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>"; 
    }


    //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }

</script>
</html>

（7）事件监听：

事件：HTML事件是发生在HTML元素上的 “事情”，比如：

1.按钮被点击

2.鼠标移动到元素上

3.按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码

（8）事件绑定：

方式一：通过 HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<script>
    function on(){
        alert('我被点击了!');
    }
</script>

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">

<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

常见事件：

常见事件：

onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

案例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="Hello" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    function on(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/on.gif";
    }

    function off(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
    function lower(){//小写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为小写
        input.value = input.value.toLowerCase();
    }

    function upper(){//大写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为大写
        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }

    }
    
    function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置未选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = !element.checked;
        }
    }



</script>
</html>

16.Vue

（1）介绍：

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

官网： https://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效

（2）Vue快速入门：

1.新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>

2.在JS代码区域，创建Vue核心对象，定义数据模型
<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

3.编写视图
<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

（3）插值表达式：

形式：{{ 表达式 }}

内容可以是：

变量、三元运算符、函数调用、算术运算

（4）常用指令：

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

1.v-bind
<a v-bind:href="url">学成在线</a>
<a :href="url">学成在线</a>

2.v-model
<input type="text" v-model="url">

<script>
  new Vue({
     el: "#app",
     data: {
        url: "https://www.itcast.cn"
     }
  })
</script>

注意：
    通过v-bind或者v-model绑定的变量，必须在数据模型中声明

3.v-on
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

<script>
    new Vue({
        el: "#app",
        data: {
	//...
        },
        methods: {
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>


4.v-if
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>


5.v-show
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>


6.v-for
<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

data: {
   . . .
   addrs: ['北京','上海','广州','深圳','成都','杭州']
}

（5）生命周期：

生命周期：指一个对象从创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

状态：                    阶段周期：
    beforeCreate	            创建前
    created	                    创建后
    beforeMount	                挂载前
    mounted	                    挂载完成
    beforeUpdate	            更新前
    updated	                    更新后
    beforeDestroy	            销毁前
    destroyed	                销毁后

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

<script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

17.Ajax

（1）介绍：

Asynchronous JavaScript And XML，异步的JavaScript和XML

（2）作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等

（3）同步与异步的区别：

（4）原生Ajax：

1.准备数据地址

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div></body>

<script>
    function getData(){
        1.创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        2.发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

（5）Axios：

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发

官网： https://www.axios-http.cn/

Axios入门：

1.引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>

2.使用Axios发送请求，并获取响应结果

get请求：

axios({
    method: "get",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {
    console.log(result.data);
});

post请求：

axios({
    method: "post",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
    data: "id=1"
}).then((result) => {
    console.log(result.data);
});

Axios请求方式：

axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])

1.发送GET请求：
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);
});

2.发送POST请求：
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
    console.log(result.data);
});

案例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img v-bind:src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span >{{emp.gender == 1? '男' : '女'}}</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            emps:[]
        },
        mounted() {
            axios.get("https://yapi.pro/mock/49252/emp/list").then(result=>{
                this.emps = result.data.data;
            })
        },
    })
</script>
</html>

18.前后端分离开发：

19.YApi

（1）介绍：

介绍：YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

（2）步骤：

1.添加项目

2.添加分类

3.添加接口

20.前端工程化

（1）介绍：

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

（2）环境准备：

vue-cli：

1.介绍：

Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板

2.Vue-cli提供了如下功能：

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

依赖环境：NodeJS

（3）安装NodeJS：

1.双击安装包：

2.选择安装目录：

3.验证NodeJS环境变量：

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

4.配置npm的全局装路径：

使用管理员身份运行命令行，在命令行中，执行如下指令 :

npm config set prefix "E:\develop\NodeJS"

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

5.切换npm的淘宝镜像：

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

6.安装vue.cli:

使用管理员身份运行命令行，在命令行中，执行如下指令 :

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待

（4）Vue项目-创建：

命令行：

vue create vue-project01

图形化界面：

vue ui

（5）Vue项目-目录结构：

（6）Vue项目-启动：

1.方式一：图形化界面

2.命令行：npm run serve

（7）Vue项目-配置端口：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7000,
  }
})

（8）Vue项目开发流程：

21.Vue组件库Element

（1）element介绍：

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等

官网：https://element.eleme.cn/#/zh-CNListener

（2）快速入门：

1.安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：

npm install element-ui@2.15.3

2.引入ElementUI组件库：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.访问官网，复制组件代码，调整

（3）Vue项目中使用Axios：

在项目目录下安装axios：

npm  install axios;

需要使用axios时，导入axios：

import axios from 'axios';

（4）Vue路由：

前端路由: URL中的hash(#号) 与组件之间的对应关系

（1）介绍：

Vue Router 是 Vue 的官方路由

（2）组成：

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

<router-link>：请求链接组件，浏览器会解析成<a>

<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

（3）安装：(创建Vue项目时已选择)

npm install vue-router@3.5.1

（4）定义路由：

22.打包部署

（1）打包：

（2）部署：

Nginx：

介绍：

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用

官网：https://nginx.org/

部署：

将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下

启动：

双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号

注意：

Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr 80)

23.Maven

（1）介绍：

Apache Maven 是一个项目管理和构建工具，它基于项目对象模型(POM)的概念，通过一小段描述信息来管理项目的构建

官网：Maven – Welcome to Apache Maven

Apache 软件基金会，成立于1999年7月，是目前世界上最大的最受欢迎的开源软件基金会，也是一个专门为支持开源项目而生的非盈利性组织

开源项目：https://www.apache.org/index.html#projects-list

（2）Maven的作用：

1.依赖管理：

方便快捷的管理项目依赖的资源(jar包)，避免版本冲突问题

2.统一项目结构：

提供标准、统一的项目结构

3.项目构建：

标准跨平台（Linux、Windows、MacOS）的自动化项目构建方式

仓库：用于存储资源，管理各种jar包

本地仓库：自己计算机上的一个目录

中央仓库：由Maven团队维护的全球唯一的。仓库地址：https://repo1.maven.org/maven2/

远程仓库(私服)：一般由公司团队搭建的私有仓库

（3）Maven安装：

安装步骤：

1.下载Maven:

官网：Maven – Download Apache Maven

目前最新版：apache-maven-3.9.6-bin.zip 点击进行下载即可

2.解压：

我这里用的版本是：apache-maven-3.6.1-bin.zip

3.配置本地仓库：

修改 conf/settings.xml 中的 <localRepository> 为一个指定目录：

<localRepository>E:\develop\apache-maven-3.6.1\mvn_repo</localRepository>

4.配置阿里云私服：

修改 conf/settings.xml 中的 <mirrors>标签，为其添加如下子标签：

<mirror>  
    <id>alimaven</id>  
    <name>aliyun maven</name>  
    <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
    <mirrorOf>central</mirrorOf>          
</mirror>

5.配置环境变量:

MAVEN_HOME 为maven的解压目录，并将其bin目录加入PATH环境变量

6.检查安装是否成功：

win + r cmd 敲回车

输入：mvn -v

出现如下界面说明安装成功：

（4）配置Maven环境(当前工程)：

1.选择 IDEA中 File --> Settings --> Build,Execution,Deployment --> Build Tools --> Maven ：

2.设置 IDEA 使用本地安装的 Maven，并修改配置文件及本地仓库路径：

（5）IDEA 创建 Maven 项目：

1.打开 IDEA 点击 new project 选择 empty project

2.点击 file ，点击 Project Structure ：

3. 点击 Modules ，点击 + 号，点击 New Module：

4.点击 create 创建完成：

（6）Maven坐标：

Maven 中的坐标是资源的唯一标识，通过该坐标可以唯一定位资源位置。

使用坐标来定义项目或引入项目中需要的依赖。

（7）Maven 坐标主要组成：

groupId：定义当前Maven项目隶属组织名称（通常是域名反写，例如：com.itheima）

artifactId：定义当前Maven项目名称（通常是模块名称，例如 order-service、goods-service）

version：定义当前项目版本号

例：
<dependency>
    <groupId>ch.qos.logback</groupId>    
    <artifactId>logback-classic</artifactId>    
    <version>1.2.3</version>
</dependency>

（8）IDEA 导入 Maven 项目：

方式一：打开IDEA，选择右侧Maven面板，点击 + 号，选中对应项目的pom.xml文件，双击即可：

方式二：打开IDEA，点击 file ，点击 project structure，然后点击 modules，点击 + 号，点击 import module ,选择 pom.xml 文件，点击 ok 即可：

（9）依赖配置：

依赖：指当前项目运行所需要的jar包，一个项目中可以引入多个依赖

配置：

1.在 pom.xml 中编写 <dependencies> 标签

2.在 <dependencies> 标签中使用 <dependency> 引入坐标

3.定义坐标的 groupId，artifactId，version

4.点击刷新按钮，引入最新加入的坐标

<dependencies>
    <dependency>        
        <groupId>ch.qos.logback</groupId>        
        <artifactId>logback-classic</artifactId>        
        <version>1.2.3</version>    
    </dependency>
</dependencies>

注意：

如果引入的依赖，在本地仓库不存在，将会连接远程仓库/中央仓库，然后下载依赖。（这个过程会比较耗时，耐心等待）

如果不知道依赖的坐标信息，可以到以下网址中进行搜索：
https://mvnrepository.com/

（10）依赖传递：

依赖具有传递性：

直接依赖：在当前项目中通过依赖配置建立的依赖关系

间接依赖：被依赖的资源如果依赖其他资源，当前项目间接依赖其他资源

排除依赖：

排除依赖指主动断开依赖的资源，被排除的资源无需指定版本

<dependency>    
    <groupId>com.itheima</groupId>    
    <artifactId>maven-projectB</artifactId>    
    <version>1.0-SNAPSHOT</version>  
        排除依赖：  
        <exclusions>        
            <exclusion>            
            <groupId>junit</groupId>            
            <artifactId>junit</artifactId>        
            </exclusion>    
        </exclusions>
</dependency>

（11）依赖范围：

依赖的jar包，默认情况下，可以在任何地方使用。可以通过 <scope>…</ scope > 设置其作用范围

作用范围：

主程序范围有效。（main文件夹范围内）

测试程序范围有效。（test文件夹范围内）

是否参与打包运行。（package指令范围内）

（12）Maven生命周期：

Maven的生命周期就是为了对所有的maven项目构建过程进行抽象和统一

Maven中有3套相互独立的生命周期：

1.clean：清理工作

2.default：核心工作，如：编译、测试、打包、安装、部署等

3.site：生成报告、发布站点等

每套生命周期包含一些阶段（phase），阶段是有顺序的，后面的阶段依赖于前面的阶段

生命周期阶段：

clean：移除上一次构建生成的文件

compile：编译项目源代码

test：使用合适的单元测试框架运行测试(junit)

package：将编译后的文件打包，如：jar、war等

install：安装项目到本地仓库

注意：

在同一套生命周期中，当运行后面的阶段时，前面的阶段都会运行

执行指定生命周期的两种方式：

1.在idea中，右侧的maven工具栏，选中对应的生命周期，双击执行

2.在命令行中，通过命令执行

mvn clean
mvn compile
mvn test
mvn package
mvn install

Maven生命周期：

    clean：清理
    compile：编译
    test：测试
    package：打包
    install：安装

24.Springboot快速入门

（1） Spring介绍：

官网：Spring | Home

Spring发展到今天已经形成了一种开发生态圈，Spring提供了若干个子项目，每个项目用于完成特定的功能

（2）Springboot:：

Spring Boot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率

（3）SpringBootWeb快速入门：

步骤：

1.创建springboot工程，并勾选web开发相关依赖

- 打开IDEA，点击 file ，点击 project structure

然后点击 modules，点击 + 号，点击 new module ，选择 Spring lnitializr，点击 next

选择 spring web，点击 create，完成创建

2.创建一个包：controller，在包下创建一个类：HelloController，在类上添加注解：@RestController，在类中编写一个方法，在方法上方添加一个注解：@RequestMapping("/hello")

@RestController
public class HelloController {
    @RequestMapping("/hello")
    public String Hello(){
        return "Hello Springboot";
    }
}

3.运行测试：运行启动类，打开浏览器，在地址栏输入：localhost:8080/hello

进行访问

运行成功如图：

25.HTTP协议

（1）HTTP-概述：

概念：Hyper Text Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则

特点：

1.基于TCP协议：面向连接，安全

2.基于请求-响应模型的：一次请求对应一次响应

3.HTTP协议是无状态的协议：对于事务处理没有记忆能力。每次请求-响应都是独立的

缺点：多次请求间不能共享数据

优点：速度快

（2）HTTP-请求数据格式：

（3）HTTP响应格式：

26.Web服务器-Tomcat

Web服务器是一个软件程序，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让Web开发更加便捷。主要功能是 "提供网上信息浏览服务

（1） Tomcat-简介：

Tomcat是Apache 软件基金会一个核心项目，是一个开源免费的轻量级Web服务器，支持Servlet/JSP少量JavaEE规范

JavaEE：Java Enterprise Edition，Java企业版。指Java企业级开发的技术规范总和。包含13项技术规范：JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java IDL、JTS、JTA、JavaMail、JAF

Tomcat 也被称为 Web容器、Servlet容器。Servlet程序需要依赖于 Tomcat才能运行

官网： Apache Tomcat® - Welcome!

（2）Tomcat-基本使用：

1.下载：官网下载，地址：Apache Tomcat® - Apache Tomcat 9 Software Downloads

2.安装：绿色版，直接解压即可

3.卸载：直接删除目录即可

4.启动：双击：bin\startup.bat

解决控制台中文乱码问题：修改conf/ logging.properties

5. 关闭：

（1）直接×掉运行窗口：强制关闭

（2）bin\shutdown.bat：正常关闭

（3）Ctrl+C：正常关闭

（3）常见问题：

1.启动窗口一闪而过：检查JAVA_HOME环境变量是否正确配置

2.端口号冲突：找到对应程序，将其关闭掉

（4）配置Tomcat端口号（conf/server.xml）：

注意：

HTTP协议默认端口号为80，如果将Tomcat端口号改为80，则将来访问Tomcat时，将不用输入端口号

（5）Tomcat 部署项目：

将项目放置到 webapps 目录下，即部署完成

27.请求响应

（1）请求：

1.postman

Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件

作用：常用于进行接口测试

2.简单参数：

原始方式：

在原始的web程序中，获取请求参数，需要通过HttpServletRequest 对象手动获取

@RequestMapping("/simpleParam")
public String simpleParam(HttpServletRequest request){
    String name = request.getParameter("name");
    String ageStr = request.getParameter("age");
    int age = Integer.parseInt(ageStr);
    System.out.println(name+"  :  "+age);
    return "OK";
}

SpringBoot方式：

简单参数：

参数名与形参变量名相同，定义形参即可接收参数

Controller：

@RequestMapping("/simpleParam")
public String simpleParam(String name , Integer age){
    System.out.println(name+"  :  "+age);
    return "OK";
}

简单参数：

如果方法形参名称与请求参数名称不匹配，可以使用 @RequestParam 完成映射

Controller：

@RequestMapping("/simpleParam")
public String simpleParam(@RequestParam(name = "name") String username , Integer age){
    System.out.println(username + " : " + age);
    return "OK";
}

注意事项：

@RequestParam中的required属性默认为true，代表该请求参数必须传递，如果不传递将报错。如果该参数是可选的，可以将required属性设置为false

3.实体参数：

简单实体对象：

请求参数名与形参对象属性名相同，定义POJO接收即可

Controller：

@RequestMapping("/simplePojo")public String simplePojo(User user){
    System.out.println(user);
    return "OK";
}

POJO：

public class User {
    private String name;
    private Integer age;
}

对象中接收时间日期类型：

在时间日期类型上加 @DateTimeFormat注解

POJO：

public class User {
    private Integer id;
    private String name;
    private String phone;
    private Idcard idcard;

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate birthday;
}

复杂实体对象：

请求参数名与形参对象属性名相同，按照对象层次结构关系即可接收嵌套POJO属性参数

Controller：

@RequestMapping("/complexPojo")
public String complexPojo(User user){
    System.out.println(user);
    return "OK";
}

POJO：

public class User {
    private String name;
    private Integer age;
    private Address address;
}

public class Address {
    private String province;
    private String city;
}

4.数组集合参数：

数组参数：

请求参数名与形参数组名称相同且请求参数为多个，定义数组类型形参即可接收参数

Controller：

@RequestMapping("/arrayParam")
    public String arrayParam(String[] hobby){
     System.out.println(Arrays.toString(hobby));
     return "OK";
 }

集合参数：

请求参数名与形参集合名称相同且请求参数为多个，@RequestParam 绑定参数关系

Controller：

@RequestMapping("/listParam")
    public String listParam(@RequestParam List<String> hobby){
        System.out.println(hobby);
        return "OK";
    }

数组：请求参数名与形参中数组变量名相同，可以直接使用数组封装
集合：请求参数名与形参中集合变量名相同，通过@RequestParam绑定参数关系

日期参数：

使用 @DateTimeFormat 注解完成日期参数格式转换

Controller：

@RequestMapping("/dataParam")
    public String dataParam(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime updateTime){
        System.out.println(updateTime);
        return "OK";

    }

JSON 参数：

JSON数据键名与形参对象属性名相同，定义POJO类型形参即可接收参数，需要使用 @RequestBody 标识

Controller：

@RequestMapping("/jsonParam")
    public String jsonParam(@RequestBody User user){
        System.out.println(user);
        return "OK";

    }

POJO：

public class User {
    private String name;
    private int age;
    private Address address;
}

public class Address {
    private String province;
    private String city;
}

路径参数：

通过请求URL直接传递参数，使用{…}来标识该路径参数，需要使用 @PathVariable 获取路径参数

Controller：

 @RequestMapping("/path/{id}")
    public String pathParam(@PathVariable Integer id){
        System.out.println(id);
        return "OK";

    }

Controller：

 @RequestMapping("/path/{id}/{name}")
    public String pathParam2(@PathVariable Integer id,@PathVariable String name){
        System.out.println(id);
        System.out.println(name);
        return "OK";

    }

总结：

（2）响应：

@ResponseBody：

类型：方法注解、类注解

位置：Controller方法上/类上

作用：将方法返回值直接响应，如果返回值类型是实体对象/集合，将会转换为JSON格式响应

说明：@RestController = @Controller + @ResponseBody

统一响应结果：

Result类：

package com.lyc.pojo;

public class Result {
    private Integer code;    响应码：1代表成功    0代表失败
    private String msg;      提示信息
    private Object data;     返回的数据

    /*成功不带data*/
    public static Result success(){
        Result result = new Result();
        result.setCode(1);
        result.setMsg("成功");
        return result;
    }

    /*成功带data*/
    public static Result success(Object data){
        Result result = new Result();
        result.setCode(1);
        result.setMsg("成功");
        result.setData(data);
        return result;
    }

    /*失败带原因*/
    public static Result error(String msg){
        Result result = new Result();
        result.setCode(0);
        result.setMsg("失败");
        return result;
    }
    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

POJO：

User类：

package com.lyc.pojo;

import org.springframework.format.annotation.DateTimeFormat;

import java.time.LocalDate;

public class User {
    private Integer id;
    private String name;
    private String phone;
    private Idcard idcard;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private LocalDate birthday;

    public User() {
    }

    public User(Integer id, String name, String phone, Idcard idcard, LocalDate birthday) {
        this.id = id;
        this.name = name;
        this.phone = phone;
        this.idcard = idcard;
        this.birthday = birthday;
    }

    public LocalDate getBirthday() {
        return birthday;
    }

    public void setBirthday(LocalDate birthday) {
        this.birthday = birthday;
    }

    /**
     * 获取
     * @return id
     */
    public Integer getId() {
        return id;
    }

    /**
     * 设置
     * @param id
     */
    public void setId(Integer id) {
        this.id = id;
    }

    /**
     * 获取
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * 设置
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * 获取
     * @return phone
     */
    public String getPhone() {
        return phone;
    }

    /**
     * 设置
     * @param phone
     */
    public void setPhone(String phone) {
        this.phone = phone;
    }

    public Idcard getIdcard() {
        return idcard;
    }

    public void setIdcard(Idcard idcard) {
        this.idcard = idcard;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", phone='" + phone + '\'' +
                ", idcard=" + idcard +
                ", birthday=" + birthday +
                '}';
    }
}

Idcard类：

package com.lyc.pojo;

public class Idcard {
    private String no;
    private String nation;

    public Idcard() {
    }

    public Idcard(String no, String nation) {
        this.no = no;
        this.nation = nation;
    }

    public String getNo() {
        return no;
    }

    public void setNo(String no) {
        this.no = no;
    }

    public String getNation() {
        return nation;
    }

    public void setNation(String nation) {
        this.nation = nation;
    }

    @Override
    public String toString() {
        return "Idcard{" +
                "no=" + no +
                ", nation='" + nation + '\'' +
                '}';
    }
}

响应对象：

 @RequestMapping("/response2")
    public Result response2(){
        Idcard idcard1 = new Idcard("122", "北京");
        User user = new User(1, "张三", "13112345678", idcard1, LocalDate.of(2001, 01, 01));
        Result result = Result.success(user);
        return result;
    }

响应集合：

@RequestMapping("/response3")
    public Result response3(){
        Idcard idcard1 = new Idcard("122", "北京");
        Idcard idcard2 = new Idcard("133", "上海");
        Idcard idcard3 = new Idcard("144", "深圳");

        User user1 = new User(1, "张三", "13112345678", idcard1, LocalDate.of(2000, 02, 03));
        User user2 = new User(2, "李四", "13112345679", idcard2, LocalDate.of(2001, 03, 04));
        User user3 = new User(3, "王五", "13112345670", idcard3, LocalDate.of(2002, 04, 05));

        ArrayList<User> list = new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);

        Result result = Result.success(list);

        return result;

    }

28.三层架构

（1）controller：

控制层，接收前端发送的请求，对请求进行处理，并响应数据

（2）service：

业务逻辑层，处理具体的业务逻辑

（3）dao：

数据访问层(Data Access Object)（持久层），负责数据访问操作，包括数据的增、删、改、查

29.分层解耦

（1）内聚：

软件中各个功能模块内部的功能联系

（2）耦合：

衡量软件中各个层/模块之间的依赖、关联的程度

（3）软件设计原则：

高内聚低耦合

（4）控制反转（ IOC ）：

Inversion Of Control，简称IOC。对象的创建控制权由程序自身转移到外部（容器），这种思想称为控制反转

（5）依赖注入（ DI ）：

Dependency Injection，简称DI。容器为应用程序提供运行时，所依赖的资源，称之为依赖注入

（6）Bean对象：

IOC容器中创建、管理的对象，称之为bean

30.案例

步骤：

1.创建springboot工程，在pom文件中导入相关依赖，导入需要的实体类，工具类，xml文件等

2.将静态页面文件，导入resources下的static目录下

3.编写Controller程序，处理请求，响应数据

代码：

Controller:

@RestController
public class EmpController {
    //注入Service 对象
    @Autowired
    EmpService empService;
    @RequestMapping("/listEmp")
    public Result queryAllEmp(){
        //调用 queryAllEmp() 进行业务处理
        List<Emp> empList = empService.queryAllEmp();
        //响应数据
        return Result.success(empList);
    }

Service:

public interface EmpService {

    List<Emp> queryAllEmp();
}

ServiceImpl:

@Service
public class EmpServiceImpl implements EmpService {
    //注入 EmpDao 对象
    @Autowired
    EmpDao empDao;
    @Override
    public List<Emp> queryAllEmp() {
        List<Emp> empList = empDao.listEmp();

        for (Emp emp : empList) {
            if ("1".equals(emp.getGender())){
                emp.setGender("男");
            }else {
                emp.setGender("女");
            }

            if ("1".equals(emp.getJob())){
                emp.setJob("讲师");
            } else if ("2".equals(emp.getJob())) {
                emp.setJob("班主任");
            }else {
                emp.setJob("就业指导");
            }
        }
        return empList;
    }

Dao:

public interface EmpDao {
    List<Emp> listEmp();
}

DaoImpl:

@Repository
public class EmpDaoImpl implements EmpDao {
    @Override
    public List<Emp> listEmp() {
        URL resource = ClassLoader.getSystemClassLoader().getResource("emp.xml");
        String file = resource.getFile();
        //2.解析xml文件，获取数据
        List<Emp> empList = XmlParserUtils.parse(file, Emp.class);
        return empList;
    }

测试结果：

31.IOC详解

（1）Bean的声明：

要把某个对象交给IOC容器管理，需要在对应的类上加上如下注解之一：

@Component	声明bean的基础注解	不属于以下三类时，用此注解
@Controller	@Component的衍生注解	标注在控制器类上
@Service	@Component的衍生注解	标注在业务类上
@Repository	@Component的衍生注解	标注在数据访问类上（由于与mybatis整合，用的少）

（2）注意事项：

1.声明bean的时候，可以通过value属性指定bean的名字，如果没有指定，默认为类名首字母小写

2.使用以上四个注解都可以声明bean，但是在springboot集成web开发中，声明控制器bean只能用@Controller

（3）Bean组件扫描：

声明bean的四大注解，要想生效，还需要被组件扫描注解@ComponentScan扫描

@ComponentScan注解虽然没有显式配置，但是实际上已经包含在了启动类声明注解 @SpringBootApplication 中，默认扫描的范围是启动类所在包及其子包

32.DI详解

（1）Bean注入：

@Autowired注解，默认是按照类型进行，如果存在多个相同类型的bean，将会报出如下错误：

通过以下几种方案来解决：

@Primary    提升Bean的优先级
@Service
public class EmpServiceA implements EmpService {
}

@RestController
public class EmpController {
    @Autowired    默认按照类型自动装配
    @Qualifier("empServiceA")    为bean设置名称
    private EmpService empService;

@RestController
public class EmpController {
    @Resource(name = "empServiceB")    name="bean的名称"
    private EmpService empService ;

（2）@Resource 与 @Autowired区别：

@Autowired 是spring框架提供的注解，而@Resource是JDK提供的注解

@Autowired 默认是按照类型注入，而@Resource默认是按照名称注入

33.注解

@RestController
	@Component衍生注解，内置了@Component、@ResponseBody
	启动类启动的时候，就会扫描到这个注解，创建对象，放入ioc容器

@RequestMapping
	指定访问路径的，通常用于类上和方法上，分别代表一级二级路径

@RequestParam
	1.为参数起别名(别名映射)
    2.接收List集合参数
    3.默认属性required = true，代表必须传递参数，不传报错400
    4.如required = true，且并没有传参数。default属性可以指定默认值，防止报错

@RequestBody
	接受请求体的内容，get请求没有请求体，通常接收post等非get请求的请求体，通常接收json格式数据

@PathVariable
	路径参数映射到方法的形参上的

@ResponseBody
	将return的数据，响应给浏览器。如果是对象，帮我们自动转成json格式再做响应

@Primary
	如果同类型下有多个bean对象，可以使用该注解声明谁的优先级最高

@Autowired
	依赖注入，默认按照类型去容器中匹配完成注入。如果同类型bean对象有多个，则报错

@Qualifier
	为了解决以上报错问题，根据名字匹配一个容器中的对象，@Autowired基础上使用

@Resource
	直接根据名字去容器匹配对象，属于jdk提供的，jdk1.8之后不在提供（慎用）

@Component
	声明当前会被框架创建，并放入容器，IOC注解（控制反转，我们不new，框架来创建）
	@Controller
	@Service
	@Repository

34.MySQL （数据库）

（1）介绍

数据库：DataBase（DB），是存储和管理数据的仓库

数据库管理系统：DataBase Management System (DBMS)，操纵和管理数据库的大型软件

SQL：Structured Query Language，操作关系型数据库的编程语言，定义了一套操作关系型数据库统一标准

（2）数据库产品

Oracle	收费的大型数据库，Oracle公司的产品。
MySQL    开源免费的中小型数据库。Sun公司收购了MySQL，Oracle收购Sun公司。	
SQL Server	MicroSoft公司收费的中型的数据库。C#、.net等语言常使用。
PostgreSQL	开源免费中小型的数据库。
DB2	IBM公司的大型收费数据库产品。
SQLite	嵌入式的微型数据库。如：作为Android内置数据库
MariaDB	开源免费的中小型的数据库。

（3）MySQL安装

MySQL官方提供了两种不同的版本：

我们安装使用的是：（MySQL Community Server）

1.MySQL下载

官网：MySQL :: MySQL Downloads

2.解压

下载完成后我们得到的是一个压缩包，我们可以把它放在你想安装的位置，将其解压：

3.配置环境变量

右键此电脑 ➡属性➡ 高级系统设置

选择高级➡环境变量

在系统变量中找到 path ，双击

点击新建，将解压后的 bin 目录路径粘贴进去

然后一路点击确定，到这里环境变量就算配置完成了

4.验证是否添加成功

以管理员身份运行命令行窗口，输入 mysql 敲回车：

如果提示 Can't connect to MySQL server on ’localhost:3306’(10061) 则证明添加成功

如果提示 MySQL不是内部或外部命令，也不是可运行的程序或批处理文件 则表示添加失败，请重新检查步骤并重试

5.初始化MySQL

以管理员身份运行命令行窗口：

在命令行中输入指令：

mysqld --initialize-insecure

如果出现没有出现报错信息，则证明data目录初始化没有问题，此时再查看MySQL目录下已经有data目录生成

6.注册MySQL服务

在命令行中输入指令：

mysqld -install

到这步已经成功安装好MySQL服务了

7.启动、停止 MySQL服务

在命令行中输入指令：

net start mysql   启动mysql服务
    
net stop mysql   停止mysql服务

8.修改默认账户密码

在黑框里敲入mysqladmin -u root password 123456，这里的123456 就是指默认管理员(即root账户)的密码，可以自行修改成你喜欢的

mysqladmin -u root password 123456

9.登录 MySQL

在命令行窗口中输入指令：

mysql -uroot -p123456

到这里就成功登录mysql了

9.退出mysql指令

exit
quit

登陆参数：

mysql -u用户名 -p密码 -h要连接的mysql服务器的ip地址(默认127.0.0.1) -P端口号(默认3306)

10.卸载mysql

以管理员身份运行命令行窗口：

1.输入指令，回车：

net stop mysql

2.输入指令，回车：

mysqld -remove mysql

3.最后删除MySQL目录及相关的环境变量

（4）MySQL数据模型

关系型数据库（RDBMS）: 建立在关系模型基础上，由多张相互连接的二维表组成的数据库

特点：

1.使用表存储数据，格式统一，便于维护

2.使用SQL语言操作，标准统一，使用方便，可用于复杂查询

（5）SQL简介

SQL：一门操作关系型数据库的编程语言，定义操作所有关系型数据库的统一标准

通用语法：

1.SQL语句可以单行或多行书写，以分号结尾

2.SQL语句可以使用空格/缩进来增强语句的可读性

3.MySQL数据库的SQL语句不区分大小写

4.注释：

单行注释：-- 注释内容或 # 注释内容(MySQL特有)

多行注释： /* 注释内容 */

（6）SQL分类

SQL语句通常被分为四大类：

DDL	Data Definition Language	数据定义语言，用来定义数据库对象(数据库，表，字段)
DML	Data Manipulation Language	数据操作语言，用来对数据库表中的数据进行增删改
DQL	Data Query Language	数据查询语言，用来查询数据库中表的记录
DCL	Data Control Language	数据控制语言，用来创建数据库用户、控制数据库的访问权限

（7）DDL

DDL 英文全称是 Data Definition Language，数据定义语言，用来定义数据库对象(数据库、表)

DDL（数据库操作）：

DDL-数据库操作
	show databases ; 查看当前所有数据库
	create database 数据库名 ;   创建数据库
	use 数据库名 ;   切换到某个数据库
	select database() ;   查看当前处于哪个数据库
	drop database 数据库名    删除数据库

DDL（表操作）：

DDL-表操作
	show tables ; 查看当前数据库所有的表
	create table 表名 （字段 字段类型 ，字段 字段类型）;  创建表
	desc 表名 ; 查看当前表有哪些字段
	show create table 表名 ;  查询表的建表语句
	alter table 表名 add/modify/change/drop/rename to... ; 表的修改操作
	drop table 表名 ;  删除表

创建表标准格式：
    create table  表名(
	字段1  字段类型  [ 约束 ]  [ comment  字段1注释 ] ,
	......
	字段n  字段类型  [ 约束 ]  [ comment  字段n注释 ] 
) [ comment  表注释 ] ;


DDL-表操作-修改

	添加字段
	alter table 表名 add 字段名 类型（长度）[comment 注释] [约束] ;

修改数据类型
	alter table 表名 modify 字段名 新数据类型（长度）;

修改字段名和数据类型
	alter table 表名 change 旧字段名 新字段名 类型（长度）[comment 注释] [约束] ;

删除字段
	alter table 表名 drop 字段名 ;

修改表名
	alter table 表名 rename to 新表名 ;

删除表
	drop table [ if exists ] 表名 ;

删除指定表，并重新创建该表
	truncate table 表名 ;
在删除表时，表中的所有数据也会被删除。

注意：
    语法中的database，就等同于 schema

（8）约束

概念：约束是作用于表中字段上的规则，用于限制存储在表中的数据

目的：保证数据库中数据的正确性、有效性和完整性

非空约束	    限制该字段值不能为    null	not  null
唯一约束	    保证字段的所有数据都是唯一、不重复的	unique
主键约束	    主键是一行数据的唯一标识，要求非空且唯一	primary  key
默认约束	    保存数据时，如果未指定该字段值，则采用默认值	default
外键约束	    让两张表的数据建立连接，保证数据的一致性和完整性	foreign  key

（9）MySQL客户端工具-图形化工具

介绍：DataGrip是JetBrains旗下的一款数据库管理工具，是管理和开发MySQL、Oracle、PostgreSQL的理想解决方案

官网：JetBrains: Essential tools for software developers and teams

（10）数据类型

MySQL中的数据类型主要分为三类：数值类型、字符串类型、日期时间类型

1.数值类型

2.日期和时间类型

3.字符串类型

（11）DML

DML英文全称是Data Manipulation Language(数据操作语言)，用来对数据库中表的数据记录进行增、删、改操作

DML-介绍
	( insert ) 添加数据

                注意事项：
                    1.插入数据时，指定的字段顺序需要与值的顺序是一一对应的
                    2.字符串和日期型数据应该包含在引号中
                    3.插入的数据大小，应该在字段的规定范围内

	( update ) 修改数据

                注意事项：
                    修改语句的条件可以有，也可以没有，如果没有条件，则会修改整张表的所有数据

	( delete ) 删除数据
            
                注意事项：
                    1.DELETE 语句的条件可以有，也可以没有，如果没有条件，则会删除整张表的所有数据
                    2.DELETE 语句不能删除某一个字段的值(如果要操作，可以使用UPDATE，将该字段的值置为NULL)

DML-添加数据
1.给指定字段添加数据
	insert into 表名 ( 字段1，字段2，...) values( 值1，值2，...) ;

2.给全部字段添加数据
	insert into 表名 values (值1，值2，...) ;

3.批量添加数据
	insert into 表名 ( 字段名1，字段名2，..) values (值1，值2，..) ，(值1，值2，..) ,(值1，值2，..) ;
	insert into 表名 values (值1，值2，..) , (值1，值2，..) , (值1，值2，..) ;

DML-修改数据
	update 表名 set 字段名1=值1 , 字段名2=值2 , ..[ where 条件 ] ;

DML-删除数据
	delete from 表名 [ where 条件 ] ;
注意：
	delete语句的条件可以有，也可以没有，如果没有条件，则会删除整张表的所有数据
	delete语句不能删除某一个字段的值（可以使用update）

（12）DQL

DQL英文全称是Data Query Language(数据查询语言)，用来查询数据库表中的记录

关键字：SELECT

语法：

select
		字段列表
	from
		表名列表
	where
		条件列表
	group by
		分组字段列表
	having
		分组后条件列表
	order by
		排序字段列表
	limit
		分页参数

1.DQL- 基本查询

基本查询
	条件查询（where）
	聚合函数（conut 、max、min、avg、sum）
	分组查询（group by）
	排序查询（order by）
	分页查询（limit）

1.查询多个字段
	select 字段1，字段2，字段3... from 表名 ;

2.查询所有字段
	select * from 表名 ;

3.设置别名
	select 字段1[ as 别名1 ]，字段2[ as 别名2 ] ... from 表名 ;

4.去除重复记录
	select distinct 字段列表 from 表名 ;

注意：
        * 号代表查询所有字段，在实际开发中尽量少用（不直观、影响效率）

2.DQL- 条件查询

DQL-条件查询
    条件查询（where）
	1.语法
	select 字段列表 from 表名 where  条件列表 ; 

比较运算符：

    >	    大于
    >=	    大于等于
    <	    小于
    <=	    小于等于
    =	    等于
    <>  或 !=	    不等于
    between ... and ...	    在某个范围之内(含最小、最大值)
    in(...)	    在in之后的列表中的值，多选一
    like  占    位符	模糊匹配(_匹配单个字符, %匹配任意个字符)
    is null	    是null 

逻辑运算符;

    and  或  &&	    并且 (多个条件同时成立)
    or  或  ||	    或者 (多个条件任意一个成立)
    not  或  !	    非 , 不是

3.DQL- 聚合函数

聚合函数：

介绍：将一列数据作为一个整体，进行纵向计算

DQL-聚合函数

	常见的聚合函数：

	    count  统计数量
	    max  最大值
	    min  最小值
	    avg  平均值
	    sum  求和

语法：

	select 聚合函数 ( 字段列表 ) from 表名;

	注意：
		1.null值不参与所有聚合函数运算
        2.统计数量可以使用：count(*)   count(字段)   count(常量)，推荐使用count(*)

4.DQL- 分组查询

DQL-分组查询

1.语法：
	select 字段列表 from 表名 [ where 条件 ] group by  分组字段名 [ having 分组后过滤条件 ] ;

2.where与having 区别：
	执行时机不同：where 是分组之前进行过滤，不满足where 条件，不参与分组；而having是分组之后对结果进行过滤
	判断条件不同：where 不能对聚合函数进行判断，而having可以
注意：
	执行顺序：where > 聚合函数 >having
	分组之后，查询的字段一般为聚合函数和分组字段，查询其他字段无任何意义

5.DQL- 排序查询

DQL-排序查询

1.语法：
	select 字段列表 from 表名 order by 字段1 排序方式1 ,字段2 排序方式2 ;

2.排序方式：
	ASC 升序（默认值）
	DESC 降序 

注意：
    如果是多字段排序，当第一个字段值相同时，才会根据第二个字段进行排序

6.DQL- 分页查询

DQL-分页查询

1.语法
	select 字段列表 from 表名 limit  起始索引 , 查询记录数 ;
注意：
	1.起始索引从0开始，起始索引=（查询页码 -1）* 每页查询记录数
	2.分页查询是数据库方言，不同的数据库有不同的实现，mysql 中是limit
	3.如果查询的是第一页数据，起始索引可以省略，直接简写为limit10

DQL-执行顺序
	from
		表明列表
	where
		条件列表
	group by 
		分组字段列表
	having 
		分组后条件列表
	select
		字段列表
	order by 
		排序字段列表
	limit
		分页参数

（13） DCL

介绍：

DCL（数据控制语言），用来管理数据库用户，控制数据库的访问权限

DCL-管理用户
1.查询用户
	use mysql ;
	select * from user ;

2.创建用户
	create user '用户名'@'主机名' identified by '密码' ;

3.修改用户密码
	alter user '用户名'@'主机名' identified with mysql_native_password by '新密码' ;

4.删除用户
	drop user '用户名'@'主机名' ；

DCL-权限控制
常用权限
	all , all privileges  所有权限
	select  查询数据
	insert  插入数据
	update  修改数据
	delete  删除数据
	alter  修改表
	drop  删除数据库  / 表 / 视图
	create  创建数据库 / 表

DCL-权限控制
1.查询权限
	show grants  for '用户名'@'主机名' ;
	
2.授予权限
	grant 权限列表 on 数据库名.表名 to '用户名'@'主机名' ;

3.撤销权限
	revoke 权限列表 on 数据库名.表名 from '用户名'@'主机名' ;

（14）函数：

1.字符串函数

常用的字符串函数
	concat( S1,S2,.....Sn ) 字符串拼接，将S1,S2,....Sn拼接成一个字符串

	lower( str ) 将字符串str 全部转为小写

	upper( str ) 将字符串全部转为大写

	lpad( str , n , pad ) 左填充，用字符串pad 对str 的左边进行填充，达到n个字符串长度

	rpad( str , n , pad ) 右填充，用字符串pad 对str 的右边进行填充，达到n个字符串长度

	trim( str ) 去掉字符串头部和尾部的空格

	substring( str , start , len ) 返回字符串str 从 start 位置起的len 个长度的字符串

2.数值函数

常见的数值函数
	ceil( x ) 向上取整

	floor( x ) 向下取整

	mod( x,y ) 返回x/y 的模

	rand() 返回0-1内的随机数

	round( x, y ) 求参数 x 四舍五入的值，保留y位小数

3.日期函数

常见的日期函数
	curdate() 返回当前日期

	curtime() 返回当前时间

	now() 返回当前日期和时间

	year( date ) 获取指定date 的年份

	month( date ) 获取指定 date 的月份

	day( date ) 获取指定date 的日期

	date_add( date ,interval expr type ) 返回一个日期/时间值加上一个时间间隔 expr 后的时间值

	datediff( date1 , date2 ) 返回起始时间date1 和结束时间date2 之间的天数

4.流程函数

if( value , t , f ) 如果value 为true ，则返回t ,否则返回f 

ifnull( value1 , value2 ) 如果value1 不为空则返回value1 否则返回value2 

case when [ val1 ] then [ res1 ] ....else [ default ] end 如果val1 为true 返回res1,... 否则返回default 默认值

case [ expr ] when [ val1 ] then [ res1 ] ... else [ default ] end 如果expr 的值等于val1,返回res1,... f否则返回 default 默认值

（15）多表设计

1.一对多（多对一）

一对多关系实现：在数据库表中多方，添加字段，来关联属于一方的主键

2.一对一

一对一：在任意一方加入字段，对应另外一方的主键，并且设置该字段为唯一的(UNIQUE)

3.多对多

案例：学生与课程的关系

关系：一个学生可以选修多门课程，一门课程也可以供多个学生选择

实现关系1：建立第三张中间表，中间表至少包含两个外键，分别关联两方主键

（16）外键约束

1.物理外键

概念：使用 foreign key 定义外键关联另外一张表

缺点：

影响增、删、改的效率（需要检查外键关系）

仅用于单节点数据库，不适用与分布式、集群场景

容易引发数据库的死锁问题，消耗性能

外键约束
语法
    创建表时指定
create table 表名(
	字段名    数据类型,
	...
	[constraint]   [外键名称]  foreign  key (外键字段名)   references   主表 (主表列名)	
);


-- 建完表后，添加外键
alter table  表名  add constraint  外键名称  foreign key(外键字段名) references 主表(主表列名);

删除外键
	alter table 表名 drop foreign key 外键名称 ;

外键约束
删除/更新行为
	no action 当在父表中删除/更新对应记录时，首先检查该记录是否有对应外键，如果有则不允许删除/更新（与restrict一致）
	restrict 当在父表中删除/更新对应记录时，首先检查该记录是否有对应外键，如果有则不允许删除/更新（与no action 一致）
	cascade 当在父表中删除/更新对应记录时，首先检查该记录是否有对应外键，如果有，则也删除/更新外键在子表中的记录
	set null 当在父表中删除对应记录时，首先检查该记录是否有对应外键，如果有则设置子表中该外键值为null （这就要求该外键允许取null）
	set default 父表有变更时，子表将外键列设置成一个默认的值（innodb 不支持）

语法
	alter table 表名 add constraint 外键名称 foreign key ( 外键字段 ) references 主表名 ( 主表字段名 ) on update cascade on delete cascade ;

2.逻辑外键

概念：在业务层逻辑中，解决外键关联

通过逻辑外键，就可以很方便的解决上述问题

注意：

在现在的企业开发中，很少会使用物理外键（mysql外键），都是使用逻辑外键（java代码）。甚至在一些数据库开发规范中，会明确指出禁止使用物理外键 foreign key

（17）多表查询

1.概述

多表查询: 指从多张表中查询数据

笛卡尔积: 笛卡尔乘积是指在数学中，两个集合(A集合和 B集合)的所有组合情况。(在多表查询时，需要消除无效的笛卡尔积)

2.分类

连接查询：

内连接：相当于查询A、B交集部分数据

外连接：

左外连接：查询左表所有数据(包括两张表交集部分数据)

右外连接：查询右表所有数据(包括两张表交集部分数据)

自连接

联合查询

子查询

3.内连接

内连接查询的是两张表交集的部分

隐式内连接

语法：
	select 字段列表 from 表1 , 表2 where 条件 ... ;

显示内连接

语法：
	select 字段列表 from 表1 [ inner ] join 表2 on 连接条件 ... ;

4.外连接

外连接查询语法

左外连接：
	select 字段列表 from 表1 left [ outer ] join 表2 on 条件 ... ;
相当于查询表1（左表）的所有数据包含表1和表2交集部分的数据

右外连接：
	select 字段列表 from 表1 right [ outer ] join 表2 on 条件 ... ;
相当于查询表2（右表）的所有数据包含表1和表2交集部分的数据

5.自连接

自连接查询语法：

	select 字段列表 from 表A 别名A join 表A 别名B on 条件 ... ;

    自连接查询，可以是内连接查询，也可以是外连接查询

6.联合查询

对于union 查询，就是把多次查询的结果联合起来，形成一个新的查询结果集

联合查询- union  , union all 

对于union 查询，就是把多次查询的结果联合起来，形成一个新的查询结果集

语法：
	select 字段列表 from 表A ...
	union [ all ]
	select 字段列表 from 表B ... ;

对于联合查询的多张表的列数必须保持一致，字段类型也需要保持一致

union all 会将全部数据直接合并在一起，union 会对合并之后的数据去重

7.子查询

子查询
概念：SQL语句中嵌套select语句，成为嵌套查询，又称为子查询
	select * from t1 where column1 = ( select column1 from t2 ) ;
子查询外部的语句可以是 insert / update / delete/ select

根据子查询结果不同，分为：

    1.标量子查询 （子查询结果为单个值）
    2.列子查询（子查询结果为一列）
    3.行子查询（子查询的结果为一行）
    4.表子查询（子查询的结果为多行多列）

根据子查询的位置，分为：
	where 之后、from 之后、select 之后

标量子查询
子查询返回的结果是单个值（数字、字符串、日期等），最简单的形式，这种子查询称为标量子查询
常用的操作符：= <> > >= < <=

列子查询
子查询返回的结果是一列（可以是多行），这种子查询称为列子查询
常用的操作符：in、not in、any、some、all
	in 在指定的集合范围内，多选一
	not in 不在指定的集合范围之内
	any 子查询返回列表中，有任意一个满足即可
	some 与any 等同 ，使用some的地方都可以使用any
	all 子查询返回列表的所有值都必须满足

行子查询
子查询返回的结果是一行（可以是多列），这种子查询成为行子查询
常用的操作符：=、<>、in、not in 

表子查询
子查询返回的结果是多行多列，这种子查询称为表子查询
常用的操作符：in

8.案例

数据准备：

-- 分类表

CREATE TABLE `category` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  `type` int DEFAULT NULL COMMENT '类型   1 菜品分类 2 套餐分类',
  `name` varchar(32) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin NOT NULL COMMENT '分类名称',
  `sort` int NOT NULL DEFAULT '0' COMMENT '顺序',
  `status` int DEFAULT NULL COMMENT '分类状态 0:禁用，1:启用',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `create_user` bigint DEFAULT NULL COMMENT '创建人',
  `update_user` bigint DEFAULT NULL COMMENT '修改人',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_category_name` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=25 DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_bin COMMENT='菜品及套餐分类';

-- 菜品表

CREATE TABLE `dish` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  `name` varchar(32) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin NOT NULL COMMENT '菜品名称',
  `category_id` bigint NOT NULL COMMENT '菜品分类id',
  `price` decimal(10,2) DEFAULT NULL COMMENT '菜品价格',
  `image` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin DEFAULT NULL COMMENT '图片',
  `description` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin DEFAULT NULL COMMENT '描述信息',
  `status` int DEFAULT '1' COMMENT '0 停售 1 起售',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `create_user` bigint DEFAULT NULL COMMENT '创建人',
  `update_user` bigint DEFAULT NULL COMMENT '修改人',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_dish_name` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=71 DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_bin COMMENT='菜品';

-- 套餐表

CREATE TABLE `setmeal` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  `category_id` bigint NOT NULL COMMENT '菜品分类id',
  `name` varchar(32) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin NOT NULL COMMENT '套餐名称',
  `price` decimal(10,2) NOT NULL COMMENT '套餐价格',
  `status` int DEFAULT '1' COMMENT '售卖状态 0:停售 1:起售',
  `description` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin DEFAULT NULL COMMENT '描述信息',
  `image` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin DEFAULT NULL COMMENT '图片',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `create_user` bigint DEFAULT NULL COMMENT '创建人',
  `update_user` bigint DEFAULT NULL COMMENT '修改人',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_setmeal_name` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=107 DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_bin COMMENT='套餐';

-- 套餐菜品关联表

CREATE TABLE `setmeal_dish` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
  `setmeal_id` bigint DEFAULT NULL COMMENT '套餐id',
  `dish_id` bigint DEFAULT NULL COMMENT '菜品id',
  `name` varchar(32) CHARACTER SET utf8mb3 COLLATE utf8mb3_bin DEFAULT NULL COMMENT '菜品名称',
  `price` decimal(10,2) DEFAULT NULL COMMENT '菜品单价',
  `copies` int DEFAULT NULL COMMENT '菜品份数',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=59 DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_bin COMMENT='套餐菜品关系';

添加测试数据：

-- category

INSERT INTO `category`
VALUES (11, 1, '酒水饮料', 10, 1, '2022-06-09 22:09:18', '2022-06-09 22:09:18', 1, 1),
       (12, 1, '传统主食', 9, 1, '2022-06-09 22:09:32', '2022-06-09 22:18:53', 1, 1),
       (13, 2, '人气套餐', 12, 1, '2022-06-09 22:11:38', '2022-06-10 11:04:40', 1, 1),
       (15, 2, '商务套餐', 13, 1, '2022-06-09 22:14:10', '2022-06-10 11:04:48', 1, 1),
       (16, 1, '蜀味烤鱼', 4, 1, '2022-06-09 22:15:37', '2022-08-31 14:27:25', 1, 1),
       (17, 1, '蜀味牛蛙', 5, 1, '2022-06-09 22:16:14', '2022-08-31 14:39:44', 1, 1),
       (18, 1, '特色蒸菜', 6, 1, '2022-06-09 22:17:42', '2022-06-09 22:17:42', 1, 1),
       (19, 1, '新鲜时蔬', 7, 1, '2022-06-09 22:18:12', '2022-06-09 22:18:28', 1, 1),
       (20, 1, '水煮鱼', 8, 1, '2022-06-09 22:22:29', '2022-06-09 22:23:45', 1, 1),
       (21, 1, '汤类', 11, 1, '2022-06-10 10:51:47', '2022-06-10 10:51:47', 1, 1),
       (23, 1, '云南菜', 1, 1, '2023-11-17 10:54:58', '2023-11-17 10:54:58', 1, 1),
       (24, 2, '节假日套餐', 1, 1, '2023-11-17 11:36:12', '2023-11-17 11:36:12', 1, 1);

-- dish

INSERT INTO `dish`
VALUES (46, '王老吉', 11, 6.00, 'https://sky-itcast.oss-cn-beijing.aliyuncs.com/41bfcacf-7ad4-4927-8b26-df366553a94c.png',
        '', 1, '2022-06-09 22:40:47', '2022-06-09 22:40:47', 1, 1),
       (47, '北冰洋', 11, 4.00, 'https://sky-itcast.oss-cn-beijing.aliyuncs.com/4451d4be-89a2-4939-9c69-3a87151cb979.png',
        '还是小时候的味道', 1, '2022-06-10 09:18:49', '2022-06-10 09:18:49', 1, 1),
       (48, '雪花啤酒', 11, 4.00, 'https://sky-itcast.oss-cn-beijing.aliyuncs.com/bf8cbfc1-04d2-40e8-9826-061ee41ab87c.png',
        '', 1, '2022-06-10 09:22:54', '2022-06-10 09:22:54', 1, 1),
       (49, '米饭', 12, 2.00, 'https://sky-itcast.oss-cn-beijing.aliyuncs.com/76752350-2121-44d2-b477-10791c23a8ec.png',
        '精选五常大米', 1, '2022-06-10 09:30:17', '2022-06-10 09:30:17', 1, 1),
       (50, '馒头', 12, 1.00, 'https://sky-itcast.oss-cn-beijing.aliyuncs.com/475cc599-8661-4899-8f9e-121dd8ef7d02.png',
        '优质面粉', 1, '2022-06-10 09:34:28', '2022-06-10 09:34:28', 1, 1),
       (51, '老坛酸菜鱼', 20, 56.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/4a9cefba-6a74-467e-9fde-6e687ea725d7.png', '原料：汤，草鱼，酸菜', 1,
        '2022-06-10 09:40:51', '2022-06-10 09:40:51', 1, 1),
       (52, '经典酸菜鮰鱼', 20, 66.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/5260ff39-986c-4a97-8850-2ec8c7583efc.png', '原料：酸菜，江团，鮰鱼', 1,
        '2022-06-10 09:46:02', '2022-06-10 09:46:02', 1, 1),
       (53, '蜀味水煮草鱼', 20, 38.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/a6953d5a-4c18-4b30-9319-4926ee77261f.png', '原料：草鱼，汤', 1,
        '2022-06-10 09:48:37', '2022-06-10 09:48:37', 1, 1),
       (54, '清炒小油菜', 19, 18.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/3613d38e-5614-41c2-90ed-ff175bf50716.png', '原料：小油菜', 1,
        '2022-06-10 09:51:46', '2022-06-10 09:51:46', 1, 1),
       (55, '蒜蓉娃娃菜', 19, 18.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/4879ed66-3860-4b28-ba14-306ac025fdec.png', '原料：蒜，娃娃菜', 1,
        '2022-06-10 09:53:37', '2022-06-10 09:53:37', 1, 1),
       (56, '清炒西兰花', 19, 18.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/e9ec4ba4-4b22-4fc8-9be0-4946e6aeb937.png', '原料：西兰花', 1,
        '2022-06-10 09:55:44', '2022-06-10 09:55:44', 1, 1),
       (57, '炝炒圆白菜', 19, 18.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/22f59feb-0d44-430e-a6cd-6a49f27453ca.png', '原料：圆白菜', 1,
        '2022-06-10 09:58:35', '2022-06-10 09:58:35', 1, 1),
       (58, '清蒸鲈鱼', 18, 98.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/c18b5c67-3b71-466c-a75a-e63c6449f21c.png', '原料：鲈鱼', 1,
        '2022-06-10 10:12:28', '2022-06-10 10:12:28', 1, 1),
       (59, '东坡肘子', 18, 138.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/a80a4b8c-c93e-4f43-ac8a-856b0d5cc451.png', '原料：猪肘棒', 1,
        '2022-06-10 10:24:03', '2022-06-10 10:24:03', 1, 1),
       (60, '梅菜扣肉', 18, 58.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/6080b118-e30a-4577-aab4-45042e3f88be.png', '原料：猪肉，梅菜', 1,
        '2022-06-10 10:26:03', '2022-06-10 10:26:03', 1, 1),
       (61, '剁椒鱼头', 18, 66.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/13da832f-ef2c-484d-8370-5934a1045a06.png', '原料：鲢鱼，剁椒', 1,
        '2022-06-10 10:28:54', '2022-06-10 10:28:54', 1, 1),
       (62, '金汤酸菜牛蛙', 17, 88.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/7694a5d8-7938-4e9d-8b9e-2075983a2e38.png', '原料：鲜活牛蛙，酸菜', 1,
        '2022-06-10 10:33:05', '2022-06-10 10:33:05', 1, 1),
       (63, '香锅牛蛙', 17, 88.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/f5ac8455-4793-450c-97ba-173795c34626.png', '配料：鲜活牛蛙，莲藕，青笋', 1,
        '2022-06-10 10:35:40', '2022-06-10 10:35:40', 1, 1),
       (64, '馋嘴牛蛙', 17, 88.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/7a55b845-1f2b-41fa-9486-76d187ee9ee1.png', '配料：鲜活牛蛙，丝瓜，黄豆芽', 1,
        '2022-06-10 10:37:52', '2022-06-10 10:37:52', 1, 1),
       (65, '草鱼2斤', 16, 68.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/b544d3ba-a1ae-4d20-a860-81cb5dec9e03.png', '原料：草鱼，黄豆芽，莲藕', 1,
        '2022-06-10 10:41:08', '2022-06-10 10:41:08', 1, 1),
       (66, '江团鱼2斤', 16, 119.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/a101a1e9-8f8b-47b2-afa4-1abd47ea0a87.png', '配料：江团鱼，黄豆芽，莲藕', 1,
        '2022-06-10 10:42:42', '2022-06-10 10:42:42', 1, 1),
       (67, '鮰鱼2斤', 16, 72.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/8cfcc576-4b66-4a09-ac68-ad5b273c2590.png', '原料：鮰鱼，黄豆芽，莲藕', 1,
        '2022-06-10 10:43:56', '2022-06-10 10:43:56', 1, 1),
       (68, '鸡蛋汤', 21, 4.00, 'https://sky-itcast.oss-cn-beijing.aliyuncs.com/c09a0ee8-9d19-428d-81b9-746221824113.png',
        '配料：鸡蛋，紫菜', 1, '2022-06-10 10:54:25', '2022-06-10 10:54:25', 1, 1),
       (69, '平菇豆腐汤', 21, 6.00,
        'https://sky-itcast.oss-cn-beijing.aliyuncs.com/16d0a3d6-2253-4cfc-9b49-bf7bd9eb2ad2.png', '配料：豆腐，平菇', 1,
        '2022-06-10 10:55:02', '2022-06-10 10:55:02', 1, 1),
       (70, '水性杨花菜', 23, 10.00, '1.jpg', '夏季必备，清热爽口', 1, '2023-11-17 11:02:46', '2023-11-17 11:02:46', 1, 1);

-- setmeal

INSERT INTO `setmeal`
VALUES (105, 24, '元旦节8人餐', 5000.00, 1, '好吃不贵，分量足够', '1.jpg', '2023-11-17 12:08:27', '2023-11-17 12:08:27', 1, 1),
       (106, 24, '圣诞节2人烛光晚餐', 200.00, 1, '浪漫极了', '1.jpg', '2023-11-17 12:12:10', '2023-11-17 12:12:10', 1, 1);

-- setmeal_dish

INSERT INTO `setmeal_dish`
VALUES (50, 105, 46, '王老吉', 6.00, 8),
       (51, 105, 51, '老坛酸菜鱼', 56.00, 1),
       (52, 105, 49, '米饭', 2.00, 8),
       (53, 105, 59, '东坡肘子', 138.00, 1),
       (54, 105, 58, '清蒸鲈鱼', 98.00, 2),
       (55, 105, 62, '金汤酸菜牛蛙', 88.00, 2),
       (56, 106, 49, '米饭', 2.00, 2),
       (57, 106, 58, '清蒸鲈鱼', 98.00, 1),
       (58, 106, 48, '雪花啤酒', 4.00, 2);

sql语句：

#1.查询价格低于 10元 的菜品的名称 、价格 及其 菜品的分类名称
select dish.name, dish.price, category.name
from dish,
     category
where dish.category_id = category.id
  and dish.price < 10;

#2.查询所有价格在 10元(含)到50元(含)之间 且 状态为"起售"的菜品名称、价格及其分类名称(即使菜品没有分类 , 也要将菜品查询出来)
select dish.name, dish.price, category.name
from dish
         left join category on dish.category_id = category.id
where dish.price between 10 and 50
  and dish.status = 1;

#3.查询每个分类下最贵的菜品, 展示出分类的名称、最贵的菜品的价格
select category.name,max(dish.price) from dish join category on dish.category_id = category.id group by category.name;

#4.查询各个分类下 菜品状态为 "起售" , 并且 该分类下菜品总数量大于等于3 的 分类名称
select category.name, count(*)
from dish
         join category on dish.category_id = category.id
group by category.name
having count(*) > 3;

#5.查询出 "元旦节8人餐" 中包含了哪些菜品 （展示出套餐名称、价格, 包含的菜品名称、价格、份数）
select setmeal.name, setmeal.price, dish.name, dish.price,setmeal_dish.copies
from dish
         join setmeal_dish on dish.id = setmeal_dish.dish_id
         join setmeal on setmeal.id = setmeal_dish.setmeal_id
where setmeal.name = '元旦节8人餐';

#6.查询出低于菜品平均价格的菜品信息 (展示出菜品名称、菜品价格)
select dish.name,dish.price from dish where dish.price < ( select avg(dish.price) from dish);

（18）事物

1.介绍

事务是一组操作的集合，它是一个不可分割的工作单位。事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求，即这些操作要么同时成功，要么同时失败

注意事项：

默认MySQL的事务是自动提交的，也就是说，当执行一条DML语句，MySQL会立即隐式的提交事务

事务操作：

查看/设置事务提交方式
	select @@autocommit ;
	set @@autocommit = 0 ;

提交事务
	commit ;

回滚事务
	rollback ;

开启事务
	start transaction 或 begin ;

提交事务
	commit ;

回滚事务
	rollback ;

2.四大特性

事务的四大特性：

	原子性( atomicity ) ：事务是不可分割的最小操作单元，要么全部成功，要么全部失败

	一致性（consistency）:事务完成时，必须使所有的数据都保持一致状态

	隔离性（isolation）:数据库系统提供的隔离机制，保证事务在不受外部并发操作影响的独立环境下运行

	持久性（durability）：事务一旦提交或回滚，它对数据库的数据的改变就是永久的

3.事物的并发问题

并发事务问题：

    脏读	一个事务读到另一个事务还没有提交的数据

    不可重复读	一个事务先后读取同一条记录，但两次读取的数据不同，称为不可重复读

    幻读	一个事务按照条件查询数据时，没有对应的数据行，但是在插入数据时，又发现这行数据已经存在了，好像出现了幻影

4.事务隔离级别

事务隔离级别:

	      隔离级别	               脏读	      不可重复读	     幻读

	    read uncommitted             v		    v	           v
    
	    read committed	             x	 	    v	           v

	    repeatable read(默认)        x	 	    x	           v

	    serializable	             x 	 	    x	           x

查看事务隔离级别：
	select @@transaction_isolation

设置事务隔离级别：
	set [ session | globle ] transaction isolation level { read uncommitted | read committed |repeatable read | serializable }

5.存储引擎

存储引擎

体系结构
	连接层、服务层、引擎层、存储层	

在创建表时，指定存储引擎
	create table 表名(
	字段1  字段1类型 [ comment 字段1注释 ] ,
	.......
	字段n 字段n类型  [ comment 字段n注释 ] 
	)engine = innodb [ comment 表注释 ] ;
 
查看当前数据库支持的存储引擎
	show engines ;

存储引擎特点
innodb
	特点：
	DML操作遵循ACID模型，支持事务；
	行级锁，提高并发访问性能；
	支持外键	foreign key约束，保证数据的完整性和正确性；
xxx.idb : xxx代表的时表名，innodb 引擎的每一张表都会对应这样一个表空间文件，存储该表的表结构（from  sdi ）、数据、和索引
参数：innodb_file_per_table

	tablespece :表空间
	segment ：段
	extent ：区
	page ：页
	row ：行

MyISAM
特点：
	不支持事务，不支持外键
	支持表锁，不支持行锁
	访问速度快
文件：
	xxx.sid ：存储表结构信息
	xxx.MYD ：存储数据
	xxx.MYI :存储索引

Memory
特点：
	内存存放
	hash索引（默认）
文件：
	xxx.sid ：存储表结构信息

（19）索引

1.介绍

索引（index）是帮助数据库高效获取数据的数据结构

2.优缺点

3.索引结构

MySQL数据库支持的索引结构有很多，如：Hash索引、B+Tree索引、Full-Text索引等。我们平常所说的索引，如果没有特别指明，都是指默认的 B+Tree 结构组织的索引

索引结构：

	B+Tree索引 ：最常见的索引类型，大部分引擎都支持B+树索引

	hash索引： 底层数据结构是用哈希表实现的，只有精确匹配索引列的查询才有效，不支持范围查询

	R-Tree（空间索引）： 空间索引是MyISAM引擎的一个特殊索引类型，主要用于地理空间数据类型，通常使用很少

	Full-text（全文索引）：是通过建立倒排索引，快速匹配文档的方式。类似于Lucene,Solr,ES

4.索引语法

创建索引：
	create [ unique | fulltext ] index index_name on table_name ( index_col_name , ... ) ;

查看索引：
	show index from table_name ;

删除索引：
	drop index index_name on table_name ;

注意事项：
    1.主键字段，在建表时，会自动创建主键索引
    2.添加唯一约束时，数据库实际上会添加唯一索引

小小李学java

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。取值：rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)取值：#000000、#ff0000、#cccccc，简写：#000、#ccc。CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等。写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）HTML：负责网页的结构（页面元素和内容）
复制链接

扫一扫