关于前后端数据交互

大妞 面试

所谓的数据交互, 从工作性质上讲, 就是介于后端和前端之间的一项工作. 就是把后端输出的数据以及接受数据的方法与前端的静态页面的整合.

在大部分的公司内, 前后端是不完全分离的, 也就是说前端的页面是过度依赖后端的, 这也就是大家所说的"套页面", 打个比方:

// 在页面渲染或js逻辑中需要用到用户信息, 那此时需要依赖后端语言进行输出信息
#例1  
<script>
    //var user = 'jingwentian';
    var user = '<?php echo $user?>';
</script>

#例2
<?php if ($user){?>
    <p>您已经登录啦</p>
<?php } else {?>
    <p>您还没有登录, 快去登录吧</p>
<?php } ?>

#例3
<ul>
    <li>
        <p>文章标题</p>
        <a href="javascript:;" class="delete" data-id="<?php echo $id;?>">删除</a>
        </li>
    </ul>
    <script>
        $('.delete').on('click', function(){
        var id = $(this).data('id'); //获取文章ID
            $.ajax({
           type: "POST",
           url: "http://www.jingwentian.com/article/delete",
           data: {'article_id': id},
           success: function(msg){
             alert( msg ); // 删除成功
           }
        });
    });
</script>

上面的例子介绍了一下比较常用的交互的方式, 交互其实并没有想象中的那么复杂, 只是实现了前后端的连接, 也可以说是业务逻辑在前端的部分. 再举一个例子, 我在一个点上网站购物, 从你选择商品的数量/商品的规格到加入购物车这些操作, 都是介于前端页面和后端程序中间的交互部分. 而之所以很多的交互都放在后端是因为前端对业务逻辑并不了解.

交互的重要性也显而易见了, 没有交互前端页面就无法实现任何的功能. 交互的大部分也就是渲染数据, dom 操作, 数据获取, 数据提交等;

1. 前后端分离的原因

   通常都是前端依赖后端，很少有说后端因为前端没完成就必须停下来等的. 之所以分离就是为了并行开发, 尽量减少阻塞的环节.
   

2. Web 前后端分离的意义大吗？

   1. 网站前端变化远比后端变化频繁，则意义大。
   2. 网站尚处于原始开发模式，数据逻辑与表现逻辑混杂不清，则意义大。
   3. 该网站前端团队和后端团队分属两个领导班子，技能点差异很大，则意义大。
   4. 该网站前端效果绚丽/跨设备兼容要求高，则意义大。

3. 最后再举一个详细点的例子, 描述一下交互:

   <div class="main"></div>
   
   <script>
   // 商品详情的数据
   var product_info = {
                           'product_id': 26,
                           'product_name': '商品名称',
                           'product_desc': '商品描述 xxxxxx',
                           'product_img': 'http://eowyn.xyz/1.jpg'
                           'product_size': {
                               {
                                   'size_id': 1
                                   'name': '红色',
                                   'number': 23
                               },
                               {
                                   'size_id': 2
                                   'name': '蓝色',
                                   'number': 15
                               }
                           }
                       };
   
   // 数据渲染
   function renderProduct( info ) {
       var product_size_html = '';
       for (var i = 0, len = info.product_size.length; i < len; i++) {
           product_size_html += '<li data-sizeid="info.product_size[i].size_id" data-number="'+ info.product_size[i].number +'">'+ 
                                   info.product_size[i].name +
                                   '<input type="text" value="1">'+
                                '</li>';
       }
       var product_html = '<div class="product_main">'+
                           '<div class="product_intro">'+
                               '<img src="'+ info.product_img +'">'+
                               '<h1>'+ info.product_title +'</h1>'+
                               '<p>'+ info.product_desc +'</p>'+
                           '</div>'+
                           '<ul class="product_size">'+ product_size_html +'</ul>'+
                           '<div class="product_buy">'+
                               '<a href="javascript:;" class="buynow">立即购买</a>'+
                           '</div>'+
                       '</div>';
       $('.main').append(product_html);
   }
   
   renderProduct(product_info);
   
   // 事件绑定
   $('.buynow').on('click', function() {
       		var SizeSelected = $('.product_size li.on'); // 获取选中的规格
       if (!SizeSelected) {
           alert('请选择商品规格');
           return false;
       }
   
       var size_id = SizeSelected.data('sizeid'); //获取选中的商品规格 ID
       var number = SizeSelected.data('number'); //获取选中的商品的库存
       var select_number = SizeSelected.find('input').val(); // 购买的数量
   
       if (number <= 0 || select_number > number) {
           alert('您选择的商品库存不足');
           return false;
       }
   
       // 提交的数据
       var post_data = {
           'product_id': product_info.product_id,
           'size_id': size_id,
           'number': select_number
       };
   
       $.ajax({
           type: "POST",
           url: "http://www.taobao.com",
           dataType: 'json',
           data: post_data,
           success: function(response){
               // {'code': 1, 'message': '购买成功'}
               if (response.code == 1) {
                   alert('购买成功');
               } else {
                   alert('购买失败')
               }
           },
           error: function() {
               alert('请求失败');
           }
       });
   
   
   });
   </script>