258资源分享网

前几天，教育部公布了《全国第四轮学科评估结果》，在手机上看起来不太方便，就“撸起袖子加油干”，写了一套脚本把数据收集了一下，做成了微信小程序，叫「学科排名」。 界面 界面长这样： 界面参考了一些优秀设 ...

 

 

 

前几天，教育部公布了《全国第四轮学科评估结果》，在手机上看起来不太方便，就“撸起袖子加油干”，写了一套脚本把数据收集了一下，做成了微信小程序，叫「学科排名」。

界面

界面长这样：

界面参考了一些优秀设计元素，尽量简洁、易用。

数据库

学科评估的结果，说白了就是某个高校的某个学科怎么样。数据库设计如下：

CREATE TABLE `ranking` ( `universityNum` INTEGER NOT NULL, -- 高校代码 `university` TEXT NOT NULL, -- 高校名称 `universityLogo` TEXT NOT NULL, -- 高校校徽 `klassCode` TEXT NOT NULL, -- 学科门类代码 `klass` TEXT NOT NULL, -- 学科门类名称 `subjectCode` TEXT NOT NULL, -- 学科代码 `subject` TEXT NOT NULL, -- 学科名称 `resultNum` INTEGER NOT NULL -- 学科评估结果 )

高校代码有5位，如北京大学的是10001，其他大学的都比这个数大，所以就用INTEGER类型了。

学科评估结果用数字1-9来表示，其具体含义和对应关系如下表：

数字 1 2 3 4 5 6 7 8 9
结果   A+   A   A-   B+   B   B-   C+   C   C-  
含义   前2%或前2名   2%～5%   5%～10%   10%～20%   20%～30%   30%～40%   40%～50%   50%～60%   60%～70%  

具体数据是通过爬虫脚本从官网获取的，有5000+条数据。

考虑到后端用到了两个SELECT语句，一个是按学科代码，一个是按高校代码，建立两个单列索引：

CREATE INDEX idx_subjectCode ON ranking (subjectCode) CREATE INDEX idx_universityNum ON ranking (universityNum) 校徽

为了让高校排名页面视觉上更简洁大方，加上校徽元素是个不错的选择。

<image class="university-logo" src="{{item.universityLogo}}" mode="aspectFit">image>

由于校徽是图片形式，加载需要一定的时间。为了更好的体验，有必要上CDN，即内容分发网络。这里采用的是七牛云的对象存储。

数据库中不同高校有近500所，校徽字段universityLogo只需存储文件名称，待响应请求的时候补全外链即可。

学科选择器

高校排名页面有个二级联动学科选择器，先选学科门类，再选当前门类下的学科。考虑到学科数据不多，也不会变更，所以将这部分数据放在本地了。

其数据结构如下：

[ { "klassCode": "06", "klass": "人文社科类", "children": [ { "subjectCode": "0101", "subject": "哲学" }, { "subjectCode": "0201", "subject": "理论经济学" }, ... ] }, { "klassCode": "07", "klass": "理学", "children": [ { "subjectCode": "0701", "subject": "数学" }, { "subjectCode": "0702", "subject": "物理学" }, ... ] }, ... ]