使用laf帮政治老师做一个抽题器

htfc786

首先先写前端

先写一个简单的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>政治默写生成</title>
    <style>
        body {
            text-align: center;
        }
        #number {
            width: 30px;
        }
        #number {
            width: 30px;
        }
        #zztext {
            display: inline-block;
            width: calc(100% - 100px);
            border: solid;
            padding: 8px;
            text-align: left;
            min-height: 400px;
        }
        #zztext h1 {
            margin: 0;
        }
		.bottom {
			display: block;
		}
    </style>
</head>
<body>
    <h3>政治默写</h3>
    <div id="header">
        <span>预设：</span>
        <button onclick="setnumber('1')">1</button>
        <button onclick="setnumber('5')">5</button>
        <button onclick="setnumber('10')">10</button>
        <button onclick="setnumber('15')">15</button>
        <button onclick="setnumber('20')">20</button>
        <button onclick="setnumber('50')">50</button>
        <button onclick="setnumber('all')">all</button>
        </br>
        <span>生成数量 (all-全部)：</span>
        <input type="text" id="number">
        <button onclick="generate()">生成！</button>
    </div>
    <div id="info"></div>
    </br>
    <div id="zztext">
    </div>
    </br>
    </br>
	<span id="server" class="bottom"></span>
	<span id="made" class="bottom">Made by htfc786</span>
<script>
        var APIURL = "https://<YOUAPPID>.laf.run/zzapi?action=generate" 
		
		
        document.getElementById("server").innerHTML = "API："+APIURL;
        function setnumber(number){
            document.getElementById("number").value = number;
            generate();
        }
        function generate(){
            //禁用所有dom
            /* document.getElementById("number").disabled = true;
            var headerDom = document.getElementById("header");
            var headerBotton = headerDom.getElementsByTagName("button")
            for (var i=0;i<headerBotton.length;i++){
                headerBotton[i].disabled = true
            }*/
            var info = document.getElementById("info")
            var zztext = document.getElementById("zztext")
            //获取值
            var number = document.getElementById("number").value;
            //请求
            var xhr = new XMLHttpRequest();
            var apiurl = APIURL+"&num="+number;
            xhr.open("get", apiurl, true);
            // 请求成功
            xhr.onload = function (e) {
				//获取转换数据
                try {var data = JSON.parse(e.currentTarget.responseText)["data"];}
                catch(err) {var ert=e.currentTarget.responseText;info.innerHTML="发生错误，服务器返回："+ert;return;}
				
				info.innerHTML = "生成成功，已生成"+data.num+"条数据"
                //展示数据
				zztext.innerHTML = "";
				var tidata_all = data.tidata;
                for (var i=0;i<tidata_all.length;i++){
                    var tidata = tidata_all[i];
					var index = i+1
                    zztext.innerHTML+="<h1>"+index+". "+ tidata +"</h1>";
                }
                
            }
            // 请求失败
            xhr.onerror = function (e) {
                info.innerHTML = "网络出现问题，请求失败：" + e;
                alert("网络出现问题，请求失败。。。");
            }
            xhr.send();
        }
		
    </script>
</body>
</html>

使用laf制作后端

获取题目数目
读取数据库
读取出来后随机题目
使用switch case方便后续开发管理页面的接口

import cloud from '@lafjs/cloud'

const TIKU_DB = "zz_tiku";

export async function main(ctx: FunctionContext) {
  // body, query 为请求参数, auth 是授权对象
  const { auth, body, query } = ctx;
  const db = cloud.database()

  const _action = query?.action || "";
  switch (_action) {
    case "generate":
      const ti_num = query?.num || "1";
      var num = Number(ti_num);

      const generate_tiDataQuery = await db
        .collection(TIKU_DB)
        .orderBy("_id", "desc")
        .get();
      console.log(generate_tiDataQuery)
      const generate_tiData = generate_tiDataQuery?.data || [];

      var tiku = []
      for (var i = 0; i < generate_tiData.length; i++) {
        const tiDataFromDb = generate_tiData[i];
        tiku.push(tiDataFromDb.ti);
      }
      if (ti_num == "all" || num >= tiku.length) {
        num = tiku.length;
      }
      var tidata = [];
      for (var i = 0; i < num; i++) {
        var random_index = Math.floor(Math.random() * tiku.length);
        var random_ti = tiku[random_index];
        tiku.splice(random_index, 1)
        tidata.push(random_ti)
      }
      return {
        action: _action,
        code: 200,
        data: {
          num: num,
          tidata: tidata,
        },
      }

    case "admin.get":
      const tiDataQuery = await db
        .collection(TIKU_DB)
        .orderBy("_id", "desc")
        .get();
      const tiDataFromDbList = tiDataQuery?.data || [];
      var tiData = [];
      for (var i = 0; i < tiDataFromDbList.length; i++) {
        const tiDataFromDb = tiDataFromDbList[i];
        tiData.push({
          id: tiDataFromDb._id,
          ti: tiDataFromDb.ti,
        });
      }
      return {
        action: _action,
        code: 200,
        msg: "查询成功！",
        data: tiData,
      }
    case "admin.add":
      const ti = query?.ti || "";
      if (!ti) {
        return {
          action: _action,
          code: 400,
          msg: "请传入正确的参数！"
        }
      }
      const { id } = await db
        .collection(TIKU_DB)
        .add({
          ti: ti
        });
      return {
        action: _action,
        code: 200,
        msg: "添加成功！"
      }
  }

  return {
    action: _action,
    code: 404,
  }

}

然后创建项目发布云函数

在数据库里添加数据

可以在TIKU_DB变量改数据库名字

后台管理正在制作中，尽情期待。。。。

最后把HTML上传到网站托管

别忘了在API的变量里改成自己的laf的appid

这样基本上就部署好了

Night

htfc786 wow不错哦！！

Laf 文档补全师

这好东西之前我都没看到