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.2 小数1.3 布尔类型1.4 字符串
-
复合数据类型2.1 数组类型2.2 对象类型
-
特殊数据类型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