目录
[一、安装服务器环境 nodejs](#一、安装服务器环境 nodejs)
了解
清楚前后端交互就可以写一些后端代码了。小项目
现在写项目开发的时候都是前后端分离
之前都没有前端这个东西，2014年后有了框架，划分越来越明显。
什么叫前后端分离？
我写前面的一个网页项目叫桂花香，如果我不把桂花香这个项目代码发给你，那么你就看不到我的页面。因为没有后端服务器。
把前端代码放后端京东.com服务器上，这样大家都能请求访问。
那后端就充当服务器一个角色？后端能做的事很多，主要对数据库增删改查
这些数据都是后端返回的，不是你硬写 写死上去的。（比如我刷新抖音对应热搜就变了，刷新的时候后端再查 返回过来，前端再渲染）
推荐的东西/页面会变，这些数据都是后端去查询数据库返回到前端，前端拿到数据渲染
咋渲染到页面上？后面讲
现在的项目都是前后端分离
Fetch/XHR代表接口
接口
如果能够对接口发起请求呢？如何拿到这些数据。就是用到前后端交互
前后端交互
后端可以返回前端所需要的数据
需求：是咱们前端如何获取到这些数据 并渲染到页面上
解决：前后端交互的重点 ajax
本章讲ajax如何发起请求，获取后端数据，做前后端交互
一、安装服务器环境 nodejs
要交互就要安装服务器环境。
前端要调后端的接口。发起ajax，但是要请求服务器得去先安装服务器的环境。
nodejs 是运行服务器程序的基础，推荐16比较稳定
-
环境安装
1、安装包 下载地址：Index of /download/release/latest-v16.x/
-
双击安装即可
-
正常下一步，可以选择你想要安装的盘符目录，如果你电脑上安全软件，推荐安装到C盘
直接一直下一步 不需要修改盘符。。。自动的配置环境变量
-
-
测试是否安装成功
html
win + R 打开 dos命令窗口 输入命令
node -v
或者
node --version
如果出现版本号 就代表安装成功
如果出现"node 不是内部外部命令，，，" 没安装成功 卸载重装//或者添加环境变量看看
二、ajax前后端交互
前后端是分离的！！！
交互通过谁：ajax
前端：前端完成自己的静态页面，，页面中有很多数据，数据是后端返回的，咱们需要做的事情就是请求到后端返回的数据，，如何请求后端数据，，用到ajax
ajax
ajax全名是 async(异步) javascript and xml
ajax是前后端交互的能力
也就是我们客户端给服务器发送数据的工具，也可以接收响应的数据
这是一个默认 异步的执行机制 （ajax发起网络请求 请求是需要时间 异步的）
01-异步说明
快速判断：需要时间去等就是异步的
javascript
<script>
// 同步：排队执行 从前到后执行(比如先打哈哈哈等1s之后再打印嘿嘿嘿)
// 异步：同步的先执行，异步的后执行
setTimeout(()=>{//定时器就是一个异步操作
console.log("哈哈哈");
},1)
console.log("嘿嘿嘿");//同步的先打印
</script>ajax 优势
1、不需要第三方库 原生js直接使用
2、用户体验好（异步） 不需要刷新页面就可以更新数据，局部刷新(比如就刷新热搜排名那一块)
3、减轻服务器负担
缺点：
1、搜索引擎支排名持度不够（seo） 因为数据都不在页面上，数据都是从服务器上来的 搜索引擎搜索不到(底下来的)。
ajax发起请求
接口地址。用到服务器。
启动服务器
ajax发起请求
javascript
<script>
let btn = document.querySelector("button");
btn.onclick=function(){
let xhr = new XMLHttpRequest();//请求对象
xhr.open("get","http://localhost:8888/test/first"); //请求地址(接口）
xhr.send();
}
</script>
html
<body>
<button>发起请求</button>
<script>
let btn = document.querySelector("button");//找到网页按钮
btn.onclick=function(){
// 第一步- 创建一个xml对象
//XMLHttpRequest()是一个构造函数需要new对象
let xhr = new XMLHttpRequest();
// 第二步- 配置xhr对象
//-请求方式get/post //-请求地址
xhr.open("get","http://localhost:8888/test/first"); //http://localhost:8888/test/first 接口
// 第三步- 发起网络请求
xhr.send();
}
</script>
</body>浏览器查看发起的请求
html
通过浏览器调试查看我们发起的请求
打开控制台 -->网络（network）--> fetch/xhr 
改代码post/放弃请求，不成功? 因为接口文档用的get
不改代码/模拟一下
javascript
如何知道请求的地址 和 请求的方式呢？？
查看接口文档 （接口文档都是后端提供的）渲染响应结果
处理返回的数据渲染到页面上
javascript
<script>
let btn = document.querySelector("button");//获取按钮
let h1 = document.querySelector("h1");//渲染到h1
btn.onclick = function () {
let xhr = new XMLHttpRequest();//接口请求对象
xhr.open("get", "http://localhost:8888/test/first"); //接口地址
xhr.send();
xhr.onload = function () {
h1.innerHTML = xhr.responseText;//获取响应文本
}
}
</script>
</body>
html
<body>
<button>发起请求</button>
<h1></h1>
<script>
let btn = document.querySelector("button");
let h1 = document.querySelector("h1");
btn.onclick = function () {
let xhr = new XMLHttpRequest();
xhr.open("get", "http://localhost:8888/test/first");
xhr.send();
// 4-处理响应数据(渲染到页面上)
// 响应数据两种情况：纯字符串/json字符串
xhr.onload = function () {
h1.innerHTML = xhr.responseText;
//console.log(xhr.responseText);//打印到控制台上看获取到没有
}
}
</script>
</body>json
打印到控制台的是一堆json格式字符串，不是一个正常对象。
想把message渲染，得把json格式的字符串处理成对象。
html
<head>
</head>
<body>
<button>发起请求</button>
<h1></h1>
<script>
let btn = document.querySelector("button");
let h1 = document.querySelector("h1");
btn.onclick =function(){
let xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:8888/test/second");
xhr.send();
xhr.onload = function(){
console.log(xhr.responseText);
// 我们在进行前后端交互时 响应的数据发部分都是json格式的字符串
// 获取到之后需要通过JSON.parse()方法 把json字符串转化为一个真正的对象
h1.innerHTML = JSON.parse(xhr.responseText).message //把message渲染到页面中
}
}
</script>
</body>接口文档说
get方式传递参数
？是拼接参数，提交给后端查询参数。
get方式都是以？这种形式去拼接的。
html
<body>
<input type="text" placeholder="姓名">
<input type="text" placeholder="年龄">
<button>发起请求</button>
<h1></h1>
<script>
//js获取标签
let btn = document.querySelector("button");
let h1 = document.querySelector("h1");
let ipts = document.querySelectorAll("input");//伪数组
btn.onclick = function () {
// 1-创建xml对象
let xhr = new XMLHttpRequest()
// 2-设置xml对象
// get请求方式携带数据 数据是放到路径上的
// 格式：url?key1=value&key2=value&key3=value
// (eg:http:http://localhost:8888/test/third?name='xx'&age='xx')
// key 参数名（字段名）
// value 参数值 （字段值）
xhr.open("get",`http://localhost:8888/test/thirdname=${ipts[0].value}&age=${ipts[1].value}`);
// 3-发起请求
xhr.send();
// 4- 处理响应结果
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
</body>payload里边就是你传的参数，写啥传啥。
post方式传递参数
工作的时候铺完页面调静态接口
后面学了框架之后用别的去调接口。
参数都是用的魔发字符串动态${}
html
post请求接口时，必须设置请求头，添加一条请求头信息，这条信息是发送的数据的格式
比如：application/x-www-form-urlencoded
怎样添加 给xhr 对象添加请求头
语法：xhr.setRequestHeader("请求字段名","请求的值")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
// 注意:post 方式
// 1-必须设置请求头(发送前设置请求头)
// 2-携带的数据不能在url地址里 而是通过send（）携带数据
html
<body>
<input type="text" placeholder="姓名">
<input type="text" placeholder="年龄">
<h1></h1>
<button>发起请求</button>
<script>
let btn = document.querySelector("button");//获取
let ipts = document.querySelectorAll("input");//获取
let h1 = document.querySelector("h1");//获取
btn.onclick=function(){
// 1.xhr请求对象
let xhr = new XMLHttpRequest()
// 2-设
xhr.open("post","http://localhost:8888/test/fourth")
// 3-发
let data = `name=${ipts[0].value}&age=${ipts[1].value}`;//参数
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post设置请求头
xhr.send(data); // post通过send传参给服务器!!!
// 4.渲
xhr.onload = function(){
let data = JSON.parse(xhr.responseText);
console.log(data);
h1.innerHTML = `我的名字是${data.info.name}我的年龄是${data.info.age}`
}
}
</script>
</body>封装ajax_上
写项目就不用一直写发送请求。一个项目接口上百个。怎么办？
在开发过程中在多次使用的东西都封装成一个函数。多次去使用调用。
调用xml.send()就行了
html
<body>
<input type="text" placeholder="姓名">
<input type="text" placeholder="年龄">
<button>发起请求</button>
<script>
let btn = document.querySelector("button");
let ipts = document.querySelectorAll("input");
//post
btn.onclick = function () {
let option = {//可变对象
method:"post",
url:"fourth",
data:{
name:"jack",
age:18
},
header:"Content-type,application/x-www-form-urlencoded"
}
xhr(option);//调用
}
// 封装的网络请求函数
// 可变:方式 地址 参数 请求头
// 可变的 调用函数的时候传参！！！ 传谁我就用谁！！
function xhr(options){//option对象传过来
let method = options.method || "get";//传过来的url 没传默认get
let url = options.url;
// get
let data = formatData(options.data || {});
if(method.toUpperCase()=="GET"&&data){
url = url+data
}
// 1-创
let xhr = new XMLHttpRequest();
// 2-设
xhr.open(method,`http://localhost:8888/test/${url}`)//方式可变 //地址可变
// 3-发
xhr.send();
// 4-处理渲染
xhr.onload = function(){
}
}
// get希望传的是 ?name=jack&age=18 所以传来的参数进一步处理
// 格式化data的函数
function formatData(obj){
let data = ""; // 保存保存处理好之后的数据
for(let key in obj){
data += `&${key}=${obj[key]}`
}
data = data.slice(1);//从下标为1开始截取到最后
return data;
}
</script>
</body>
javascript
// 封装的网络请求函数
// 哪些是可变的 请求方式 请求地址 请求参数 请求头
// 可变的 调用函数的时候传参！！！ 传谁我就用谁！！
function ajax(options){
let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是get
let url = options.url;
let header = options.header || {"Content-Type":"application/x-www-form-urlencoded"}
let type = options.dataType || "json"
// ajax希望传的是 ?name=jack&age=18 所以传来的参数进一步处理
let data = formatData(options.data || {});
// data参数 get和post请求方式不一样 分情况讨论
// get 方式在地址后边拼接 post方式是通过send（data） 发送的
if(method.toUpperCase()=="GET"&&data){
// foruth?name=jack&age=18
url = url+"?"+data
}
// 1-创建xhr对象
let xhr = new XMLHttpRequest();
// 2-设置xhr对象
xhr.open(method,`http://localhost:8888${url}`)
for(let key in header){
xhr.setRequestHeader(key,header[key]);
}
// 3- 发起请求
// 分成两种情况 post请求的话 参数是通过send取发送的
if(method.toUpperCase()=="POST" && data){
xhr.send(data);
}else{
xhr.send();
}
// 4- 处理响应结果
xhr.onload = function(){
// 有可能是纯字符串 有可能是json字符串 (最常用的json串)
let result;
if(type=='json'){
result = JSON.parse(xhr.responseText)
}else{
result = xhr.responseText
}
options.success(result)
}
}
// 格式化data的函数
function formatData(obj){
let data = ""; // 保存保存处理好之后的数据
for(let key in obj){
data += `&${key}=${obj[key]}`
}
data = data.slice(1);//从下标为1开始截取到最后
return data;
}封装ajax下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.js"></script>
</head>
<body>
<input type="text" placeholder="姓名">
<input type="text" placeholder="年龄">
<button>get发起请求first</button>
<button>get发起请求second</button>
<button>post发起请求third</button>
<script>
let btn = document.querySelectorAll("button");
let ipts = document.querySelectorAll("input");
// 在哪调用 希望在哪拿到返回值的
btn[0].onclick = function () {
let option = {
url:"first",
dataType:"text",
// 传一个回调函数
success:(res)=>{
console.log(res);
}
}
ajax(option);
}
btn[1].onclick=function(){
let option = {
url:"third",
dataType:"json",
data:{
name:"jack",
age:18
},
// 回调函数
// 就是把函数A(success)当作参数传递到函数B中
// 在函数B中以形参的方式去调用
success:(res)=>{
console.log(res);
}
}
ajax(option)
}
btn[2].onclick=function(){
let option = {
url:"fourth",
method:"post",
data:{
name:"jack",
age:18
},
success:(res)=>{
console.log(res);
}
}
ajax(option)
}
</script>
</body>
</html>访问后端接口
ajax在实际项目中应用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
width: 1000px;
border: 2px solid red;
margin: 0 auto;
background-color: #ccc;
overflow: hidden;
}
li{
float: left;
width: 18%;
margin-right: 2%;
height: 300px;
background-color: #fff;
margin-bottom: 20px;
border: 2px solid red;
box-sizing: border-box;
}
img{
width: 100%;
}
</style>
</head>
<body>
<ul>
</ul>
<script src="./axios.js"></script>
<script>
let ul = document.querySelector("ul");
let option = {
url:"/goods/list",
success:(res)=>{
console.log(res.list);//数组
// 数组里有多少对象 就希望有多少个li
let data="";
res.list.forEach(item => {
// console.log(item);
data+= `
<li>
<a href="#">
<img src="${item.img_big_logo}">
<h4>${item.title}</h4>
<p>${item.price}</p>
</a>
</li>
`
});
ul.innerHTML = data;
}
}
ajax(option)
</script>
</body>
</html>