关键词搜索

源码搜索 ×
×

PHP&JavaScript笔记-后端利用Refresh头带错误信息给前端(野路子操作)

发布2022-02-07浏览805次

详情内容

最近在搞最原始的PHP,发现前后端分离的项目,的确比用模板引擎的项目好。至少在用户体验上好太多(不看占用内存方面)。估计以后还是要用vue开发前端,做前后端分离。

这里后端的源码是这样的逻辑,提交表单后走的是这一串代码:

  1. $useName = trim($_POST["userName"]);
  2. $password = trim($_POST["password"]);
  3. $captcha = trim($_POST["captcha"]);
  4. if(empty($useName) || empty($password)){
  5. $this->error("用户名或密码不能为空", "", "", "login");
  6. }
  7. if(empty($captcha)){
  8. $this->error("验证码不能为空", "", "", "login");
  9. }
  10. if(Captcha::checkCaptcha($captcha)){
  11. $this->error("验证码错误", "", "", "login");
  12. }

然后对应的error函数是这样的:

  1. protected function error($msg, $platform, $controller, $action, $time = 3){
  2. if(!$platform){
  3. $platform = P;
  4. }
  5. if(!$controller){
  6. $controller = C;
  7. }
  8. if(!$action){
  9. $action = A;
  10. }
  11. echo $msg;
  12. $refresh = "Refresh:" . $time . ";url=" . URL . "index.php?p=" . $platform . "&c=" . $controller . "&a=" . $action;
  13. header($refresh);
  14. exit;
  15. }

如下不输入任何点击登录后:

 会先进入这个页面:

然后又回到登录页面了,这太拉跨了。

Fiddler抓下看看:

第一个包:

 

可以从Refresh中看到为3,代表3秒后进入后面那个url,然后body里面的字符串被打印到浏览器上。整个架构设计就是用的php加smarty模板引擎,没有使用前后端分离。

修改逻辑:

这里把refresh改成0,然后url那里加个msg=用户名或密码不能为空。前端用个js,把这个msg获取到,然后放到开头提示用户,只能这样了。搞个野路子了。

php修改如下:

  1. protected function error($msg, $platform, $controller, $action, $time = 0){
  2. if(!$platform){
  3. $platform = P;
  4. }
  5. if(!$controller){
  6. $controller = C;
  7. }
  8. if(!$action){
  9. $action = A;
  10. }
  11. $encodingMsg = urlencode($msg);
  12. $refresh = "Refresh:" . $time . ";url=" . URL . "index.php?p=" . $platform . "&c=" . $controller . "&a=" . $action . "&msg=" . $encodingMsg;
  13. header($refresh);
  14. exit;
  15. }

前端

增加js代码:

  1. window.onload = function (){
  2. let msg = decodeURI(getQueryVariable("msg"));
  3. if(msg != "false"){
  4. let mainDiv = document.getElementById("mainDiv");
  5. mainDiv.insertAdjacentHTML("afterbegin", "<div id='alter' class='alert border rounded-3' role='alert'>" + msg + "</div>");
  6. }
  7. }

其中mainDiv是body后面的第一个div

还是这个页面:

点击登录后:

 这样的话,用户体验会稍微高一点点。

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载