前后端交互详解(建议收藏)

1.前后端认知

• 相信很多人心里都有一个疑惑：我⼀个前端， 为什么要学习后端？
  

• 那么到底什么是前端？ 什么是后端？ 什么是数据库?

1.1 基本组织架构

• 我们是⼀个 前端开发⼯程师

• 还有⼀个⼯作叫做后端开发⼯程师

• 我们⼀个⽹站的组织架构基本上由下⾯的步骤完成

  ⽤户 => 前端 => 后端 => 数据库
  1

• 整个过程中：

   ⽤户向前端⼈员要⼀个⽹⻚
   前端⼈员准备⼀个⽹⻚给⽤户，但是⽹⻚中的数据是找后端⼈员要的
   后端⼈员接受到前端⼈员要数据以后，去数据库⾥⾯找到对应的数据，给
   到前端⼈员
   前端⼈员拿到数据以后渲染在⻚⾯上
   最后把这个⻚⾯给到⽤户看
  1
  2
  3
  4
  5
  6

• ⽐如： 我们浏览⼀个新闻⽹站

   ⽤户输⼊⽹址
   前端⼈员就要把对应的⻚⾯给到⽤户，在⻚⾯打开的过程中，向后端⼈员索要新闻信息
   后端⼈员接收到前端⼈员索要新闻信息以后，就去数据库中找到对应的新闻信息数据给前端⼈员
   前端⼈员接收到后端⼈员给的新闻信息以后，使⽤我们的办法把新闻信息数据渲染在⻚⾯上
   ⻚⾯就打开了，⽤户就可以看到⼀个新闻⽹站了
  1
  2
  3
  4
  5

• ⽐如： ⽤户登陆⼀个⽹站

   当⽤户书写完表单内容以后，点击提交按钮的时候
   前端⼈员拿到⽤户填写的内容，把数据整合好传送给后端⼈员
   后端⼈员接收到数据以后，去数据库中进⾏⽐对，看看有没有对应的数据
   然后告诉前端⼈员，你给我的⽤户名和密码是否正确
   前端把信息反馈给客户看到
   如果正确那么就是跳转⻚⾯
   如果不正确提示⽤户名或者密码有问题，重新输入或者...
  1
  2
  3
  4
  5
  6
  7

2. 了解服务器

2.1 什么是服务器？其实说⽩了，服务器就是⼀个电脑，当他跑起来⼀些程序的时候，就变成了⼀个服务器，只不过会跑⼀些特殊的程序，需要⼀些特殊的环境，电脑不他⼀样⽽已
换句话说，我们⾃⼰的电脑，跑⼀些特殊的程序的时候，也可以当作⼀个⼩型的服务器来⽤，只不过计算能⼒/存储能⼒/转存能⼒没有专业的服务器电脑厉害⽽已。

2.2 服务器的作用

2.3 服务器是怎么访问的

• ⽐如我们的经常访问的 www.baidu.com

• 这个⾥⾯就包含很多的内容，我们看到的这个只是⼀个省略后的内容

• 是浏览器帮我们省略掉了⼀些内容

• 全部的地址应该是 https://www.baidu.com:443

• 发现多了两个东⻄ https://和 :443

• 其实⼀个简单的 url 地址是由三部分组成的

   传输协议
   域名
   端⼝号
  1
  2
  3

传输协议

• 我们常⻅的传输协议是 http 和 https

• 他们是限制⽤户和服务器之间交流传输数据的⽅式和规则

• 也是前端和后端⼈员交互的规则

• 规则

  建⽴连接通道
  相互通信
  关闭连接通道
  1
  2
  3

• 只不过 http 是⼀种常⻅协议，不是很安全

• https 是⼀种加密传输协议

域名

• 之前我们说过，服务器就是⼀个在⽹络那⼀头的⼀个电脑
• 以前，没有域名的概念，⼤家都是使⽤ IP 地址来访问
• 也就是⽹络那⼀头的那个电脑的 IP 都是⼀堆数字，不⽅便记忆
• 后来就有了⼀个万维⽹，他把每⼀个 IP 地址配套了⼀个英⽂的名字，⽅便⽤户记忆
• 所以说，域名就代表着 ⽹络那⼀头 那个电脑的 IP 地址
• 其实也就是我们要访问哪⼀个服务器

端⼝号

• ⼈家的服务器电脑也是有很多的⽂件夹的
• 不同的⽂件夹⾥⾯存储着不同的内容
• 可能有个a⽂件夹,⾥⾯存储的是⾸⻚
• 可能有个b⽂件夹,⾥⾯存储的是⼀些数据
• 所以说，你光找到服务器电脑还不⾏,还得找对⽂件夹才可以
• ⼤家都把⽂件夹编上号存储了0 ~ 255,一共256 个
• 每个⽂件夹⾥⾯还有对应的⼩⽂件夹0 ~ 255,一共256 个
• 那么一共就有256 * 256 个⽂件夹,也就是从0~ 65535
• 所以我们的端⼝号就有 65536 个,分别对应着0 ~ 65535
• ⼤家都把80端⼝号作为⼀个⽹站的默认端⼝号
• http协议默认是80端⼝号
• https协议默认是443端⼝号

百度

• 那么现在，我们再回过头去看百度的完整 url 地址

• https://www.baidu.com:443

    以⼀种加密传输协议来通讯
    访问的是⽹络上 IP 的值为 119.75.217.109 的那个电脑 
    访问的是第 443 号⽂件夹 
  1
  2
  3

• 这个⽂件夹⾥⾯存储着⼀个百度的⻚⾯

• 我们就能看到这个⻚⾯了

3. PHP

• PHP :⼀⻔后端语⾔

• 为什么要学习⼀个后端语⾔呢？

     ⽬前市场上的需求，要求前端⼈员掌握⼀个后端语⾔ 
     ⽅便和后端开发⼈员进⾏交互
  1
  2

3.1 PHP基本语法

• 我们⼀定要知道，php 是另⼀个语⾔了，不再是我们的 html /javascript了
• 那么别的语⾔就要有⼈家语⾔的规则
• 我们在写 javascript 的时候，是⼀个 .js ⽂件
• 我们在写 html 的时候，是⼀个 .html ⽂件
• php 的代码就要写在⼀个.php 后缀的⽂件中

3.2 php⽂件的书写

• 所有的 php 代码都要写在⼀个 php 的范围内
• 要求以 <?php 开头
• 要求以 ?> 结尾
• 每⼀个语句后⾯都要有 ;

<?php
# php 的代码写在这⾥
?>
1
2
3

定义变量

• 在 php 中没有var关键字给我们定义变量
• 直接使⽤$来确定⼀个变量

<?php
# 下⾯就是⼀个定义了⼀个变量，并且赋值为 100
# 变量名就是 $num
 $num = 100;
 $boo = true;
# 下⾯是⼀个字符串
 $str = "你好 php";
?>
1
2
3
4
5
6
7
8

条件语句

在 php 中使⽤条件语句和 js 基本⼀致

<?php
$boo = true;
if ($boo) {
echo '你好，欢迎观临！';
} else {
echo '您还没有登陆';
} 
?>
1
2
3
4
5
6
7
8

循环语句
在 php 中循环语句和 js 基本⼀致

<?php
$num = 5;
for ($i = 0; $i < $num; $i++) {
echo 'hello php'; }
?>
1
2
3
4
5

字符串拼接
在 php 中，字符串拼接不再是使⽤ + 进⾏拼接了,⽽是使⽤. 进⾏拼接

$str = 'hello ';
$str2 = 'world';
$str3 = $str . $str2;
echo $str3;
# 得到的就是 hello world
1
2
3
4
5

数组
在 php 中的数组和 js 中特别不⼀样

<?php
# 创建⼀个数组
 $arr = array(1, 2, 3);
 print_r($arr);
# Array ( [0] => 1 [1] => 2 [2] => 3 )
# 这个就类似于我们 js 中的数组，按照索引来的
# 创建⼀个关联数组
 $arr2 = array('name' => 'Jack', 'age' => 18, 'gender' => '男')
 print_r($arr2)
# Array ( [name] => Jack [age] => 18 [gender] => 男 )
# 这个就类似于我们 js 中的 对象，键值对的形式
?>
1
2
3
4
5
6
7
8
9
10
11
12

4. MySQL数据库

• mysql 是⼀个数据库的名字 和 php 合作的⽐较好的数据库

• 之前我们说过⼀个问题，前端向后端索要数据，后端就是去数据库中查询数据，返回给前端

   MySQL 是最流⾏的关系型数据库管理系统（⾮关系型数据库简略介绍）
   关系数据库管理系统(Relational Database Management System)的特点
   数据以表格的形式出现
   每⾏为各种记录名称
   许多的⾏和列组成⼀张表单
   若⼲的表单组成database
   主键：主键是唯⼀的。⼀个数据表中只能包含⼀个主键。你可以使⽤主键来查询数据。
  1
  2
  3
  4
  5
  6
  7

4.1 数据库的数据类型

* 数值类型
| 类型 | ⼤⼩ | ⽤途 |
| ------ | ------ | ------ |
| TINYINT | 1 字节 | ⼩整数值 |
| SMALLINT | 2 字节 | ⼤整数值 |
| MEDIUMINT | 3 字节 | ⼤整数值 |
| INT或INTEGER | 4 字节 | ⼤整数值 |
| BIGINT | 8 字节 | 极⼤整数值 |
| FLOAT | 4 字节 | 单精度 浮点数值 |
| DOUBLE | 8 字节 | 双精度 浮点数值 |
| DECIMAL | | ⼩数值 |
* ⽇期和时间类型
| 类型 | 格式 | ⽤途 |
| ------ | ------ | ------ |
| DATE | YYYY-MM-DD | ⽇期值 |
| TIME | HH:MM:SS | 时间值或持续时间 |
| YEAR | YYYY | 年份值 |
| DATETIME | YYYY-MM-DD HH:MM:SS | 混合⽇期和时间值 |
| TIMESTAMP | YYYYMMDD HHMMSS | 时间戳 |
* 字符串类型
| 类型 | ⼤⼩ | ⽤途 |
| ------ | ------ | ------ |
| CHAR | 0-255字节 | 定⻓字符串 |
| VARCHAR | 0-65535 字节 | 变⻓字符串 |
| TINYBLOB | 0-255字节 | 不超过 255 个字符的⼆进制字符串 |
| TINYTEXT | 0-255字节 | 短⽂本字符串 |
| BLOB | 0-65 535字节 | ⼆进制形式的⻓⽂本数据 |
| TEXT | 0-65 535字节 | ⻓⽂本数据 |
| MEDIUMBLOB | 0-16 777 215字节 | ⼆进制形式的中等⻓度⽂本数据 |
| MEDIUMTEXT | 0-16 777 215字节 | 中等⻓度⽂本数据 |
| LONGBLOB | 0-4 294 967 295字节 | ⼆进制形式的极⼤⽂本数据 |
| LONGTEXT | 0-4 294 967 295字节 | 极⼤⽂本数据 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

4.2 操作数据库

• 使⽤ php 操作数据库的步骤

  1. 和数据库建⽴链接
  2. 使⽤ sql 语句对数据库进⾏操作
  3. 获取结果
  4. 和数据库的链接断开

1.和数据库建⽴链接

• 在 php 中我们使⽤ mysql_connect() ⽅法来建⽴和数据库的链接

<?php
# 下⾯就是建⽴链接，$link 会得到⼀个链接信息
# $link = mysql_connect('ip地址', '数据库⽤户名', '数据库密码'); 
?>
1
2
3
4

我们有了链接信息$link以后就可以继续去操作数据库了

2.确定操作哪个库

• 刚才是和数据库建⽴了链接，我们还要确定操作哪个库

<?php
# 下⾯就是确定你要操作哪个库
# mysql_select_db('你要操作的库的名称', $link);
?>
1
2
3
4

3.执⾏ sql 语句操作数据库

<?php
# 下⾯就是使⽤ sql 语句对数据库进⾏操作
# $res = mysql_query('你要执⾏的 sql 语句'); 
?>
1
2
3
4

这⾥有⼀个注意的点：
我们拿到的结果是⼀个我们看不懂的处理信息
需要使⽤ mysql_fetch_row || mysql_fetch_assoc 解析⼀下结果才能看
得懂

4.关闭链接

• 全部⽤完以后我们最好是关闭⼀下数据库链接

<?php
# mysql_close($conn);
?>
1
2
3

完整步骤
我们完整的写⼀下操作的步骤

<?php
 $link = mysql_connect('localhost', 'root', 'root');
 mysql_select_db('test1913');
 $res = mysql_query('SELECT * FROM `student`');
 $row = mysql_fetch_assoc($res);
 mysql_close($link);
 print_r($row);
?>
1
2
3
4
5
6
7
8

5.常⽤的 sql 语句

• 刚才说了怎么操作数据库 现在我们来看⼀下，操作数据库时候常⽤的sql 语句
• 我们就是依靠这些 sql 语句来进⾏数据库操作的

(1) 查询语句

<?php
# 查询 student 这个表⾥⾯的所有数据
 $sql = 'SELECT * FROM `student`';
# 查询 student 表中的数据⾥⾯ gender 为 男 的数据
 $sql = 'SELECT * FROM `student` WHERE `gender`="男"';
# 查询 student 表中的数据⾥⾯ age ⼤于 18 的数据
 $sql = 'SELECT * FROM `student` WHERE `age`>18';
# 查询 student 表中的数据⾥⾯ age ⼤于 18 且 gender 为 男 的数据
 $sql = 'SELECT * FROM `student` WHERE `age`>18 AND
`gender`="男"';
# 查询 student 表中的数据⾥⾯ age ⼩于 22 或者 age ⼤于 28 的数据
 $sql = 'SELECT * FROM `student` WHERE `age`<22 OR `age`>28';
# 查询 student 表中的数据⾥⾯从 第⼏条开始 查询多少条
 $sql = 'SELECT * FROM `student` LIMIT 0, 10';
# 先按照条件筛选出数据以后再进⾏分⻚查询
# 下⾯是查询表中所有 age>18 且 性别为男的所有数据，查出来以后从第 10 条
开始查 10 条
 $sql = 'SELECT * FROM `student` WHERE `age`>18 AND
`gender`="男" LIMIT 10, 10';
# 查询表的模糊查询
# 下⾯表示查询表中所有数据⾥⾯ name 字段中包含 "三" 字的数据
 $sql = 'SELECT * FROM `student` WHERE `name` LIKE "%三%"';
# 查询排序，查询的时候按照某⼀个字段升序或降序排序
 $sql = 'SELECT * FROM `student` ORDER BY `age` ASC';
 $sql = 'SELECT * FROM `student` ORDER BY `age` DESC';
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

(2) 增加语句

<?php
# 向表中增加⼀条数据，再增加的时候主键不能由我们书写，⽽是 mysql 数据库
⾃⼰递增
 $sql = 'INSERT INTO `student` VALUES(null, "张三", 18, "男",
1913, 100)';
# 插⼊固定⼏个键的数据，其他的⽤默认值
 $sql = 'INSERT INTO `student` (`name`, `age`) VALUES("李四",
22)';
?>
1
2
3
4
5
6
7
8
9

(3) 删除语句

<?php
# 删除表中 id 为 100 的数据
 $sql = 'DELETE FROM `student` WHERE `id`=100';
# 删除表中 name 为 张三 的数据
 $sql = 'DELETE FROM `student` WHERE `name`="张三"'
?>
1
2
3
4
5
6

(4) 修改语句

<?php
# 更新⼀条 id 为 100 的数据中的 name 字段的值和 age 字段的值
 $sql = 'UPDATE `student` SET `name`="张三", `age`=10 WHERE
`id`=100'
# 更新数据的时候让所有的数据增加⼀些内容
 $sql = 'UPDATE `student` SET `age`=age+1'
?>
1
2
3
4
5
6
7

最后是常⽤的有些sql语句规范：

• sql 关键字全部⼤写
• “表” 和 “字段” 使⽤ 反引号 包裹
• 除了 数字 和 布尔 之外的⽂本内容使⽤引号包裹

结:以上就是前后端交互的重点内容，下一次将更新前后台交互重要的工具AJAX，喜欢的小伙伴可以点赞，关注一波