前后台小程序

1. 前台添加菜单

1
2
3
4
5
6
7
<!--增加菜单前台页面-->
		<form name="menu" enctype="multipart/form-data" action="php/menu/addmenu.php" method="post">
			菜名： <input type="text" name="menuname" id="menuname" value="" /><br>
			价格： <input type="text" name="price" id="" value="" /><br>
			图片： <input type="file" name="pic" id="pic" value="" /><br>
			<input type="submit" name="submit" value="添加菜单"/>
		</form>

2. 后台接受请求，接受数据并创建menu数据库，将上传的数据存储到menu数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
	//判断用户有没有输入
	if(!empty($_POST['submit'])) {
		//判定有没有上传图片
		if(!empty($_FILES['pic'])) {
			//后台需要检查上传类型（放置直接上传PHP文件）
			if($_FILES['pic']['type'] == "image/jpeg" || $_FILES['pic']['type'] == "image/png") {
				$path = "../../uploads/";
				$result = move_uploaded_file($_FILES['pic']['tmp_name'],$path.$_FILES['pic']['name']);
			}
			//比如要求增加菜单时一定要上传图片
			if($result) {
				$menuname = htmlspecialchars($_POST['menuname']);
				$price = floatval($_POST['price']); //转成浮点数
				$pic = $_FILES['pic']['name'];
				include "../common/mysql.php";
				$fields = array(
					'name' => $menuname,
					'price' => $price,
					'picture' => $pic
				);
				insert($link, $fields, "menu");
				mysqli_close($link);
			}
		}
	}
?>

image.png

3. 前台发送数据，向后台请求刚才上传的数据，然后将获取到的数据遍历形成菜单界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//使用Ajax获得菜单数据
var xhr = new XMLHttpRequest();
xhr.onload = function() {
	var menu = JSON.parse(this.responseText);
	createMenu(menu);
}
xhr.open("get","php/menu/listmenu.php");
xhr.send();
function createMenu(data) {
	line = "";
	for(i in data) {
		line += "<li><input type=\"checkbox\" name=\"menu_id[]\" value=\""+data[i].id+"\" />　<img width='50px' src=\"uploads/"+data[i].picture+"\">　<span id=\""+data[i].id+"\" >"+data[i].name+"</span><span id=\""+data[i].id+"\" >"+data[i].price+"</span>元　订购份数： <input type=\"text\" name=\"num_"+data[i].id+"\"/></li>"
		document.getElementById("menuUl").innerHTML = line;
	}
}

4. 后台接受请求，打开menu数据库，将数据返回给前段

1
2
3
4
5
6
<?php
	//mysql.php  数据库操作函数库文件
	include "../common/mysql.php";
	$data = getAll($link, "*", "menu", "1=1");
	echo json_encode($data);
?>

image.png

5. 前台注册界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<body>
		<div id="nav"></div>
		<form action="php/member/register.php" method="post" name="form1">
			密　　码： <input type="password" name="member_password" /> <br>
			确认密码： <input type="password" name="member_password_confirm" /> <br>
			用户姓名： <input type="text" name="member_name"/> <br>
			用户电话： <input type="text" name="member_mobile"/> <br>
			用户地址： <input type="text" name="member_address"/> <br>
			<input type="hidden" name="member" value="1" />
			<input type="button" name="btn" value="立即注册"/>
		</form>
	</body>
	<script type="text/javascript">
		$("#nav").load("tpl/nav.html");
		document.form1.btn.onclick = checkdata;
		var isOk = true;
		function checkdata() {
			if(document.form1.member_password.value != document.form1.member_password_confirm.value){
				alert("两次密码输入不一致");
				return false;
			}
				document.form1.submit();
		}
		function checkuser(value) {
			var xhr = new XMLHttpRequest();
			xhr.onload = function() {
				if(this.responseText == "fail") {
					document.form1.btn.disabled = true;
					document.form1.member_username.className = "error";
				}else {
					document.form1.btn.disabled = false;
					document.form1.member_username.className = "";
				}
			}
			var formData = new FormData();
			formData.append("member_username",value)
			xhr.open("POST","php/member/checkuser.php");
			xhr.send(formData);
		}
	</script>

6. 注册用户的时候检测该用户名是否已经被注册，如果没被注册，可以注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
	//验证用户名的合法性
	if(!empty($_POST['member_username'])) {
		include "../common/mysql.php";
		$username = htmlspecialchars($_POST['member_username']);
		//查询该用户名是否已经存在
		$member = getOne($link,"*","member","member_username='".$username."'");
		//如果查询结果为空 表示没有相同的用户注册
		if(empty($member)) {
			echo "ok";
		}else {
			echo "fail";
		}
	}
?>

7. 将可以注册的用户名即其他信息，插入到member数据表里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
	//会员注册
	if(!empty($_POST['member'])) {
		//引入数据库函数库
		include "../common/mysql.php";
		foreach($_POST as $key => $val) {
			$_POST[$key] = htmlspecialchars($val);
		}
		$member = array(
			'member_name' => $_POST['member_name'],
			'member_mobile' => $_POST['member_mobile'],
			'member_address' => $_POST['member_address'],
			'member_username' => $_POST['member_username'],
			'member_password' => sha1($_POST['member_password'])
		);
		insert($link, $member, 'member');
	}
?>

会员界面

8. 会员登录页面，将前台输入的用户名和密码传送到后台

1
2
3
4
5
6
7
8
9
10
11
12
<body>
		<div id="nav"></div><br>
		<!--登陆页面-->
		<form action="php/member/login.php" name="form1" method="post">
			用户名： <input type="text" name="username" /><br>
			密　码： <input type="password" name="password" /><br>
			<input type="submit" name="btn" value="立即登录"/>
		</form>
	</body>
	<script type="text/javascript">
		$("#nav").load("tpl/nav.html");
	</script>

9. 将前台输入的信息进行核实，如果信息不符合留在本页，如果符合，跳转到首页。并以此在member表中查找该会员信息，将会员用户名，名称，电话存储到Session里面，备用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
	session_start();
	if(!empty($_POST['username']) && !empty($_POST['password'])) {
		include "../common/mysql.php";
		//对提交的数据进行预处理
		$username = htmlspecialchars($_POST['username']);
		$password = sha1($_POST['password']);
		$member = getOne($link,"*","member","member_username='".$username."' and member_password='".$password."'");
		if(!empty($member['member_username'])) {
			$_SESSION['member']['username'] = $member['member_username'];
			$_SESSION['member']['name'] = $member['member_name'];
			$_SESSION['member']['mobile'] = $member['member_mobile'];
			header("Location: /php/db/index.html");
		}else {
			header("Location: /php/db/login.html");
		}
	}
?>

10. 判断用户是否登录，如果登录成功返回上述存储在Session里面的数据

1
2
3
4
5
6
7
8
9
10
<?php
	session_start();
	if(!empty($_SESSION['member'])) {
		//将用户登录信息输出到前台
		echo json_encode($_SESSION['member']);
	}else {
		//nologin  表示用户尚未登录
		echo json_encode(array("no login"));
	}
?>

11. 前台想后台发送请求，如果用户登录，界面显示 欢迎”+data.name+”来到商城 用户中心

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
			$('#nav').load("tpl/nav.html");
			$.get("php/member/member_status.php",{},function(data) {
				console.log(data);
				if(typeof(data.name) != "undefined") {
					$('#member_status').html("欢迎"+data.name+"来到商城 <a href=''>用户中心</a>");
				}
			},"json");
		</script>

12. 前台将选中的菜品和分数传送到后台

1
2
3
4
5
6
7
8
var xhr = new XMLHttpRequest();
xhr.onload = function() {
	document.getElementById("tips").innerHTML = this.responseText;
}
var formData = new FormData();
formData.append("menu",JSON.stringify(userSelected));
xhr.open("POST","php/orders/dingdan.php");
xhr.send(formData);

13. 后台接受数据，遍历数组，将数据插入到listorder表中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
	session_start();
	//将用户订餐数据记录到数据库
	//接受提交的订单数据
	if(!empty($_POST['menu'])) {
		include "../common/mysql.php";
		//$_POST['menu']是前台传来的JSON串
		//json_decode 将JSON字符串转变成数组
		$menu = json_decode($_POST['menu'],true);
		print_r($menu);
		//用户选择的checkbox - menu_id
		foreach($menu as $key => $val) {
			$menu_id = $val['menu_id'];
			//订购的份数 num_id
			$amount = intval($val['amount']);
			echo "订单的菜单id=".$menu_id."<br>";
			echo "订单的份数amount=".$amount."<br><br>";	
			$row = getOne($link, "name,price","menu","id=".$menu_id);
			$fields = array(
				"menu_name" => $row['name'],
				"menu_price" => $row['price'],
				'amount' => $amount,
				'createDate' => date("Y-m-d H:i:s"),
				'name' => $_SESSION['member']['name'],
				'number' => $_SESSION['member']['mobile']
			);
			insert($link, $fields, 'orderlist');	
		}
	}
?>

image.png

image.png

赏

谢谢你

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家