接着上一篇《树莓派-通过Web网页实现对树莓派的关机和重启操作》的思路继续扩展，通过Web网页来控制GPIO针脚的电平输出。
实现思路
1.通过在树莓派上搭建一个http服务器，如：Apache，增加一个控制树莓派的页面。
2.通过在树莓派的控制页面，写入需要在终端执行的命令。
3.服务器端通过python，定时读取文件内容，执行终端命令。
效果图
实现步骤
1.搭建php+Apache环境：
本文主要描述程序编写，如何搭建php+Apache环境，可以网上查找资料，自行实现。
2.编写Web网页控制端：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>树莓派Web控制中心</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.page-header { margin: 20px 0; border-bottom: 1px solid #eee; padding-bottom: 0; text-align: center; }
.btn-item { text-align: center; }
i { margin-right: 3px; display: inline-block; }
h1 { text-align: center; }
.tip { font-weight: bold; color: black; }
.lead { font-size: small; }
.gpio-item { text-align: center; }
.btn-gnd, .btn-gpio { padding: 10px 5px; margin-bottom: 5px; width: 100%; font-size: small; }
.gpio .row { margin-top: 5px; }
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h3>
树莓派Web控制中心</h3>
<p class="lead">
用于控制连接到树莓派的各种传感器
</p>
</div>
<div class="panel panel-default">
<div class="panel-heading">
设备</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-3 btn-item">
</div>
<div class="col-xs-3 btn-item">
<a class="btn btn-danger btn-trigger"><i class="fa fa-power-off"></i>关机</a>
</div>
<div class="col-xs-3 btn-item">
<a class="btn btn-primary btn-trigger"><i class="fa fa-refresh"></i>重启</a>
</div>
<div class="col-xs-3 btn-item">
</div>
<script type="text/javascript">
var url = "ajax/pi.php";
$(function () {
$(".btn-test").click(function () {
$.ajax({
type: "POST",
url: url,
data: {
action: "excute-linux-shell",
cmd: "ls"
},
success: function (result) {
$(".tip").html(result);
}