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

在这里插入图片描述

1.前后端认知

  • 相信很多人心里都有一个疑惑:我⼀个前端, 为什么要学习后端?
    在这里插入图片描述

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

在这里插入图片描述

1.1 基本组织架构

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

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

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

    ⽤户 => 前端 => 后端 => 数据库
    
  • 整个过程中:

     ⽤户向前端⼈员要⼀个⽹⻚
     前端⼈员准备⼀个⽹⻚给⽤户,但是⽹⻚中的数据是找后端⼈员要的
     后端⼈员接受到前端⼈员要数据以后,去数据库⾥⾯找到对应的数据,给
     到前端⼈员
     前端⼈员拿到数据以后渲染在⻚⾯上
     最后把这个⻚⾯给到⽤户看
    
  • ⽐如: 我们浏览⼀个新闻⽹站

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

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

2. 了解服务器

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

2.2 服务器的作用
在这里插入图片描述
2.3 服务器是怎么访问的

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

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

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

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

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

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

     传输协议
     域名
     端⼝号
    

传输协议

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

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

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

  • 规则

    建⽴连接通道
    相互通信
    关闭连接通道
    
  • 只不过 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 号⽂件夹 
    
  • 这个⽂件夹⾥⾯存储着⼀个百度的⻚⾯

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

3. PHP

  • PHP :⼀⻔后端语⾔

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

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

3.1 PHP基本语法

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

3.2 php⽂件的书写

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

定义变量

  • 在 php 中没有var关键字给我们定义变量
  • 直接使⽤$来确定⼀个变量
<?php
# 下⾯就是⼀个定义了⼀个变量,并且赋值为 100
# 变量名就是 $num
 $num = 100;
 $boo = true;
# 下⾯是⼀个字符串
 $str = "你好 php";
?>

条件语句

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

<?php
$boo = true;
if ($boo) {
echo '你好,欢迎观临!';
} else {
echo '您还没有登陆';
} 
?>

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

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

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

$str = 'hello ';
$str2 = 'world';
$str3 = $str . $str2;
echo $str3;
# 得到的就是 hello world

数组
在 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 中的 对象,键值对的形式
?>

4. MySQL数据库

在这里插入图片描述

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

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

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

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字节 | 极⼤⽂本数据 |

4.2 操作数据库

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

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

1.和数据库建⽴链接

  • 在 php 中我们使⽤ mysql_connect() ⽅法来建⽴和数据库的链接
<?php
# 下⾯就是建⽴链接,$link 会得到⼀个链接信息
# $link = mysql_connect('ip地址', '数据库⽤户名', '数据库密码'); 
?>

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

2.确定操作哪个库

  • 刚才是和数据库建⽴了链接,我们还要确定操作哪个库
<?php
# 下⾯就是确定你要操作哪个库
# mysql_select_db('你要操作的库的名称', $link);
?>

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

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

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

4.关闭链接

  • 全部⽤完以后我们最好是关闭⼀下数据库链接
<?php
# mysql_close($conn);
?>

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

<?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);
?>

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';
?>

(2) 增加语句

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

(3) 删除语句

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

(4) 修改语句

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

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

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

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

在这里插入图片描述

  • 1052
    点赞
  • 4625
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 108
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 108
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

抱着猫睡觉的鱼_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值