校园博览会——一次血的教训（第一次项目）

校园博览会

  这个项目经历了整整一个多月，也是我当码农来所接触所做的第一个项目，过程总是痛苦的，不过结果，一点点满意，却也不那么满意。做这次项目之前，可能技术跟经验都不够，导致自己也犯了很多错误。怎么说呢，通过这次教训跟学习，也让我有了对项目的一个很大的认识。之后也会更加去适应。加油！

【项目流程】

  对于这次的项目流程，我们一开始没有了解的很清楚，所以后面也出现了很多问题。以下是我对项目流程的一点点总结。

 

【前期准备】

  对于一个项目，前期准备是必不可少，也是很重要的一步。这是一个团队是否能够很好的合作和合作效率的一个很关键的一步。

（1）了解产品给出的数据文档、原型图的一个完整逻辑。了解顾客要的到底是怎样的一个效果。

（2）开发根据数据文档来定所有的接口，不管是接口名字还是参数，最好都订好，接口名跟参数名最好都采用驼峰写法，避免之后对接口的时候，大小写不对造成的不必要的麻烦跟工作量，这也是我们这次项目犯下的很大的一个错误。

（3）前端要根据产品给出的数据文档跟原型图进行几个人的分工，最好分工模块化，这样方便各个页面的链接，也让项目做起来更加方便。

（4）托管工具的使用，github或者coding之类的都可以。

（5）后期会使用服务器，这次我们是使用的tomcat服务器进行测试交互。所以最好每个人的电脑里都具备这个功能，有助于提高效率。

（6）前端一定要考虑首尾共用！！这两块也是后期改变比较多的两块，使用首尾共用会比较方便。

【进行中】

静态网页制作：最好了解清楚某一块的形式，是照片就用<img>而不要用<div>，方便后期插入图片。

【主要技术使用】

（1）cookie的使用：主要是用来进行缓存用户登录信息，好获取并返回给后台。不过这一块不是我负责，了解的也不是很多。之后会补上用法

（2）ajax的交互：这次的交互，我们使用的是jQuery中的ajax交互。主要用法如下：

$.ajax({
   type:"GET/POST",
   url:"url",  //后台所给的传递信息的接口，访问的url
   data : {
        userId: //所需要传给后台的数据信息，从本地获取
    },  
    success : function(data){
        //如果传递成功的请求 （回调函数）
    },
    error : function(data){
        //传递失败的请求
    }
})

（3）查询字符串：有一个学长所给的一个函数，其实并不是很懂怎么写，但是懂每个所得的结果，一般所运用的场景，就是当前跳转页面需要从上一个页面中的后台数据或者本地数据中获取东西。如bookId

上一个页面中拼接字符串时<a>标签跳转到下一个页面：

'<a href="下一个页面.html?bookId(自设)='+data.object.bookId+'"></a>'  //其中第一个bookId的名字可以自设，只要下一个页面与之对应即可

跳转至下一个页面：

//查询字符串的函数
function getSearchString(key) {

        // 获取URL中?之后的字符
        var str = location.search;
        str = str.substring(1,str.length);
       
        // 以&分隔字符串，获得类似name=xiaoli这样的元素数组
        var arr = str.split("&");
        var obj = new Object();
       
        // 将每一个数组元素以=分隔并赋给obj对象    
        for(var i = 0; i < arr.length; i++) {
            var tmp_arr = arr[i].split("=");
            obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
        }
        return obj[key];
    }

//交互代码
    $.ajax({
        type: "GET/POST",
        url: "url",
        data :{
            bookId : getSearchString('bookId')    //需要返回给后台上一个页面中获取到的bookId
        },
        success : function(data){
            //成功的回调函数  
        },
        error : function(data){
           //失败的回调函数
       }
    })

（4）分页效果的实现，即ajax异步所遇问题

ajax的异步：在执行ajax的同时，还可以继续操作界面，无须等待ajax响应后才能继续操作。

问题所在，我需要在外面使用前面一个ajax中所有的东西，但是因为异步问题，导致ajax还没运行完，我外面就要使用，导致毫无效果。例：

//获取按钮数
$.ajax({
            type: 'GET',
            url: 'url',
            data:{
                schoolId : $.cookie(COOKIE_NAME_schoolId)
            },
            success: function(data){
                if(data.status === '0') {
                    alert(data.message);    
                }
                else{
                    itemNum = data.object;
                    pageNum = Math.ceil(itemNum/10);
                    var pageBtnStr = '';
                    for(var i = 1; i <= pageNum; i++) {
                        pageBtnStr += '<li class="page_li">'+ i +'</li>';
                    }
                    $('.page_ul').append(pageBtnStr);
                }
            }
        });
//按钮点击事件
$('.page_li').click(function(){
    alert("1");
})  //因为ajax的异步问题，导致点击按钮并没有任何效果

这就是ajax的异步问题，解决方法我目前了解的有两种，一种是ES6中的promise方法，另一种就是把点击事件写成一个函数，直接在ajax里面调用。因为现在代码少，就可以直接移入ajax中。例：

//获取按钮数
$.ajax({
            type: 'GET',
            url: 'url',
            data:{
                schoolId : $.cookie(COOKIE_NAME_schoolId)
            },
            success: function(data){
                if(data.status === '0') {
                    alert(data.message);    
                }
                else{
                    itemNum = data.object;
                    pageNum = Math.ceil(itemNum/10);
                    var pageBtnStr = '';
                    for(var i = 1; i <= pageNum; i++) {
                        pageBtnStr += '<li class="page_li">'+ i +'</li>';
                    }
                    $('.page_ul').append(pageBtnStr);
                    $('.page_li').click(function(){
                            alert("1");
                    }) 
                }
            }
        });
//这样点击按钮，就会弹出1

【兼容性处理】

【浏览器调试】

快捷键：F12/Ctrl+shift+I
Console/Network（这两处查看错误）
报错：
404：找不到文件
500：内部错误—因为意外情况，服务器不能完全请求成功
400：错误请求—请求中有语法问题，或不能满足要求，无法理解此请求
2xx：成功

后台数据大小写问题
方法：用拼接字符串的方法，请求后台数据，查看完整后台数据

【与后台整合代码，结尾】

后期主要是改自己的bug和产品的需求还有跟后台协调一些数据问题，这个时候其实已经到了一个疲劳期，最好的方法就是适当安静、放松，愉快地结束一个项目。

期待下一个，也会再用心完成这一个。虽然是一次血的教训，不过获得的东西却是很珍贵的，加油加油！