一、搭建环境--WAMP

       WAMP是指开发者在Windows操作系统下使用这些Linux环境里的工具称为使用WAMP。WAMP中的W代表windows，A代表apache，M代表mysql，P代表php。WAMP是一个强大的Web应用程序平台。

       而phpstudy是一个可以快速搭建WAMP环境的web开发环境，安装就能使用。phpstudy集中了多个PHP的版本，把php后缀的文件放到网站根目录，用浏览器访问就可以把脚本当作php代码进行解析。

phpstudy下载地址：Windows版phpstudy下载 - 小皮面板(phpstudy) (xp)

下载好后是一个zip后缀的压缩包，点开傻瓜式安装就可以了。最后会问你要不要更新，可更可不更，但是我这里推荐还是不要更新 ，避免一些玄学问题。

打开后如下图。打开后提示下载vc9，直接关闭即可，不影响使用，每次打开都要关一次，嫌麻烦也可以安装一下。自此环境搭建完毕！

 

把文件或者文件夹放到网站根目录 ，在PHP study面板点击其他选项菜单-->网站根目录。浏览器URL输入栏处输入本机ip再跟上文件名或者文件夹名/文件名。

 

二、前后端的交互

我展示一下我写的自我介绍表单

 当输入不符合编写的规则时，输出提示。

 浏览器URL输入栏处输入本机ip再跟上文件名或者文件夹名/文件名进行访问。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>香蕉你个苹果菠萝批</title>
		<style type="text/css">
			span{
				color: red;
			}
			
		</style>
	</head>
	<body>
		
		<?php
		//定义变量并默认值设置为空,所有变量初始化
			$name=$email=$zuoym=$diqu=$nianl=$gender="";
			$nameErr=$emailErr=$nianlErr=$genderErr="";
		
		if($_SERVER["REQUEST_METHOD"] == "POST"){
			
			//传输值进来，判断name值是否为空
			if(empty($_POST["name"])){
				$nameErr = "名字必须填写哦";
			}else{
				$name = abc($_POST["name"]);
				//正则检测名字是否只包含字母跟空格
				if(!preg_match("/^[a-zA-Z ]*$/",$name)){
					$nameErr = "只能是字母和空格哦";
				}
			}
			
			if(empty($_POST["email"])){
				$emailErr = "邮箱必须填写哦";
			}else{
				$email = abc($_POST["email"]);
				//正则检测电子邮件是否合法
				if(!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)){
					$emailErr = "非法邮箱";
					$email = "邮箱不对哦";
				}
			}
						
			if(empty($_POST["nianl"])){
				$nianlErr = "年龄必须填写哦";
			}else{
				$nianl = abc($_POST["nianl"]);
				//正则检测用户输入的是否为数字
				if(!preg_match("/^\d*$/",$nianl)){
					$nianlErr = "只能输入数字";
				}
			}
			
			if(empty($_POST["zuoym"])){
				$zuoymErr = "";
			}else{
				$zuoym = abc($_POST["zuoym"]);
				
			}
			
            if(empty($_POST["diqu"])){
				$diquErr = "";
			}else{
				$diqu = abc($_POST["diqu"]);
				
			}
			
			if(empty($_POST["gender"])){
				$genderErr = "性别是必须选的哦";
			}else{
				$gender = abc($_POST["gender"]);
				
			}
			
			
		}
		//定义函数过滤危险字符
		function abc($asd){
			$asd = trim($asd);
			$asd = stripslashes($asd);
			$asd = htmlspecialchars($asd);
			return $asd;
		}
		
		?>
		
		
		<h1>自我介绍</h1>
		<p><span>*为必填字项</span></p>
		<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
			名字：<input type="text" name="name" value="<?php echo $name;?>" />
			<span>*<?php echo $nameErr;?></span>
			<br><br>
		    年龄：<input type="text" name="nianl" value="<?php echo $nianl;?>" />
			<span>*<?php echo $nianlErr;?></span>
			<br><br>
			邮箱：<input type="text" name="email" value="<?php echo $email;?>" />
			<span>*<?php echo $emailErr;?></span>
			<br><br>
			性别：
			<input type="radio" name="gender" <?php if(isset($gender) && $gender=="woman") echo "checked";?> value="woman" />女
			<input type="radio" name="gender" <?php if(isset($gender) && $gender=="man") echo "checked";?> value="man" />男
			<span>*<?php echo $genderErr;?></span>
			<br><br>
			现居：<input type="text" name="diqu">
			<br><br>
			座右铭：<textarea rows="5" cols="40" name="zuoym">
				<?php echo $zuoym;?>
			</textarea>
			<br><br>	
			<input type="submit" name="submit" value="提交" />
		</form>
		
		<?php
		echo "<p>你输入的信息是：</p>";
		echo $name;
		echo "<br>";
		echo $nianl;
		echo "<br>";
		echo $email;
		echo "<br>";
		echo $gender;
		echo "<br>";
		echo $diqu;
		echo "<br>";
		echo $zuoym;
		echo "<br>";
		?>
		
	</body>
</html>

写的很简单，目的是学会前后端是怎么交互的就行。

最后，我负责公开代码，你负责点赞关注！谢谢浏览

 

 

更多推荐

前端与后端的交互--(PHP)