前后端分离

前后端分离

web前后端的连接
第一层：表示层，显示在网页的部分，HTML代码，用CSS/HTML/Javascript即可显示。
第二层：业务层，处理数据。前端输入数据，该部分用来接收数据和发送数据
第三层：数据层，即数据库用来存储数据
以登录操作为例实现前后端的数据交互

首先采用HTML和CSS写好登录界面，html代码如下：

<div class="login"> 
<p class="loginTittle">登录</p> 
<span class="loginspan"> 帐号 <input type="text" id="userName" value="输入你的帐号"/></span>
//装一个√或×，提示是否输入正确 <br /> <span>0</span><br />
//帐号是否正确输入的状态字 
//<img class="xbtn" src="" /> 密码 <input type="password" id="password" /> 
//<span>
//</span> <br /> <span></span> 
//</span> <input type="button" value="登 录" /> 
</div>

Ajax：主要用来实现页面和web服务器之间数据的异步传输，也就是接受前端输入的数据并传送到后台
客户端通过ajax将数据传入服务器端。以下Ajax的基本形式

ajax({ //封装考虑的因素：请求方式，请求地址以及对请求结果的处理
     type: 'get',//请求方式，可以是'post'也可以是''
     url: 'http://www.example.com',//请求地址
     success: function (data) { //请求成功后对请求结果的处理函数，data为请求结果
         console.log(data);
     }
 })

app.js，服务器端接收客户端传入的数据并将响应结果通过res.send（）上传到客户端，客户端的data接收相应的结果。

app.get('客户端的地址', (req, res) => {
	// 处理内容
		// 对客户端做出响应
		res.send({});
	} 
});

//主要就是ajax部分，这里用到了JQuery中的$.ajax函数，详细用法请参照JQ文档 
$.ajax({ 
//type是ajax的方法，可以用post可以用get，两种方法的区别可以自己查阅资料  
'type':'post',
'url':'login.php',
//第一个参数url，PHP脚本的位置，我要把参数传到什么位置
 'data': {"username":$('#userName').val(),"password":$('#password').val(),},
//传递什么数据，这里我用的是json格式，如果不知道什么是json数据，可以自己搜索一下 
'success':function(data){
//success表示，当服务器返回数据成功后，该做什么，返回的数据储存在data中，我们直接把data传入函数中。 
switch(data.type){ 
	case 0:alert('账户不存在');
	break; 
	case 1:{ 
		$('#userMsg').children('li').eq(2).find('span').html(''+data.gouwuchenum+' '); 
		$('#loginMsg li').eq(1).empty().html('<span>'+data.name+'</span>');
		$('#loginMsg li').eq(2).empty().html('<a href="javascript:tuichu()">退出</a>');
		$('.login').animate({right:-180,opacity:0},400,function(){
		  	$(this).css('display','none'); });
			break; } 
	case 2:alert('密码错误');
		break; 
		} 
	}, 
	'dataType':'json',
	//传递的数据类型，对应我上面的数据格式，这里用json。数据类型也可以是html/xml等 });