Web/06-JavaScript异步编程:Ajax和Promise/00-服务器分类及PHP入门.md
2021-07-29 11:08:52 +08:00

951 lines
21 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 00-服务器分类及PHP入门
publish: true
---
<ArticleTopAd></ArticleTopAd>
## C/S架构和B/S架构
### C/S架构
是Client/Server这两个单词的首字母指的是客户端服务器
优点:
- 性能较高可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可
- 界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果
缺点:
- 更新软件如果有新的功能就要推出新的版本
- 不同设备访问如果使用其他的电脑没有安装客户端的话就无法登陆软件
### B/S架构
是Browser/Server的这两个单词的首字母指的是浏览器服务器是WEB兴起之后的一种架构
现在所有的网站都是B/S架构较为常见的例子有百度知乎网易云音乐Web等等只需要通过浏览器即可使用.
优点
- 更新简洁如果需要更新内容了,对开发人员而言需要更改服务器的内容对用户而言只需要刷新浏览器即可
- 多设备同步所有数据都在网上,只要能够使用浏览器即可登录使用
缺点:
- 性能较低相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小
- 浏览器兼容处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一移动设备兼容性较好ie6已经越来越少人用了
## 服务器分类
项目开发时有三套环境
- Development 开发环境
- Test 测试环境
- Production 生产环境
程序员平时干活儿用开发环境开发完成后部署到测试环境测试完成后产品上线部署到生产环境
三套环境意味着三个服务器
### 服务器类型
按类型分
- 文件服务器
- 数据库服务器
- 邮件服务器
- Web 服务器等
按软件分
- Apache 服务器
- Nginx 服务器
- IIS 服务器
- Tomcat 服务器
- Node 服务器等
按操作系统分
- Linux服务器
- Windows服务器等
### 服务器软件
提供了某种服务的计算器我们称之为服务器那么这些赋予计算器各种服务功能的软件主要有哪一些呢
常见的服务器软件有
- 文件服务器Server-UFileZillaVsFTP等
- 数据库服务器OracleMySQLPostgreSQLMSSQL等
- 邮件服务器PostfixSendmail等
- HTTP 服务器Apache免费开源NginxIIS微软的.net服务器Tomcatjava编程的服务器NodeJS
## 使用 WampServer 搭建 HTTP服务
### 集成环境的分类
- AMPApache + Mysql + PHP
- WAMPwindows + Apache + Mysql + PHP
- XAMPPWAMP 是针对windows的 XAMPP 可以安装在LinuxWindowsMacOSSolaris这些操作系统上面
在windows平台下如果想要一步到位安装好这些软件可是使用软件 **WampServer**
### WampServer 的安装
WampServer [官网](http://www.wampserver.com/en/)下载软件。
![](http://img.smyhvae.com/20180227_1936.png)
安装完成后进行安装
### 测试访问
打开浏览器输入 `127.0.0.1` 查看显示的内容如果是第一次安装默认显示的应该是如下图片
![](http://img.smyhvae.com/20180227_2203.png)
127.0.0.1 是回送地址指本地机一般用来测试使用如果想要让其他电脑也能够访问需要进行如下配置
1关闭防火墙
![](http://img.smyhvae.com/20180227_2207.gif)
2修改httpd.conf文件
因为 Apache 的配置默认不允许外部访问我们需要修改配置
打开文件`c:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf`通过搜索功能找到`onlineoffline tag - don't remove`这句话在第234行的 `Allow from 127.0.0.1`的下面加一行`Allow from all`
然后将第192行的`Deny from all`改为`Allow from all`
保存然后重启 wamp 即可
### 配置网站根目录
网站的根目录默认是在`D:\wamp\www`如果想修改这个根目录可以这样改
打开 Apache的配置文件 `D:\wamp\bin\apache\Apache2.2.21\conf\http.conf`如果是初次安装找到178行的`DocumentRoot "d:/wamp/www/"`以及205行的`<Directory "d:/wamp/www/">`改这两个位置的路径即可我们可以通过搜索关键字`documentRoot`来定位
## 静态网站和动态网站
静态网站
- 访问的是实实在在保存在服务器上的文件静态资源包括html页面css文件js文件图片等
- 当内容图片界面需要更新时直接修改.html文件
动态网站
- 当用户访问网站时根据`某些逻辑`,动态生成对应的`HTML、CSS、JS`代码给用户这也就是web服务器开发的本质
- 通过某种手段当有新的消息时**自动**的完成网站的更新
总结
由于静态网站在维护的局限性所以产生了动态网站
实现动态网站的技术php/jsp/.net/python等
动态网站的原理浏览器请求动态网站的页面比如*.phpphp拼接数据并动态生成html页面然后将新生成的页面返回给浏览器
php 之所以被称为最好的语言是因为基本上我们能够想到的功能它都帮助我们封装成了方法十分方便
## PHP的常见语法
**PHP代码执行方式**
- 在服务器端执行然后返回给用户结果如果直接使用浏览器打开就会解析为文本
- 意思是说需要浏览器通过 http请求才能够执行php页面
这里只列举常用的PHP语法更为详细的语法教程可以查阅 [api 文档](http://www.w3school.com.cn/php/index.asp)。
### 第一段 php 代码
WampServer 跑起来在D:\wamp\www下新建一个`1.php`文件代码如下
1.php
```
<?php
echo "hello smyhvae";
?>
```
在浏览器中输入`http://127.0.0.1/2018-02-28/1.php`效果如下
![](http://img.smyhvae.com/20180228_0910.png)
**代码的编写位置**
上方代码中注意php语言的格式第一行和第三行的格式中没有空格代码的编写位置在`<?php 代码写在这里?>`
### 注释
php 注释的写法跟 js 一致
```
<?php
//这是单行注释
/*
这是多行注释
*/
?>
```
### 变量
- 变量以`$`符号开头其后是变量的名称大小写敏感
- 变量名称必须以字母或下划线开头
举例
```
$a1;
$_abc;
```
### 数据类型
PHP支持的数据类型包括
- 字符串
- 整数
- 浮点数
- 布尔
- 数组
- 对象
- NULLL
定义字符串时需要注意
- 单引号`` 内部的内容只是作为字符串
- 双引号"" 如果内部是PHP的变量,那么会将该变量的值解析如果内部是html代码也会解析成html
说白了单引号里的内容一定是字符串双引号里的内容可能会进行解析
```
echo "<input type=`button` value=`smyhvae`>";
```
上面这个语句就被会解析成按钮
```
// 字符串
$str = '123';
// 字符串拼接
$str2 = '123'.'哈哈哈';
// 整数
$numA = 1; //正数
$numB = -2;//负数
// 浮点数
$x = 1.1;
// 布尔
$a = true;
$b = false;
// 普通数组:数组中可以放 数字、字符串、布尔值等,不限制类型。
$arr1 = array('123', 123);
echo $arr1[0];
// 关系型数组类似于json格式
$arr2 = $array(`name`=>`smyhvae`, `age`=>`26`);
echo $arr2[`name`]; //获取时,通过 key 来获取
```
上方代码中注意php 中字符串拼接的方式是 `.`要注意哦
### 运算符
PHP 中的运算符跟 JavaScript 中的基本一致用法也基本一致
- 算数运算符`+``-``/``*``%`
- 赋值运算符`x = y``x += y`,`x -= y`
举例
```php
<?php
$x = 10;
$y = 6;
echo ($x + $y); // 输出 16
echo ($x - $y); // 输出 4
echo ($x * $y); // 输出 60
echo ($x / $y); // 输出 1.6666666666667
echo ($x % $y); // 输出 4
?>
```
### 函数的定义
语法格式
```php
function functionName() {
//这里写代码
}
```
1有参数无返回值的函数
```php
function sayName($name){
echo $name.'你好哦';
}
// 调用
sayName('smyhvae');
```
2有参数参数有默认值的函数
```php
function sayFood($food='西兰花'){
echo $food.'好吃';
}
// 调用
sayFood('西葫芦');// 如果传入参数,就使用传入的参数
sayFood();// 如果不传入参数,直接使用默认值
```
3有参数有返回值的函数
```php
function sum($a,$b){
return $a+$b
}
sum(1,2);// 返回值为1+2 = 3
```
### 类和对象
PHP中允许使用对象这种**自定义**的数据类型必须先声明实例化之后才能够使用
定义最基础的类
```php
class Fox{
public $name = 'itcast';
public $age = 10;
}
$fox = new $fox;
// 对象属性取值
$name = $fox->name;
// 对象属性赋值
$fox->name = '小狐狸';
```
带构造函数的类
```php
class fox{
// 私有属性,外部无法访问
var $name = '小狐狸';
// 定义方法 用来获取属性
function Name(){
return $this->name;
}
// 构造函数,可以传入参数
function fox($name){
$this->name = $name
}
}
// 定义了构造函数 需要使用构造函数初始化对象
$fox = new fox('小狐狸');
// 调用对象方法,获取对象名
$foxName = $fox->Name();
```
### 内容输出
- `echo`输出字符串
- `print_r()`输出复杂数据类型比如数组对象
- `var_dump()`输出详细信息
```php
$arr =array(1,2,'123');
echo'123';
//结果123
print_r($arr);
//结果Array ( [0] => 1 [1] => 2 [2] => 123 )
var_dump($arr);
/* 结果:
array
0 => int 1
1 => int 2
2 => string '123' (length=3)
*/
```
### 循环语句
这里只列举了`foreach``for`循环
for 循环
```php
for ($x=0; $x<=10; $x++) {
echo "数字是:$x <br>";
}
```
foreach 循环
```php
$colors = array("red","green","blue","yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
```
上方代码中参数一循环的对象参数二将对象的值挨个取出直到最后
如果循环的是对象输出的是对象的属性的值
输出结果
```bash
red
green
blue
yellow
```
## php中的header()函数
浏览器访问http服务器接收到响应时会根据响应**报文头**的内容进行一些具体的操作在php中我们可以根据 **header** 来设置这些内容
**header()函数的作用**用来向客户端(浏览器)发送报头直接写在php代码的第一行就行
下面列举几个常见的 header函数
1设置编码格式
```php
header('content-type:text/html; charset= utf-8');
```
例如
```php
<?php
header('content-type:text/html; charset= utf-8');
echo "我的第一段 PHP 脚本";
?>
```
2设置页面跳转
```php
header('location:http://www.baidu.com');
```
设置页面刷新的间隔
```php
header('refresh:3; url=http://www.xiaomi.com');
```
## php中的 get 请求和 post 请求
### get 请求
可以通过`$_GET`对象来获取
**举例**下面是一个简单的表单代码通过 get 请求将数据提交到01.php
1index.html:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 通过 get 请求,将表单提交到 php 页面中 -->
<form action="01.php" method="get">
<label for="">姓名:
<input type="text" name="userName"></label>
<br/>
<label for="">邮箱:
<input type="text" name="userEmail"></label>
<br/>
<input type="submit" name="">
</form>
</body>
</html>
```
201.php
```php
<?php
header('content-type:text/html; charset= utf-8');
echo "<h1>php 的get 请求演示</h1>";
echo '用户名:'.$_GET['userName'];
echo '<br/>';
echo '邮箱:'.$_GET['userEmail'];
?>
```
上方代码可以看出`$_GET`是关系型数组可以通过 **$_GET[`key`]**获取值这里的 key form 标签中表单元素的 name 属性的值
效果
![](http://img.smyhvae.com/20180228_1140.gif)
### post 请求
可以通过`$_POST`对象来获取
**举例**下面是一个简单的表单代码通过 post 请求将数据提交到02.php
1index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 通过 post 请求,将表单提交到 php 页面中 -->
<form action="02.php" method="post" >
<label for="">姓名:
<input type="text" name= "userName"></label>
<br/>
<label for="">邮箱:
<input type="text" name= "userEmail"></label>
<br/>
<input type="submit" name="">
</form>
</body>
</html>
```
202.php
```php
<?php
header('content-type:text/html; charset= utf-8');
echo "<h1>php 的 post 请求演示</h1>";
echo '用户名:'.$_POST['userName'];
echo '<br/>';
echo '邮箱:'.$_POST['userEmail'];
?>
```
上方代码可以看出`$_POST`是关系型数组可以通过 **$_POST[`key`]**获取值这里的 key form 标签中表单元素的 name 属性的值
效果演示
![](http://img.smyhvae.com/20180228_1145.gif)
实际开发中可能不会单独写一个php文件常见的做法是 html 文件中嵌入 php 的代码
比如说原本 html 中有个 li 标签是存放用户名的
```html
<li>smyhvae</li>
```
嵌入 php后用户名就变成了动态获取的
```php
<li><?php
echo $_POST[`userName`]
?></li>
```
## php 中文件相关的操作
### 文件上传 `$_FILES`
上传文件时需要在html代码中进行如下设置
1在html表单中设置`enctype="multipart/form-data"`该值是必须的
2只能用 post 方式获取
代码如下
1index.html:
```html
<form action="03-fileUpdate.php" method="post" enctype="multipart/form-data">
<label for="">照片:
<input type="file" name = "picture" multiple=""></label>
<br/>
<input type="submit" name="">
</form>
```
2 php 文件中打印 file 的具体内容
```php
<?php
sleep(5);// 让服务器休息一会
print_r($_FILES); //打印 file 的具体内容
?>
```
演示效果
![](http://img.smyhvae.com/20180228_php_post_file.gif)
上方现象可以看出
- 点击提交后服务器没有立即出现反应,而是休息了一会`sleep(5)`
- `wamp/tmp`目录下面出现了一个`.tmp`文件
- .tmp文件一会就被自动删除了
- 服务器返回的内容中有文件的名字`[name] => computer.png`以及上传文件保存的位置`D:\wamp\tmp\php3D70.tmp`服务器返回的内容如下
```bash
Array ( [upFile] => Array ( [name] => yangyang.jpg [type] => image/jpeg [tmp_name] => D:\wamp\tmp\phpCC56.tmp [error] => 0 [size] => 18145 ) )
```
### 文件保存
我们尝试一下把上面的例子中的`临时目录`下面的文件保存起来这里需要用到 php 里的 `move_uploaded_file()`函数[#](http://www.w3school.com.cn/php/func_filesystem_move_uploaded_file.asp)
格式如下
```php
move_uploaded_file($_FILES['photo']['tmp_name'], './images/test.jpg');
```
参数解释参数一移动的文件参数二目标路径
1index.html这部分的代码保持不变
```php
<form action="03.fileUpdate.php" method="post" enctype="multipart/form-data">
<label for="">照片:
<input type="file" name = "picture" multiple=""></label>
<br/>
<input type="submit" name="">
</form>
```
2PHP代码
暂略
### WampServer 中修改上传文件的大小
1打开 WampServer的文件`php.ini`
![](http://img.smyhvae.com/20180228_1454.png)
2修改`php.ini`中的如下内容
设置文件最大上传限制值的大小可以根据需求修改
```php
file_uploads = On; 是否允许上传文件 On/Off 默认是On
upload_max_filesize = 32M; 设置 上传文件的最大限制
post_max_size = 32M; 设置 通过Post提交的最多数据
```
考虑网络传输快慢这里修改一些参数
```php
max_execution_time = 30000 ; 脚本最长的执行时间 单位为秒
max_input_time = 600 ; 接收提交的数据的时间限制 单位为秒
memory_limit = 1024M ; 最大的内存消耗
```
## HTTP 协议
### 请求
客户端发出的请求主要由三个组成部分请求行请求头请求主体如下图所示
20180228_1505.jpg
**1请求行**
- 请求方法GET or POST
- 请求URL
- HTTP协议版本
**2请求头**
常见的请求头如下
```bash
User-Agent浏览器的具体类型  User-AgentMozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0
Accept浏览器支持哪些数据类型  Accept: text/html,application/xhtml+xml,application/xml;q=0.9;
Accept-Charset浏览器采用的是哪种编码  Accept-Charset: ISO-8859-1
Accept-Encoding浏览器支持解码的数据压缩格式  Accept-Encoding: gzip, deflate
Accept-Language浏览器的语言环境  Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Host请求的主机名允许多个域名同处一个IP地址即虚拟主机。Host:www.baidu.com
Connection表示是否需要持久连接。
属性值可以是Keep-Alive/closeHTTP1.1默认是持久连接它可以利用持久连接的优点当页面包含多个元素时例如Applet图片显著地减少下载所需要的时间。
要实现这一点Servlet需要在应答中发送一个Content-Length头最简单的实现方法是先把内容写入ByteArrayOutputStream然后在正式写出内容之前计算它的大小。如Connection: Keep-Alive
Content-Length表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
Content-TypeWEB服务器告诉浏览器自己响应的对象的类型和字符集。例如Content-Type: text/html; charset='gb2312'
Content-EncodingWEB服务器表明自己使用了什么压缩方法gzipdeflate压缩响应中的对象。例如Content-Encodinggzip
Content-LanguageWEB服务器告诉浏览器自己响应的对象的语言。
Cookie最常用的请求头浏览器每次都会将cookie发送到服务器上允许服务器在客户端存储少量数据。
Referer包含一个URL用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/
```
**3请求体**
指的是提交给服务器的数据
需要注意的是如果是往服务器提交数据需要在请求头中设置`Content-Type: application/x-www-form-urlencoded`(在ajax中需要手动设置)
### 响应
响应报文是服务器返回给客户端的组成部分有响应行响应头响应主体
![](http://img.smyhvae.com/20180228_1510.jpg)
**1状态行**
HTTP响应行主要是设置响应状态等信息
**2响应头**
Cookie缓存等信息就是在响应头的属性中设置的
常见的响应头如下
```bash
Cache-Control
响应输出到客户端后,服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
下面的设置让客户端对响应内容缓存3600秒也即在3600秒内如果客户再次访问该资源直接从客户端的缓存中返回内容给客户不要再从服务端获取当然这个功能是靠客户端实现的服务端只是通过这个属性提示客户端“应该这么做”做不做还是决定于客户端如果是自己宣称支持HTTP的客户端则就应该这样实现
Cache-Control: max-age=3600
ETag
一个代表响应服务端资源如页面版本的报文头属性如果某个服务端资源发生变化了这个ETag就会相应发生变化。它是Cache-Control的有益补充可以让客户端“更智能”地处理什么时候要从服务端取资源什么时候可以直接从缓存中返回响应。
ETag: "737060cd8c284d8af7ad3082f209582d"
Location
我们在Asp.net中让页面Redirect到一个某个A页面中其实是让客户端再发一个请求到A页面这个需要Redirect到的A页面的URL其实就是通过响应报文头的Location属性告知客户端的如下的报文头属性将使客户端redirect到iteye的首页中
Location: http://www.google.com.hk
Set-Cookie
服务端可以设置客户端的Cookie其原理就是通过这个响应报文头属性实现的。
Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
```
**3HTTP响应体**
如果请求的是HTML页面那么返回的就是HTML代码如果是JS就是JS代码
### 抓包工具
常见的抓包工具有FiddlerCharles
```php
```
```php
```
```php
```
```php
```