介绍

2020年高考报名人数达到1071万，创下历史新高。在今年高考即将结束之际，我们推出云端高考录取分数查询小程序，希望为考生填报提供便利。

数据源

小程序后台收录了近30万条数据，包括2008年至2019年大部分重点大学各批次文理科录取分数线，以及2008年至2019年大部分新课标上册、新课标下册、新课标下册、新课标下册三册高职高专批次录取分数线，以及部分省份自主考题，内容比较详细。

所有数据均采集自各高校及高考相关网站，由于数据量巨大，为了提高速度，使用. (需要.5+)模块搭建线程池，并发执行多个任务。

使用的数据库是所有数据都存放在一个新建立的数据库中，这个数据库中有两张表，（各院校录取分数线），（各省批次线）。

字段解释

姓名

机构名称

发源地

艺术与科学

个人电脑

入学批次

年

年

平均录取分数

表格描述

字段解释

年

年

候选人所在地

艺术与科学

个人电脑

批

本批次最低控制线

表格描述

30万数据量，多个站点，并发爬取，数据冲突在所难免，插入前先过滤掉不完整的数据，比如某条记录插入表时缺少pc字段，那么这条记录就丢弃。

最严重的问题就是数据重复，我采取的解决办法是：先检查要插入的数据是否已经存在，表的主键是（name，stu， ，pc，year），由于实际限制，一个机构一个类别一个批次平均录取分数线只能有一个，如果不存在，则进行最后的插入，并提交事务。

后端建设

在拿到三十万条数据之后，我就打算用+的模式在后端实现，当时甚至还部署在了某公司的云服务器上。然而小程序刚刚通过开发者工具联调，上线的时候就遇到了一个大问题：因为小程序需要在线操作，所以后端不能通过IP地址来访问，而是必须通过注册域名来访问。买域名倒是挺麻烦的，但是域名注册费时费力，需要一个多星期。当时距离高考只剩下不到5天的时间，正在我不知所措的时候，无意中看到小程序云开发可以完美解决这个问题，于是就尝试了一下！

云开发为开发者提供完整的原生云支持和微信服务支持，弱化后端和运维的概念。无需搭建服务器，通过平台提供的API进行核心业务开发，开发者即可实现快速上线和迭代。同时该能力与开发者已经使用的云服务兼容，并不互相排斥。

也就是说，只要把数据导入到小程序后台，就可以通过小程序平台的API来访问这些数据了。之前也了解过一些第三方云，但是没想到小程序竟然集成了这些第三方云的功能，这点不得不点赞。

接下来的后端工作主要是导入数据。查询小程序后端，得知后端支持导入json或者csv格式的数据。于是写了个脚本，将数据从本地数据库导出到json文件：

import psycopg2import json
# 连接 pgsql 数据库，为保证隐私，密码已隐藏conn = psycopg2.connect(database="gaokao", user="postgres", password="*******", host="127.0.0.1", port="5432")cur = conn.cursor()
cur.execute('select stu_loc,year,stu_wl,pc,control from province')result = []query_res = cur.fetchall()for i in query_res: item = {} item['stu_loc'] = i[0] item['year'] = i[1] item['wl'] = i[2] item['pc'] = i[3] item['score'] = i[4] result.append(item)# indent=2 控制 json 格式的缩进# ensure_ascii 控制中文的正常显示with open("province.json", 'w', encoding="utf-8") as f: f.write(json.dumps(result, indent=2, ensure_ascii=False))

这里还有一点需要说明，小程序后台要求的json格式和我们平常意义上的json格式有一点点不一样，首先json的所有内容不能包含在[和]中，{}中包含的各数据项之间不能有逗号。

使用++打开原始json文件，使用函数解决问题，将'['和']'替换为空格，将'},'替换为'}'。

修改完之后，通过在小程序后台导入json文件，后台搭建基本完成。

小程序编写

关于小程序的编写，这里我们重点讲一下页面编写方面的体验，也就是如何实现如下图所示的界面。

一开始我想实现这个效果，但是完全没有思路，最后从自定义模态弹窗中得到了思路：

一开始，“/”下拉框对应的布局是隐藏的，通过wxml文件中的=true来控制，一旦点击了“/”下拉框，就设置为。如果还有其他下拉框有对应的布局属性，那么要同时将这些布局的属性设置为true，才能隐藏其他布局。

当然这里的真实还是需要在js中通过()来动态修改，将修改后的数据从数据层渲染到视图层。

同时模仿如下代码完成业务逻辑：

// 查询可能较慢，最好加入加载动画wx.showLoading({ title: '加载中', }) const countResult = await db.collection('province').where({ stu_loc: name, pc: pici,
}).count() const total = countResult.total //计算需分几次取 const batchTimes = Math.ceil(total / MAX_LIMIT) // 承载所有读操作的 promise 的数组 //初次循环获取云端数据库的分次数的promise数组 for (let i = 0; i < batchTimes; i++) { const promise = await db.collection('province').where({ stu_loc: name, pc: pici, }).skip(i * MAX_LIMIT).limit(MAX_LIMIT).get() //二次循环根据获取的promise数组的数据长度获取全部数据push到newResult数组中 for (let j = 0; j < promise.data.length; j++) { var item = {}; item.code = i * MAX_LIMIT + j; item.name = promise.data[j].stu_loc; item.year = promise.data[j].year; item.wl = promise.data[j].wl; item.pc = promise.data[j].pc; item.score = promise.data[j].score; console.table(promise.data) newResult.push(item) } } if (newResult.length != 0) { that.setData({ hasdataFlag: true, resultData: newResult }) } else { that.setData({ hasdataFlag: false, resultData: newResult }) } // 隐藏加载动画 wx.hideLoading()

1. 
   

获取源代码