Web开发

工作流程：混合开发、前后端分离开发

前后端分离开发：

混合开发：

开发工具：VSCode

1.网页的组成：

文字、图片、音频、视频、超链接

2.网页的背后：

HTML+CSS+JS

3.前端代码如何转换成网页：

通过浏览器内核解析和渲染（不同的浏览器内核不同，解析的效果存在差异）

4.Web标准

HTML：定义网页的结构（页面元素和内容）

CSS：定义网页的表现（页面元素的外观、位置等页面样式）

JavaScript：定义网页的行为（交互效果）

html代码直接在浏览器中运行，Html标签有浏览器解析， 标签是预定好的，无法自定义。

1.快速入门

(1)快速生成Html模板

创建**.html文件，然后输入html:5**

(2)定义

定义标题

(3)Html结构标签

(4) Html标签不区分大小写

(5)HTML标签属性值单双引号都可以

(6)HTML语法松散

(7)注释

在标签外注释：ctrl + /

在标签内注释：

• 注释整行：ctrl + /

• 注释光标选中的：ctrl + shift + /

2.HTML基础标签&样式

标签导航：w3school 在线教程

例子：焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻 (sina.com.cn)

(1)图片标签

src：图片路径，绝对路径/相对路径

width：宽度

具体的像素值和百分比写法：

• 500px：就是500个像素点（1920x1080P）
• 50%：就是占屏幕剩余宽的50%

height：高度

只有具体的像素值

(2)标题标签

<h1~h6>标签逐渐减小

文本想要被修饰，必须要放到标签中

(3)水平线

(4)布局标签

div和span标签

div标签：

• 一行只显示一个（独占一行）
• 宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高

属性

span标签：

• 一行可以显示多个（组合行内元素）
• 宽度和高度默认由内容撑开，不可以设置宽高

可以选中一段文本，但是没有任何的语义，需要额外的CSS修饰

可以选择不同的style:

(5)视频标签

(6)音频标签

(7)段落标签

属性

(8)文本加粗标签

(9)换行标签

3.CSS引入方式：

(1)行内样式：写在标签的style属性中（不推荐）

(2)内联样式：写在style标签中（可以写在页面的任何位置，但是通常写在head标签中）

(3)外联样式：写在一个单独的**.css**文件中（需要通过link标签在网页中引入）

4.style颜色表示形式：

(1)关键字/英文单词：red、green、blue…

(2)RGB表示法：红绿蓝三原色，每项取值(0~255)。rgb(0,0,0)

(3)十六进制表示：#开头，#xxxxxx，每两个x代表一个颜色（红绿蓝），x的取值为(0~f)

可以用取色器来找颜色

5.字体大小

font-size：改变字体大小，单位是像素px

6.CSS选择器

用来选取需要设置样式的元（标签）

(1)元素选择器：

将标签名作为选择器的名称，标签名{…}，只要采用该标签，就会有相应的样式

(2)类选择器

用一个类.cls来包含样式，在标签中通过类的名字来得到相应的样式

类选择器的优先级比元素选择器高

(3)id选择器

对标签起一个唯一的id（不能重复）,id选择器要加

优先级：id选择器>类选择器>元素选择器

7.超链接

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

CSS修饰：

8.盒子模型

盒子：页面中所有的标签都可以看作是一个盒子，通过盒子的视角更方便的进行页面布局操作

盒子模型组成：内容区域(content)、内边距(padding)、边框(border)、外边距(margin)

简单说，盒子模型就是三个CSS属性：padding,border,margin

有两个布局标签 span、div

9.表格

在网页中以表格（行、列）的形式整齐展示数据

表单属性：

• action：规定当提交表单时向何处发送表单数据，URL，默认提交到当前页面
• method：规定用于发送表单数据的方式
  • get：默认值，浏览器会将数据直接拼接在表单的提交URL之后。大小有限制（url?username=java&age=32)(用？拼接url，用&拼接信息)
  • post：浏览器会将数据放到http请求消息体中。大小无限制。需要用f12==>点击network查看
  • get相对post不安全

11.表单项

不同类型的input元素、下拉列表、文本域等

1. 《input》：定义表单项，通过type属性控制输入形式，name属性控制名称，value属性控制值，checked单选按钮和复选框默认选中
2. 《select》：定义下拉列表,定义列表项，下拉列表默认选中
3. 《textarea》：定义文本域，有cols和rows属性

type属性：

name属性：

1. 表单数据要提交，必须要有name属性
2. 单选按钮和复选按钮的name属性必须要一致，视为同一组，同组的单选按钮才有多选一互斥效果

value属性：

1. 输入框的默认值可以不用定义
2. 对于只能选不能输入的表单项，必须要有value属性，表示提交给服务器的值
3. 对于submit/reset/button可以用value属性来改变其值

checked属性：

​ 给单选按钮和复选框，选择一个默认值

option属性：

​ 定义列表项，必须给option标签指定value属性

selected属性：

​ 下拉列表默认选中

cols属性：

​ 定义文本域中可以写多少列

rows属性：

​ 定义文本域中可以写多少行

JavaScript是一门跨平台、面向对象的脚本语言，控制网页的行为、能使网页可交互

1.引入方式

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

1. JS代码必须位于标签之间
2. 在HTML文档中，可以在任意地方，放置任意数量的

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

1. 外部JS文件中，只包含JS带啊吗，不包含

2.JS基础语法

(1)书写语法

1. 区分大小写，变量名、函数名、以及其他东西
2. 每行结尾的可有可无
3. 注释：
4. 单行注释： 多行注释：
5. 大括号代表代码块

(2)输出语句

1. JS中使用（variable的缩写）、let、const来声明变量

   let关键字所定义的变量，只能在let关键字所在的代码块内有效，并且不允许重复声明，也就是说在外面无效

   const关键字用来声明一个只读常量，一旦声明，常量的值不能改变。

   var关键字可以重复定义变量，定义的变量在所属的外有效。后面定义的变量会把前面定义的变量覆盖。

   3.14115926535

   JS是一门弱类型语言，变量可以存放不同类型的值（java属于强类型）

   变量名规则：

   1. 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
   2. 数字不能开头
   3. 建议使用驼峰命名

   (4)数据类型

   JS中分为原始类型、引用类型（对象）

   原始类型：

   1. number：数字（整数、小数、NaN(Not a Number))
   2. string：字符串，单双引号都可以
   3. boolean：布尔。true/false。
   4. null：空对象
   5. undefined：当声明的变量未初始化时，该变量的默认值是undefined。

   使用运算符可以获取数据类型：

   引用类型：对象就是引用类型

   3.函数

   通过关键字进行定义

   形式参数不需要类型，因为JS是弱类型语言（let、var也不能写）

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

   调用：函数名称（实际参数列表）

   函数的定义：

   1. 普通函数：

   2. 省略：

      1. 当形参有且仅有一个时，可以省略小括号

      2. 当语句体中只有一条代码时，可以一起省略

         1. 4.JS对象

            (1)Array对象

            定义Array：

            3. JS是弱类型语言，所以数组中可以存储任意类型的元素

            访问：

            Array长度是可变的：

            (1)for i 遍历：

            快捷键for+enter

            (2)for of 遍历：

            快捷键：forof+enter

            (3)forEach遍历：

            快捷键：forEach+enter

            (2)String对象

            String对象创建：

            属性：

            模板字符串和普通字符串的区别：

            模板字符串中可以使用来引用变量的值，不需要拼接字符串。

            (3)JS自定义对象

            JS自定义对象：

            调用格式：

            对象名.属性名 对象名.函数名

            JS中的对象支持动态扩展属性和方法：

            (4)JSON对象

            JSON:JavaScript Object Notation,JS对象标记法，本质是通过JS对象标记法书写的文本。

            使用场景：多作为数据载体，在网络中进行数据传输

            JSON定义：

            JS对象转为JSON字符串：

            JSON对象转JS对象：

            在JS中书写JSON可以用.

            (5)BOM对象

            概念：Browser Object Model浏览器对象模型，指的是JS将浏览器的各个组成部分封装成对象，使用对象可以操作浏览器。

            常用组件：

            • Window：浏览器窗口对象
            • Navigator“浏览器对象
            • Screen：屏幕对象
            • History：历史对象
            • Location：地址栏对象

            ①window：

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

            属性：

            1. history：对History对象的只读引用
            2. location：用于窗口或框架的Location对象。
            3. navigator ：对Navigator对象的只读引用

            方法：

            1. alert(msg)：显示带有一段消息和一个确认按钮的警告框

            2. confirm(msg)：显示带有一段消息以及确认按钮和取消按钮的对话框

               很多应用在操作之后的弹窗

            3. setInterval(fun,毫秒值)：按照指定的周期（以毫秒计）循环调用函数。

               方法以指定的时间间隔（以毫秒为单位）调用函数。

               方周期性调用函数，直到调用 clearInterval() 或关闭窗口。

               **注释：**1 秒 = 1000 毫秒。

               提示

               如需仅执行一次函数，请改用 方法。

               如需清除间隔，请使用 返回的 id：

               然后你可以通过调用 来停止执行：

               很多应用在周期性的更换网页图片

            4. setTimeout(fun,毫秒值)：在指定的毫秒数后调用函数

            ②location：

            地址栏对象，获取或设置地址栏地址，设置地址栏地址可以是实现页面跳转的效果。

            (6)DOM对象

            ①概念：Doucument Object Model，文档对象模型

            将标记语言的各个组成部分封装为对应的对象：

            1. Document：整个文档对象
            2. Element：元素对象
            3. Attribute：属性对象
            4. Text：文本对象
            5. Comment：注释对象

            JavaScript通过DOM，就能够对HTML进行操作：

            1. 改变HTML元素的内容
            2. 改变HTML元素的属性
            3. 改变HTML元素的样式（CSS）
            4. 对HTML DOM事件作出反应

            ②DOM操作-获取元素对象

            使用ID：

            当使用getElementByld根据ID属性值获取时

            ③DOM操作-使用元素对象

            Elment：元素对象的使用（查阅文档）

            常见访问操作：

            访问内容体：元素对象

            访问输入框内容：元素对象

            访问属性：元素对象.属性名

            访问样式：元素对象.style.样式属性名

            5.JS事件监听

            (1)事件

            HTML事件是发生在HTML元素上的“事情”

            (2)事件监听

            JS可以在事件被侦测到时执行代码

            (3)事件绑定

            1. 通过HTML标签中的事件属性进行绑定

            2. 通过DOM元素属性绑定

            (4)常见事件

            HTML DOM 事件 (w3school.com.cn)

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

            (5)案例

            Vue是一套前端框架，免除原生JS中的DOM操作

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

            1.快速入门

            (1)Vue的引入

            安装 — Vue.js (vuejs.org)

            (2)创建vue对象，定义模型数据

            (3)将数据模型绑定在视图中

            插值表达式：

            {{表达式}}，表达式可以是变量、三元运算符、函数调用、算术运算

            2.Veu常用指令

            这些指令必须在Veu接管的区域内

            (1)v-bind

            为html标签绑定属性值，如设置href、css样式

            v-bind绑定的变量必须要在模型数据中声明

            (2)v-model

            在表单元素上创建双向数据绑定

            v-model绑定的变量必须要在模型数据中声明

            (3)v-on

            为html标签绑定事件

            (4)v-if、v-else-if、v-else、v-show

            v-if、v-else-if、v-else：条件性的渲染某元素，判定true时渲染，否则不渲染

            v-show：根据条件展示某元素，区别在于切换的是display属性的值

            两者的区别在于：

            不符合条件的也会加载，占内存，以形式显示，而如果不符合条件的不会加载

            (5)v-for

            列表渲染，遍历容器或对象

            (6)案例

            3.生命周期

            在Vue.js中，created()和mounted()是两个常见的生命周期钩子函数，它们分别用于在Vue实例被创建之后和挂载到DOM之后执行一些逻辑。

            具体区别和用法如下：

            (1) created()：

            在Vue实例被创建之后立即执行。在这个阶段，Vue实例的数据观测和事件配置已完成，但尚未挂载到DOM上。通常在这个阶段执行一些数据初始化、事件监听、异步请求等逻辑，但不涉及DOM操作。

            (2)mounted()：

            在Vue实例挂载到DOM之后执行。在这个阶段，Vue实例已经完成了数据观测、编译渲染、创建虚拟DOM和真实DOM等所有过程，可以进行DOM操作。通常在这个阶段执行一些需要依赖DOM元素的逻辑，如获取元素尺寸、绑定事件、设置定时器等。

            4.Vue路由

            URL中的hash(#)与组件之间的关系

            (1)Vue Router

            Vue官方的路由插件

            1. Vue Router：路由器类，根据路由请求在路由视图中动态渲染选中的组件
            2. ：请求链接组件，浏览器会翻译成
            3. ：动态视图组件，用来渲染展示与路由路径相对的组件

            (2)定义路由

            在router/index.js文件中定义路由，并在main.js中导入路由

            (3)router-link 和 router-view

            router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
            注意：被选中的router-link将自动添加一个class属性值.router-link-active。

            • to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=“/” ，
            • [text] ：就是我们要显示给用户的导航名称。

            router-view 用于渲染匹配到的组件。

            5.打包部署

            (1)NGINX安装

            (2)打包

            按下build按钮，打包在dist目录下，然后将打包后的dist部署在NINGX

            (3)部署

            将打包好的dist目录下的文件，到NGINX安装目录下的HTML文件中

            (4)启动

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

            ①没有启动成功，在logs文件中有一个error.log文件，其中标志了问题，

            10013问题，说明08端口被占用，在CMD中输入

            查找什么程序占用80端口，任务管理器中可以查看那个ID为324的程序在占用80端口

            ②更换端口号

            在conf目录下找到nginx.conf目录

            更改listen的数值

            访问：https://localhost:80

            1.Ajax

            作用：

            • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
            • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。如：搜索联想、用户名是否可用的校验。

            2.Axios

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

            起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

            (1)Axios入门

            ①引入Axios的JS文件

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

            方式一:

            get请求

            post请求

            方式二:

            (2)Axios案例

            (3)Vue项目中使用Axios

            在项目目录下安装Axios：

            需要使用axios时，导入axios：

            3.什么时候发送异步请求获取员工信息

            页面加载完成(mounted方法),发送异步请求获取员工信息

            1.前后端混合式开发

            2.前后端分离开发

            接口：指的是后端程序对外暴露的可以访问的入口，一个接口包括(url地址、请求方式、请求参数、响应结果示例)

            接口文档分为在线和离线

            3.前后端分离开发的流程：

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

            1.组成

            1. 模块化（JS，CSS）
            2. 组件化（UI结构，样式，行为）
            3. 规范化（目录结构，编码，接口）
            4. 自动化（构建，部署，测试）

            目录结构：

            2.环境准备：Vue-cil

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

            提供的功能

            1. 统一的目录结构
            2. 本地调试
            3. 热部署
            4. 单元测试
            5. 集成打包上线

            依赖环境：NodeJS

            npm以及Vue-cil安装的问题:

            报错npm ERR! A complete log of this run can be found in: npm ERR!-CSDN博客

            解决执行npm(或pnpm)时报：证书过期 certificate has expired问题_reason: certificate has expired-CSDN博客

            npm install -g @vue/cli 安装vue脚手架报错（一般都能解决）_use npm install -g @vue/cli to install and retry-CSDN博客

            nodejs 报错 Error: EPERM: operation not permitted, mkdir‘xxxxxxxxxxxxxxxx‘_nodejs安装后error: eperm: operation not permitted, mk-CSDN博客

            3.创建Vue项目

            做前端开发,前端代码写在src目录中

            4.运行Vue项目

            (1)vscode找不到npm脚本

            ①被隐藏了

            ②设置中搜索nmp

            Visual Studio Code中npm脚本找不到解决方法_vscod npm脚本不显示-CSDN博客

            (2)启动

            (3)在vue.config.js文件中修改项目启动的端口号

            5.Vue项目的执行流程和开发流程

            在工程化项目中，vue要做的就是通过把渲染到的指定区域

            (1)

            (2)

            ：用于对外输出一个js文件中定义的变量

            ：用于在一个js文件中加载export导出的变量

            (3)Vue组件的结构

            ①：内部必须只有一个根元素

            ②

            ③

            (4)使用组件的三个步骤

            ①在

            ②在export default 中使用components 节点注册组件

            ③在中以标签的形式使用刚才注册的组件

            技巧：直接做步骤③，步骤①和步骤②工具自动补全。例如 AboutView.vue对应的标签就是

            (5)初始化vue文件

            创建Vue文件之后，打一个，找到

            1.Element组件介绍

            Element是一套基于的桌面组件库

            2.快速入门

            (1)在当前工程的根目录下，安装ElementUI组件库

            (2)在main.js中引入ElementUI组件库

            (3)创建views/element/ElementView.vue组件，访问Element官网，组件代码

            (4)修改App.vue，加载ElemmentView.vue组件

            3.表格Table

            用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

            实现思路：

            1. 在element官网html代码、js代码、时间绑定的方法
            2. 修改html代码
            3. js代码（模型数据）
            4. 修改时间绑定的方法，在方法中打印模型数据

            4.分页

            Pagination分页：当数据量过多时，使用分页分解数据

            layout所展示的：

            5.对话框和表单

            Dialog对话框：弹出自定义内容（表单）

            6.头和侧边栏

            组件 | Element

            7.案例

            IDEA快捷键：

            快速补全：ctrl+alt+v

            快速生成函数：alt+insert

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

            1.Maven的作用

            (1)依赖管理

            在Mven的pom.xml中直接写入需要的jar包，及其版本

            (2)统一项目结构

            可以使不同的软件所创造的项目架构得到统一

            (3)标准的项目构建流程

            2.概述

            (1)介绍

            Dependcy寻找jar包会优先从本地仓库中寻找，如果找不到会从远程仓库中获取，如果远程仓库中没有，会从中央仓库中获取，下载到远程仓库中，再下载到本地仓库。

            (2)配置Maven环境(全局)

            (3)创建maven项目

            3.导入Maven项目

            4.依赖管理

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

            (1)依赖配置

            配置：

            1. 在pom.xml中编写标签
            2. 在标签中使用引入坐标
            3. 定义坐标的 groupId,artifactld,version
            4. 点击刷新按钮，引入最新加入的坐标

            如果引入的依赖，在本地仓库中不存在，将会连接远程仓库/中央仓库进行下载

            对应依赖的坐标可以到Maven Repository: Search/Browse/Explore (mvnrepository.com)搜索

            (2)依赖传递

            依赖具有传递性

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

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

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

            (3)依赖范围

            以来的jar包，默认下可以在任何地方使用，可以通过设置其作用范围

            作用范围：

            主程序范围有效(main文件夹范围内)

            测试程序范围有效(test文件夹范围内)

            是否参与打包运行(package指令范围)

            (4)生命周期

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

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

            1. clean：清理工作
            2. default：核心工作（编译、测试、打包、安装、部署）
            3. site：生成报告、发布站点

            在同一套生命周期中阶段是有先后顺序的，只有完成前面的阶段才会完成后面的阶段

            执行生命周期：

            通过Maven工具栏中选择对应的生命周期

            1.快速入门

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

            (2)定义HelloController类，添加方法hello，并添加注解

            (3)运行测试

            标识请求处理类：

            表示请求方法：

            2.HTTP协议

            (1)概述

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

            特点：

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

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

            HTTP协议是无状态的协议：对于事务处理没有记忆能理，每次请求-相应都是独立的（多次请求间不能共享数据，但是速度快）

            状态码大全：

            状态 | Status - HTTP 中文开发手册 - 开发者手册 - 腾讯云开发者社区-腾讯云 (tencent.com)

            (2)请求协议

            (3)响应协议

            响应状态码：

            响应头：

            (4)协议解析

            3.TomCat

            介绍：

            开源的Web服务器，支持JavaEE规范

            修改Tomcat端口号：修改port就可以

            注意：

            IDEA会内置Tomcat，不需要自己安装，为内嵌Tomcat

            4.请求

            (1)概述

            前端浏览器发送的HTTP数据，被HttpServletRequest接受，然后经由HttpServletResponse发送给浏览器

            1. HttpServletRequest：获取请求数据
            2. HttpServletResponse：设置响应数据架构

            CS架构需要安装对应的客户端，并且不同的操作系统需要不同版本的客户端

            BS架构的访问速度，主要取决于网络的带宽

            (2)Postman

            接口测试工具

            (3)简单参数

            SpringBoot自带的方式

            IDEA会自动的对name和age进行类型转换

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

            当参数名不一致时，可以使用完成映射

            (4)实体参数

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

            复杂实体对象：请求参数名与形参对象属性名相同，按照对象层次结构关系即可接受嵌套POJO属性参数（类名.参数名）

            (5)数组参数

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

            (6)参数

            请求数组名与形参数组名称相同且请求参数为多个，绑定参数关系

            (7)日期参数

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

            一定要注意pattern指定的格式和 发送的格式要一致，不然就会出错

            (8)Json格式数据

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

            注意在postman中选择body中的raw和JSON

            (9)路径参数

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

            可以定义多个路径

            { }中的路径名需要与形参名保持一致

            5.响应

            ResponseBody

            1. 类型：方法注解、类注解
            2. 位置：Controller方法上/类上
            3. 作用：将方法返回值直接响应，如果返回值类型是实体对象/，会转换为JSON格式
            4. 说明：@RestController=@ResponseBody+@Controller

            统一响应结果：Result(code,msg,data)

            6.分层解耦

            (1)三层架构

            Controller：控制层，接受前端发送的请求，进行处理，响应数据

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

            dao：数据访问层，对数据增删改查（面向接口编程，增加程序的灵活性）

            (2)分层解耦

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

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

            软件设计原则：高内聚，低耦合

            耦合：

            解耦：

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

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

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

            (3)IOC&DI入门

            1. Service层及Dao层的实现类，交给IOC容器管理

               通过来实现

            2. 为Controller及Service注入运行时依赖的对象。通过来实现（运行时，IOC容器会提供该类型的bean对象，并赋值给该变量

            3. 想要切换从容器获得的类，只需要切换就行

            (4)IOC详解

            Bean的声明

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

            但是是被包含在中的，所以没有必要单独添加

            Bean对象的名字可以在注解中直接指定

            Bean组件扫描：

            注解想生效，还需要被组件扫描注解扫描，注解包含在启动类声明注解,扫描的范围默认是启动类所在包及其子包

            指定扫描的包：在启动类中重新写注解，直接指定想要扫描的包

            (5)DI详解

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

            解决办法：

            1.MySQL

            (1)概述：

            SQL：操作关系型数据库的语言，定义操作所有关系型数据库的同意标准

            通用语法：

            SQL语句的分类：

            在使用数据库之前要先启动数据库：

            图形化工具：DG（集成在IDEA中了）

            (2)DDL

            表结构操作

            IDEA新UI怎么连接数据库？创建数据库表？设置主键或unique？_idea数据库 unique怎么设置-CSDN博客

            ①创建

            ②数据类型

            MySQL 数据类型 | 菜鸟教程 (runoob.com)

            ③表结构设计

            在删除表时，表中的数据也会全部删除

            (3)DML

            ①Insert语局

            如果要对create_time和update_time（都指定为了 not null）进行修改的话，系统函数会自动回去当前时间

            id是自动自增的所以在insert的时候，参数就可以直接写null

            插入数据时，指定的字段顺序需要与值的顺序一一对应

            字符串和日期型数据要包含在引号内

            ②Update语句

            ③Delete操作

            (4)DQL

            查询数据库表中的记录

            技巧：

            可以先敲表明，再敲字段，这样会自动提示

            可以在别名的外面加上，这样可以在里面显示空格等特殊符号

            1. 判断 null 和 not null，要用 is 不要用 ！=和 =
            2. between and 会包括最大值和最小值
            3. in(…)是多选一，只要能满足其中一个条件就可以显示
            4. _代表一个字段，%代表任意字段
            5. 等于是

            聚合函数：

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

            不对进行计算

            聚合函数不能在where后面使用

            count的字段一定是非空字段，例如id，推荐使用

            分组查询：

            分组查询时select的字段一类是分组字段，一类是聚合函数

            where和having的区别：

            注意：

            排序查询

            后面字段是有顺序的，只有第一个字段相同时，第二个字段才会生效

            分页查询

            起始索引从0开始，而查询记录数时这一页有多少个数据

            起始索引的计算公式：(页码 - 1) * 每页的查询记录数

            如果查询的是第一页的数据，起始索引可以省略，直接写

            (5)流程控制函数

            函数用法IF(value,value1,value2)如果value的值为TRUE，返回value1，否则返回value2IFNULL(value1, value2)如果value1不为NULL，返回value1，否则返回value2CASE WHEN 条件1 THEN 结果1 WHEN 条件2 THEN 结果2 … [ELSE resultn] END相当于Java的if…else if…else…CASE expr WHEN 常量值1 THEN 值1 WHEN 常量值1 THEN 值1 … [ELSE 值n] END相当于Java的switch…case…

            (6)多表设计

            ①一对多

            外键约束：

            ②多对多

            ③一对一

            一对一关系，多用于单表拆分，将一张表的基础字段放在一张表中，其他字段放在另一张表中，以提升操作效率

            (7)多表查询

            (8)事务

            (9)索引

            9.Mybatis

            持久层框架，用于简化JDBC的开发

            (1)入门

            1.Restful

            1.父相子绝

            CSS 子绝父相 理解 - 简书 (jianshu.com)
            now()`会自动回去当前时间

            id是自动自增的所以在insert的时候，参数就可以直接写null

            插入数据时，指定的字段顺序需要与值的顺序一一对应

            字符串和日期型数据要包含在引号内

            ②Update语句

            [外链图片转存中…(img-p0zXbpqY-1711791454178)]

            [外链图片转存中…(img-zXd6Z1xd-1711791454178)]

            ③Delete操作

            [外链图片转存中…(img-oju3GGf2-1711791454178)]

            [外链图片转存中…(img-E6q3pgof-1711791454178)]

            (4)DQL

            查询数据库表中的记录

            [外链图片转存中…(img-P7eFpe4d-1711791454179)]

            [外链图片转存中…(img-yz75AIo3-1711791454179)]

            技巧：

            可以先敲表明，再敲字段，这样会自动提示

            可以在别名的外面加上，这样可以在里面显示空格等特殊符号

            [外链图片转存中…(img-fAbqVhyO-1711791454179)]

            1. 判断 null 和 not null，要用 is 不要用 ！=和 =
            2. between and 会包括最大值和最小值
            3. in(…)是多选一，只要能满足其中一个条件就可以显示
            4. _代表一个字段，%代表任意字段
            5. 等于是

            聚合函数：

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

            不对进行计算

            聚合函数不能在where后面使用

            [外链图片转存中…(img-qUZ1d8GK-1711791454179)]

            count的字段一定是非空字段，例如id，推荐使用

            分组查询：

            [外链图片转存中…(img-Lzqlzbyb-1711791454180)]

            分组查询时select的字段一类是分组字段，一类是聚合函数

            where和having的区别：

            [外链图片转存中…(img-ogRFf5TT-1711791454180)]

            注意：

            [外链图片转存中…(img-raTjaUCK-1711791454180)]

            排序查询

            [外链图片转存中…(img-Uz7MEo3t-1711791454180)]

            [外链图片转存中…(img-qYjtpvEV-1711791454180)]

            后面字段是有顺序的，只有第一个字段相同时，第二个字段才会生效

            [外链图片转存中…(img-mavmwyRK-1711791454181)]

            分页查询

            [外链图片转存中…(img-nTvqObOu-1711791454181)]

            起始索引从0开始，而查询记录数时这一页有多少个数据

            起始索引的计算公式：(页码 - 1) * 每页的查询记录数

            如果查询的是第一页的数据，起始索引可以省略，直接写

            (5)流程控制函数

            函数用法IF(value,value1,value2)如果value的值为TRUE，返回value1，否则返回value2IFNULL(value1, value2)如果value1不为NULL，返回value1，否则返回value2CASE WHEN 条件1 THEN 结果1 WHEN 条件2 THEN 结果2 … [ELSE resultn] END相当于Java的if…else if…else…CASE expr WHEN 常量值1 THEN 值1 WHEN 常量值1 THEN 值1 … [ELSE 值n] END相当于Java的switch…case…

            (6)多表设计

            ①一对多

            [外链图片转存中…(img-vQK6SoZn-1711791454181)]

            [外链图片转存中…(img-Xu1hHv1x-1711791454181)]

            外键约束：

            [外链图片转存中…(img-m3EstXel-1711791454182)]

            ②多对多

            [外链图片转存中…(img-PoC1XOqM-1711791454182)]

            ③一对一

            一对一关系，多用于单表拆分，将一张表的基础字段放在一张表中，其他字段放在另一张表中，以提升操作效率