大三下学期假期总结

假期总结

第一周

第一周主要学习静态页面布局。页面为高新教育系统页面。主要包括首页，注册页，学生登录首页，学生详情页。

1. 在首页中用到的是jquery 的 fullpage 插件。了解了fullpage 插件的基本使用方法，一些基本参数的使用方法，回调函数的使用方法，以及如何更改参数的默认样式；

2. 在注册页中最主要的是验证环节，验证码的验证，密码的验证都是在手机号码正确的基础上进行验证的，所以在验证电话号码时，我们返回一个boolean值，在验证其他环节时，传入这个boolean值，进行其他环节验证。代码如下：

//验证手机号方法
function vailPhone() {
    var phone = $("#phone").val();
    var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;

    if (phone == '') {
        $('#tip').text('手机号码不能为空！');
        flag = false;
    } else if (phone.length != 11) {
        $('#tip').text('请输入有效的手机号码！！');
        flag = false;
    } else if (!myreg.test(phone)) {
        $('#tip').text('请输入有效的手机号码！！');
        flag = false;
    } else {
        $('#tip').text('');
        flag = true;
    }
    return flag;
}

//点击注册
$(function () {
    $('#register').click(function () {
        var nameval = $('#auth_code').val();
        var passval = $('#password').val();
        var confirm = $('#confirm_pass').val();
        if (vailPhone()) {
            if (nameval == '' || nameval == null) {
                $('#tip').text('请输入验证码');
            } else if (passval.length < 6) {
                $('#tip').text('输入的密码长度小于6');
            } else if (confirm !== passval) {
                $('#tip').text('两次密码不一致')
            } else {
                $('#tip').text('');
                window.location.href = './dashboard.html';
            }
        }
    })
})

3. 学生登录首页中体现了很多细小的css布局样式，上面的部分是我们平时比较常用的两栏布局，在两栏布局中要注意浮动的清除。在下面的部分是ul列表的浮动，重要的是css3中 transform 和 transition 的使用，因为平时自己很少涉及到这部分的知识，所以以后还是要巩固一下这里的知识。

4. 学生详情页，首先是一个tab的使用，在个人中心页要注意样式布局，以及添加个人简介的逻辑写法。

代码：高新教育

第二周

第二周完成两个内容，一个是bootstrap的基本学习，一个是接口调用

bootstrap学习

bootstrap是css的框架，里面有很多我们平时能想到的样式布局。对开发来说十分方便，写起来也很容易。bootstrap主要的是栅格布局，回校后还要加深对它的了解。在学习的过程中我们也不用完全记住里面的结构写法，当我们平时碰到这些布局时能在它的文档上面找到就可以使用，用的多了自然也就熟悉了。我只是把一些基本的样式布局了解了一下，回去之后还要加深了解它的一些组件的用法。

博客系统

博客系统的结构样式全部为bootstrap，这里就不对样式做总结。在博客系统中真正学到的是后台接口的调用。以前不是很理解前后台的工作，通过调用过后知道了他们的工作情况。jquery调用ajax连接后台时，我们可以向后台传递数据，也可以调用后台的数据在页面中展示出来。传递方法为GET与POST两种方式。GET为通过后台来获取数据，在方法里就可以添加html代码来把数据展示到前端页面，其中获取博客详情就是GET方式；POST为把前端数据传递到后台，后台可以进行数据验证，或者传入数据库中，其中新增博客就为POST方式。

//获取列表
$.ajax({
    url: 'http://blog2019.applinzi.com/api/blogs',
    type: 'GET',
    contentType: "application/json",
    success: function (data) {
        var html = '';
        console.log(data);
        for (i = 0; i < data.length; i++) {
            html += '<div class="panel panel-primary">' +
                ' <div class="panel-heading">' + data[i].blogText +
                '<div class="f-r">' + getMyDate(Number(data[i].date)) + '</div>' + '</div>' +
                ' <div class="panel-body"  id = "details">' + '<a href = "./Details.html?id=' + data[i]._id + '" target = "_blank">' + data[i].introText + '</a>' + '</div>' +
                '<div class="panel-footer">' + getCategoryNameById(data[i].languageId) + '</div>' + '</div>'
        }
        $('.post-wrapper').html(html);
    },
    error: function (error) {
        debugger;
        console.log(error);
    }
});

//新建文章

$('#new_project').click(function (evt) {
    var data1 = {
        "blogText": $('#blog_Text').val(),
        "introText": $('#intro_Text').val(),
        "languageId": $('#language option:selected').val()
    }
    evt.preventDefault();
    var blogId = (new Date()).getTime();
    $.ajax({
        url: 'http://blog2019.applinzi.com/api/blog/' + blogId,
        type: 'POST',
        contentType: "application/json",
        data: JSON.stringify(data1),
        success: function (data) {
            location.reload();
        },
        error: function (error) {
            debugger;
            console.log(error);
        }
    });
});

代码：博客系统

第三周

1. 第三周为vue的学习，首先vue脚手架的搭建。接着学习了几天vue的视频，了解了一些基本事件的用法，回校后还要继续深入学习vue。

2. 第二周和第三周学习了微信小程序的开发。小程序的开发在没学习之前总感觉很难的亚子，但是通过看文档学习，发觉它并不是很难，基本上都是前端的知识。小程序的开发比较难的还是js逻辑代码的部分，但是逻辑代码中跟vue那部分学的知识有所重合，这就让我对小程序开发和学习vue两者更有信心一些。通过看了两周的技术文档我对小程序开发有了了解，清楚了总体的结构，每部分的用法，以及一些事件，一些样式的使用。