跳蚤市场之商品发布功能

一   商品类别和小类的联动

以下是一个示例代码,展示了如何实现商品类别中大类和小类的联动。

商品大类选择框、小类选择框 的设计

        html部分

<form id="category-form">
  <label for="major-category">大类:</label>
  <select id="major-category" name="major_category">
    <option value="" disabled selected>请选择大类</option>
    <option value="clothing">服装</option>
    <option value="electronics">电子产品</option>
    <option value="furniture">家具</option>
  </select>

  <label for="minor-category">小类:</label>
  <select id="minor-category" name="minor_category">
    <option value="" disabled selected>请选择小类</option>
  </select>
</form>

商品大类和小类的联动

        JavaScript部分:

// 大类和小类的对应关系
const categoryMapping = {
  clothing: ["衣服", "鞋子", "包包"],
  electronics: ["手机", "电脑", "相机"],
  furniture: ["沙发", "床", "桌子"]
};

// 获取大类和小类的select元素
const majorCategorySelect = document.getElementById("major-category");
const minorCategorySelect = document.getElementById("minor-category");

// 监听大类select的变化
majorCategorySelect.addEventListener("change", function() {
  const selectedMajorCategory = majorCategorySelect.value;
  // 根据大类的选择更新小类的options
  updateMinorCategoryOptions(selectedMajorCategory);
});

// 根据大类的选择更新小类的options
function updateMinorCategoryOptions(selectedMajorCategory) {
  // 清空小类的options
  minorCategorySelect.innerHTML = "";

  // 获取对应的小类数组
  const minorCategories = categoryMapping[selectedMajorCategory];

  // 创建小类的options
  minorCategories.forEach(function(minorCategory) {
    const option = document.createElement("option");
    option.value = minorCategory;
    option.textContent = minorCategory;
    minorCategorySelect.appendChild(option);
  });
}

        上述代码中,我们首先定义了一个大类和小类的对应关系`categoryMapping`,然后通过JavaScript获取到大类和小类的select元素,并监听大类select的变化。当大类发生变化时,我们根据所选的大类来更新小类的options。

        在`updateMinorCategoryOptions`函数中,我们首先清空小类的options,然后根据所选的大类获取对应的小类数组,并通过遍历创建小类的options。最后,将创建好的options添加到小类的select元素中。

二    图片的上传

        下面是一个简单的PHP图片上传的示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>图片上传</title>
</head>
<body>
    <h1>图片上传</h1>

    <?php
        // 检查是否有文件上传
        if(isset($_FILES['image'])){
            $errors = array();
            $file_name = $_FILES['image']['name'];
            $file_size = $_FILES['image']['size'];
            $file_tmp = $_FILES['image']['tmp_name'];
            $file_type = $_FILES['image']['type'];
            $file_ext = strtolower(end(explode('.', $_FILES['image']['name'])));

            $extensions = array("jpeg", "jpg", "png");

            // 检查文件类型和大小
            if(in_array($file_ext, $extensions) === false){
                $errors[] = "扩展名不被支持,请选择 JPEG 或 PNG 文件.";
            }

            if($file_size > 2097152){
                $errors[] = '文件大小不能超过 2MB.';
            }

            // 如果没有错误,则上传文件
            if(empty($errors) == true){
                move_uploaded_file($file_tmp, "uploads/" . $file_name);
                echo "文件上传成功!";
            }
            else {
                print_r($errors);
            }
        }
    ?>
    <form action="" method="POST" enctype="multipart/form-data">
        <input type="file" name="image" />
        <input type="submit"/>
    </form>
</body>
</html>

  这个示例代码有以下部分:

  1. <form>标签里设置enctype="multipart/form-data",这样表单可以上传文件。
  2. 在PHP代码中,$_FILES变量用于获取上传的文件信息。
  3. 检查文件的扩展名和大小,如果不符合要求则添加错误信息到$errors数组中。
  4. 如果没有错误,则使用move_uploaded_file()函数将文件从临时位置移动到指定的文件夹中。
  5. 如果有错误,使用print_r()函数输出错误信息。

        请注意,这只是一个简单的示例,未包含对文件的安全性验证。在实际应用中,你可能需要进一步验证文件类型和大小,以及限制上传文件的扩展名和大小。

三   确定客户是否登录

以下是一个示例代码,用于在PHP中检查客户是否登录:

代码如下:

<?php
session_start();

// 判断用户是否已经登录
if(isset($_SESSION['is_logged_in']) && $_SESSION['is_logged_in'] === true) {
    // 用户已经登录
    echo "用户已经登录";
} else {
    // 用户未登录
    echo "用户未登录";
}
?>

        在这个示例中,我们使用了`session_start()`函数来启动会话,并通过`$_SESSION`超全局数组来访问会话数据。

        如果用户已经登录,并且会话中的`is_logged_in`键的值为`true`,则输出"用户已经登录"。否则,输出"用户未登录"。

        注意:在检查登录状态之前,确保已经设置了正确的会话变量和值。这通常在用户登录时完成,例如在验证用户凭据后设置`$_SESSION['is_logged_in'] = true;`。

四  跳蚤市场商品发布功能实例

1.  商品发布(出售)效果

2. 商品发布(出售) 代码 

publish_sell.php代码 如下:

<?php 
session_start();
if($_SESSION['id']==''){
	echo "<script>alert('你尚未登录,请登录!');</script>";
	echo "<script>location.href='login.php'</script>";
}

include_once 'conn.php'; //引入数据库文件
if(isset($_POST['product_name'])){
		//获取商品发布信息
		$product_name=$_POST['product_name'];
		$large_id=$_POST['large_type'];
		$small_id=$_POST['small_type'];
		$manufacturer=$_POST['manufacturer'];
		$model=$_POST['model'];
		$specification=$_POST['specification'];
		$product_unit=$_POST['product_unit'];
		$product_number=$_POST['product_number'];
		$original_price=$_POST['original_price'];
		$current_price=$_POST['current_price'];
		$illustrate=$_POST['illustrate'];
		$new_old=$_POST['new_old'];
		$year=$_POST['year'];
		$month=$_POST['month'];
		$day=$_POST['day'];
		$purchase_date=$year.'-'.$month.'-'.$day;
		$publish_date=date("Y-m-d");
		$in_out='进';
		$custom_id=$_SESSION['id'];

		$sql="insert into product(large_id,small_id,custom_id,product_name,product_model,specification,product_unit,product_number,originial_price,current_price,manufacturer,illustrate,purchase_date,new_old,publish_date,in_out) values ('$large_id','$small_id','$custom_id','$product_name','$model','$specification','$product_unit','$product_number','$original_price','$current_price','$manufacturer','$illustrate','$purchase_date','$new_old','$publish_date','$in_out')";

		if($conn->query($sql)){
			echo "<script>alert('出售商品增加成功,请上传商品图片');</script>";
			echo "<script>location.href='upload.php'</script>";
		} else {
			echo "<script>alert('出售商品发布不成功');</script>";
			echo "<script>location.href='publish_sell.php'</script>";
		}	
}?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>发布出售商品信息</title>
<link rel="stylesheet" type="text/css" href='css/sell.css'>
<style>
.select1{
		width:200px;
		font-size:16px;
		padding:5px;
		border:1px solid blue;
		}
.select2{
		font-size:16px;
		padding:5px;
		border:1px solid blue;
		}	   	
</style>
<script>
var s=new Array();
<?php
	$i=0;
	$sql='select * from small_type';
	$result=$conn->query($sql);
	if($result->num_rows>0){
		while($row=$result->fetch_assoc()){
?>
	s[<?php echo $i; ?>]=new Array(<?php echo $row['large_id'] ?>,<?php echo $row['small_id'] ?>,<?php echo "'".$row['small_name']."'" ?>);
<?php $i=$i+1; }}?>
</script>
<script src="js/publish.js"></script>
</head>
<body>
	<div align="center">
<iframe src='top.html' style='border:none;width:1020px; margin-bottom:-10px;'>
</iframe>
	</div>

	<div align="center">
		<form action='' method='post' name='sellform' onsubmit="return sell_submit()">
		<table border='0' width='1000'>	
		<tr>
		<td colspan='2' class='input_title'>发布出售商品信息</td>
		</tr>
		<tr>
		<td align='right' width='400'>
			<span class='input_label'>品名</span>
		</td>
		<td>
			<input type='text' name='product_name' class='input' required placeholder="品名不能为空">
			<span class='tip'>*</span>
		</td>
		</tr>

    <tr>
		<td align='right' width='400'>
			<span class='input_label'>大类名</span>
		</td>
		<td>
			<select name='large_type' class='select1' onchange="change(this.value)">
				<option>请选择</option>
				<?php 
				 $sql="select * from large_type";
				 $result=$conn->query($sql);
				 if($result->num_rows>0){
				 	while($row=$result->fetch_assoc()){
				 		echo "<option value='".$row['large_id']."'>".$row['large_name']."</option>";
				 	}
				 }
				?>
			</select>
		</td>
		</tr>

		<tr>
		<td align='right' width='400'>
			<span class='input_label'>小类名</span>
		</td>
		<td>
			<select  name='small_type' class='select1'>
				<option>请选择</option>
			</select>
		</td>
		</tr>

		<tr>
		<td align='right'>
		<span class='input_label'>生产厂商</span>
		</td>
		<td>
			<input type='text' name='manufacturer' class='input' required placeholder="生产厂家不能为空">
			<span class='tip'>*</span>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>型号</span>
		</td>
		<td>
			<input type='text' name='model' class='input' required placeholder="型号不能为空">
			<span class='tip'>*</span>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>规格</span>
		</td>
		<td>
			<input type='text' name='specification' class='input' required placeholder="规格不能为空">
			<span class='tip'>*</span>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>单位</span>
		</td>
		<td>
		 <input type='text' name='product_unit' class='input' required placeholder="单位不能为空">
			<span class='tip'>*</span>
		</td>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>数量</span>
		</td>
		<td>
		<input type='text' name='product_number' class='input' required placeholder="数量不能为空">
		<span class='tip'>*</span>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>原价</span>
		</td>
		<td>
		<input type='text' name='original_price' class='input' r placeholder="原价不能为空">
		<span class='tip'>*</span>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>现价</span>
		</td>
		<td>
		<input type='text' name='current_price' class='input' required placeholder="现价不能为空">
		<span class='tip'>*</span>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>说明</span>
		</td>
		<td>
		<textarea name='illustrate' cols=40 rows=10 style='font-size:16px;border:1px solid blue;'></textarea>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>新旧</span>
		</td>
		<td>
		<input type='text' name='new_old' class='input' required placeholder="新旧不能为空">
		<span class='tip'>*</span>
		</td>
		</tr>
		<tr>
		<td align='right'>
		<span class='input_label'>购买日期</span>
		</td>
		<td>
		<select name="year" class='select2'>
		<?php
			for($year=date("Y");$year>date("Y")-10;$year--){
				echo "<option value='".$year."'>".$year."</option>";
				 } 
		?>
		</select>
		年
		<select  name="month" class='select2' onchange="dd()">			
		<?php
         for($month=1;$month<=12;$month++)
         { echo "<option value='".$month."'>".$month."</option>";}
		?>
		</select>
		月
		<select name="day" class='select2'>
		<?php
         for($day=1;$day<=31;$day++)
         { echo "<option value='".$day."'>".$day."</option>";}
		?>
		</select>
		日
		</td>
		</tr>

		<tr>
		<td colspan='2' align='center'>
			<input type='submit' class='button' value='提交'>
			<input type='reset'  class='button' value='重置'>
		</td>
		</tr>
		</table>
		</form>
	</div> 
  <div align="center">
	<iframe src='bottom.html' style='border:none;width:1020px; margin-bottom:-10px;'>
	</div>
	</body>
	<?php  $conn->close();	?>
</html>

3 .  图片上传效果

4   图片上传代码

upload.php如下:

<?php 
session_start();
if($_SESSION['id']==''){
	echo "<script>alert('你尚未登录,请登录!');</script>";
	echo "<script>location.href='login.php'</script>";
}
include 'conn.php'; //引入数据库文件
$allowedExts=array("gif","jpeg",'jpg','png');
$uploadDir="uploads/"; //上传目录
$custom_id=$_SESSION['id']; //客户编号

if(isset($_FILES['upfile'])){
	$temp=explode(".",$_FILES['upfile']['name']);
	$extension=end($temp);

	//检查文件类型是否为jpg、gif、png
	if(!in_array($extension,$allowedExts)){
		echo "<script>alert('只允许上传 JPG, JPEG, PNG 或 GIF 格式的图片');</script>";
		echo "<script>location.href='upload.php'</script>";
		}

    //检查文件大小是否超标
    $fileMaxSize=2000000; //1mb
    if($_FILES['upfile']['size']>$fileMaxSize){
    	echo "<script>alert('文件大小不能超过 1MB');</script>";
		echo "<script>location.href='upload.php'</script>";
		}

	// 生成唯一的文件名(可选)  
    $uniqueFileName = uniqid() . '.' . $extension; 
    //创建目标目录
    if(!is_dir($uploadDir)) {  
        mkdir($uploadDir);  
    }
 	//将文件从临时目录移动到目标目录 
 	$targetDir=$uploadDir. $uniqueFileName;
 	if(move_uploaded_file($_FILES['upfile']['tmp_name'], $targetDir)){
        $sql="select * from product where custom_id='$custom_id' order by product_id desc";
        $result=$conn->query($sql);
        $row=$result->fetch_assoc();
        $product_id=$row['product_id'];
        $sql="update product set photo='$uniqueFileName' where product_id=$product_id";
        $conn->query($sql);
  		echo "<script>alert('图片上传成功')</script>";
		echo "<script>location.href='publish_sell.php'</script>";
 	} else {
 		echo "<script>alert('图片上传失败,请重新上传')</script>";
		echo "<script>location.href='upload.php'</script>";
 	}
  }
  //关闭连接
  $conn->close();
?>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片上传</title>
		<link rel="stylesheet" type="text/css" href='css/register.css'>
		<script>
			function validInput(){
				if(document.upform.upfile.value==""){
					alert("请选择上传文件!");
					document.upform.upfile.focus();
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
	<div align="center">
<iframe src='top.html' style='border:none;width:1020px; margin-bottom:-10px;'>
</iframe>
	</div>

	<div align="center">
		<form action='' name='upform'  method='post' onsubmit="return validInput()" enctype='multipart/form-data'>
			<p align="center"><font size="+2">图片上传</font></p>
			<p align="center">请选择图片文件的地址:
				<input type="file" name="upfile" size="40">
				<input type="submit" value="上传">
			</p>		
		</form>
		<p align="center"><a href="index.php">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:close();">退出</a></p>
	</div>
    
    <div align="center">
	<iframe src='bottom.html' style='border:none;width:1020px; margin-bottom:-10px;'>
	</div>
	</body>
</html>

5   相关表

表的定义SQL:

商品表
//商品表
CREATE TABLE IF NOT EXISTS `product` (
  `product_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '商品编号',
  `large_id` int(11) NOT NULL COMMENT '大类名',
  `small_id` bigint(20) NOT NULL COMMENT '小类名',
  `custom_id` int(11) NOT NULL COMMENT '客户编号',
  `product_name` varchar(20) COLLATE utf8_unicode_ci NOT NULL COMMENT '品名',
  `product_model` varchar(20) COLLATE utf8_unicode_ci NOT NULL COMMENT '型号',
  `specification` varchar(20) COLLATE utf8_unicode_ci NOT NULL COMMENT '规格',
  `product_unit` varchar(2) COLLATE utf8_unicode_ci NOT NULL COMMENT '单位',
  `product_number` int(11) NOT NULL COMMENT '数量',
  `originial_price` decimal(12,0) NOT NULL COMMENT '原价',
  `current_price` decimal(12,0) NOT NULL COMMENT '现价',
  `manufacturer` varchar(30) COLLATE utf8_unicode_ci NOT NULL COMMENT '生产厂家',
  `illustrate` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '说明',
  `photo` varchar(30) COLLATE utf8_unicode_ci NOT NULL COMMENT '图片',
  `purchase_date` datetime NOT NULL COMMENT '购买日期',
  `new_old` varchar(6) COLLATE utf8_unicode_ci NOT NULL COMMENT '新旧',
  `publish_date` datetime NOT NULL COMMENT '发布时间',
  `state` varchar(2) COLLATE utf8_unicode_ci NOT NULL DEFAULT '在售' COMMENT '状态',
  `in_out` varchar(1) COLLATE utf8_unicode_ci NOT NULL COMMENT '进出',
  PRIMARY KEY (`product_id`),
  KEY `large_id` (`large_id`),
  KEY `small_id` (`small_id`),
  KEY `custom_id` (`custom_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=8 ;

大类表
//表的结构 `large_type`
CREATE TABLE IF NOT EXISTS `large_type` (
  `large_id` int(11) NOT NULL COMMENT '大类号',
  `large_name` varchar(8) COLLATE utf8_unicode_ci NOT NULL COMMENT '大类名',
  PRIMARY KEY (`large_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
小类表
//表的结构 `small_type`
CREATE TABLE IF NOT EXISTS `small_type` (
  `large_id` int(11) NOT NULL COMMENT '大类号',
  `small_id` bigint(20) NOT NULL COMMENT '小类号',
  `small_name` varchar(8) COLLATE utf8_unicode_ci NOT NULL COMMENT '小类名',
  PRIMARY KEY (`small_id`),
  KEY `large_id` (`large_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

上一篇:GESP4级考试语法知识(算法概论(一))


下一篇:vue--vueCLI