我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
说起夏天，不由得想起那年夏天的中考/高考，我认为那是人生中经历过的最美好时光。但是终有人留下遗憾。有的人因为考试失利纷纷走向社会、有的人来不及跟喜欢的人说一声喜欢你、有得人匆匆忙忙的没留下联系方式就再也见不到了...
人生嘛，终有留下遗憾的时刻。翻一下手上的手机或者回忆一下脑中的记忆，还有多少美好的记忆被保留了下来。也许只有那一本破破的同学录才是满满的回忆，也许说不定你连同学录都没留下，那才是真正的遗憾
为了不让你们在留遗憾，我决定实现一本同学录。下面是我做同学录的过程。记得看完哦，下面有彩蛋哦！。
废话不多说，直接开干
一、实现翻书效果
先看效果
翻书效果我是用了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，如果被人填写的话，会自动加到下一页等等处理吧，这也是第一版，以后我可能会继续优化下次，以后可能就叫掘金好友手册了。记录了每个人在掘金的点点滴滴（官方快来请教我吧）。这次分享就到此结束了，如果你觉得勾起你的回忆的话，请给个赞呗。感谢，创作不易。
最后彩蛋：目前第一页是没有人填写的，大家快去抢呀。我特地留给你们的
