基于小程序·云开发构建高考查分小程序丨实战

2019高考报名人数达到了 1031 万的新高,作为一名三年前参考高考的准程序猿,赶在高考前,加班加点从零开始做了一款高考查分小程序,算是一名老学长送给学弟学妹们的高考礼。上线仅 1 个月,用户数就突破了 1k,关于小程序的介绍就不多说了,可以去搜【历年高考分数线查询】体验,今天主要谈谈技术原理和实现细节。

1649686-20190906174340371-468013304.png

数据来源

小程序后台共收录近 30w 条数据,包含 2008-2017 年所有重点高校的各个批次的文理分科录取分数线以及 2008-2018 所有采用新课标一卷、新课标二卷、新课标三卷以及部分自主命题省份的从提前批到高职专科批的录取分数线,勉强称得上内容翔实。

1649686-20190906160923390-1588666080.png

所有数据均采集自各大院校和各高考相关网站,由于数据量巨大,为提高速度,使用了 concurrent.futures (需要 Python3.5+) 模块里的 ThreadPoolExecutor 来构建线程池来并发执行多任务。

数据库采用的是 PgSQL,一款号称世界上最强大的开源数据库产品,所有数据均存在新建的 gaokao 数据库中,其下有两个表,university(院校的录取分)和 province(省份的批次线)

university 表说明

字段解释
name院校名称
stu_loc生源地
stu_wl文理科
pc录取批次
year年份
score录取平均分

province 表说明

字段解释
year年份
stu_loc考生所在地
stu_wl文理科
pc批次
control本批次最低控制线

30w 的数据量,多个站点,并发爬取,数据冲突是不可避免地,在执行插入之前,首先过滤掉残缺不全的数据,比如在插入 university 表时某条数据缺少 pc 字段,那么这条记录就应该被舍弃,最严重的是数据重复,我采用的解决办法是:先查询待插入的数据是否已经存在, university 表的主码是(name,stu,stu_wl,pc,year),因为现实约束一个院校只能在一个年份在一个类别一个批次只能有一个录取平均分,如果不存在,才执行最后的插入,并 commit 提交事务。

后台搭建

在 30w 条数据拿到后,我打算后台采用 Flask+PgSQL 的模式实现,甚至在后台在阿里云服务器部署好,小程序端在开发者工具联调通过之后,小程序上线遇到到一个大麻烦,因为小程序要求线上运行不能通过 ip 地址访问后台,必须通过备案的域名访问,域名购买一个倒不麻烦,只是域名备案比较耗时间,需要一周多时间,而当时距离高考也就不到 5 天,在手足无措之时,无意间看到小程序云开发,关于小程序云开发,官网的介绍是:

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

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

也就是说,只要把数据导入小程序自带的后台,就能通过小程序平台的 API 访问到这些数据,以前了解过第三方的 LeanCloud云 和 Bomb 云,没想到小程序现在集成了这些功能,不得不佩服一下腾讯。

也就是,接下来的后台的工作是主要是导入数据,查询小程序后台可知,后台支持导入 json 或者 csv 格式的数据。于是我就写了个脚本,把数据从本地数据库导出到 json 文件中:

import psycopg2
import 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 的所有内容不能被 [ 和 ] 包括起来,而且每个被 {} 所包括得数据项之间不能有逗号。

1649686-20190906160939367-2069438937.png

选用 notepad++ 打开原来的 json 文件,使用替换功能就能解决,把 [ 和 ] 替换成空格,把 },替换成 } 即可。

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

小程序端编写

关于小程序端的编写,我主要谈谈两点经验,第一是页面的编写,比如下面这个界面。

1649686-20190906161006404-1121165425.jpg

最开始想实现这样的效果,完全没有思路,最后在从自定义模态弹窗那得到了思路,一开始地区院校这个下拉框对应的布局是隐藏的,在 wxml 文件中通过 hidden=true 控制,一点击 地区/院校 下拉框,就把 hidden 置为 false,如果开始有其他下拉框对应的布局的 hidden 属性是 false 的话,同时要把这些布局的 hidden 属性置为 true 来隐藏其他布局,当然,这里的 true or false 需要在 js 里通过 setData() 动态修改,把修改后的数据从数据层渲染到视图层。

第二是关于小程序云开发的原生 Bug,查询后台时一次只能最多查询到 20 条数据,要实现一次得到所有匹配的结果,需要解决两个问题,第一个问题很自然而然就能想到,第一次查到 20 条数据后,第二次跳过前 20 条再取 20 条,第三次跳过前 40 条再取 20 条,以此类推;还有一个更为致命的问题,查询后台的 API 获取结果的回调函数的 异步 的,也就是说,为了保证获得完整数据,第二次查询需要写在第一次查询的回调里,第三次查询需要写在第二次查询的回调里,而且你还不能显式地知道要查询多少次,需要写多少层这样的嵌套,以及烦人的同名变量覆盖问题,这就是所谓的 异步地狱。为了解决这个问题,需要我们编写代码把这个异步方法转成同步的,具体做法是:

先在所要添加功能的js页面中导入 runtime.js 文件,同时把runtime.js文件放入相应文件夹

const regeneratorRuntime = require("../runtime");

runtime.js 下载地址:https://github.com/inspurer/CampusPunchcard/blob/master/runtime.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()

以上就是我本次开发的一些心得体会,欢迎批评指正。

课程完整源码

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

联系我们

更多云开发使用技巧及 Serverless 行业动态,扫码关注我们~

1649686-20190906161107408-1323716179.png

转载于:https://www.cnblogs.com/CloudBase/p/11475427.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/423486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(3):vs code编辑器

下载地址 https://code.visualstudio.com 下载安装教程 变成中文 在编辑器中运行我们的网页 open in browser view in browser 选中文件----首选项----设置 常用快捷键

QuickPart应用系列

在上一篇解决方案包部署与收回篇章中&#xff0c;我只是稍微提了下QuickPart.也许刚接触这块内容的朋友&#xff0c;可能还不是很清楚&#xff0c;QuickPart具体的功能能实现什么。首先要告诉你的是QuickPart的人性化之处&#xff0c;那就是给开发人员开发webpart提供更简洁的方…

前端学习(4):chome浏览器

一、认识浏览器 浏览器是网页显示、运行的平台&#xff0c;常用的浏览器有IE、火狐&#xff08;Firefox&#xff09;、谷歌&#xff08;Chrome&#xff09;、Safari和Opera等。我们平时称为五大浏览器。IE最新版为Edge。 常用浏览器 二、浏览器市场份额 可以通过百度的统计网…

实战 IE8 开发人员工具

今天整理我收藏的漫画的时候发现 风云3 少了两集&#xff08;486、487&#xff09;&#xff0c;这对于收藏者来说基本是不可忍受的&#xff1b; 从风云一到三&#xff0c;应该一集也不能少的&#xff1b; 决定上网去找找&#xff0c;不过溜达一圈常去的分享论坛&#xff0c;由于…

前端学习(6):javascript简介

我们需要思考以下六个问题&#xff1a; 1、javaScript是什么&#xff1f; 2、javaScript的用途是什么&#xff1f; 3、javaScript和ECMAScript的关系是什么&#xff1f; 4、javaScript由哪几部分组成&#xff1f; 5、javaScript的执行原理是怎样的&#xff1f; 6、在页面…

前端学习(7):web的三大技术

HTML(5) 是一门标记型语言&#xff0c;主要由一些具备特殊含义的标签构成&#xff08;建筑物结构&#xff09; 所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页&#xff0c;多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接&#xff0c;甚至音乐、…

scala的foreach和for

一句印象深刻的话&#xff0c;Alan Kay&#xff08;Smalltalk发明者&#xff09;说得一句话&#xff1a;“I’m not against types, but I dont know of any typesystems that arent a complete pain, so I still like dynamic typing”。 并不是静态类型不好&#xff0c;只是静…

前端学习(8):HTML的基本属性和结构

一、HTML文档结构 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html> <!DOCTYPE html>声明为HTML5文…

借助云开发轻松实现后台数据批量导出丨实战

小程序导出数据到excel表&#xff0c;借助云开发后台实现excel数据的保存 我们在开发小程序的过程中&#xff0c;可能会有这样的需求&#xff1a;如何将云数据库里的数据批量导出到excel表里&#xff1f; 这个需求可以用强大的云开发轻松实现&#xff01; 这里需要用到云函数&a…

Storm的ack机制在项目应用中的坑

正在学习storm的大兄弟们&#xff0c;我又来传道授业解惑了&#xff0c;是不是觉得自己会用ack了。好吧&#xff0c;那就让我开始啪啪打你们脸吧。 先说一下ACK机制&#xff1a; 为了保证数据能正确的被处理, 对于spout产生的每一个tuple, storm都会进行跟踪。 这里面涉及到ac…

云开发数据库VS传统数据库丨云开发101

云开发数据库与传统数据库的不同 在小程序云开发中&#xff0c;最核心的便是三大组件&#xff1a;数据库、云存储和云函数&#xff0c;从今天开始&#xff0c;我们将开始隔日更的专栏文章&#xff0c;云开发101&#xff0c;在第一周&#xff0c;我们将从最最核心的数据库开始说…

前端学习(10):HTML语义化

我理解的HTML语义化 经过查看别人博文中的一些描述&#xff0c;我将HTML的语义化总结为&#xff1a; 用最恰当的标签来标记内容。 该如何理解呢&#xff1f;比如需要加入一个标题&#xff0c;这个标题的字体比正文的要大写&#xff0c;还要加粗。能够实现这种效果的方法有很多…

博客中gitalk最新评论的获取 github api使用

博客中&#xff0c;对于网友的评论以及每篇文章的评论数还是很重要的。但是基于静态的页面想要存储动态的评论数据是比较难的&#xff0c;一般博客主题中都内置了评论插件&#xff0c;但是博客主题中对于最新评论的支持显示还是很少的&#xff0c;至少目前我是没怎么发现。博客…

前端学习(11):标题和段落

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>标题和段落</title> </head> <body><h1>我是歌谣</h1><h2>我是歌谣</h2><h3>我是歌谣</h3>&l…

Kafka文件存储机制

Kafka是什么 Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、分区的、多副本的、多订阅者&#xff0c;基于zookeeper协调的分布式日志系统(也可以当做MQ系统)&#xff0c;常见可以用于web/nginx日志、访问日志&#xff0c;消息服务等等&#xff0c;Linkedin于2010年贡…

云开发0基础训练营第二期热力来袭!

第二期云开发0基础训练营热力来袭&#xff01;课程升级、更佳体验、依旧免费&#xff01;每年的 “金九银十” 都是传说中的学习黄金期&#xff01;这期间在校的小伙伴面临开学季/求职季/考研季挑战&#xff0c;已经步入社会的也即将步入年终前的冲刺阶段。所以&#xff0c;这段…

前端学习(14):相对路径和绝对路径

目录结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" conte…

discuz数据从godaddy主机中导出的mysql数据乱码变问号???的解决方法

从godaddy主机导出的mysql数据安装在本地电脑上发现原来的中文都变成了问号&#xff1f;godaddy主机中的数据库版本是5.0.67&#xff0c;charsetutf8 collationutf8_general_ci 而我的supesite的版本是gbk的&#xff0c;导出的数据也是 CREATE TABLE cdb_access (……) ENGINE…

jvm的新生代和老年代简介

新生代分为三个区域&#xff0c;一个Eden区和两个Survivor区&#xff0c;它们之间的比例为&#xff08;8&#xff1a;1&#xff1a;1&#xff09;&#xff0c;这个比例也是可以修改的。通常情况下&#xff0c;对象主要分配在新生代的Eden区上&#xff0c;少数情况下也可能会直接…

NIO核心框架介绍

NIO共引入了4个概念&#xff1a; - 缓存区&#xff1a;表示数据存放的容器&#xff0c;提供可读写的数据缓存区&#xff1b; - 字符集&#xff1a;用来对缓存数据进行解码和编码&#xff0c;在字节和Unicode字符之间转换&#xff1b; - 通道&#xff1a;用来接收或发送数据&…