教务系统直链登录之 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 代码:

1
2
3
4
5
6
7
<?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 变量中1。这是一个关联数组2,其索引值就是表单输入框的 name。代码中先做了一个判断,即在 $_POST['id']$_POST['pw'] 都非空的情况下才会进行链接生成。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 值。无论复制成功与否都会有弹窗提示。

最终效果如图:

demo

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

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

参考链接

-------------本文结束    感谢您的阅读-------------
0%