Web开发
工作流程：混合开发、前后端分离开发
前后端分离开发：
混合开发：
开发工具：VSCode
1.前端 Web
一、初识Web前端
1.网页的组成：
文字、图片、音频、视频、超链接
2.网页的背后：
HTML+CSS+JS
3.前端代码如何转换成网页：
通过浏览器内核解析和渲染（不同的浏览器内核不同，解析的效果存在差异）
4.Web标准
HTML：定义网页的结构（页面元素和内容）
CSS：定义网页的表现（页面元素的外观、位置等页面样式）
JavaScript：定义网页的行为（交互效果）
二、Html、CSS
html代码直接在浏览器中运行，Html标签有浏览器解析， 标签是预定好的，无法自定义。
1.快速入门
(1)快速生成Html模板
创建**.html文件，然后输入html:5**
<!-- 文档说明，表示html5 -->
<!DOCTYPE html>
<!-- 当前语言是英文 -->
<html lang="en">
<head>
<!-- 告诉浏览器，采用UTF-8字符集 -->
<meta charset="UTF-8">
<!-- 解决IE浏览器兼容性问题 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题，显示在浏览器的标签页面中 -->
<title>Hello Html</title>
</head>
<body>
<h1 style="color: red;">Html 入门</h1>
<!-- src：定义要展示的图片路径 alt：如果图片展示不出来要显示的文件内容 -->
<img src="R-C.png" alt="ACM">
</body>
</html>
(2)定义
定义标题
,定义图片,定义样式在标签上使用
(3)Html结构标签
| 标签 | 描述 |
|---|---|
| 定义HTML文档 | |
| 定义关于文档的信息 | |
| 定义文档的标题 | |
| 定义文档的主体 |
(4) Html标签不区分大小写
(5)HTML标签属性值单双引号都可以
(6)HTML语法松散
(7)注释
在标签外注释：ctrl + /
在标签内注释：
-
注释整行：ctrl + /
-
注释光标选中的：ctrl + shift + /
2.HTML基础标签&样式
标签导航：w3school 在线教程
例子：焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻 (sina.com.cn)
(1)图片标签
<img>
src：图片路径，绝对路径/相对路径
绝对路径：
绝对磁盘路径：以盘符开头的路径
绝对网络路径：以http://或https://开头的路径
相对路径：
相对当前HTML页面所在的路径
./表示同一目录，可以省略
../表示上一级目录
width：宽度
具体的像素值和百分比写法：
- 500px：就是500个像素点（1920x1080P）
- 50%：就是占屏幕剩余宽的50%
height：高度
只有具体的像素值
(2)标题标签
<h1~h6>标签逐渐减小
文本想要被修饰，必须要放到标签中
(3)水平线
<hr>
(4)布局标签
div和span标签
div标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高
<style>
div
{
border: 10px solid red;
width: 200px;
height: 200px;
/* width 和 height是纯内容的宽高 */
box-sizing: border-box;/* 指定width和height为盒子的高和宽*/
background-color: white;/* 背景色 */
padding: 20px;/* 内边距上右下左 但是当某一个方向大于padding时，就不会设置padding了*/
margin: auto;/* 外边距 上右下左 但是当某一个方向大于margin时，就不会设置margin了 如果设置的时auto就会自动居中*/
}
</style>
属性
<style>
div
{
border: 10px solid red;
/*border是围绕在盒模型外侧的一条样式自定义的线。border是一个复合属性，用法为border：width style color；*/
width: 200px;
height: 200px;
/* width 和 height是纯内容的宽高 */
box-sizing: border-box;/* 指定width和height为盒子的高和宽*/
background-color: white;/* 背景色 */
padding: 20px;/* 内边距 上右下左 但是当某一个方向大于padding时，就不会设置padding了*/
margin: auto;/* 外边距 上右下左 但是当某一个方向大于margin时，就不会设置margin了 如果设置的时auto就会自动居中*/
}
</style>
span标签：
- 一行可以显示多个（组合行内元素）
- 宽度和高度默认由内容撑开，不可以设置宽高
可以选中一段文本，但是没有任何的语义，需要额外的CSS修饰
可以选择不同的style:
span
{
color
line-height:设置行高，单位是px/像素
white-space:pre 可以将空格显示出来
}
(5)视频标签
<video></video>
src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度
(6)音频标签
<audio></audio>
src：规定音频的url
controls：显示播放控件
(7)段落标签
<p></p>
属性
<style>
p
{
text-indent:35px;/*首行缩进量*/
text-align:right;/*对齐方式 右对齐*/
}
</style>
(8)文本加粗标签
<b></b>
或者<strong></strong>
(9)换行标签
<br>
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.超链接
标签：<a href="" target="">xxx</a>
属性：
href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
CSS修饰：
<style>
a
{
text-decoration:none;
color: #333333;
}
</style>
8.盒子模型
盒子：页面中所有的标签都可以看作是一个盒子，通过盒子的视角更方便的进行页面布局操作
盒子模型组成：内容区域(content)、内边距(padding)、边框(border)、外边距(margin)
简单说，盒子模型就是三个CSS属性：padding,border,margin
有两个布局标签 span、div
9.表格
在网页中以表格（行、列）的形式整齐展示数据
标签：
| 标签 | 描述 | 属性/备注 | ||
|---|---|---|---|---|
|
| 定义表格整体，可以包裹多个 | |||
| border：规定表格边框的宽度 width：规定表格的宽度 cellspacing：规定单元格之间的间隙 | ||||
| 表格的行，可以包裹多个 | align：单元格的对齐方式 | |||
| 表格单元格（普通），可以包裹内容 | 如果是表头单元格，可以替换为 | ，默认加粗居中 |
10.表单标签
在网页中主要负责数据采集功能，使用标签定义表单
表单属性：
- action：规定当提交表单时向何处发送表单数据，URL，默认提交到当前页面
- method：规定用于发送表单数据的方式
- get：默认值，浏览器会将数据直接拼接在表单的提交URL之后。大小有限制（url?username=java&age=32)(用？拼接url，用&拼接信息)
- post：浏览器会将数据放到http请求消息体中。大小无限制。需要用f12==>点击network查看
- get相对post不安全
11.表单项
不同类型的input元素、下拉列表、文本域等
- 《input》：定义表单项，通过type属性控制输入形式，name属性控制名称，value属性控制值，checked单选按钮和复选框默认选中
- 《select》：定义下拉列表,定义列表项，下拉列表默认选中
- 《textarea》：定义文本域，有cols和rows属性
type属性：
name属性：
- 表单数据要提交，必须要有name属性
- 单选按钮和复选按钮的name属性必须要一致，视为同一组，同组的单选按钮才有多选一互斥效果
value属性：
- 输入框的默认值可以不用定义
- 对于只能选不能输入的表单项，必须要有value属性，表示提交给服务器的值
- 对于submit/reset/button可以用value属性来改变其值
checked属性：
给单选按钮和复选框，选择一个默认值
option属性：
定义列表项，必须给option标签指定value属性
selected属性：
下拉列表默认选中
cols属性：
定义文本域中可以写多少列
rows属性：
定义文本域中可以写多少行
三、JavaScript
JavaScript是一门跨平台、面向对象的脚本语言，控制网页的行为、能使网页可交互
1.引入方式
(1)内部脚本：将JS代码定义在HTML页面中
- JS代码必须位于标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的
<script>
alert("Hello JavaScript");
</script>
(2)外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 外部JS文件中，只包含JS带啊吗，不包含
2.JS基础语法
(1)书写语法
- 区分大小写，变量名、函数名、以及其他东西
- 每行结尾的
;可有可无 - 注释：
- 单行注释：
//多行注释：/* 注释内容 */ - 大括号代表代码块
{alert("Hello JavaScript !") }
(2)输出语句
-
使用
window.alert()写入警告框(window.可以省略)
-
使用
document.write()写入HTML输出
-
使用
console.log()写入浏览器控制台（输出多个值/变量用逗号隔开）
(3)变量
JS中使用var（variable的缩写）、let、const来声明变量
let关键字所定义的变量，只能在let关键字所在的代码块内有效，并且不允许重复声明，也就是说在
{}外面无效const关键字用来声明一个只读常量，一旦声明，常量的值不能改变。
var关键字可以重复定义变量，定义的变量在所属的
{}外有效。后面定义的变量会把前面定义的变量覆盖。
3.14115926535
JS是一门弱类型语言，变量可以存放不同类型的值（java属于强类型）
var a= 20;
a="sadsdasd";
//a既可以赋值数字，也可以赋值字符串
变量名规则：
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
(4)数据类型
JS中分为原始类型、引用类型（对象）
原始类型：
- number：数字（整数、小数、NaN(Not a Number))
- string：字符串，单双引号都可以
- boolean：布尔。true/false。
- null：空对象
- undefined：当声明的变量未初始化时，该变量的默认值是undefined。
使用typeof运算符可以获取数据类型：
let a =20;
alert(typeof a);
引用类型：对象就是引用类型
let date = new Date();
console.log(date.getFullYear());//年
console.log(date.getMonth());//月，从0开始
console.log(date.getDate());//日
console.log(date.getDay());//一个星期中的第几天
3.函数
通过function关键字进行定义
function functionName(参数1,参数2...)
{
//代码
}
形式参数不需要类型，因为JS是弱类型语言（let、var也不能写）
返回值也不需要定义类型，可以在函数内部直接使用return返回即可。
调用：函数名称（实际参数列表）
函数的定义：
-
普通函数：
function name(参数){ 代码 } -
匿名函数：
let functionName = function(参数){ 代码 }此时变量名 functionName 就成为了函数名
-
箭头函数：
let functionName = (参数)=>{ 代码 }类似于Java中的Lamada表达式省略：
-
当形参有且仅有一个时，可以省略小括号
-
当语句体中只有一条代码时，
return { } ;可以一起省略-
let add1 = (a, b) => { return a + b; } let add2 = (a, b) => a + b; //两种的效果时一样的
-
-
匿名函数和箭头函数一般作为函数的参数去使用。
4.JS对象
(1)Array对象
定义Array：
-
let name = new Array(元素列表); -
let name = [元素列表]; -
JS是弱类型语言，所以数组中可以存储任意类型的元素
-
let a = [1,"dasdasd",true];
-
访问：arr[idx]=value;
Array长度是可变的：
let a=[1,2,3];//a.length = 3
console.log(a[0]);//a[0]是1
a[10] = 4;//此时a.length变为11
let a = [1, 2, 3];
console.log(a);
console.log(a.length);
a[10] = 4;
console.log(a);
console.log(a.length);
数组的遍历：
(1)for i 遍历：
快捷键for+enter
for (let i = 0; i < a.length; i++)
{
console.log(a[i]);
}
(2)for of 遍历：
快捷键：forof+enter
for(let e of arr)
{
console.log(e);
}
(3)forEach遍历：
快捷键：forEach+enter
a.forEach((e,i)=>
{
console.log(e);
//e代表元素值，i代表索引
//forEach不会打印没有值的元素
})
(2)String对象
String对象创建：
let name = "...";//双引号
let name = '...';//单引号
let name = `...`;//模板字符串
let name = new String("...");
属性：length
模板字符串和普通字符串的区别：
模板字符串中可以使用${表达式}来引用变量的值，不需要拼接字符串。
let date = new Date();
let year = date.getFullYear();//年
let month = date.getMonth();//月，从0开始
let day =date.getDate();//日
let s1 = year + "年" + month + "月" + day + "日";
let s2 = `${year}年${day}月${day}日`;
(3)JS自定义对象
JS自定义对象：
let name =
{
name: "TOM",//属性名:属性值,
age: 20,
eat: function ()//函数名:function(形参列表)
{
alert("...");
},
eat()//函数名称(形参列表)
{
alert("...");
}
};
调用格式：
对象名.属性名 对象名.函数名
JS中的对象支持动态扩展属性和方法：
let person
{
name:"123";
}
person.age=20;//此时就会像person中添加age属性，值为20
let user={};//定义一个空的对象，属性和方法后续可以添加
user.name="123";
user.age=20;
(4)JSON对象
JSON:JavaScript Object Notation,JS对象标记法，本质是通过JS对象标记法书写的文本。
使用场景：多作为数据载体，在网络中进行数据传输
JSON定义：
let name = { "key":value,...};//本质是一个字符串
//value可以是任意类型的数据
let json = [value,value,...];
let json = {"name":"123","address":["北京","上海"，"济南"]};
JS对象转为JSON字符串：
let str =JSON.stringify(json);
JSON对象转JS对象：
let json = JSON.parse(str);
在JS中书写JSON可以用``.
let json = '{"name":"1564","age":20,"address":["上海","北京"]}';
(5)BOM对象
概念：Browser Object Model浏览器对象模型，指的是JS将浏览器的各个组成部分封装成对象，使用对象可以操作浏览器。
常用组件：
- Window：浏览器窗口对象
- Navigator“浏览器对象
- Screen：屏幕对象
- History：历史对象
- Location：地址栏对象
①window：
获取：直接使用window，其中window.可以省略
属性：
- history：对History对象的只读引用
- location：用于窗口或框架的Location对象。
- navigator ：对Navigator对象的只读引用
方法：
-
alert(msg)：显示带有一段消息和一个确认按钮的警告框
-
confirm(msg)：显示带有一段消息以及确认按钮和取消按钮的对话框
let text; if (confirm("Press a button!") == true) { text = "You pressed OK!"; } else { text = "You canceled!"; } //最后会返回一个布尔类型的text很多应用在操作之后的弹窗
-
setInterval(fun,毫秒值)：按照指定的周期（以毫秒计）循环调用函数。
setInterval()方法以指定的时间间隔（以毫秒为单位）调用函数。setInterval()方法会周期性调用函数，直到调用 clearInterval() 或关闭窗口。**注释：**1 秒 = 1000 毫秒。
提示
如需仅执行一次函数，请改用
setTimeout()方法。如需清除间隔，请使用
setInterval()返回的 id：myInterval = setInterval(function, milliseconds);然后你可以通过调用
clearInterval()来停止执行：clearInterval(myInterval);setInterval(function, milliseconds, param1, param2, ...)很多应用在周期性的更换网页图片
-
setTimeout(fun,毫秒值)：在指定的毫秒数后调用函数
②location：
地址栏对象，获取或设置地址栏地址，设置地址栏地址可以是实现页面跳转的效果。
let href = location.href;//获取地址栏地址
location.href="111111";//更改地址栏地址
(6)DOM对象
①概念：Doucument Object Model，文档对象模型
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的属性
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件作出反应
②DOM操作-获取元素对象
使用ID：
当使用getElementByld根据ID属性值获取时
document.getElementById("id");
document.querySelector("#id");
③DOM操作-使用元素对象
Elment：元素对象的使用（查阅文档）
常见访问操作：
访问内容体：元素对象.innerHTML
访问输入框内容：元素对象.value
访问属性：元素对象.属性名
访问样式：元素对象.style.样式属性名
5.JS事件监听
(1)事件
HTML事件是发生在HTML元素上的“事情”
(2)事件监听
JS可以在事件被侦测到时执行代码
(3)事件绑定
-
通过HTML标签中的事件属性进行绑定
<input type="submit" value="注册" onclick="on()"> <script> function on() { console.log("注册被点击了"); } </script> -
通过DOM元素属性绑定
<input type="button" value="普通按钮" id="bt1"> <script> document.querySelector("#bt1").onclick=function() { console.log("普通按钮被点击了"); } </script>
(4)常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点（多用于前端的表单校验） |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移动到某个元素之上 |
| onmouseout | 鼠标从某个元素移开 |
(5)案例
四、Vue
Vue是一套前端框架，免除原生JS中的DOM操作
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
1.快速入门
(1)Vue的引入
<!-- 引入vue.js文件 -->
<script src="./Vue/vue.js"></script>
(2)创建vue对象，定义模型数据
<!-- 创建Vue对象，定义模型数据 -->
<script>
new Vue
(
{
el:"#app",//id选择器 定义veu接管的区域，只有在这个区域内才可以使用veu的表达式获取数据
data:
{
message:"Hello Vue!",
url:"https://www.itheima.com",
},
/* data()
{
return
{
//返回的就是模型数据
message:"Hello Vue!"
}
} */
methods://methods，此处定义事件绑定的函数，这些函数都是自定义函数
{
handle()
{
console.log("被点击了！");
}
}
}
)
</script>
(3)将数据模型绑定在视图中
<!-- 将数据模型绑定在视图中 -->
<div id="app">
<!-- {{message}}插值表达式，将变量的值显示在标签内容体 -->
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
插值表达式：
{{表达式}}，表达式可以是变量、三元运算符、函数调用、算术运算
2.Veu常用指令
这些指令必须在Veu接管的区域内
(1)v-bind
为html标签绑定属性值，如设置href、css样式
v-bind绑定的变量必须要在模型数据中声明
(2)v-model
在表单元素上创建双向数据绑定
v-model绑定的变量必须要在模型数据中声明
(3)v-on
为html标签绑定事件
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
(4)v-if、v-else-if、v-else、v-show
v-if、v-else-if、v-else：条件性的渲染某元素，判定true时渲染，否则不渲染
年龄<input type="text" v-model="age">经判定，为：
<span v-if="age<=35">年轻人（35岁及以下）</span>
<span v-else-if="age>35 && age<60">中年人（35-60）</span>
<span v-else>老年人（60岁及以上）</span>
<br>
v-show：根据条件展示某元素，区别在于切换的是display属性的值
年龄<input type="text" v-model="age">经判定，为：
<span v-show="age<=35">年轻人（35岁及以下）</span>
<span v-show="age>35 && age<60">中年人（35-60）</span>
<span v-show="age>=60">老年人（60岁及以上）</span>
<br>
两者的区别在于：
v-show不符合条件的也会加载，占内存，以display：none形式显示，而v-if如果不符合条件的不会加载
(5)v-for
列表渲染，遍历容器或对象
<div v-for="(add,index) in address">
{{index+1}} : {{add}}
</div>
<!--其中 add 代表数组的值，index代表索引，address代表数组-->
(6)案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入vue.js文件 -->
<script src="./Vue/vue.js"></script>
<title>Document</title>
<style>
span
{
white-space: pre;
}
p
{
white-space: pre;
}
div
{
width:700px;
margin:auto;
}
</style>
</head>
<body>
<!-- 将数据模型绑定在视图中 -->
<div id="app">
<!-- {{message}}插值表达式，将变量的值显示在标签内容体 -->
<p>{{url}}</p>
<input type="text" v-model="url">
<br>
<a :href="url" target="_blank">链接1</a>
<a v-bind:href="url" target="_blank">连接2</a>
<br>closing
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
<br>
年龄<input type="text" v-model="age">经判定，为：
<span v-if="age<=35">年轻人（35岁及以下）</span>
<span v-else-if="age>35 && age<60">中年人（35-60）</span>
<span v-else>老年人（60岁及以上）</span>
<br>
<span v-for="addr in address" >{{addr+" "}}</span>
<p v-for="(addr,index ) in address ">{{index}} {{" "+addr}} </p>
</div>
<div id="example" >
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.gender==1?"男":"女"}}</td>
<td>{{user.score}}</td>
<td v-show="user.score<60" style="color:red">不及格</td>
<td v-show="user.score>=60 && user.score<80">及格</td>
<td v-show="user.score>=80">优秀</td>
</tr>
</table>
</div>
</body>
<!-- 创建Vue对象，定义模型数据 -->
<script>
new Vue
(
{
el: "#app",//id选择器 定义veu接管的区域，只有在这个区域内才可以使用veu的表达式获取数据
data:
{
message: "Hello Vue!",
url: "https://www.itheima.com",
age: undefined,
address: ["北京", "上海", "广州", "深圳", "济南"],
},
/* data()
{
return
{
//返回的就是模型数据
message:"Hello Vue!"
}
} */
methods://methods，此处定义事件绑定的函数，这些函数都是自定义函数
{
handle() {
console.log("被点击了！");
}
}
}
)
new Vue
(
{
el: "#example",
data:
{
users:
[
{
name: "Tom", age: 20, gender: 1, score: 78
},
{
name: "Rose", age: 18, gender: 2, score: 86
},
{
name: "Jerry", age: 26, gender: 1, score: 90
},
{
name: "Tony", age: 30, gender: 1, score: 52
}
]
}
}
)
</script>
</html>
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官方的路由插件
- Vue Router：路由器类，根据路由请求在路由视图中动态渲染选中的组件
- ：请求链接组件，浏览器会翻译成
- ：动态视图组件，用来渲染展示与路由路径相对的组件
(2)定义路由
在router/index.js文件中定义路由，并在main.js中导入路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: "/emp",//路径名称
name: "emp",
component: () => import('../views/tlias/EmpView.vue')
//加载的组件路径
},
{
path: "/dept",
name: "dept",
component: () => import('../views/tlias/DeptView.vue')
},
{
path: "/",
redirect: '/dept'//重定向，访问 / 时会默认访问另一个路径
},
]
const router = new VueRouter({
routes
})
export default router
(3)router-link 和 router-view
router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：被选中的router-link将自动添加一个class属性值.router-link-active。
<router-link to="/">[text]</router-link>
- to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=“/” ，
- [text] ：就是我们要显示给用户的导航名称。
router-view 用于渲染匹配到的组件。
<router-view ></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中输入
netstat -ano | findStr 80
查找什么程序占用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文件
<script src="js/axios-0.18.0.js"></script>
② 使用Axios发送请求，并获取响应结果
方式一:
get请求
post请求
方式二:
(2)Axios案例
<!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="./Vue/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,idx) in emps">
<td>{{idx+1}}</td>
<td>{{emp.name}}</td>
<td>
<img 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>
/*
实现思路:
1.引入Vue.js和axios.js文件
2.创建Vue对象,定义模型数据
3.将模型数据和视图(标签)绑定
4.页面加载完成之后向服务器发送请求,获取数据,并更新模型数据emps
*/
new Vue
(
{
data: {
el: "#app",
data:
{
emps: []//表格中要展示的模型数据
}
},
mounted() {
axios.get().then(result => {
console.log(result.data.data);
this.emps=result.data.data;//this表示Vue对象,所有的模型数据都会封存到vue对象上,所以可以通过this.emps获取emps模型数据
})
}
}
);
</script>
</html>
(3)Vue项目中使用Axios
在项目目录下安装Axios：npm install axios
需要使用axios时，导入axios：import axios from 'axios';
3.什么时候发送异步请求获取员工信息
页面加载完成(mounted方法),发送异步请求获取员工信息
mounted() {
axios.get().then(result => {
console.log(result.data.data);
this.emps=result.data.data;//this表示Vue对象,所有的模型数据都会封存到vue对象上,所以可以通过this.emps获取emps模型数据
})
}
六、前后端分离开发
1.前后端混合式开发
2.前后端分离开发
接口：指的是后端程序对外暴露的可以访问的入口，一个接口包括(url地址、请求方式、请求参数、响应结果示例)
接口文档分为在线和离线
3.前后端分离开发的流程：
七、前端工程化
前端工程化：在企业级开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化
1.组成
- 模块化（JS，CSS）
- 组件化（UI结构，样式，行为）
- 规范化（目录结构，编码，接口）
- 自动化（构建，部署，测试）
目录结构：
2.环境准备：Vue-cil
Vue-cil是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板
提供的功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：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博客
3.创建Vue项目
vue ui
做前端开发,前端代码写在src目录中
4.运行Vue项目
(1)vscode找不到npm脚本
①被隐藏了
②设置中搜索nmp
Visual Studio Code中npm脚本找不到解决方法_vscod npm脚本不显示-CSDN博客
(2)启动
(3)在vue.config.js文件中修改项目启动的端口号
5.Vue项目的执行流程和开发流程
在工程化项目中，vue要做的就是通过main.js把App.vue渲染到index.html的指定区域
(1)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
和
new Vue({
el:'#app',
router,
render: h => h(App)
})
两者是等价的
(2)
export：用于对外输出一个js文件中定义的变量
import：用于在一个js文件中加载export导出的变量
(3)Vue组件的结构
①：内部必须只有一个根元素
②
③
<!-- html代码部分 -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
<!-- js代码部分 -->
<script>
export default {
data()//存放数据模型
{
return
{
//在这里可以返回数据模型，在html代码中使用，并渲染
}
}
}
</script>
<!-- 当前html代码需要的样式部分 -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
(4)App.vue使用组件的三个步骤
①在
②在export default 中使用components 节点注册组件
③在中以标签的形式使用刚才注册的组件
技巧：直接做步骤③，步骤①和步骤②工具自动补全。例如 AboutView.vue对应的标签就是
(5)初始化vue文件
创建Vue文件之后，打一个<，找到with default .vue
八、Element
1.Element组件介绍
Element是一套基于Vue2.0的桌面组件库
2.快速入门
(1)在当前工程的根目录下，安装ElementUI组件库
(2)在main.js中引入ElementUI组件库
(3)创建views/element/ElementView.vue组件，访问Element官网，复制组件代码
(4)修改App.vue，加载ElemmentView.vue组件
3.表格Table
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
实现思路：
- 在element官网复制html代码、js代码、时间绑定的方法
- 修改html代码
- js代码（模型数据）
- 修改时间绑定的方法，在方法中打印模型数据
4.分页
Pagination分页：当数据量过多时，使用分页分解数据
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"//当每页条数发生变化时执行的方法
@current-change="handleCurrentChange"//当当前页面发生变化时所执行的方法
:current-page="currentPage4"//当前页码
:page-sizes="[100, 200, 300, 400]" //下拉框中展示的每页多少条
:page-size="100" //当前选中的页面数
layout="total, sizes, prev, pager, next, jumper"
:total="400"> //总条数
</el-pagination>
</div>
layout所展示的：
5.对话框和表单
Dialog对话框：弹出自定义内容（表单）
6.头和侧边栏
7.案例
<!--html代码-->
<template>
<div>
<el-container>
<!-- 头 -->
<el-header>
<h1 align="left">
tlias智能学习辅助系统
</h1>
</el-header>
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>信息管理系统</template>
<el-menu-item index="1-1">部门管理</el-menu-item>
<el-menu-item index="1-2">员工管理</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 主体 -->
<el-main>
<!-- 第一行，搜索表单 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.user" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="formInline.region" placeholder="性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<!-- 日期选择器 -->
<span class="demonstration">入职时间</span>
<el-date-picker
v-model="formInline.entrydate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<!-- 查询按钮 -->
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!-- 第二行， -->
<el-table
:data="tableData"
style="width: 100%">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="gender"
label="性别"
width="180">
<template slot-scope="scope">
<!-- 插槽，scope.row表示当前行对象，scope是element封装的对象 -->
{{scope.row.gender==1?"男":"女"}}
</template>
</el-table-column>
<el-table-column
prop="job"
label="职位"
width="180">
</el-table-column>
<el-table-column
prop="date"
label="入职时间"
width="180">
</el-table-column>
<el-table-column
prop="date"
label="最后操作时间"
width="180">
</el-table-column>
<!-- <el-table-column
label="操作"
width="180"> -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
<!-- <template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
<el-table-column
label="日期"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template> -->
</el-table>
<!-- 第三行，分页 -->
<span class="demonstration">完整功能</span>
<el-pagination
align="left"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="200"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<!-- JS代码 -->
<script>
export default {
data() {
return {
formInline: {
user: '',
region: '',
entrydate:''
},
currentPage4: 1,
total:1000,
tableData: [{
date: '2016-05-02',
name: '王1',
address: '上海市普陀区金沙江路 1518 弄',
gender:'1',
job:"班主任"
}, {
date: '2016-05-04',
name: '王2',
gender:'1',
address: '上海市普陀区金沙江路 1517 弄',
job:"讲师"
}, {
date: '2016-05-01',
name: '王3',
address: '上海市普陀区金沙江路 1519 弄',
gender:'2',
job:"辅导员"
}, {
date: '2016-05-03',
name: '王4',
address: '上海市普陀区金沙江路 1516 弄',
gender:'1',
job:"经理"
}]
}
},
methods: {
onSubmit() {
console.log('submit!');
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
</script>
<!-- style代码 -->
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
}
.el-aside {
background-color: #D3DCE6;
}
.el-main {
background-color: #E9EEF3;
height:680px
}
</style>
2.后端 Web
IDEA快捷键：
快速补全：ctrl+alt+v
快速生成函数：alt+insert
一、Maven
Maven是一个项目管理和构建工具，它基于项目对象模型(POM)的概念，通过描述信息来管理项目的构建
1.Maven的作用
(1)依赖管理
在Mven的pom.xml中直接写入需要的jar包，及其版本
(2)统一项目结构
可以使不同的软件所创造的项目架构得到统一
(3)标准的项目构建流程
2.概述
(1)介绍
Dependcy寻找jar包会优先从本地仓库中寻找，如果找不到会从远程仓库中获取，如果远程仓库中没有，会从中央仓库中获取，下载到远程仓库中，再下载到本地仓库。
(2)配置Maven环境(全局)
(3)创建maven项目
<groupId>com.itheima</groupId>
<artifactId>maven_project01</artifactId>
<version>1.0-SNAPSHOT</version>
3.导入Maven项目
4.依赖管理
依赖：当前项目运行所需要的jar包，一个项目中可以引入多个依赖
(1)依赖配置
配置：
- 在pom.xml中编写
<dependencies>标签 - 在
<dependencies>标签中使用<dependcy>引入坐标 - 定义坐标的 groupId,artifactld,version
- 点击刷新按钮，引入最新加入的坐标
如果引入的依赖，在本地仓库中不存在，将会连接远程仓库/中央仓库进行下载
对应依赖的坐标可以到Maven Repository: Search/Browse/Explore (mvnrepository.com)搜索
(2)依赖传递
依赖具有传递性
直接依赖：在当前项目中，通过依赖配置建立的依赖关系
间接依赖：被依赖的资源如果依赖其他资源，当前项目间接依赖其他资源
排除依赖：主动断开依赖的资源，被排除的资源无需指定版本
(3)依赖范围
以来的jar包，默认下可以在任何地方使用，可以通过<scope></scope>设置其作用范围
作用范围：
主程序范围有效(main文件夹范围内)
测试程序范围有效(test文件夹范围内)
是否参与打包运行(package指令范围)
(4)生命周期
Maven的生命周期就是为了所有的maven项目构建过程进行统一和抽象
Maven中有三套相互独立的的生命周期：
- clean：清理工作
- default：核心工作（编译、测试、打包、安装、部署）
- site：生成报告、发布站点
在同一套生命周期中阶段是有先后顺序的，只有完成前面的阶段才会完成后面的阶段
执行生命周期：
通过Maven工具栏中选择对应的生命周期
二、Springboot
1.快速入门
(1)创建springboot工程，并勾选web开发相关依赖
(2)定义HelloController类，添加方法hello，并添加注解
(3)运行测试
标识请求处理类：
@RestController
表示请求方法：
@RequestMapping("/hello")
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发送给浏览器
- HttpServletRequest：获取请求数据
- HttpServletResponse：设置响应数据架构
CS架构需要安装对应的客户端，并且不同的操作系统需要不同版本的客户端
BS架构的访问速度，主要取决于网络的带宽
(2)Postman
接口测试工具
(3)简单参数
SpringBoot自带的方式
@RestController
public class RequestController {
//原始方式
@RequestMapping("/simpleParam")
public String simpleParam(String name, Integer age)
{
//获取请求参数
System.out.println(name+" : "+age);
return "OK";
}
}
IDEA会自动的对name和age进行类型转换
简单参数：参数名与形参变量名相同，定义形参即可接收参数。
当参数名不一致时，可以使用@RequestParam完成映射
(4)实体参数
请求参数名与形参对象属性名相同，定义POJO接受即可
复杂实体对象：请求参数名与形参对象属性名相同，按照对象层次结构关系即可接受嵌套POJO属性参数（类名.参数名）
(5)数组参数
请求数组名与形参数组名称相同且请求参数为多个，定义数组类型形参即可接收参数
@RequestMapping("/arrayParam")
public String simplePojo(String [] hobby)
{
System.out.println(Arrays.toString(hobby));
return "OK";
}
(6)集合参数
请求数组名与形参数组名称相同且请求参数为多个，@RequestParam绑定参数关系
(7)日期参数
使用@DateTimeFormat注解完成日期参数格式转换
@RequestMapping("/dateParam")
public String dateParam(@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss") LocalDateTime updateTime)
{
System.out.println(updateTime);
return "OK";
}
一定要注意pattern指定的格式和 发送的格式要一致，不然就会出错
(8)Json格式数据
JSON数据键名与形参对象属性名相同，定义POJO类型形参即可接收参数，需要使用@RequestBody标识
@RequestMapping("/jsonParam")
public String jsonParam(@RequestBody User user)
{
System.out.println(user);
return "OK";
}
注意在postman中选择body中的raw和JSON
(9)路径参数
通过请求URL直接传递参数，使用{…}来标识该路径参数，需要使用@PathVariable获取路径参数
@RequestMapping("/path/{id}")
public String pathParam(@PathVariable Integer id)
{
System.out.println(id);
return "OK";
}
可以定义多个路径
@RequestMapping("/path/{id}/{name}")
public String pathParam(@PathVariable Integer id,@PathVariable String name)
{
System.out.println(id+":"+name);
return "OK";
}
{ }中的路径名需要与形参名保持一致
5.响应
ResponseBody
- 类型：方法注解、类注解
- 位置：Controller方法上/类上
- 作用：将方法返回值直接响应，如果返回值类型是实体对象/集合，会转换为JSON格式
- 说明：@RestController=@ResponseBody+@Controller
统一响应结果：Result(code,msg,data)
public class Result
{
private Integer code;
//响应码，0代表失败，1代表成功
private String msg;
//返回的数据
private Object data;
//返回的对象
}
6.分层解耦
(1)三层架构
Controller：控制层，接受前端发送的请求，进行处理，响应数据
service：业务的逻辑层，处理具体的业务逻辑
dao：数据访问层，对数据增删改查（面向接口编程，增加程序的灵活性）
(2)分层解耦
内聚：软件中各个功能模块内部的功能联系
耦合：衡量软件中各个层/模块之间的依赖、关联程度
软件设计原则：高内聚，低耦合
耦合：
解耦：
控制反转：Inversion Of Control，简称IOC，对象的创建控制权由程序自身转移到外部（容器），这种思想就叫控制反转
依赖注入：Dependency Injection，简称DI。容器为应用程序提供运行时，所依赖的资源，称为依赖注入。
Bean对象：IOC容器中创建、管理的对象，称之为bean
(3)IOC&DI入门
-
Service层及Dao层的实现类，交给IOC容器管理
通过
@Component来实现 -
为Controller及Service注入运行时依赖的对象。通过
Autowired来实现（运行时，IOC容器会提供该类型的bean对象，并赋值给该变量 -
想要切换从容器获得的类，只需要切换
@Component就行
(4)IOC详解
Bean的声明
要把某个对象交给IOC容器管理，需要在对应的类上加上如下注解之一：
但是
@Controller是被包含在@RestController中的，所以没有必要单独添加@Controller
Bean对象的名字可以在注解中直接指定
@Service(value="adoo")
//如果注解中只有一个参数时，value可以省略，
//如果没有指定，默认是类名首字母小写
//在springboot集成web开发中，声明控制器bean只能用@Controller
Bean组件扫描：
注解想生效，还需要被组件扫描注解@ComponentScan扫描，@ComponentScan注解包含在启动类声明注解@SpringBootApplication,扫描的范围默认是启动类所在包及其子包
指定扫描的包：在启动类中重新写@ComponentScan注解，直接指定想要扫描的包
(5)DI详解
@Autowired注解，默认是按照类型进行，如果存在多个相同类型的bean，将会报错
解决办法：
Resource和Autowired的区别：
三、数据库
1.MySQL
(1)概述：
SQL：操作关系型数据库的语言，定义操作所有关系型数据库的同意标准
通用语法：
SQL语句的分类：
在使用数据库之前要先启动数据库：
net start mysql#以管理员身份，启动数据库
mysql -uroot -pxxxx#输入账号密码进入数据库
图形化工具：DG（集成在IDEA中了）
(2)DDL
表结构操作
IDEA新UI怎么连接数据库？创建数据库表？设置主键或unique？_idea数据库 unique怎么设置-CSDN博客
①创建
create table 表名(
字段1 字段类型 [约束] [comment 字段1注释]
......
字段2 字段类型 [约束] [comment 字段2注释]
)[comment 表注释]
#[]中的内容都是可写可不写的
/*约束是作用于表中字段上的规则，用于限制存储在表中的数据，来保证数据库中数据的正确性、有效性、完整性*/
create table tb_user
(
id int primary key comment 'ID，唯一标识',
username varchar(20) not null unique comment '用户名',
name varchar(10) not null comment '姓名',
age int comment '年龄',
gender char default '男' comment '性别'
) comment '用户表'
/*
varchar()就相当于是String
char就是一个字符
default要加上一个默认值
*/
②数据类型
MySQL 数据类型 | 菜鸟教程 (runoob.com)
③表结构设计
在删除表时，表中的数据也会全部删除
(3)DML
①Insert语局
如果要对create_time和update_time（都指定为了 not null）进行修改的话，系统函数
now()会自动回去当前时间
id是自动自增的所以在insert的时候，参数就可以直接写null
插入数据时，指定的字段顺序需要与值的顺序一一对应
字符串和日期型数据要包含在引号内
②Update语句
③Delete操作
(4)DQL
查询数据库表中的记录
技巧：
可以先敲表明，再敲字段，这样会自动提示
可以在别名的外面加上''，这样可以在里面显示空格等特殊符号
- 判断 null 和 not null，要用 is 不要用 ！=和 =
- between and 会包括最大值和最小值
- in(…)是多选一，只要能满足其中一个条件就可以显示
- _代表一个字段，%代表任意字段
- 等于是
=
聚合函数：
将一列数据作为一个整体 ，进行纵向计算
不对
null进行计算聚合函数不能在where后面使用
count的字段一定是非空字段，例如id，推荐使用
count(*)
分组查询：
分组查询时select的字段一类是分组字段，一类是聚合函数
where和having的区别：
注意：
排序查询
order by后面字段是有顺序的，只有第一个字段相同时，第二个字段才会生效
分页查询
起始索引从0开始，而查询记录数时这一页有多少个数据
起始索引的计算公式：(页码 - 1) * 每页的查询记录数
如果查询的是第一页的数据，起始索引可以省略，直接写
limit 查询记录数
(5)流程控制函数
| 函数 | 用法 |
|---|---|
| IF(value,value1,value2) | 如果value的值为TRUE，返回value1，否则返回value2 |
| IFNULL(value1, value2) | 如果value1不为NULL，返回value1，否则返回value2 |
| CASE 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
五、CSS
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)]
- 判断 null 和 not null，要用 is 不要用 ！=和 =
- between and 会包括最大值和最小值
- in(…)是多选一，只要能满足其中一个条件就可以显示
- _代表一个字段，%代表任意字段
- 等于是
=
聚合函数：
将一列数据作为一个整体 ，进行纵向计算
不对
null进行计算聚合函数不能在where后面使用
[外链图片转存中…(img-qUZ1d8GK-1711791454179)]
count的字段一定是非空字段，例如id，推荐使用
count(*)
分组查询：
[外链图片转存中…(img-Lzqlzbyb-1711791454180)]
分组查询时select的字段一类是分组字段，一类是聚合函数
where和having的区别：
[外链图片转存中…(img-ogRFf5TT-1711791454180)]
注意：
[外链图片转存中…(img-raTjaUCK-1711791454180)]
排序查询
[外链图片转存中…(img-Uz7MEo3t-1711791454180)]
[外链图片转存中…(img-qYjtpvEV-1711791454180)]
order by后面字段是有顺序的，只有第一个字段相同时，第二个字段才会生效
[外链图片转存中…(img-mavmwyRK-1711791454181)]
分页查询
[外链图片转存中…(img-nTvqObOu-1711791454181)]
起始索引从0开始，而查询记录数时这一页有多少个数据
起始索引的计算公式：(页码 - 1) * 每页的查询记录数
如果查询的是第一页的数据，起始索引可以省略，直接写
limit 查询记录数
(5)流程控制函数
| 函数 | 用法 |
|---|---|
| IF(value,value1,value2) | 如果value的值为TRUE，返回value1，否则返回value2 |
| IFNULL(value1, value2) | 如果value1不为NULL，返回value1，否则返回value2 |
| CASE 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)]
③一对一
一对一关系，多用于单表拆分，将一张表的基础字段放在一张表中，其他字段放在另一张表中，以提升操作效率
[外链图片转存中…(img-4xKErqf1-1711791454182)]
扫一扫
69
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
