编程技术

Document

PHP编程案例分析-查询验证csv文件信息

编程分析-查询验证信息-PHP

需求

最近接到一个朋友的需求，手里有一些数据，数据包含姓名、手机号数据。同时，有一个文件夹，里面都是由手机号命名的照片数据。需要实现一个表单提交，如果姓名和手机号都验证正确，就返回出对应的照片。

在这里插入图片描述

思路

数据量不大的情况下（500一下），可以使用csv文件作为数据存储，遍历每一行的信息，如果比对信息无误，就返回电话号命名的图片。

这里，涉及关键点：

  1. 前端Html技术，需要设计前端表单
  2. 前端JavaScript技术，涉及部分交互逻辑以及接口请求技术
  3. 后端接口处理，接收前端发送的表单数据
  4. 后端数据处理，包括后端遍历读取文件

具备以上技术后，在加上简单的前后端联调，程序就能跑起来。

开搞

首先，前端html表单，我使用了bootstrap框架，通过在head标签中引入

bootstrap css、jquery、bootstrap js文件，作用于全局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
	<!-- 组件 -->
	</div>
</body>
</html>

之后，直接在body中引入表单组件元素，调整信息字段

<div class="container">
    <!-- 组件 -->
    <h1>Input Data</h1>
    <form name="f1" method="post" action="">
        <!-- 输入框1 -->
        <div class="mb-3">
        <label for="nameinput" class="form-label">Name</label>
        <input type="text" class="form-control" id="nameinput" name="nameinput">
        <!-- <div id="emailHelp" class="form-text">please input the right value.</div> -->
        </div>
        <!-- 输入框2 -->
        <div class="mb-3">
        <label for="idcardnuminput" class="form-label">idcardnum</label>
        <input type="number" class="form-control" id="idcardnuminput" name="idcardnuminput">
        </div>
        <!-- 提交按钮 -->
        <input type="submit" class="btn btn-primary" name="bt1" value="Submit">
    </form>
</div>

在前端代码完成后，接下来需要开发后端解析csv文件。

这里，我们新建一个checkData函数，来单独处理这一块逻辑。

function checkData($name,$passwd){
    // 打开 CSV 文件
    $filename = "test0221.csv";
    $file = fopen($filename, "r");
    $result=false;
    // 逐行读取 CSV 文件
    while (($data = fgetcsv($file)) !== FALSE) {
        // $data 是一个包含当前行所有字段的数组
        if($data[0]==$name and $data[1]==$passwd){
            $result=true;
        }    
    }
    // 关闭文件
    fclose($file);
    return $result;
}

checkData函数中传入两个值，一个是name，一个是passwd。使用fopen内置函数来读取本地的csv文件，去循环比对是否正确，正确的话，返回true，错误的话，返回fasle。

接下来后，就是处理html提交表单数据。

php处理post和get表单数据很简单，这里以post请求表单数据展示.

处理逻辑：

html中点击input按钮，会提交bt1、nameinput、idcardnuminput这三个数据，首先，判断是否点击了input按钮，如果是，则处理进行接下来逻辑判断

//判断bt1的值
if(isset($_POST['bt1']))
    {
    	//获取nameinput、idcardnuminput的数据
        $name=$_POST['nameinput'];
        $idcard=$_POST['idcardnuminput'];
	    //nameinput、idcardnuminput的值有一个为空，
    	//弹出填写完整消息框，否则进行图片展示和账号密码判断逻辑
        if(!$name||!$idcard)
            echo"<script>alert('请填写完整！')</script>";
        else
        {
            if(checkData($name,$idcard)){
                echo('<div id="result"><img src="./" alt="图片描述" width="300" height="200"></div>');
            }
            else{
                echo('<script>alert("账号密码错误")</script>');
            }

        }
    }

至此，逻辑分析完成。

我是把php和html融合在一个文件，这样避免了数据的爆破可能，但可能会照成响应速度慢的情况，

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>Hello World</h1>
    <form name="f1" method="post" action="">
        <div class="mb-3">
        <label for="nameinput" class="form-label">Name</label>
        <input type="text" class="form-control" id="nameinput" name="nameinput">
        <!-- <div id="emailHelp" class="form-text">please input the right value.</div> -->
        </div>
        <div class="mb-3">
        <label for="idcardnuminput" class="form-label">idcardnum</label>
        <input type="number" class="form-control" id="idcardnuminput" name="idcardnuminput">
        </div>
        <input type="submit" class="btn btn-primary" name="bt1" value="Submit">
    </form>
<?php
function checkData($name,$passwd){
    // 打开 CSV 文件
    $filename = "test0221.csv";
    $file = fopen($filename, "r");
    $result=false;
    // 逐行读取 CSV 文件
    while (($data = fgetcsv($file)) !== FALSE) {
        // $data 是一个包含当前行所有字段的数组
        if($data[0]==$name and $data[1]==$passwd){
            $result=true;
        }    
    }
    // 关闭文件
    fclose($file);
    return $result;
}

if(isset($_POST['bt1']))
    {
        $name=$_POST['nameinput'];
        $idcard=$_POST['idcardnuminput'];
        if(!$name||!$idcard)
            echo"<script>alert('请填写完整！')</script>";
        else
        {
            if(checkData($name,$idcard)){
                echo('<div id="result"><img src="./" alt="图片描述" width="300" height="200"></div>');
            }
            else{
                echo('<script>alert("账号密码错误")</script>');
            }

        }
    }
?>
    </div>
</body>
</html>