使用 Serverless(SCF) 快速架构院校查询小工具

终于终于,研究了半拉小时折腾出来了,今天给大家分享如何使用纯SCF来制作一个院校查询的小工具。

这个工具需要两个云函数,一个云函数为了独立调用方便做API的调用,另一个函数来展示我们的页面。

原理非常简单,如下图所示

完成的效果如下:

展示端:https://service-fib8bidg-1251746107.gz.apigw.tencentcs.com/release/showhtml

 

 

API端:https://service-4jpdvu5o-1251746107.gz.apigw.tencentcs.com/release/educhaxun/?groups=%E6%95%99%E8%82%B2%E9%83%A8

我们要完成此单页的话,数据库是关键,这里我会在文章最后分享出我的SQL数据库文件,大家不用担心

 

 

数据库的结构如图所示,这边的话也是使用 PHP+MySQL 来完成此作品。

首先,我们来准备一些工具:

腾讯云SCF平台: https://cloud.tencent.com/product/scf

腾讯云SCF CLI 工具: https://cloud.tencent.com/document/product/583/33449

腾讯云SCF VSCode 工具:https://cloud.tencent.com/document/product/583/37511

具体的安装注册这边就不在展示了,这些工具会极大的方便我们对代码做部署和拉取。

其中注意的是 CLI 工具依赖 Python ,可以去Python 官网直接下载  3.6+ 顺带装上 pip ,然后执行 pip install scf  即可。

然后我们来创建第一个函数,我们的主API函数 educhaxun,使用PHP 7.0创建

核心代码如下 :

$edu = $event['queryString']['edu'];
$code  = $event['queryString']['code'];
$groups = $event['queryString']['groups'];
$local = $event['queryString']['local'];
$level = $event['queryString']['level'];

if ($edu != null) {
  $sql = "SELECT id, edu ,code,groups,local,level,othen FROM edu where edu LIKE '%".$edu."%'";
} else if ($code != null) {
  $sql = "SELECT id, edu ,code,groups,local,level,othen FROM edu where code LIKE '%".$code."%'";
} else if ($groups != null) {
  $sql = "SELECT id, edu ,code,groups,local,level,othen FROM edu where groups LIKE '%".$groups."%'";
}else if ($local != null) {
  $sql = "SELECT id, edu ,code,groups,local,level,othen FROM edu where local LIKE '%".$local."%'";
}else if ($level != null) {
  $sql = "SELECT id, edu ,code,groups,local,level,othen FROM edu where level LIKE '%".$level."%'";
}
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
  // 输出数据
  $ends = array();
  while ($rows=mysqli_fetch_array($result)){
    $count=count($rows);//不能在循环语句中,由于每次删除 row数组长度都减小  
    for($i=0;$i<$count;$i++){  
        unset($rows[$i]);//删除冗余数据  
      } 
    array_push($ends,$rows);
    }
}
return $ends;

思路如下,我们需要先拿到get请求的数值,然后将请求值传递给数据库做查询,并输出数据。

首先,我们使用云函数特殊变量 $event,该变量可以参数传递触发事件数据,我们来看看它的返回值到底是怎样的把:

 

 

请求一个数据并 return 后,我们发现我们的请求值在 queryString 字段,所以我们只要拿到该字段的返回请求,就可以当 get 传递值了,我第一次想到的方法是使用 $_GET[‘value’] 去取值,当然这样是取不到的。

后面的代码就很好理解了,判断并查询输出相应数值。当然,感兴趣的同学可以试试级联查询,这边就不多做解释了。

其次,我们需要设置添加 APIGW 的触发网关,这块的设置也很有讲究,由于我们没有使用官方的默认返回格式,所以“是否启用响应集成”这块务必选为否,让请求直接穿透即可。请求鉴权这块我们需要让另一个云函数调用,所以需要选择“支持CORS”

 

 

我们的最终效果如下:

 

 

至此,我们的第一个函数就制作完成了,下面我们需要制作我们的第二个展示函数,这块就非常简单了,使用HTML单页即可完成

核心代码如下:

<script>
  document.getElementById("getForm").addEventListener("submit",getForm);
  function getForm(e){
      e.preventDefault();
      let sinpt = document.getElementById('sinput').value;
      let sselect = document.getElementById('edu-select').value;
      if (sinpt == "" || sinpt == null || sinpt == undefined) {
        $('#err').modal();
      }else{
      let xhr = new XMLHttpRequest();
      xhr.open("GET","https://service-4jpdvu5o-1251746107.gz.apigw.tencentcs.com/release/educhaxun/?"+sselect+"="+sinpt, true);
      xhr.onload = function(){
        var data = this.responseText;
        var datajson = JSON.parse(data);
        console.log(datajson);
        if (datajson == "" || datajson == null || datajson == undefined){
          $('#null').modal();
        }else{
        var html="";
        for(var i = 0; i< datajson.length; i++){
        html += "<tr><td>"+datajson[i].id+"</td><td>"+datajson[i].edu+"</td><td>"+datajson[i].code+"</td><td>"+datajson[i].groups+"</td><td>"+datajson[i].local+"</td> <td>"+datajson[i].level+"</td><td>"+datajson[i].othen+"</td></tr>";
        }
        var html1="<div class='am-scrollable-horizontal am-animation-fade'><table class='am-table am-table-bordered am-table-striped am-text-nowrap'> <thead><tr><th>序列</th><th>院校名称</th><th>院校标识码</th><th>主管部门</th><th>所在地</th><th>办学层次</th><th>备注</th></tr></thead><tbody>";
        var html2="</tbody></table></div>";
        document.getElementById("result").innerHTML =html1+html+html2;
        }
      }
      xhr.send();
    }
 }
</script>

值得注意的是,云函数默认不支持单独展示HTML,我们需要将它封装一个函数,写法参照官网即可:

const fs = require('fs')
const path = require('path')

exports.main_handler = async (event, context, callback) => {
  let html = fs.readFileSync(path.resolve(__dirname, './index.html'), {
    encoding: 'utf-8'
  })
  return {
    isBase64Encoded: false,
    statusCode: 200,
    headers: { 'Content-Type': 'text/html; charset=utf-8' },
    body: html
  }
}

同样,我们需要将它发布为API网关的形式进行访问,当然为了访问方便&好看的话,我们可以在API GW 自定义我们的访问域名。这块的操作都很简单,就不在赘述了。

下面是完整的代码包和数据库文件,觉得有用的同学别忘了留言哦~~

 

腾讯云 COS 下载地址 : http://95s.pw/3g