前端:页面上显示用户可见的界面和数据

后端：服务器端和数据库

• 服务器端：显示前端的数据存储到数据库中当前端需要数据库数据时，中间传递给前端

(服务器端:我们学习php语言，php语言运行在apache服务器上）

• 数据库：仓库存储数据（mysql），后端可以添加、删除和查看数据（mysql）

展示方面：前端之间看到，布局，图文，交互和特效。

后端不能直接看到，数据访问，业务逻辑

前端HTML5，Css3，javascript，Ajax，vue，react

后端java、php、python、算法、数据库、服务器

工作职责：前端web前端开发、移动终端和小程序

实现后端业务逻辑，实现功能接口

我们不把所有的网页数据都存储在电脑上，一是不安全，二是太大。
在网络的另一端存储前端所需的所有数据，必要时通过网络进行要求。

 它是一台电脑，当他跑一些程序时，它是一台服务器。  我们的计算机也可以成为服务器，只需运行一些特殊程序，但它没有专业的服务器操作，  存储能力强    常见的服务器软件：   目前常用的服务器是Apache和Tomcat   我们需要学习的服务器是apache，它是php的运行环境      除了服务器语言端PHP还有，JSP（java），ASP，python，nodeJS，go等等。   PHP：personal home page； 

什么是ip地址： 为计算机网络相互连接进行通信而设计的协议。具有唯一性 域名是什么： 域名:每台计算机都有一个独特的ip地址，特别难记，所以出现了今天的(域名)。像www.baidu.com 端口号:简单理解为当你使用它时ip地址访问电脑后，帮助您确定访问哪个服务器软件  https://www.baidu.com:443 协议   域名    端口号  http该协议的默认端口号是80 https该协议的默认端口号为443  端口:服务器端也有文件夹(0-255)      文件夹内部有子文件夹，（0-255）        0~  605535 多个端口 

• php是后端语言。是服务端语言。在服务器端运行

• .php是PHP我们可以理解代码的后缀

• 主要目标是允许web开发人员快速编写动态网页

一句话总结:PHP 是一种强大的服务器端脚本语言，可以创建动态交互网站。

为什么要学习一个后端语言呢？

• 当前市场需求要前端人员掌握后端语言

• 便于与后端开发人员互动

• 补充:除了服务器端PHP还有JAVA, JSP,python，nodejs，go等语言。

PHP优点：

• 跨平台支持多种数据库（mysql(关系数据库)，MongoDB(非关系数据库)

• 安全性效

• 使用成本低

• 与其他后端语言相比，简单易学

缺点：

• 安装复杂，配置多，过于灵活

PHPStudy（PHP操作环境一键安装包)PHPstudy这是构建服务器的工具。我需要写我的php代码放在phpstudy工具的WWW目录下，‘www是服务器的目录，即放置项目代码的目录。

您的计算机访问您的服务器，可以在地址栏中输入locahost或者127.0.0.1

• PHP 脚本可以放置在文档的任何位置。PHP 脚本以 结尾：

PHP 代码中的注释不会作为程序读取和执行。它唯一的功能是供代码编辑阅读。

PHP支持三种注释：

变量是存储信息的容器：

**注释：**将变量视为存储数据的容器。

变量规则：

• 变量以 $ 符号开头，然后是变量的名称

• 变量名必须从字母或下划线开始

• 变量名称不能从数字开始

• 变量名称只能包括字母数字符和下划线（A-z、0-9 以及 _）

• 变量名称对大小写敏感（$y 与 $Y 是两种不同的变量)

• echo和print之间的差异

• echo可输出一个以上的字符串

• print只能输出一个字符串，并且总是返回1

• echo 比 print 稍快一点，因为它不会返回任何值。

PHP is fun!"; echo "Hello world!
"; echo "I'm about to learn PHP!
"; ?>

展示如何用 echo 命令来显示字符串和变量：

"; echo "Study PHP at $txt2"; echo "My car is a {$cars[0]}"; ?>

五、PHP的数据类型

三大类：

1. 基本数据类型1.1 整型1.2 小数1.3 布尔类型1.4 字符串

2. 复合数据类型2.1 数组类型2.2 对象类型

3. 特殊数据类型3.1 null

var_dump() 会返回变量的数据类型和值

字符串可以是引号内的任何文本。您可以使用单引号或双引号：

"; $x = 'Hello world!'; echo $x; ?>

整数是没有小数的数字。int

"; $x = -345; // 负数 var_dump($x); echo "
"; ?>

浮点数是有小数点或指数形式的数字。float

"; ?>

逻辑是 true 或 false。

$x=true;
$y=false;
var_dump($x);

数组在一个变量中存储多个值。

$arr = array('hello','hi','world')
 for($i =0;i<br>';
 }

PHP接收前端的数据
$_GET[‘参数名’]
$_GET['username']获取usersname
$_GET['password']获取password

$_POST[‘参数名’]
$_REQUEST['参数名']
请求参数有中文的解决方案：
header('Content-type:text/html;charset=utf-8');

概念：数据库是按照数据结构来组织，存储和管理数据的仓库。一个数据库时由多张数据表组成的。

库：仓库

表：一个仓库被分为了很多的部分，很像类 (Student)

字段：很像类的属性 ( id name sex password)

每个字段的数据类型：

int–>整数类型
float–>浮点数
char–> 定长字符串
varchar—>变长字符串
blob—>二进制类型
date–>日期类型

关系型数据库

oracle、mysql、SQLServer、DB2、sybase

非关系型数据库

Redis、HBAse、CouchDb、MongoDB

使用工具：phpstudy 。点击mySQL管理器，选择MYSQl-front，进入SQL编辑器

• 创建数据库：鼠标右键（可视化面板） 代码：create database 数据库名

• 打开一个库 use mydb

• 创建表：

create table students(
  id int not null primary key AUTO_INCREMENT, 
  name varchar(8) not null,
  sex char(4) not nul,
  age tinyint not null
)

primary key: 表示唯一的主键

 id int not null primary key AUTO_INCREMENT,

• 增加一条记录

insert into student(username,userpass) values('张三丰','123');

• 删除

delete  from  student where username='张三丰

• 查询

select * from student where username='张' and usersex='男'
查询出来的是一个表格的形式

• 改

update student set usersex='女' where username='张三丰'

练习：

• 新增insert [into] 表名[{列名1,列名2,…}] values (值1，值2)

例如：
insert into students(name,sex,age) values('孙丽华'，'女',21)

• 查询select 列名称 from 表名称[查询条件]

select name,age,from students;
select* from students;
select* from students where age>12
select* from students where name like '%王%'; 模糊查询
select* from students where id<5 and age>20

• 删除

delete from 表名称 where 删除条件;
delete from students;删除表中的所有数据
delete from students where id=2;删除表中id为2的数据
delete from students where age<20;删除表中年龄小于20

• 修改update 表名称 set 列名称=新值 where 更新条件

update students set age = age+1
update students set name='张伟鹏',age=19 where tel='13067999999'

练习：

一、连接数据库：mysqli_connect();

语法：mysqli_conncet(servername,username,password,dbname);

参数:

• servername:规定要连接的服务器的名称：默认是’localhost:3306’

• username:规定登录所使用的用户名，默认值是拥有服务器进程的用户

• password:规定登录所用的密码，默认是’’

• dbname:表示式数据库名

返回值：返回一个代表到 MySQL 服务器的连接的对象。

示例：

$con = mysqli_connect('localhost','root','root','mydb')
if(!$con){
    echo('连接失败')
}else{
    echo('连接成功')
}

二、增加内容：

给students表中插入数据
$sql = 'insert into student(username,password) values("1988","洪七公")'

mysqli_query($conn,$sql)返回插入成功还是失败. 成功返回true。失败返回false

if(mysqli_query($conn,$sql)){ 
        
    echo '新记录插入成功'
}else{ 
        
    echo 'error'.$sql.'
'.mysqli_error($conn)
}

mysqli_num_rows()表示影响行的个数

$rowCount = mysqli_num_rows($result);

if ($rowCount==0) { 
        
    echo '登录失败，用户名或者密码错误';
}else{ 
        
     echo '';
} 

三、查询：

$sqlstr ='select*from student';
$result = mysqli_query($conn,$sqlstr);//执行查询后的sql语句后，返回的是查询的结果

查询行：$query_num = mysqli_num_rows($result)
查询列：$query_cols = mysqli_num_fields($result)

$query_row = mysqli_fetch-array($result);拿出结果集中的某一行，返回的是拿到的行

函数返回结果集中行的数量：mysqli_num_rows(result);
函数返回结果集中字段（列）的数量：mysqli_num_fields(result) 
函数从结果集中取得一行作为关联数组：mysql_fetch_array(result) 

1、接收前端发来的数据
2、逻辑处理
3、响应数据

// 接收前端数据
header('content-type:text/html;charset=utf-8');
$name = $_POST['username'];
$pass = $_POST['password'];
//连接数据库
$con = mysqli_connect('localhost','root','root','my2102');

// 处理逻辑
if ($con) { 
        
    $sql = 'insert into book(username,userpass) values("'.$name.'","'.$pass.'")';
    //执行插入语句，返回的是布尔值
    $result = mysqli_query($con,$sql);
}else{ 
        
    echo '连接失败';
}
// 响应
if ($result) { 
        
   echo '注册成功';
}else{ 
        
   echo '注册失败';
}

mysqli_close($con);

header('content-type:text/html;charset=utf-8');
// 接收前端数据
$username = $_POST['username'];
$password = $_POST['password'];

// 处理逻辑
// 1. 连接数据库
$conn = mysqli_connect('localhost','root','root','my2102');
if ($conn) { 
        
     echo '连接成功';
     $sql = 'select * from book where username="'.$username.'" and userpass="'.$password.'"';
     
     执行查询语句，返回的是一个表格，需要通过mysqli_num_rows($result)来查看影响了多少行
     $result = mysqli_query($conn,$sql);
}else{ 
        
    echo '连接失败';
}

// 响应
mysqli_close($conn);

$rowCount = mysqli_num_rows($result);// mysqli_num_rows： 影响行的个数
if ($rowCount) { 
        
   echo '';
}else{ 
        
    echo '用户或者密码错误';
}

AJAX（Asynchronous Javascript And XML）是异步的javascript和XML

传统网站中，如果需要更新页面内容，必须重载整个网页页面。

ajax是可以在不刷新加载整个页面的情况下，对网页的某部分进行更新。

网站欣赏：

http://www.baidu.com

https://juejin.cn/backend

http://www.toutiao.com

同步交互：客户端向服务器端发送请求，必须等到结果返回，才能进行其他的业务操作

异步交互：客户端向服务器端发送请求，不必等到结果返回，就可以进行其他的业务操作。

​ AJAX的核心对象是XMLHttpRequest，即AJAX的异步操作，和服务器交互主要依赖该对象。

​ 以前浏览器负责显示页面和发送请求接收响应(和后端交互)。两件事情同一时刻只能做件，没法同时进行。这样会让用户感觉不好(友好性不好)，比如:当浏览器发送请求时，就没法显示内容，这时浏览器中是空白显示，给用户的感觉不好。

现代浏览器，使用XMLHttpRequest对象，可以把浏览器解脱出来，可以让浏览器只负责显示，而完成请求的事情由XMLHttpRequest对象负责。这样两者各负其责，效率更高，效果更好，用户体验很好，用户永远不会看到浏览器空白。

XMLHttpRequest的属性

属性解读：

在客户端与服务器的通信过程中，
XMLHttpRequest.readyState 体现着当前请求以及服务端响应的状态。
它的值有
0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束
xhr.readyState属性值是0、1、2、3、4。其中状态4代表响应完成。
-----------------------------------------------------------------------
服务器响应完成之后，我们通常会使用 XMLHttpRequest.status代表响应中的数字状态码。
代表着我们的 Ajax 请求的状态成功与否。

200 服务器已经成功处理了请求并响应到网页
404 请求失败，请求所希望得到的资源未被在服务器上发现（一般都是请求路径的错误）
500 服务器遇到错误，无法完成请求

1、创建XMLHttpRequest对象
var request = new XMLHttpRequest();
2、设置请求参数
xhrReq.open(method, url, async);
            method: 代表HTTP请求的方法名，比如 GET、POST。
            url: 代表着要想向其发送请求的 url。
            async: 表示是否异步。true代表异步，默认为异步
3、发送请求
request.send();
4、接收响应
request.onreadysatechange = function(){ 
        
    if(request.readyState==4&&request.status == 200){ 
        
        alert(request.responseText);
    }
} 

思考：

1、在代码中我们要在什么样的时机开始处理响应呢？

响应结束（request.readyState==4）并且响应成功（request.status == 200）

2、异步的体现怎么体现出来的？

​

get请求

在数据交互中，我们经常会使用 GET 请求来查询数据
xhr.open("GET", "http://localhost:8080/simple/get?name=张三&age=18");
xhr.send();

post发送请求：

Ajax 中，我们通常使用 POST 方法来进行提交数据也是非常重要
xhr.open("POST", "http://localhost:8080/simple/post");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name=zhangsan&age=18");

oTxt.onblur = function(){ 
        
        var xhr = new XMLHttpRequest();
        xhr.open('get','checkUser.php?username='+this.value);
        xhr.send();
        xhr.onreadystatechange = function(){ 
        
            if (xhr.readyState==4&&xhr.status==200) { 
        
                console.log(xhr.responseText);
                if (xhr.responseText=='1') { 
        
                    oBox.innerHTML = '亲，用户名可用'
                }else{ 
        
                    oBox.innerHTML = '亲, 用户名不可以'
                }
            }
        }
       }

<?php
header('Content-type:text/html;charset=utf-8');
# 获取前端数据
$username = $_GET['username'];

# 逻辑处理
$conn = mysqli_connect('localhost','root','root','my_2021');
if ($conn) { 
        
    # 数据的保存
    $sql = 'select * from student where username="'.$username.'"';
    $rseult = mysqli_query($conn,$sql); // $rseult会是多条数据
}else{ 
        
    echo '连接失败';
}

# 响应给前端
$count = mysqli_num_rows($rseult); //返回一个数据，代表查找到了几个


if ($count==0) { 
        
    echo '1'; //用户名可用
} else { 
        
    echo '0';
}

?>

<?php
header('Content-type:text/html;charset=utf-8');
# 1.接收前端的信息
$username = $_POST['username'];
$userpass = $_POST['password'];
echo $username;

# 2.逻辑处理
# 2.1 php连接数据库  ，返回一个布尔值，true成功，false失败
// mysqli_connect 连接数据库
// mysqli_query 查询是否连接成功，成功后执行sql语句

 $conn = mysqli_connect('localhost','root','root','my_2021');
if ($conn) { 
        
    echo '连接成功';
    # 只是一条插入语句
    $sql = 'insert into student(username,userpass) values("'.$username.'","'.$userpass.'")';

    # 执行  sql语句   执行会有两个结果  true执行成功  false 执行失败
    $result = mysqli_query($conn,$sql);
}else{ 
        
    echo '连接失败';
}


# 3. 响应
if ($result) { 
        
    echo '1';
} else { 
        
    echo '0';
}

# 关闭服务器
mysqli_close($conn);

?>

​ 一个函数被作为参数传递给另一个函数。函数B作为函数A的参数，函数B在函数A内部调用，函数B称为函数A的回调函数。

语法：
function A(callback){ 
        
  callBack()
}
B也是一个函数
A(B)

语法一：

    function success(callback){ 
        
        callback()
    }

    success(function(){ 
        
        console.log(1);
    })
语法二：

    function success(callback){ 
        
        callback("张三")
    }

    success(function(data){ 
        
        console.log(data);
    })


封装ajax，发送一个get请求
普通版本
function ajaxget(){ 
        
  let xhr = new XMLHttpRequest();
  xhr.open('get', '05checkUser.php?username=' + this.value);
  xhr.send();
  xhr.onreadystatechange = () => { 
        
    if (xhr.readyState == 4 && xhr.status == 200) { 
        
      console.log(xhr.responseText);
    }
  }
}
ajaxget();
-----------------------------------------------------------------
回调函数版本
function ajaxget(callback){ 
        
  let xhr = new XMLHttpRequest();
  xhr.open('get', '05checkUser.php?username=' + this.value);
  xhr.send();
  xhr.onreadystatechange = () => { 
        
    if (xhr.readyState == 4 && xhr.status == 200) { 
        
      callback(xhr.responseText);
    }
  }
}

ajaxget(funciton(data){ 
        
   console.log(data);        
})

封装的原则：

封装之前，需要想一下，后期用户调用时传递什么参数方便的原则来进行封装

有些用户想后期这么调用