嘿～同学，当年没写完的同学录我用代码帮你实现了，快来留下你的记录吧！

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

说起夏天，不由得想起那年夏天的中考/高考，我认为那是人生中经历过的最美好时光。但是终有人留下遗憾。有的人因为考试失利纷纷走向社会、有的人来不及跟喜欢的人说一声喜欢你、有得人匆匆忙忙的没留下联系方式就再也见不到了...

人生嘛，终有留下遗憾的时刻。翻一下手上的手机或者回忆一下脑中的记忆，还有多少美好的记忆被保留了下来。也许只有那一本破破的同学录才是满满的回忆，也许说不定你连同学录都没留下，那才是真正的遗憾

为了不让你们在留遗憾，我决定实现一本同学录。下面是我做同学录的过程。记得看完哦，下面有彩蛋哦！。

废话不多说，直接开干

一、实现翻书效果

先看效果

翻书效果我是用了turn.js插件进行实现的，看一下实现逻辑

上面就是代码片段啦，很简单，相信你们也能看得懂，倔金这个在线代码工具还是听强的

二、找UI

下面就是找UI的样式，我一开始想起的就是这种风格的。

非主流的风格也是一种怀念（哈哈哈哈，曾几何时我们也疯狂过），但是找遍了各大平台，都是没有这种风格的UI，只好找到我现在这套，下面就是切图了，把一个一个图切出来，我就是摸鱼切图仔。

接下来就是画页面了，画页面我就不说了。接下来就是写接口了，不把数据记录起来的话，那就不叫同学录了。所以我将用我的毕生所学来写后台接口，其实就是不会，但是我可以自学，写的不好，大家不要骂我哈。

三、搭建Python项目

同学录的接口就比较简单，我使用python-Django搭建了一个基础项目，写两个接口，一个是用来请求所有的。一个是用来保存数据的。两个就够，想要多个也可以。你们来写

3.1 搭建mysql数据库表

新建一张alumni_book表，里面存储了同学录的用户信息。具体字段看一下代码以及字段。字段名取的比较随意哈。别介意

CREATE TABLE `alumni_book` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL COMMENT '姓名',
  `sex` varchar(255) DEFAULT NULL COMMENT '性别',
  `birthday` varchar(255) DEFAULT NULL COMMENT '生日',
  `bloodType` varchar(255) DEFAULT NULL COMMENT '血型',
  `class` varchar(255) DEFAULT NULL COMMENT '班级',
  `motion` varchar(255) DEFAULT NULL COMMENT '运动',
  `music` varchar(255) DEFAULT NULL COMMENT '音乐',
  `game` varchar(255) DEFAULT NULL COMMENT '偶像',
  `colour` varchar(255) DEFAULT NULL COMMENT '颜色',
  `phone` varchar(255) DEFAULT NULL COMMENT '手机',
  `qq` varchar(255) DEFAULT NULL COMMENT 'QQ',
  `address` varchar(255) DEFAULT NULL COMMENT '地址',
  `mailbox` varchar(255) DEFAULT NULL COMMENT '邮箱',
  `remarks` varchar(255) DEFAULT NULL COMMENT '最大心愿',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像',
  `message` varchar(255) DEFAULT NULL COMMENT '留言',
  `page` int(255) DEFAULT NULL COMMENT '页数',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
复制代码

3.2 查询接口

接下来就是写查询接口了。查询接口比较简单。直接查出所有已保存的数据。

def getAllAlumniBook(request):
    if request.method == 'POST':
        sql = "select SQL_CALC_FOUND_ROWS * from {} "
        args = ("alumni_book",)
        data = db.select_from_table(sql, args)
        return rtnInfo(code= 200, data=data)
    return rtnInfo(code=500, msg='请使用post方法')
复制代码

3.3 记录资料接口

写完查询之后，就写新增资料数据的接口

def addAlumniBook(request):
    if (request.method == 'POST'):
        # 获取参数
        get_data = request.POST
        name = get_data.get('name')
        sex = get_data.get('sex')
        birthday = get_data.get('birthday')
        bloodType = get_data.get('bloodType')
        classname = get_data.get('class')
        motion = get_data.get('motion')
        music = get_data.get('music')
        game = get_data.get('game')
        colour = get_data.get('colour')
        phone = get_data.get('phone')
        qq = get_data.get('qq')
        address = get_data.get('address')
        mailbox = get_data.get('mailbox')
        remarks = get_data.get('remarks')
        message = get_data.get('message')
        page = get_data.get('page')
        user_avatar = request.FILES.get('avatar')

        if user_avatar:
            with open('static/user_img/' + user_avatar.name, 'wb') as f:
                for line in user_avatar:
                    f.write(line)
        # 添加用户
        add_user_sql = 'insert into {}(name, sex, birthday, bloodType, class, motion, music, game, colour, phone, qq, address, mailbox, remarks, message, page, avatar) values("{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", "{}", {}, "{}")'
        add_user_args = ("alumni_book", name, sex, birthday, bloodType, classname, motion, music, game, colour, phone, qq, address, mailbox, remarks, message, page, 'static/user_img/' + user_avatar.name if user_avatar else "NULL")
        db.act_table(add_user_sql, add_user_args)
        return rtnInfo(code=200, msg='保存成功')
    return rtnInfo(code=500, msg='请使用post方法')
复制代码

就这样，后台就已经搭建完毕了，然后就是部署到ng服务器了。这里我就不细讲了，毕竟我不是专业的后台开发人员。如果有什么好的学习方法也可以告诉我哦。

四、对接口

根据我们上面写的两个接口，我们先对获取数据接口，获取到数据之后，我们需要进行匹配，因为后台保存的是单页的数据，我们前端需要展示所有页面，所以要进行补空。接口对接都很简单，我就拿查询接口举例子吧。

// 查询接口对接
$.ajax({
  url: 'xxxx',
  type: 'post',
  data: '',
  dataType: 'json',
  success: function (res) {
    var obj = {}
    var index = 0
    // 先拿到后台已经存好的页数数据，使用page来作为属性字段，方便后面取， index用来记录最大的page数
    if (res.code == 200) {
      res.data.forEach(item => {
        index = item.page
        obj[index] = item
      })
    }
    // 默认渲染50页数据
    for (let i = 1; i <= 50; i++) {
        // 我们要通过拿到的page数据判断后台是否已经存了，存了的直接拿后台返回的数据渲染，没有的话，就渲染为空的
       var item = obj[i] || {}
       .... // 做遍历数据的操作了，我就不写出来了，大概思路就是这样
    }
  }
})
复制代码

总结

对完接口之后就，可以部署前端，可以给大家一起填写了。

同学录就已经开发完成了，大概思路就是前端写页面，后台写保存和查询接口。但是还有很多细节我就没分享出来了，比如每个用户只能写一次，用户保存的时候都会匹配最新的page，如果被人填写的话，会自动加到下一页等等处理吧，这也是第一版，以后我可能会继续优化下次，以后可能就叫掘金好友手册了。记录了每个人在掘金的点点滴滴（官方快来请教我吧）。这次分享就到此结束了，如果你觉得勾起你的回忆的话，请给个赞呗。感谢，创作不易。

网站地址：那年夏天

最后彩蛋：目前第一页是没有人填写的，大家快去抢呀。我特地留给你们的