教务系统直链登录之 PHP 实现

PHP 是世界上最好的语言。

在使用 Node.js 实现教务系统直链登录的前端之后，我终于接触到了事实上最适合做这个小小项目的语言：PHP。

首先就我理解的三种前端网页设计方案的特点做一个小小的总结：

HTML + CSS + JS：以静态的 HTML 网页为基础；CSS 指定网页的样式，JS 改变 HTML 的内容；需要配合服务器
PHP：由代码生成 HTML，也可以插入于 HTML 代码中以实现部分静态部分动态的效果；需要配合服务器和 PHP 环境进行解析
Node.js：本身不基于文件，而是自己创建服务器直接发送响应内容（HTML 代码）给客户端

可以看出，最传统的 HTML + CSS + JS 适合于静态网页和简单的交互效果；PHP 是动态生成网页的基石，且能与数据库很好地进行配合；Node.js 则意味着前后端一起写，能够直接控制服务器底层逻辑。三者各有侧重，当然也可以相互配合使用。

要做出“网页填写表单 -> 后台计算生成链接 -> 直接在当前页显示结果”这一操作逻辑的话，PHP 无疑是最佳方案。

PHP 的开发环境部署略有些麻烦，因为要连同服务器软件一起安装。我的 VPS 已经安装好了 LEMP 架构，所以直接是在线上调试的。PHP 的代码文件是 .php，但其实质就是个 html 文件，需要插入 PHP 代码的地方用 <?php 和 ?> 包裹即可（与 js 的 <script> 标签有些类似）。

这里我直接基于之前设计的 HTML 文件（略做了更新，网页风格更加鲜明）来修改。

在“生成”按钮之后添加如下 PHP 代码：

<?php
  if (isset($_POST) && !empty($_POST['id']) && !empty($_POST['pw'])) {
    $result = "http://202.119.81.112:9080/njlgdx/xk/LoginToXk?method=verify&USERNAME=" . strtoupper($_POST["id"]) . "&PASSWORD=" . strtoupper(md5($_POST["pw"]));
    echo "<br><pre><a id=\"link1\" href=\"" . $result . "\" target=\"_blank\">" . $result . "</a></pre>";
    echo "<button class=\"mdui-fab mdui-fab-fixed mdui-color-theme-accent mdui-ripple\" mdui-tooltip=\"{content: '复制', position: 'auto'}\" onclick=\"copyText()\"><i class=\"mdui-icon material-icons\">content_copy</i></button>";
  }
?>

PHP 可以直接获取页面 POST 的数据，存放在 $_POST 变量中¹。这是一个关联数组²，其索引值就是表单输入框的 name。代码中先做了一个判断，即在 $_POST['id'] 和 $_POST['pw'] 都非空的情况下才会进行链接生成。

PHP 中有 md5 和 strtoupper 函数可以直接进行 MD5 计算和大小写转换；字符串的拼接使用 . 运算符。

echo 可以直接输出 html 内容，这里我们 echo 了两次，第一次用 HTML 的语法打印了预格式化的 Url 地址，第二次则使用本网页所采用的 MDUI 框架创建了一个 MD 风格的浮动按钮，点击即可将链接复制到剪贴板。这个功能是通过调用网页开头自定义的 js 函数 copyText() 来实现的³。其代码如下：

<script>
    function copyText() {
      if (document.execCommand('Copy')) {
        var inputZ = document.createElement('input');
        //添加Id,用于后续操作
        inputZ.setAttribute('id', 'inputCopy');
        //获取当前链接
        inputZ.value = document.getElementById("link1").href;
        //创建的input添加到body
        document.body.appendChild(inputZ);
        //选中input中的值
        document.getElementById('inputCopy').select();
        //把值复制下来
        document.execCommand('Copy')
        //删除添加的input
        document.body.removeChild(inputZ);
        alert('已复制，请妥善保存此链接');
      } else {
        // 失败
        alert('复制失败，请手动操作');
      }
    }
</script>

原理大致是先创建一个 input 对象，把需要复制的文本内容设置给此 input，然后选中此 input，执行浏览器的复制命令，最后再删除这个临时的 input 对象。

其中 link1 是刚才 PHP 所生成的链接的 HTML 代码的 id 值。无论复制成功与否都会有弹窗提示。

最终效果如图：

这个网页现在部署在我的服务器上，访问 https://rpi.jasongzy.com/jwc.php 就能体验。

完整的 php 文件可以从我的 repo jasongzy/njust-jwc 下载。

参考链接