javascript后面部分

day01-PHP语言

一、认识前后端

前端：用户可见的界面，数据展示在页面上给用户看到

后端：分为服务器端和数据库

• 服务器端：把前端要展示的数据存储到数据库中，前端需要时把数据库的数据再传递给前端

​ （服务器端：我们学习php语言，php语言运行在apache服务器上）

• 数据库：一个存储数据的仓库（mysql），可以让后端进行数据的增删改查（mysql）

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

​ 后端没办法直接看到，数据存取，业务逻辑

使用技术：前端HTML5，Css3，javascript，Ajax，vue，react

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

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

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

二、前后端交互

• 我们是一个 前端开发工程师

• 还有一个工作叫做 后端开发工程师（JAVA，PHP，nodejs）

• 我们一个网站的组织架构基本上由下面的步骤完成

​ 用户 => 前端 => 后端 => 数据库

比如： 我们浏览一个新闻网站
1）用户输入网址
2）前端人员就要把对应的页面给到用户，在页面打开的过程中，想后端人员索要新闻信息
3) 后端人员接收到前端人员索要新闻信息以后，就去数据库中找到对应的新闻信息数据给前端人员
4) 前端人员接收到后端人员给的新闻信息以后，使用我们的办法吧新闻信息数据渲染在页面上
5) 页面就打开了，用户就可以看到一个新闻网站了
再比如：
 用户登陆一个网站
 1) 当用户书写完表单内容以后，点击提交按钮的时候
 2) 前端人员拿到用户填写的内容，把数据整合好传送给后端人员
 3) 后端人员接收到数据以后，去数据库中进行比对，看看有没有对应的数据
 4) 然后告诉前端人员，你给我的用户名和密码是否正确
 5) 前端吧信息反馈给客户看到
       - 如果正确就是跳转页面
       - 如果不正确提示用户名或者密码有问题

三、服务器的简单理解

一、为什么要用服务器：

我们不可能把所有的网页数据全部存储到电脑上，第一不安全，第二太大。
所有我们把前端需要的数据存放在网路的另一端，需要的时候通过网络来进行请求。

二、什么是服务器

 它就是一个电脑，当他跑起来一些程序的时候，就是一个服务器。
 我们的电脑也能变成一个服务器，只要跑一些特殊的程序就可以，只不过它没有专业的服务器运算，
 存储的能力强
 
 常见的服务器软件:
  目前常用的服务器就是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是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* 开头，以 *?> 结尾：

<?php
// 此处是 PHP 代码
?>

• PHP 文件的默认文件扩展名是 “.php”

• PHP语句以分号结尾;

• PHP 代码块的关闭标签也会自动表明分号（因此在 PHP 代码块的最后一行不必使用分号）

二、PHP中的注释

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

PHP支持三种注释：

<?php
// 这是单行注释

# 这也是单行注释

/*
这是多行注释块
它横跨了
多行
*/
?>

三、PHP变量

变量是存储信息的容器：

<?php
$x=5;
$y=6;
$z=$x+$y;
echo $z;
?>

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

变量规则：

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

• 变量名称必须以字母或下划线开头

• 变量名称不能以数字开头

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

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

四、PHP输出

• echo和print之间的差异

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

• print只能输出一个字符串，并始终返回1

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

<?php
echo "<h2>PHP is fun!</h2>";
echo "Hello world!<br>";
echo "I'm about to learn PHP!<br>";
?>

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

<?php
$txt1="Learn PHP";
$txt2="W3School.com.cn";
$cars=array("Volvo","BMW","SAAB");

echo $txt1;
echo "<br>";
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

六、PHP字符串

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

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

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

七、PHP整数

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

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

八、PHP 浮点数

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

<?php 
$x = 10.365;
var_dump($x);
echo "<br>"; 
?>

九、PHP逻辑

逻辑是 true 或 false。

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

十、PHP数组

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

$arr = array('hello','hi','world')
 for($i =0;i<count($arr);$i++){
     echo $arr[$i].'<br>';
 }

<?php 
$cars=array("Volvo","BMW","SAAB");
var_dump($cars);
?>

十一、PHP与前端交互（重点）

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

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

<?php
   header('Content-type:text/html;charset=utf-8');
   $nick = $_GET['name'];
?>

六、数据库

一、数据库的概念

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

库：仓库

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

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

每个字段的数据类型：

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

二、常见的数据库

关系型数据库

oracle、mysql、SQLServer、DB2、sybase

非关系型数据库

Redis、HBAse、CouchDb、MongoDB

三、MySQL的使用

使用工具：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'

四、创建数据库和表

练习：

五、PHP连接MySql

一、连接数据库：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.'<br>'.mysqli_error($conn)
}

mysqli_num_rows()表示影响行的个数

$rowCount = mysqli_num_rows($result);

if ($rowCount==0) {
   
    echo '登录失败，用户名或者密码错误';
}else{
   
     echo '<script>location.href="http://www.baidu.com"</script>';
} 

三、查询：

$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 '<script>location.href="http://www.baidu.com"</script>';
}else{
   
    echo '用户或者密码错误';
}

day02-AJAX

一、AJAX的概念和优势：

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

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

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

网站欣赏：

http://www.baidu.com

https://juejin.cn/backend

http://www.toutiao.com

二、同步交互和异步交互

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

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

三、XMLHttpRequest

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

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

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

XMLHttpRequest的属性

属性名	备注
onreadystatechange	当每次状态改变所触发事件处理程序（会4次）
readyState	请求状态码。
responseText	从服务器端返回的数据的字符串形式
status	请求的响应状态。404(未找到) 200(就绪)

属性解读：

在客户端与服务器的通信过程中，
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 服务器遇到错误，无法完成请求

四、编写AJAX的步骤：

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请求和post请求的区别

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

?>

day03-cookie

一、回调函数

​ 一个函数被作为参数传递给另一个函数。函数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);        
})

二、ajax的封装

封装的原则：

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

有些用户想后期这么调用

$.ajax({
   
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
   
     alert( "Data Saved: " + msg );
   }
});


或者说：

$.ajax({
   
   type: "POST",
   url: "some.php",
   data: {
   name:'张三',age:18},
   success: function(msg){
   
     alert( "Data Saved: " + msg );
   }
});

function $ajax(options) {
   
    // 1. 创建xhr对象  XMLHTTPRequset
    let xhr = new XMLHttpRequest();
    let params = formdata(options