P2-2笔记

day21(5-1)

AJAX铺垫

协议名,主机名,端口号
  • http://www.baidu.com:80
    协议名://主机名(域名或IP地址):端口号
当在浏览器上输入完地址后到看到页面这中间网络上都发生了些什么
  • DNS解析(将域名转换为IP地址的过程)
  • 向服务器发送一次HTTP请求(要一个东西)
  • 服务器会在它的磁盘上找个一个对应的文件给到客户端,如果没有,则返回首页给客户机(一般来说是.html,.jpg.png.css.js等等)
  • 浏览器将根据已接收的文件将代码或图片解析成可见的页面。
HTTP协议
  • 无状态(第一次请求和下一次请求之间是没有任何关系的)。
  • 服务器端不允许主动向客户端进行推送。
  • 常常用在Web数据传输。
    **ps:新版的http协议1.是有关系的2.允许—目前还未开始大规模使用
phpnow开发集成套件
  • 包括PHP MYSQL Apache(WebService类软件)
抓包工具
  • header 请求头—2.3开头是成功—4.5开头是失败
    • 1**信息,服务器收到请求,需要请求者继续执行操作
    • 2**成功,操作被成功接收并处理
    • 3**重定向,需要进一步的操作以完成请求
    • 4**客户端错误,请求包含语法错误或无法完成请求
    • 5**服务器错误,服务器在处理请求的过程中发生了错误
  • Response 响应
    • 服务器段响应,返回的内容

ajax(http脚本化)

ajax:四步走(使用javascript来操作http请求)

	// 1.实例化一个XMLHttpReuqest()对象
	let http = new XMLHttpRequest()
	// 2.规划请求open
	http.open("get","http://xxx.xxx.xxx.xxx/xxxx.xxx",true);
	//http.open("get","http://10.35.161.142/文件夹名",true/false)
	// 3.发送请求send
	http.send()
	// 4.接收服务器端的相应应答
	http.onreadystatechange = function(){
    
    
		if(http.readyState === 4){
    
    
			http.responseText
		}
	}
2.规划一个http请求

http.open(method,url,async)

  • method:“get” “post”
  • url:在请求时发送请求参数
    • http://10.35.161.142/xxxx.php(后端文件名)?参数名=参数值&参数名=参数值&参数名=参数值…
    • http.open(“get”,“http://10.35.161.142/message.php?name=wangdawei&age=18&sex=1”);
  • async:(false同步) (tyue异步)默认异步
    • 异步:可以同时干两件或以上的事情
    • 同步:只能干一件事,卡死在收到命令时,执行完此步才能执行其他
返回结果:一般得到的是静态数据,想得到后端动态返回的数据,在发送请求时发送请求参数
  • http.open(“get”,“http://10.35.161.142/data.php?sex=0&age=” + o.value,true);
  • http.open(“get”, “http://10.35.161.142/name.php?name=” + this.value);
  • http.open(“get”, “http://10.35.161.167/w-2-2/21/name.php?name=” + this.value);
  • 请求参数中的文件(php语法-了解)
    • 1.data.php
      <?php	
      if($_GET["sex"] === "1"){
              
              
      	$sex="男";	
      }	
      if($_GET["sex"] === "0"){
              
              
      	$sex="女";	
      }	
      $age=$_GET["age"];
        echo "姓名:郝刚,性别:".$sex.",年龄:".$age;
      ?>
      
    • 2.name.php可在day21中得到

day22(5-2)

Mysql

介绍数据库
  • 关系型:mysql sqlserver Oracle(面向企业,且收费–容灾性强)
  • 非关系型:mongodb
数据库的结构关系
  • 库>表>字段(列)>数据(行)
  • 注意点:utf8
  • 数据库中表的设计原则
    • 1.任何表都应该有一个id字段,并且该字段的值是唯一的,并且该字段应是该表中的主键。
数据类型
  • int 整型(整数数字)
  • float 浮点型(小数)
  • varchar 字符型(字符串)
  • date 日期(YYYY-MM-DD)
  • datetime 日期时间(YYYY-MM-DD HH:MM:SS)

SQL语句

  <!-- 查数据表内所有数据 -->
	SELECT * FROM 表名 
	<!-- 查根据条件查询数据 -->
	SELECT * FROM 表名 WHERE 字段名=某值
	SELECT * FROM 表名 WHERE 字段名=某值 AND 字段名=某值
	SELECT * FROM 表名 WHERE 字段名=某值 OR 字段名=某值
	
  <!-- 根据某个字段名进行排序 -->
	SELECT * FROM 表名 ORDER BY 字段名 
	<!-- 根据某个字段名进行反向排序 -->
	SELECT * FROM 表名 ORDER BY 字段名 DESC
	
	
  <!-- 删除表内所有数据 -->
	DELETE FROM 表名
	<!-- 查根据条件删除数据 -->
	DELETE FROM 表名 WHERE 字段名=某值
	
  <!--增  插入新数据 -->
	INSERT INTO 表名 (字段名1,字段名2,字段名3,....) VALUES (1,2,3,.....)
	
	<!-- 根据条件修改数据 -->
	UPDATE 表名 SET 字段名="新值" WHERE 字段名="某值"
	UPDATE 表名 SET 字段名="新值",字段名="新值" WHERE 字段名="某值"

JSON:前后端交换数据的一种格式

JSON的类型

  • JSON字符串:往往都是在后端向前端发送数据时传输的格式。
  • JSON对象:往往都是前端希望得到的。数据或对象或它们之间的嵌套。

JSON类型的相互转换

  • JSON.parse(JSON格式的字符串):正解析,将JSON字符串转换为JSON对象,没有副作用。
  • JSON.stringify(JSON对象):反解析,将JSON对象转换为JSON字符串,没有副作用。

PHP后端交互式给前端返回代码(了解)

<?php
	header("Content-Type:text/html;charset=utf-8");
	$con = mysql_connect("localhost","root","123456");
	if (!$con){
    
    
		die('Could not connect: ' . mysql_error());
	}
	else{
    
    
		mysql_select_db("school",$con);
		mysql_query("set character set 'utf8'");//读库 
		mysql_query("set names 'utf8'");//写库
		$name = $_GET["name"];
		$result = mysql_query('SELECT * FROM students WHERE name="'.$name.'"');
		// $result : PHP世界里的关联数据(一朵奇葩)
		// 将$result变成前端所认识的数组或者是对象(JSON字符串)

		$response = "[";
		while($row = mysql_fetch_array($result)){
    
    
			$response = $response.'{'.'"id":'.$row["id"].''.','.'"name":"'.$row["name"].'"'.','.'"sex":'.$row["sex"].''.','.'"city":"'.$row["city"].'"'.','.'"age":'.$row["age"].''.'},';
		}
		$response = substr($response,0,strlen($response)-1)."]";

		if(strlen($response) === 1){
    
    
			echo "[]";
		}
		else{
    
    
			echo $response;
		}
	}
?>

案列

  • 前后端交互案例
    ajax发送查询请求,后端使用PHP查库返回信息(学生信息查询)

day23(5-3)0107

浏览器的 同源组策略

  • 浏览器安全防护的一种机制,它规定:Ajax请求地址与当前页面的地址必须得是同协议,同主机,同端口才可以正常发送Ajax请求,这三者有任何一个不一样,则判定此次请求是跨域请求浏览器会阻止跨域请求行为
  • 浏览器安全防护的一种机制,它规定:一个来自某个服务器的静态文件不允许向另外一台跨域服务器发送Ajax请求。只有主机名,协议名,端口号三者都一致的情况下才会被视作是同域(或一台服务器),只要三者有任何一个不一样,则判定此次请求是跨域请求,那么这个Ajax请求就会被同源组策略所阻止。
为什么要解决跨域请求
  • 浏览器同源组策略,会阻止跨域请求行为。为了实现功能,要绕过同源组策略
解决跨域请求的方法
    1. CORS(后端独立解决)
    1. 服务器反向代理(后端独立解决)
    1. JSONP(前后端协作)
ajxs发送请求,后端返回的是json字符串,需要转成json对象使用----jsonp发送的请求,返回的是json对象

JSONP的工作机制

  • 一种解决跨域问题的方法(不是一套标准技术)。

  • 工作机制第一种表述:前端利用动态创建一个script标签利用它的src属性向服务器发送一次HTTP请求,并提前声明好一个回调函数,回调函数的函数名利用callback请求参数传递给后端后端接收到来自前端的请求后,获取callback请求的请求参数并拼接一个调用函数的JS代码段并将要返回给前端的数据以实参的形式存在前端接收到来自后端的响应后,会将后端的返回内容当做JS代码来执行即调用一个函数,并用一个形参来接收后端要传递过来的数据

  • 工作机制第二种表述:前端利用动态创建一个script标签利用它的src属性向后端发送一个HTTP请求,并且提前准备好一个回调函数,回调函数的函数名利用callback请求参数传递给后端。后端接收到来自前端发送请求后,拆解出callback参数的参数值并且以此为函数名拼接一段执行调用函数的JS代码段返回给前端并把数据当做这个函数的实参一并发送前端接收到执行函数的代码段后会自动调用之前声明的回调函数,回调函数中的形参就代表后端返回的数据(形参接收后端要传递过来的数据)。

JSONP的代码

// 回调函数(为全局函数):当成功接收到来自后端的响应之后会自动调用这个函数,并且该函数中的形参就代表了
//后端要返回的数据,**后端传入实参:是json对象**
function jsonpcallback(data){
    
    
	console.log(data[0])	
}
//事件
query.onclick = function(){
    
    
	//1.动态创建script标签
	let script = document.createElement('script');
	//自定义一个属性(属性,属性值),请求放入属性值中,函数名通过属性值中网址的参数发送到后端
	script.setAttribute('src',"http://10.35.161.142/data.php?callback=jsonpcallback&name="+queryname.value)
	//插入动态创建的元素
	$("body").appendChild(script)
}

案例

  • 天气预报(接口yiketianqi.com)

day24(5-4)0108

省市区三级联动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select name="" id="province">
	</select>
	<select name="" id="city">
	</select>
	<select name="" id="area">
	</select>

	<script src="machine.js"></script>
	<script src="citys.js"></script>
	<script>
		let province = $("#province");
		let city = $("#city");
		let area = $("#area");
		// 初始化省份数据
		citys.forEach(item=>{
     
     
			let option = document.createElement("option");
			option.innerHTML = item.provinceName;
			province.appendChild(option)
		})
		// 更新城市数据
		function updateCity(index){
     
     
			var index = index || 0;
			city.innerHTML = "";
			citys[index].mallCityList.forEach(item=>{
     
     
				let option = document.createElement("option");
				option.innerHTML = item.cityName;
				city.appendChild(option)
			})
		}
		// 更新区数据
		function updateArea(provinceIndex,cityIndex){
     
     
			area.innerHTML = "";
			citys[provinceIndex].mallCityList[cityIndex].mallAreaList.forEach(item=>{
     
     
				let option = document.createElement("option");
				option.innerHTML = item.areaName;
				area.appendChild(option)
			})
		}
		updateCity(0)
		updateArea(0,0)
		// onchange事件当值发生改变的时候触发的事件
		// 只属于文本框,密码框,文本域与下拉选择菜单
		// selectedIndex属性:下拉选择菜单的Node节点独有的属性
		// 代表当前选择的选择项相对于其他选择项所处的下标
		province.onchange = function(){
     
     
			updateCity(this.selectedIndex)
			updateArea(this.selectedIndex,city.selectedIndex)
		}
		city.onchange = function(){
     
     
			updateArea(province.selectedIndex,this.selectedIndex)
		}
	</script>
</body>
</html>

Cookie–本地存储

写cookie

	// 写cookie
	function setCookie(key,value,expires){
    
    
		if (typeof expires === "number") {
    
    
            let date = new Date();
            date.setDate(date.getDate() + expires)
            document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      date}`;
        } else {
    
    
            let d = new Date(expires);
            document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      d}`;
        }
	}

读cookie

function getCookie(key){
    
    
		let cookie = document.cookie;
		let arr = cookie.split("; ");
		let result = {
    
    }
		arr.forEach(item=>{
    
    
			let key = item.split("=")[0];
			let value = item.split("=")[1];
			result[key] = value;
		})

		if(key){
    
    
			return result[key];
		}
		return result;
	}

删cookie(把储存的到期时间设置成过去的某天)

function removeCookie(key){
    
    
	let guoqu = new Date("1970-01-01 00:00:00")
	if(key){
    
    
		document.cookie = `${
      
      key}=beybey;expires=${
      
      guoqu}`
	}
	else{
    
    
		let cookie = getCookie();

		for(let i in cookie){
    
    
			document.cookie = `${
      
      i}=beybey;expires=${
      
      guoqu}`
		}
	}
}

cookie的写读删封装

let cookie = {
    
    
    // 写入/修改cookie
    set(key, value, expires) {
    
    
        if (typeof expires === "number") {
    
    
            let date = new Date();
            date.setDate(date.getDate() + expires)
            document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      date}`;
        } else {
    
    
            let d = new Date(expires);
            document.cookie = `${
      
      key}=${
      
      value};expires=${
      
      d}`;
            //  }
        }
    },
    // 读取cookie
    get(key) {
    
    
        let arr = document.cookie.split("; ")
        var result = {
    
    }
        arr.forEach(item => {
    
    
            let key = item.split("=")[0];
            let value = item.split("=")[1];
            result[key] = value;
        })
        return key ? result[key] : result;
    },
    // 删除cookie
    remove(key) {
    
    
        if (this.get(key)) {
    
    
            document.cookie = key + "=18;expires=" + new Date('1999-09-09');
            return true;
        } else {
    
    
            return false;
        }
    }
}

案例

  • 省市区三级联动
  • 天气预报接入省市区三级联动(接口yiketianqi.com)
  • 30天内免登录页面
  • todulist持久化存储

day25(6-1)

jquery

jQuery对象下的方法

  • addClass() 追加类名,不会抹掉原有,而是追加在后面
  • removeClass()删除类名,如果有则会删除,如果没有不会进行任何操作
  • toggleClass()追加/删除类名,自动
  • hasClass() 检测是否含有传入类名,返回布尔值
    +++++++++++++++++++++++++++++
  • html() 设置/获取元素的开始标签与结束标签之间的内容
  • val() 设置/获取元素的value属性的属性值
  • attr() 设置/获取元素的行内属性
    +++++++++++++++++++++++++++++
    操控元素行内属性display
  • show()显示
  • hide()隐藏
  • toggle()显示/隐藏
    +++++++++++++++++++++++++++++
    动态操作元素opacity行内属性
  • fadeIn(速率(“fast” | “slow” | Number毫秒数),回调)淡入
  • fadeOut()淡出
  • fadeToggle()淡出/淡入
    +++++++++++++++++++++++++++++
    动态操控元素行内属性{padding;height}
  • slideDown()下拉
  • slideUp()收起
  • slideToggle()下拉/收起
    +++++++++++++++++++++++++++++
  • css({}) css(“css属性名”) 设置/获取元素的行内样式
  • animate({},执行时间,回调) 设置/获取元素的行内样式并执行动画
    +++++++++++++++++++++++++++++
  • closest(“css选择器”) 从调用方法的元素为起始位置,逐层向上寻找祖先级元素,直到找到第一个与css选择器相匹配的祖先级元素为止,并将其返回。
  • find(“css选择器”) 从调用方法的元素为起始位置,寻找与css选择器相匹配的所有的子孙级元素.
    +++++++++++++++++++++++++++++
  • clone(true/false) 克隆元素,可以连同事件一块儿克隆
  • append()插入到元素 ul.append(“li”)
  • appendTo()插入到元素开始标签后面
  • prepend()插入到元素开始标签后面
  • prependTo()插入到元素开始标签后面
  • after()插入到元素后面当作下一个兄弟节点
  • before()插入到元素前面当作上一个兄弟节点
    +++++++++++++++++++++++++++++
  • width() 获取宽高
    • $(".div1").width()
  • innerWidth() 获取宽高+内填充
    • $(".div1").innerWidth()
  • outerWidth() 获取宽高+内填充+外边框
    • $(".div1").outerWidth()
  • 获取页面宽高
    • $(document).width()
    • $(document).height()
  • each(function(index,node){}) 用于枚举jQuery对象

jquery绑定事件的方法

jQuery对象.去on的事件名(function(){
    
    
		// 事件处理函数
		// this 原生JS对象
		this
	})

案例

  • jquery版轮播图
  • jquery游戏列表
  • jquery航班表

day26(6-2)

jquery版的ajax请求和JSONP请求

jquery版的ajax请求

//原生ajax
let http = new XMLHttpRequest();
http.open('get',"http://10.35.161.142/dataOrigin.php?name=王大伟");
http.send()
http.onreadystatechange = function(){
    
    
	if(http.readyState === 4){
    
    
		console.log(http.responseText)
    }
}

//jQuery Ajax get版和post版
$.get("http://10.35.161.142/dataOrigin.php?name=你好",data => {
    
    
console.log(data)
})
$.post("http://10.35.161.142/dataOrigin.php?name=你好",data => {
    
    
console.log(data)
})

//代替上面两种
$("#query").click(function(){
    
    
	$.ajax({
    
    
		// 请求方式
		method:"get",
		url:"http://10.35.161.142/dataOrisdfdfgin.php",
		// 请求参数
		data:{
    
    
			name:$("#name").val(),
			age:18
		},
		// 请求成功后触发的回调函数
		success(data){
    
    
			console.log(data)
		},
		// 请求失败后触发的回调函数
		error(message){
    
    
			console.log("失败啦~")
		},
		// 同步/异步
		async:true,//false
		// 请求发送之前触发的钩子函数
		beforeSend(xhr){
    
    
			// console.log(xhr)
		},
		//缓存(默认为true),dataType为script或jsonp时默认为false,设置为false时将不缓存页面
		cache:true,
		// HTTP请求结果接收到之后触发的回调
		//无论成功失败都会返回的回调函数,一般不用 
		complete:function(a,b){
    
    
			console.log(a.responseText)
		},
	})
})

jquery版JSONP请求

//使用ajax方法发送jsonp请求
	$.ajax({
    
    
		url:"http://xxx.xxx.xxx/xx",
		dataType:"jsonp",
		success(data){
    
    
			console.log(data)
		}
	})
//例
$("#name").keyup(function(){
    
    
	$.ajax({
    
    
		// 请求方式
		// url:"http://10.35.161.142/data.php",
		url:"http://suggestion.baidu.com/su",
		//请求参数
		data:{
    
    
			wd:$("#name").val()
		},
		//方法
		dataType:"jsonp",
		//修改jsonp请求中带有函数名参数的名字(一般默认是callback) 改参数
		jsonp:"cb",
		//修改回调函数的函数名
		jsonpCallback:"xiaowang",
		//成功后返回
		success(data){
    
    
			$("#list").html("")
			data.s.forEach(item=>{
    
    
				$("#list").append($("<li></li>").html(item))
			})
		}	
	})
})

day27(6-3)

node.js(分为内置模块和第三方模块)

  • node是什么:是将chrome浏览器中的负责解析js部分的V8引擎剥离出来,做成了一个软件,以做到让我们写的JS代码脱离浏览器可以执行。这个执行环境中只有ECMAscript部分,没有DOM和BOM。
  • node如何使用:node中有很多功能,分成了若干个模块,用户可以按需使用,需要用哪个,使用commonJs写法require+"模块名"引入模块

fs (内置模块)读取和写入文件

const fs = require("fs");
//异步读取文件
fs.readFile("data.txt", (error, data) => {
    
    
    if (error) {
    
    
        console.log(error)
    } else {
    
    
        console.log(String(data))
    }
})

//同步读取
console.log(String(fs.readFileSync("data.txt")))
console.log("hello~")

//异步写入文件
fs.writeFile("data1.txt", "老王", error => {
    
    
    if (error) {
    
     console.log(error) } else {
    
    
        console.log("写入成功,嘿嘿~")
    }
})
//同步写入
fs.writeFileSync("data2.txt", "小仙(好程序员)")

第三方模块

第三方模块下载: npm install 模块名 --save 或 npm i 模块名 -S
第三方模块网站:https://www.npmjs.org
切换npm下载淘宝镜像国内下载源:npm config set registry https://registry.npm.taobao.org

express:类似于Apache软件,对外开放某一个端口提供Web服务

//express不是一个对象,而是一个方法,返回函数本身,加()直接调用
let express = require("express")();
const port = 8080;

// 计划监听来自前端的get(http)请求(不是一个静态请求,而是一个路由请求),如果请求路由正确,则自动调用第二个参数,即函数
//request:是前端的请求;response:是要返回给前端的内容
express.get("/list",(request,response)=>{
    
    
// 接收到来自前端的请求name参数,并赋值到name变量中
	let name = request.query.name;
//成功后
	// 在后端控制台输出内容
	console.log("接收到来自前端发送的请求");
	// 向前端返回数据
	response.send(`${
      
      name},success!!!!`)
})

// 监听来自前端的get请求(不是一个静态请求,而是一个路由请求)
express.get("/details",(request,response)=>{
    
    
	// 在后端控制台输出内容
	console.log("接收到来自前端发送的details路由请求");
	// 向前端返回数据
	response.send("哈哈哈哈哈")
})


// 监听在哪一个8080端口上
express.listen(port)
console.log("server is running at " + port)

解决跨域的代码(反向代理,后端独立解决,直接粘贴)

// Node解决跨域问题11
express.all("/*", function(req, res, next) {
    
    
    // 跨域处理
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next(); // 执行下一个路由
})
//或者09
express.all("*",function(req,res,next){
    
    
	//设置允许跨域的域名,*代表允许任意域名跨域
	res.header("Access-Control-Allow-Origin","*");
	//允许的header类型
	res.header("Access-Control-Allow-Headers","content-type");
	//跨域允许的请求方式 
	res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
	if (req.method.toLowerCase() == 'options')
		res.send(200);  //让options尝试请求快速结束
	else
		next();
})

node-mysql 读取数据库

mysql/express 配合使用

let mysql = require("mysql");
let express = require("express")();
const port = 8080;
// Node解决跨域问题
express.all("/*", function(req, res, next) {
    
    
    // 跨域处理
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next(); // 执行下一个路由
})
// 规划链接
let sql = mysql.createConnection({
    
    
	host     : 'localhost',
	user     : 'root',
	password : '123456',
	database : 'tech',
	timezone:"08:00",
	port:3306
});

// 尝试链接
sql.connect();
//接收来自前端的请求并查找数据库并向前端返回查找结果
express.get("/getStudentsList",(request,response)=>{
    
    
	sql.query(`SELECT * FROM students`,(error,data)=>{
    
    
		if(error){
    
    
			console.log(error);
		}
		else{
    
    
			response.send(data)
		}
	})
})

// 监听在哪一个8080端口上
express.listen(port)
console.log("server is running at " + port)

猜你喜欢

转载自blog.csdn.net/HXX548888/article/details/112546393