一：理解前后端基本概念
首先，理解一下前段是什么：客户端就是前端，即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。
后端是什么：服务端就是后端，是为客户端服务的，服务的内容诸如向客户端提供资源，保存客户端数据和处理客户端数据。
简而言之，如果把网页制作比喻成一家餐厅，那么客户端就是餐厅的大厅，装修的非常漂亮，吸引顾客到这里用餐，而服务端就像餐厅的后厨，通过精美佳肴留住顾客。
二：前后端通信原理
客户端和服务端通信都是依靠后台服务器来传输数据，但是连接后台服务器需要用到Node和PHP写后台程序，用Ajax实现客户端和服务端的连接，Ajax主要是前端向后端发请求用的。
Node 1、基于V8虚拟机，可构建高性能服务器
2、单线程
3、可利用Javascript进行后台开发
4、非阻塞IO
5、RESTful API
PHP 1、 PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词
2、PHP 是一种被广泛使用的开源脚本语言
3、PHP 脚本在服务器上执行
4、PHP 没有成本，可供免费下载和使用
5、PHP 文件能够包含文本、HTML、CSS 以及 PHP 代码
6、PHP 代码在服务器上执行，而结果以纯文本返回浏览器
Ajax Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。
三：主要代码展示
Node 使用Node需要提前打开运行Vscode中的终端
1、进入Node文件的第一级父文件夹，例如:cd server
2、输入命令行 node main就可以将后台服务启动，ctrl+c可以停止服务
3、每一次修改main.js中的文件都要重启服务才有效。
var http=require("http");
var query=require("querystring");
//req表示请求消息对象 res表示响应消息对象
var server=http.createServer(function(req,res){
// 当前端使用post发送数据时，数据不在url中，而在data中
var str="";
req.on("data",function(_data){
str=_data.toString();
});
req.on("end",function(){
// req.method 就是请求的方式是get还是post
if(req.method.toLowerCase()==="get"){
str=req.url.split("?")[1];
}
var obj=query.parse(str);
var sum=Number(obj.x)+Number(obj.y);
res.writeHead(200,{
"content-type":"text/html;charset=utf-8",
"Access-Control-Allow-Origin":"*"
})
res.write(sum.toString());
res.end();
})
})
server.listen("localhost");Node中代码 main.js，由于篇幅原因，在这里不展示Html页面代码。
PHP Html页面的表单提交的时候，会把数据提交给Php程序，Php程序连接后台数据库
<?php
header("content-type:text/html;charset=utf-8");
open_sql();
function open_sql(){
// 数据库连接(地址，用户名，密码，库名，端口号)
$sql=mysqli_connect("localhost","root","root","game","3306");
// 获取当前是否连接上数据库 如果返回为1就是没有连接上
if(mysqli_connect_errno()) return;
// 使用MySql语句 mysqli_query(打开的数据库对象,"MySQL语句")
$res=mysqli_query($sql,"SELECT * FROM `user` WHERE `user`='$_POST[user]'");
// $res->num_rows 表示查询到的结果有多少条
if($res->num_rows>0){
echo "<script>
location.href='http://127.0.0.1:5500/client/signUp.html';
alert('用户名重复，请重新输入');
</script>";
return;
}
$result=mysqli_query($sql,"INSERT INTO `user`(`user`, `password`, `name`, `age`, `sex`, `tel`, `email`) VALUES ('$_POST[user]','$_POST[password]','$_POST[name]',$_POST[age],'$_POST[sex]','$_POST[tel]','$_POST[email]')");
if($result){
echo "<script>
location.href='http://127.0.0.1:5500/client/signIn.html';
alert('注册成功，请登录');
</script>";
}
}Php中代码 main.php，由于篇幅原因，在这里不展示Html页面代码。
知识点：1、使用PHP连接后端必须下载一个PhpStudy，样式如下
2、php后端代码是和前端代码一起使用的，在写好前端页面代码之后启动PhpStudy就可以连接后台MySQL数据库使用。
3、启动PhpStudy之前要先更改一些配置文件，第一步：点击其他选项菜单———>站点域名管理，添加本次项目文件夹地址，例如：D:\study\VSCoad\Text\JS\4.23 。可以单独设置一个网站端口，也可以不设置，但是要记住端口号，后面要用。修改完之后记得保存并 生成配置文件，最后一步要把PhpStudy重启才生效。
4、配置完Php之后直接在Html页面中使用Open with Live Server 就可以在网页上运行了，在网页端右击检查，在console中就可以看到服务器返回的信息。
Ajax 主要在前端使用，作用是与后台建立连接 只需要在html界面写入以下代码就可以实现
极简版
var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHander);
xhr.open("GET","http://39.99.182.33:8000");
//xhr.open("GET","http://localhost:8000");
xhr.send("name=张三&xq=北京&age=20&sex=男");
function loadHander(e){
console.log(this.response);
}
封装函数版
function ajax(url){
// 创建axjx对象
var xhr=new XMLHttpRequest();
// 侦听服务端发送给客户端时加载消息
xhr.addEventListener("load",loadHander);
// 对象打开通道(“发送方式”，访问的地址)
xhr.open("GET",url);
// 发送
xhr.send();
}
终结版
function ajax(data){
return new Promise(function(resolve,reject){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
xhr.onerror=function(){
reject(xhr.status);
}
xhr.open("POST","http://localhost:8000");
xhr.send(JSON.stringify(data));
})
}
ajax({name:"xietian",age:30}).then(function(res){
console.log(res);
}).catch(function(err){
console.log(err);
})
知识点：1、ajax是访问别的网站并且将数据取回，这就需要考虑跨域问题
2、如果前端需要通过POST发送数据给php页面,就需要写这个请求头,给node.js服务发送POST请求时不用写。这个请求头必须写在open之后,send之前。 例如：xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
3、Ajax可以通过php访问服务端，也可以通过node访问服务端
通过php方式：xhr.open("GET","http://localhost:8000/a.php");
通过node方式：xhr.open("GET","http://localhost:8000");
