<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>属性管理 &#8211; 个人随笔</title>
	<atom:link href="/label/%E5%B1%9E%E6%80%A7%E7%AE%A1%E7%90%86/feed" rel="self" type="application/rss+xml" />
	<link>/</link>
	<description></description>
	<lastBuildDate>Sat, 19 May 2018 12:53:50 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.1</generator>

<image>
	<url>/wp-content/uploads/2022/01/cropped-截屏2022-01-01-18.57.09-32x32.png</url>
	<title>属性管理 &#8211; 个人随笔</title>
	<link>/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>TP3.2商城 （三）类型管理、属性管理、商品属性</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/4552.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/4552.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 12:53:50 +0000</pubDate>
				<category><![CDATA[TP3.2]]></category>
		<category><![CDATA[TP3.2商城]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[商品属性]]></category>
		<category><![CDATA[属性管理]]></category>
		<category><![CDATA[类型管理]]></category>
		<guid isPermaLink="false">/?p=4552</guid>

					<description><![CDATA[类型管理 1.1、类型的列表显示 ①增加方法 ②修改模型增加listData方法 ③处理模板 效果如下 1.2 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1>类型管理</h1>
<h2>1.1、类型的列表显示</h2>
<p>
  ①增加方法
</p>
<p><img fetchpriority="high" decoding="async" width="686" height="494" src="/wp-content/uploads/2018/05/word-image-4081.png" class="wp-image-4553" srcset="/wp-content/uploads/2018/05/word-image-4081.png 686w, /wp-content/uploads/2018/05/word-image-4081-300x216.png 300w" sizes="(max-width: 686px) 100vw, 686px" /></p>
<p>
  ②修改模型增加listData方法
</p>
<p><img decoding="async" width="884" height="658" src="/wp-content/uploads/2018/05/word-image-4082.png" class="wp-image-4554" srcset="/wp-content/uploads/2018/05/word-image-4082.png 884w, /wp-content/uploads/2018/05/word-image-4082-300x223.png 300w, /wp-content/uploads/2018/05/word-image-4082-768x572.png 768w" sizes="(max-width: 884px) 100vw, 884px" /></p>
<p>
  ③处理模板
</p>
<p><img decoding="async" width="1076" height="673" src="/wp-content/uploads/2018/05/word-image-4083.png" class="wp-image-4555" srcset="/wp-content/uploads/2018/05/word-image-4083.png 1076w, /wp-content/uploads/2018/05/word-image-4083-300x188.png 300w, /wp-content/uploads/2018/05/word-image-4083-768x480.png 768w, /wp-content/uploads/2018/05/word-image-4083-1024x640.png 1024w" sizes="(max-width: 1076px) 100vw, 1076px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="1334" height="265" src="/wp-content/uploads/2018/05/word-image-4084.png" class="wp-image-4556" srcset="/wp-content/uploads/2018/05/word-image-4084.png 1334w, /wp-content/uploads/2018/05/word-image-4084-300x60.png 300w, /wp-content/uploads/2018/05/word-image-4084-768x153.png 768w, /wp-content/uploads/2018/05/word-image-4084-1024x203.png 1024w" sizes="(max-width: 1334px) 100vw, 1334px" /></p>
<h2>1.2、类型的删除</h2>
<p>
  ①创建方法
</p>
<p><img loading="lazy" decoding="async" width="841" height="588" src="/wp-content/uploads/2018/05/word-image-4085.png" class="wp-image-4557" srcset="/wp-content/uploads/2018/05/word-image-4085.png 841w, /wp-content/uploads/2018/05/word-image-4085-300x210.png 300w, /wp-content/uploads/2018/05/word-image-4085-768x537.png 768w" sizes="(max-width: 841px) 100vw, 841px" /></p>
<p>
  ②定义模型的dels方法实现删除
</p>
<p><img loading="lazy" decoding="async" width="926" height="376" src="/wp-content/uploads/2018/05/word-image-4086.png" class="wp-image-4558" srcset="/wp-content/uploads/2018/05/word-image-4086.png 926w, /wp-content/uploads/2018/05/word-image-4086-300x122.png 300w, /wp-content/uploads/2018/05/word-image-4086-768x312.png 768w" sizes="(max-width: 926px) 100vw, 926px" /></p>
<h2>1.3、批量删除功能</h2>
<p>
  ①修改模板
</p>
<p><img loading="lazy" decoding="async" width="1123" height="646" src="/wp-content/uploads/2018/05/word-image-4087.png" class="wp-image-4559" srcset="/wp-content/uploads/2018/05/word-image-4087.png 1123w, /wp-content/uploads/2018/05/word-image-4087-300x173.png 300w, /wp-content/uploads/2018/05/word-image-4087-768x442.png 768w, /wp-content/uploads/2018/05/word-image-4087-1024x589.png 1024w" sizes="(max-width: 1123px) 100vw, 1123px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="1249" height="160" src="/wp-content/uploads/2018/05/word-image-4088.png" class="wp-image-4560" srcset="/wp-content/uploads/2018/05/word-image-4088.png 1249w, /wp-content/uploads/2018/05/word-image-4088-300x38.png 300w, /wp-content/uploads/2018/05/word-image-4088-768x98.png 768w, /wp-content/uploads/2018/05/word-image-4088-1024x131.png 1024w" sizes="(max-width: 1249px) 100vw, 1249px" /></p>
<p>
  ②实现全选
</p>
<p><img loading="lazy" decoding="async" width="945" height="365" src="/wp-content/uploads/2018/05/word-image-4089.png" class="wp-image-4561" srcset="/wp-content/uploads/2018/05/word-image-4089.png 945w, /wp-content/uploads/2018/05/word-image-4089-300x116.png 300w, /wp-content/uploads/2018/05/word-image-4089-768x297.png 768w" sizes="(max-width: 945px) 100vw, 945px" /></p>
<p>
  ③实现反选
</p>
<p><img loading="lazy" decoding="async" width="975" height="551" src="/wp-content/uploads/2018/05/word-image-4090.png" class="wp-image-4562" srcset="/wp-content/uploads/2018/05/word-image-4090.png 975w, /wp-content/uploads/2018/05/word-image-4090-300x170.png 300w, /wp-content/uploads/2018/05/word-image-4090-768x434.png 768w" sizes="(max-width: 975px) 100vw, 975px" /></p>
<p>
  ④点击删除触发ajax
</p>
<p><img loading="lazy" decoding="async" width="985" height="702" src="/wp-content/uploads/2018/05/word-image-4091.png" class="wp-image-4563" srcset="/wp-content/uploads/2018/05/word-image-4091.png 985w, /wp-content/uploads/2018/05/word-image-4091-300x214.png 300w, /wp-content/uploads/2018/05/word-image-4091-768x547.png 768w" sizes="(max-width: 985px) 100vw, 985px" /></p>
<p>
  ⑤修改dels方法
</p>
<p><img loading="lazy" decoding="async" width="1015" height="678" src="/wp-content/uploads/2018/05/word-image-4092.png" class="wp-image-4564" srcset="/wp-content/uploads/2018/05/word-image-4092.png 1015w, /wp-content/uploads/2018/05/word-image-4092-300x200.png 300w, /wp-content/uploads/2018/05/word-image-4092-768x513.png 768w" sizes="(max-width: 1015px) 100vw, 1015px" /></p>
<p>
  ⑥修改模型中的dels方法
</p>
<p><img loading="lazy" decoding="async" width="935" height="610" src="/wp-content/uploads/2018/05/word-image-4093.png" class="wp-image-4565" srcset="/wp-content/uploads/2018/05/word-image-4093.png 935w, /wp-content/uploads/2018/05/word-image-4093-300x196.png 300w, /wp-content/uploads/2018/05/word-image-4093-768x501.png 768w" sizes="(max-width: 935px) 100vw, 935px" /></p>
<p>
  ⑦修改前台的js
</p>
<p><img loading="lazy" decoding="async" width="1004" height="610" src="/wp-content/uploads/2018/05/word-image-4094.png" class="wp-image-4566" srcset="/wp-content/uploads/2018/05/word-image-4094.png 1004w, /wp-content/uploads/2018/05/word-image-4094-300x182.png 300w, /wp-content/uploads/2018/05/word-image-4094-768x467.png 768w" sizes="(max-width: 1004px) 100vw, 1004px" /></p>
<h1>属性管理</h1>
<h2>2.1、属性了解</h2>
<p>
  属性作用是用于描述商品信息
</p>
<h3>2.1.1、单选属性</h3>
<p><img loading="lazy" decoding="async" width="643" height="393" src="/wp-content/uploads/2018/05/word-image-4095.png" class="wp-image-4567" srcset="/wp-content/uploads/2018/05/word-image-4095.png 643w, /wp-content/uploads/2018/05/word-image-4095-300x183.png 300w" sizes="(max-width: 643px) 100vw, 643px" /></p>
<h3>2.1.2、唯一属性</h3>
<p><img loading="lazy" decoding="async" width="1002" height="198" src="/wp-content/uploads/2018/05/word-image-4096.png" class="wp-image-4568" srcset="/wp-content/uploads/2018/05/word-image-4096.png 1002w, /wp-content/uploads/2018/05/word-image-4096-300x59.png 300w, /wp-content/uploads/2018/05/word-image-4096-768x152.png 768w" sizes="(max-width: 1002px) 100vw, 1002px" /></p>
<h2>2.2、属性的录入方式</h2>
<p>
  属性录入方式可以划分为两种。一种手工输入另外一种就是列表选择
</p>
<p>
  关于属性的录入方式就是当描述商品时对应的内容，是使用选择框(列表选择)还是文本框(手工输入)
</p>
<p>
  对于属性内容是属于固定的某几个可以使用列表选择
</p>
<p>
  对于属性的内容是不固定可以使用手工输入
</p>
<p><img loading="lazy" decoding="async" width="941" height="374" src="/wp-content/uploads/2018/05/word-image-4097.png" class="wp-image-4569" srcset="/wp-content/uploads/2018/05/word-image-4097.png 941w, /wp-content/uploads/2018/05/word-image-4097-300x119.png 300w, /wp-content/uploads/2018/05/word-image-4097-768x305.png 768w" sizes="(max-width: 941px) 100vw, 941px" /></p>
<h2>2.3、实现属性入库功能</h2>
<h3>2.3.1、创建属性的数据表</h3>
<p>
  CREATE TABLE `shop_attribute` (
</p>
<p>
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
</p>
<p>
    `attr_name` varchar(255) NOT NULL DEFAULT &#8221; COMMENT &#8216;属性名称&#8217;,
</p>
<p>
    `type_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;属性的所属类型 对应shop_type表中的id字段&#8217;,
</p>
<p>
    `attr_type` tinyint(4) NOT NULL DEFAULT &#8216;1&#8217; COMMENT &#8216;属性本身的类型  1唯一属性 2、单选属性&#8217;,
</p>
<p>
    `attr_input_type` tinyint(4) NOT NULL DEFAULT &#8216;1&#8217; COMMENT &#8216;属性的录入方式 1手工输入  2列表选择&#8217;,
</p>
<p>
    `attr_values` varchar(255) NOT NULL DEFAULT &#8221; COMMENT &#8216;属性的默认值 多个值使用逗号隔开&#8217;,
</p>
<p>
    PRIMARY KEY (`id`)
</p>
<p>
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
</p>
<h3>2.3.2、显示属性的添加表单</h3>
<p>
  ①创建控制器方法显示模板
</p>
<p><img loading="lazy" decoding="async" width="978" height="551" src="/wp-content/uploads/2018/05/word-image-4098.png" class="wp-image-4570" srcset="/wp-content/uploads/2018/05/word-image-4098.png 978w, /wp-content/uploads/2018/05/word-image-4098-300x169.png 300w, /wp-content/uploads/2018/05/word-image-4098-768x433.png 768w" sizes="(max-width: 978px) 100vw, 978px" /></p>
<p>
  ②创建模板
</p>
<p><img loading="lazy" decoding="async" width="1091" height="683" src="/wp-content/uploads/2018/05/word-image-4099.png" class="wp-image-4571" srcset="/wp-content/uploads/2018/05/word-image-4099.png 1091w, /wp-content/uploads/2018/05/word-image-4099-300x188.png 300w, /wp-content/uploads/2018/05/word-image-4099-768x481.png 768w, /wp-content/uploads/2018/05/word-image-4099-1024x641.png 1024w" sizes="(max-width: 1091px) 100vw, 1091px" /><br />
<img loading="lazy" decoding="async" width="1067" height="633" src="/wp-content/uploads/2018/05/word-image-4100.png" class="wp-image-4572" srcset="/wp-content/uploads/2018/05/word-image-4100.png 1067w, /wp-content/uploads/2018/05/word-image-4100-300x178.png 300w, /wp-content/uploads/2018/05/word-image-4100-768x456.png 768w, /wp-content/uploads/2018/05/word-image-4100-1024x607.png 1024w" sizes="(max-width: 1067px) 100vw, 1067px" /><br />
<img loading="lazy" decoding="async" width="965" height="343" src="/wp-content/uploads/2018/05/word-image-4101.png" class="wp-image-4573" srcset="/wp-content/uploads/2018/05/word-image-4101.png 965w, /wp-content/uploads/2018/05/word-image-4101-300x107.png 300w, /wp-content/uploads/2018/05/word-image-4101-768x273.png 768w" sizes="(max-width: 965px) 100vw, 965px" /></p>
<p>
  ③修改默认值增加id属性
</p>
<p><img loading="lazy" decoding="async" width="1043" height="510" src="/wp-content/uploads/2018/05/word-image-4102.png" class="wp-image-4574" srcset="/wp-content/uploads/2018/05/word-image-4102.png 1043w, /wp-content/uploads/2018/05/word-image-4102-300x147.png 300w, /wp-content/uploads/2018/05/word-image-4102-768x376.png 768w, /wp-content/uploads/2018/05/word-image-4102-1024x501.png 1024w" sizes="(max-width: 1043px) 100vw, 1043px" /></p>
<p>
  ④使用js实现禁用与取消
</p>
<p><img loading="lazy" decoding="async" width="961" height="640" src="/wp-content/uploads/2018/05/word-image-4103.png" class="wp-image-4575" srcset="/wp-content/uploads/2018/05/word-image-4103.png 961w, /wp-content/uploads/2018/05/word-image-4103-300x200.png 300w, /wp-content/uploads/2018/05/word-image-4103-768x511.png 768w" sizes="(max-width: 961px) 100vw, 961px" /></p>
<h3>2.3.3、实现添加的入库</h3>
<p>
  ①修改add方法
</p>
<p><img loading="lazy" decoding="async" width="1044" height="658" src="/wp-content/uploads/2018/05/word-image-4104.png" class="wp-image-4576" srcset="/wp-content/uploads/2018/05/word-image-4104.png 1044w, /wp-content/uploads/2018/05/word-image-4104-300x189.png 300w, /wp-content/uploads/2018/05/word-image-4104-768x484.png 768w, /wp-content/uploads/2018/05/word-image-4104-1024x645.png 1024w" sizes="(max-width: 1044px) 100vw, 1044px" /></p>
<p>
  ②创建模型编写自动验证
</p>
<p><img loading="lazy" decoding="async" width="1033" height="616" src="/wp-content/uploads/2018/05/word-image-4105.png" class="wp-image-4577" srcset="/wp-content/uploads/2018/05/word-image-4105.png 1033w, /wp-content/uploads/2018/05/word-image-4105-300x179.png 300w, /wp-content/uploads/2018/05/word-image-4105-768x458.png 768w, /wp-content/uploads/2018/05/word-image-4105-1024x611.png 1024w" sizes="(max-width: 1033px) 100vw, 1033px" /></p>
<h2>2.4、属性列表显示功能</h2>
<p>
  ①创建方法获取数据显示模板
</p>
<p><img loading="lazy" decoding="async" width="741" height="334" src="/wp-content/uploads/2018/05/word-image-4106.png" class="wp-image-4578" srcset="/wp-content/uploads/2018/05/word-image-4106.png 741w, /wp-content/uploads/2018/05/word-image-4106-300x135.png 300w" sizes="(max-width: 741px) 100vw, 741px" /></p>
<p>
  ②创建listData方法
</p>
<p><img loading="lazy" decoding="async" width="1003" height="597" src="/wp-content/uploads/2018/05/word-image-4107.png" class="wp-image-4579" srcset="/wp-content/uploads/2018/05/word-image-4107.png 1003w, /wp-content/uploads/2018/05/word-image-4107-300x179.png 300w, /wp-content/uploads/2018/05/word-image-4107-768x457.png 768w" sizes="(max-width: 1003px) 100vw, 1003px" /></p>
<p>
  ③处理模板显示
</p>
<p><img loading="lazy" decoding="async" width="1084" height="684" src="/wp-content/uploads/2018/05/word-image-4108.png" class="wp-image-4580" srcset="/wp-content/uploads/2018/05/word-image-4108.png 1084w, /wp-content/uploads/2018/05/word-image-4108-300x189.png 300w, /wp-content/uploads/2018/05/word-image-4108-768x485.png 768w, /wp-content/uploads/2018/05/word-image-4108-1024x646.png 1024w" sizes="(max-width: 1084px) 100vw, 1084px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="1352" height="349" src="/wp-content/uploads/2018/05/word-image-4109.png" class="wp-image-4581" srcset="/wp-content/uploads/2018/05/word-image-4109.png 1352w, /wp-content/uploads/2018/05/word-image-4109-300x77.png 300w, /wp-content/uploads/2018/05/word-image-4109-768x198.png 768w, /wp-content/uploads/2018/05/word-image-4109-1024x264.png 1024w" sizes="(max-width: 1352px) 100vw, 1352px" /></p>
<h2>2.5、属性的删除</h2>
<p>
  ①修改模板中的连接地址
</p>
<p><img loading="lazy" decoding="async" width="1093" height="268" src="/wp-content/uploads/2018/05/word-image-4110.png" class="wp-image-4582" srcset="/wp-content/uploads/2018/05/word-image-4110.png 1093w, /wp-content/uploads/2018/05/word-image-4110-300x74.png 300w, /wp-content/uploads/2018/05/word-image-4110-768x188.png 768w, /wp-content/uploads/2018/05/word-image-4110-1024x251.png 1024w" sizes="(max-width: 1093px) 100vw, 1093px" /></p>
<p>
  ②创建方法实现删除
</p>
<p><img loading="lazy" decoding="async" width="899" height="706" src="/wp-content/uploads/2018/05/word-image-4111.png" class="wp-image-4583" srcset="/wp-content/uploads/2018/05/word-image-4111.png 899w, /wp-content/uploads/2018/05/word-image-4111-300x236.png 300w, /wp-content/uploads/2018/05/word-image-4111-768x603.png 768w" sizes="(max-width: 899px) 100vw, 899px" /></p>
<p>
  ③在模型下实现删除
</p>
<p><img loading="lazy" decoding="async" width="956" height="520" src="/wp-content/uploads/2018/05/word-image-4112.png" class="wp-image-4584" srcset="/wp-content/uploads/2018/05/word-image-4112.png 956w, /wp-content/uploads/2018/05/word-image-4112-300x163.png 300w, /wp-content/uploads/2018/05/word-image-4112-768x418.png 768w" sizes="(max-width: 956px) 100vw, 956px" /></p>
<h2>2.6、属性编辑</h2>
<h3>2.6.1、显示原始数据</h3>
<p>
  ①创建方法获取原始数据
</p>
<p><img loading="lazy" decoding="async" width="1037" height="536" src="/wp-content/uploads/2018/05/word-image-4113.png" class="wp-image-4585" srcset="/wp-content/uploads/2018/05/word-image-4113.png 1037w, /wp-content/uploads/2018/05/word-image-4113-300x155.png 300w, /wp-content/uploads/2018/05/word-image-4113-768x397.png 768w, /wp-content/uploads/2018/05/word-image-4113-1024x529.png 1024w" sizes="(max-width: 1037px) 100vw, 1037px" /></p>
<p>
  ②处理模板
</p>
<p><img loading="lazy" decoding="async" width="1074" height="694" src="/wp-content/uploads/2018/05/word-image-4114.png" class="wp-image-4586" srcset="/wp-content/uploads/2018/05/word-image-4114.png 1074w, /wp-content/uploads/2018/05/word-image-4114-300x194.png 300w, /wp-content/uploads/2018/05/word-image-4114-768x496.png 768w, /wp-content/uploads/2018/05/word-image-4114-1024x662.png 1024w" sizes="(max-width: 1074px) 100vw, 1074px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="647" height="260" src="/wp-content/uploads/2018/05/word-image-4115.png" class="wp-image-4587" srcset="/wp-content/uploads/2018/05/word-image-4115.png 647w, /wp-content/uploads/2018/05/word-image-4115-300x121.png 300w" sizes="(max-width: 647px) 100vw, 647px" /></p>
<h3>2.6.2、实现入库修改</h3>
<p><img loading="lazy" decoding="async" width="1041" height="704" src="/wp-content/uploads/2018/05/word-image-4116.png" class="wp-image-4588" srcset="/wp-content/uploads/2018/05/word-image-4116.png 1041w, /wp-content/uploads/2018/05/word-image-4116-300x203.png 300w, /wp-content/uploads/2018/05/word-image-4116-768x519.png 768w, /wp-content/uploads/2018/05/word-image-4116-1024x693.png 1024w, /wp-content/uploads/2018/05/word-image-4116-220x150.png 220w" sizes="(max-width: 1041px) 100vw, 1041px" /></p>
<h1>商品的属性关联</h1>
<h2>3.1、添加商品时显示类型</h2>
<p>
  ①增加商品属性选项卡
</p>
<p><img loading="lazy" decoding="async" width="967" height="399" src="/wp-content/uploads/2018/05/word-image-4117.png" class="wp-image-4589" srcset="/wp-content/uploads/2018/05/word-image-4117.png 967w, /wp-content/uploads/2018/05/word-image-4117-300x124.png 300w, /wp-content/uploads/2018/05/word-image-4117-768x317.png 768w" sizes="(max-width: 967px) 100vw, 967px" /></p>
<p>
  ②增加商品属性选项卡对应的table
</p>
<p><img loading="lazy" decoding="async" width="1069" height="560" src="/wp-content/uploads/2018/05/word-image-4118.png" class="wp-image-4590" srcset="/wp-content/uploads/2018/05/word-image-4118.png 1069w, /wp-content/uploads/2018/05/word-image-4118-300x157.png 300w, /wp-content/uploads/2018/05/word-image-4118-768x402.png 768w, /wp-content/uploads/2018/05/word-image-4118-1024x536.png 1024w" sizes="(max-width: 1069px) 100vw, 1069px" /></p>
<p>
  ③修改商品添加获取类型
</p>
<p><img loading="lazy" decoding="async" width="1007" height="631" src="/wp-content/uploads/2018/05/word-image-4119.png" class="wp-image-4591" srcset="/wp-content/uploads/2018/05/word-image-4119.png 1007w, /wp-content/uploads/2018/05/word-image-4119-300x188.png 300w, /wp-content/uploads/2018/05/word-image-4119-768x481.png 768w" sizes="(max-width: 1007px) 100vw, 1007px" /></p>
<p>
  ④修改模板循环显示类型
</p>
<p><img loading="lazy" decoding="async" width="1116" height="697" src="/wp-content/uploads/2018/05/word-image-4120.png" class="wp-image-4592" srcset="/wp-content/uploads/2018/05/word-image-4120.png 1116w, /wp-content/uploads/2018/05/word-image-4120-300x187.png 300w, /wp-content/uploads/2018/05/word-image-4120-768x480.png 768w, /wp-content/uploads/2018/05/word-image-4120-1024x640.png 1024w" sizes="(max-width: 1116px) 100vw, 1116px" /></p>
<p>
  ⑤修改商品表结构
</p>
<p><img loading="lazy" decoding="async" width="872" height="312" src="/wp-content/uploads/2018/05/word-image-4121.png" class="wp-image-4593" srcset="/wp-content/uploads/2018/05/word-image-4121.png 872w, /wp-content/uploads/2018/05/word-image-4121-300x107.png 300w, /wp-content/uploads/2018/05/word-image-4121-768x275.png 768w" sizes="(max-width: 872px) 100vw, 872px" /></p>
<p>
  ⑥修改模型中自定义字段
</p>
<p><img loading="lazy" decoding="async" width="1053" height="384" src="/wp-content/uploads/2018/05/word-image-4122.png" class="wp-image-4594" srcset="/wp-content/uploads/2018/05/word-image-4122.png 1053w, /wp-content/uploads/2018/05/word-image-4122-300x109.png 300w, /wp-content/uploads/2018/05/word-image-4122-768x280.png 768w, /wp-content/uploads/2018/05/word-image-4122-1024x373.png 1024w" sizes="(max-width: 1053px) 100vw, 1053px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="1134" height="276" src="/wp-content/uploads/2018/05/word-image-4123.png" class="wp-image-4595" srcset="/wp-content/uploads/2018/05/word-image-4123.png 1134w, /wp-content/uploads/2018/05/word-image-4123-300x73.png 300w, /wp-content/uploads/2018/05/word-image-4123-768x187.png 768w, /wp-content/uploads/2018/05/word-image-4123-1024x249.png 1024w" sizes="(max-width: 1134px) 100vw, 1134px" /></p>
<h2>3.2、实现类型切换属性变化</h2>
<p>
  ①给select增加id属性
</p>
<p><img loading="lazy" decoding="async" width="1019" height="445" src="/wp-content/uploads/2018/05/word-image-4124.png" class="wp-image-4596" srcset="/wp-content/uploads/2018/05/word-image-4124.png 1019w, /wp-content/uploads/2018/05/word-image-4124-300x131.png 300w, /wp-content/uploads/2018/05/word-image-4124-768x335.png 768w" sizes="(max-width: 1019px) 100vw, 1019px" /></p>
<p>
  ②绑定切换事件
</p>
<p><img loading="lazy" decoding="async" width="1091" height="700" src="/wp-content/uploads/2018/05/word-image-4125.png" class="wp-image-4597" srcset="/wp-content/uploads/2018/05/word-image-4125.png 1091w, /wp-content/uploads/2018/05/word-image-4125-300x192.png 300w, /wp-content/uploads/2018/05/word-image-4125-768x493.png 768w, /wp-content/uploads/2018/05/word-image-4125-1024x657.png 1024w" sizes="(max-width: 1091px) 100vw, 1091px" /></p>
<p>
  ③创建方法
</p>
<p><img loading="lazy" decoding="async" width="1064" height="681" src="/wp-content/uploads/2018/05/word-image-4126.png" class="wp-image-4598" srcset="/wp-content/uploads/2018/05/word-image-4126.png 1064w, /wp-content/uploads/2018/05/word-image-4126-300x192.png 300w, /wp-content/uploads/2018/05/word-image-4126-768x492.png 768w, /wp-content/uploads/2018/05/word-image-4126-1024x655.png 1024w" sizes="(max-width: 1064px) 100vw, 1064px" /></p>
<p>
  ④创建视图
</p>
<p><img loading="lazy" decoding="async" width="1046" height="701" src="/wp-content/uploads/2018/05/word-image-4127.png" class="wp-image-4599" srcset="/wp-content/uploads/2018/05/word-image-4127.png 1046w, /wp-content/uploads/2018/05/word-image-4127-300x201.png 300w, /wp-content/uploads/2018/05/word-image-4127-768x515.png 768w, /wp-content/uploads/2018/05/word-image-4127-1024x686.png 1024w" sizes="(max-width: 1046px) 100vw, 1046px" /></p>
<h2>3.3、实现单选属性的增加功能</h2>
<p>
  由于单选属性是用于控制商品购买的。会提供多个值由用户进行选择。因此在数据录入时对于有单选属性的需要设置为可以提交多个内容
</p>
<p>
  ①修改模板
</p>
<p><img loading="lazy" decoding="async" width="1095" height="696" src="/wp-content/uploads/2018/05/word-image-4128.png" class="wp-image-4600" srcset="/wp-content/uploads/2018/05/word-image-4128.png 1095w, /wp-content/uploads/2018/05/word-image-4128-300x191.png 300w, /wp-content/uploads/2018/05/word-image-4128-768x488.png 768w, /wp-content/uploads/2018/05/word-image-4128-1024x651.png 1024w" sizes="(max-width: 1095px) 100vw, 1095px" /></p>
<p>
  ②编写js代码
</p>
<p><img loading="lazy" decoding="async" width="1070" height="696" src="/wp-content/uploads/2018/05/word-image-4129.png" class="wp-image-4601" srcset="/wp-content/uploads/2018/05/word-image-4129.png 1070w, /wp-content/uploads/2018/05/word-image-4129-300x195.png 300w, /wp-content/uploads/2018/05/word-image-4129-768x500.png 768w, /wp-content/uploads/2018/05/word-image-4129-1024x666.png 1024w" sizes="(max-width: 1070px) 100vw, 1070px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="889" height="294" src="/wp-content/uploads/2018/05/word-image-4130.png" class="wp-image-4602" srcset="/wp-content/uploads/2018/05/word-image-4130.png 889w, /wp-content/uploads/2018/05/word-image-4130-300x99.png 300w, /wp-content/uploads/2018/05/word-image-4130-768x254.png 768w" sizes="(max-width: 889px) 100vw, 889px" /></p>
<h2>3.4、商品添加属性值入库功能</h2>
<h3>3.4.1、创建商品属性表</h3>
<p>
  CREATE TABLE `shop_goods_attr` (
</p>
<p>
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
</p>
<p>
    `goods_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;商品ID&#8217;,
</p>
<p>
    `attr_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;属性ID 对应attribute表中的id字段&#8217;,
</p>
<p>
    `attr_value` varchar(255) NOT NULL DEFAULT &#8221; COMMENT &#8216;属性值&#8217;,
</p>
<p>
    PRIMARY KEY (`id`)
</p>
<p>
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
</p>
<h3>3.4.2、实现可以提交属性ID及值</h3>
<p>
  考虑有多个属性值需要提交因此需要使用数组格式
</p>
<p>
  ①修改模板设置数组格式的name
</p>
<p><img loading="lazy" decoding="async" width="989" height="577" src="/wp-content/uploads/2018/05/word-image-4131.png" class="wp-image-4603" srcset="/wp-content/uploads/2018/05/word-image-4131.png 989w, /wp-content/uploads/2018/05/word-image-4131-300x175.png 300w, /wp-content/uploads/2018/05/word-image-4131-768x448.png 768w" sizes="(max-width: 989px) 100vw, 989px" /></p>
<p>
  ②修改添加的提交方法查看结果
</p>
<p><img loading="lazy" decoding="async" width="842" height="520" src="/wp-content/uploads/2018/05/word-image-4132.png" class="wp-image-4604" srcset="/wp-content/uploads/2018/05/word-image-4132.png 842w, /wp-content/uploads/2018/05/word-image-4132-300x185.png 300w, /wp-content/uploads/2018/05/word-image-4132-768x474.png 768w" sizes="(max-width: 842px) 100vw, 842px" /><br />
<img loading="lazy" decoding="async" width="549" height="273" src="/wp-content/uploads/2018/05/word-image-4133.png" class="wp-image-4605" srcset="/wp-content/uploads/2018/05/word-image-4133.png 549w, /wp-content/uploads/2018/05/word-image-4133-300x149.png 300w" sizes="(max-width: 549px) 100vw, 549px" /></p>
<p>
  ③再次修改name值格式
</p>
<p><img loading="lazy" decoding="async" width="977" height="577" src="/wp-content/uploads/2018/05/word-image-4134.png" class="wp-image-4606" srcset="/wp-content/uploads/2018/05/word-image-4134.png 977w, /wp-content/uploads/2018/05/word-image-4134-300x177.png 300w, /wp-content/uploads/2018/05/word-image-4134-768x454.png 768w" sizes="(max-width: 977px) 100vw, 977px" /></p>
<p>
  ④再次查看结果
</p>
<p><img loading="lazy" decoding="async" width="790" height="296" src="/wp-content/uploads/2018/05/word-image-4135.png" class="wp-image-4607" srcset="/wp-content/uploads/2018/05/word-image-4135.png 790w, /wp-content/uploads/2018/05/word-image-4135-300x112.png 300w, /wp-content/uploads/2018/05/word-image-4135-768x288.png 768w" sizes="(max-width: 790px) 100vw, 790px" /></p>
<p>
  ⑤再次修改name格式
</p>
<p><img loading="lazy" decoding="async" width="1041" height="643" src="/wp-content/uploads/2018/05/word-image-4136.png" class="wp-image-4608" srcset="/wp-content/uploads/2018/05/word-image-4136.png 1041w, /wp-content/uploads/2018/05/word-image-4136-300x185.png 300w, /wp-content/uploads/2018/05/word-image-4136-768x474.png 768w, /wp-content/uploads/2018/05/word-image-4136-1024x632.png 1024w" sizes="(max-width: 1041px) 100vw, 1041px" /></p>
<p>
  ⑥查看结果
</p>
<p><img loading="lazy" decoding="async" width="703" height="359" src="/wp-content/uploads/2018/05/word-image-4137.png" class="wp-image-4609" srcset="/wp-content/uploads/2018/05/word-image-4137.png 703w, /wp-content/uploads/2018/05/word-image-4137-300x153.png 300w" sizes="(max-width: 703px) 100vw, 703px" /></p>
<h3>3.4.3、实现入库</h3>
<p>
  ①查看添加后置钩子函数传输的结果
</p>
<p><img loading="lazy" decoding="async" width="665" height="374" src="/wp-content/uploads/2018/05/word-image-4138.png" class="wp-image-4610" srcset="/wp-content/uploads/2018/05/word-image-4138.png 665w, /wp-content/uploads/2018/05/word-image-4138-300x169.png 300w" sizes="(max-width: 665px) 100vw, 665px" /></p>
<p>
  ②添加后置钩子函数处理属性
</p>
<p><img loading="lazy" decoding="async" width="1051" height="649" src="/wp-content/uploads/2018/05/word-image-4139.png" class="wp-image-4611" srcset="/wp-content/uploads/2018/05/word-image-4139.png 1051w, /wp-content/uploads/2018/05/word-image-4139-300x185.png 300w, /wp-content/uploads/2018/05/word-image-4139-768x474.png 768w, /wp-content/uploads/2018/05/word-image-4139-1024x632.png 1024w" sizes="(max-width: 1051px) 100vw, 1051px" /></p>
<p>
  结果查看数据表即可
</p>
<p><img loading="lazy" decoding="async" width="669" height="403" src="/wp-content/uploads/2018/05/word-image-4140.png" class="wp-image-4612" srcset="/wp-content/uploads/2018/05/word-image-4140.png 669w, /wp-content/uploads/2018/05/word-image-4140-300x181.png 300w" sizes="(max-width: 669px) 100vw, 669px" /></p>
<h2>3.5、商品修改属性入库修改</h2>
<h3>3.5.1、实现显示已有的属性信息</h3>
<p>
  ①修改编辑的方法获取已有的属性信息
</p>
<p><img loading="lazy" decoding="async" width="1056" height="661" src="/wp-content/uploads/2018/05/word-image-4141.png" class="wp-image-4613" srcset="/wp-content/uploads/2018/05/word-image-4141.png 1056w, /wp-content/uploads/2018/05/word-image-4141-300x188.png 300w, /wp-content/uploads/2018/05/word-image-4141-768x481.png 768w, /wp-content/uploads/2018/05/word-image-4141-1024x641.png 1024w" sizes="(max-width: 1056px) 100vw, 1056px" /></p>
<p>
  ②查看结果
</p>
<p><img loading="lazy" decoding="async" width="857" height="615" src="/wp-content/uploads/2018/05/word-image-4142.png" class="wp-image-4614" srcset="/wp-content/uploads/2018/05/word-image-4142.png 857w, /wp-content/uploads/2018/05/word-image-4142-300x215.png 300w, /wp-content/uploads/2018/05/word-image-4142-768x551.png 768w" sizes="(max-width: 857px) 100vw, 857px" /></p>
<p>
  ③继续修改编辑方法获取已有的类型信息
</p>
<p><img loading="lazy" decoding="async" width="1049" height="473" src="/wp-content/uploads/2018/05/word-image-4143.png" class="wp-image-4615" srcset="/wp-content/uploads/2018/05/word-image-4143.png 1049w, /wp-content/uploads/2018/05/word-image-4143-300x135.png 300w, /wp-content/uploads/2018/05/word-image-4143-768x346.png 768w, /wp-content/uploads/2018/05/word-image-4143-1024x462.png 1024w" sizes="(max-width: 1049px) 100vw, 1049px" /></p>
<p>
  ④继续格式化所获取到的属性信息
</p>
<p><img loading="lazy" decoding="async" width="1068" height="627" src="/wp-content/uploads/2018/05/word-image-4144.png" class="wp-image-4616" srcset="/wp-content/uploads/2018/05/word-image-4144.png 1068w, /wp-content/uploads/2018/05/word-image-4144-300x176.png 300w, /wp-content/uploads/2018/05/word-image-4144-768x451.png 768w, /wp-content/uploads/2018/05/word-image-4144-1024x601.png 1024w" sizes="(max-width: 1068px) 100vw, 1068px" /><br />
<img loading="lazy" decoding="async" width="899" height="583" src="/wp-content/uploads/2018/05/word-image-4145.png" class="wp-image-4617" srcset="/wp-content/uploads/2018/05/word-image-4145.png 899w, /wp-content/uploads/2018/05/word-image-4145-300x195.png 300w, /wp-content/uploads/2018/05/word-image-4145-768x498.png 768w" sizes="(max-width: 899px) 100vw, 899px" /></p>
<p>
  ④继续格式化数据
</p>
<p><img loading="lazy" decoding="async" width="1069" height="698" src="/wp-content/uploads/2018/05/word-image-4146.png" class="wp-image-4618" srcset="/wp-content/uploads/2018/05/word-image-4146.png 1069w, /wp-content/uploads/2018/05/word-image-4146-300x196.png 300w, /wp-content/uploads/2018/05/word-image-4146-768x501.png 768w, /wp-content/uploads/2018/05/word-image-4146-1024x669.png 1024w" sizes="(max-width: 1069px) 100vw, 1069px" /></p>
<p>
  格式化效果如下
</p>
<p><img loading="lazy" decoding="async" width="1105" height="703" src="/wp-content/uploads/2018/05/word-image-4147.png" class="wp-image-4619" srcset="/wp-content/uploads/2018/05/word-image-4147.png 1105w, /wp-content/uploads/2018/05/word-image-4147-300x191.png 300w, /wp-content/uploads/2018/05/word-image-4147-768x489.png 768w, /wp-content/uploads/2018/05/word-image-4147-1024x651.png 1024w" sizes="(max-width: 1105px) 100vw, 1105px" /></p>
<p>
  ②模板显示数据
</p>
<p><img loading="lazy" decoding="async" width="1069" height="465" src="/wp-content/uploads/2018/05/word-image-4148.png" class="wp-image-4620" srcset="/wp-content/uploads/2018/05/word-image-4148.png 1069w, /wp-content/uploads/2018/05/word-image-4148-300x130.png 300w, /wp-content/uploads/2018/05/word-image-4148-768x334.png 768w, /wp-content/uploads/2018/05/word-image-4148-1024x445.png 1024w" sizes="(max-width: 1069px) 100vw, 1069px" /><br />
<img loading="lazy" decoding="async" width="1067" height="556" src="/wp-content/uploads/2018/05/word-image-4149.png" class="wp-image-4621" srcset="/wp-content/uploads/2018/05/word-image-4149.png 1067w, /wp-content/uploads/2018/05/word-image-4149-300x156.png 300w, /wp-content/uploads/2018/05/word-image-4149-768x400.png 768w, /wp-content/uploads/2018/05/word-image-4149-1024x534.png 1024w" sizes="(max-width: 1067px) 100vw, 1067px" /><br />
<img loading="lazy" decoding="async" width="1075" height="194" src="/wp-content/uploads/2018/05/word-image-4150.png" class="wp-image-4622" srcset="/wp-content/uploads/2018/05/word-image-4150.png 1075w, /wp-content/uploads/2018/05/word-image-4150-300x54.png 300w, /wp-content/uploads/2018/05/word-image-4150-768x139.png 768w, /wp-content/uploads/2018/05/word-image-4150-1024x185.png 1024w" sizes="(max-width: 1075px) 100vw, 1075px" /></p>
<p>
  最终效果如下
</p>
<p><img loading="lazy" decoding="async" width="975" height="539" src="/wp-content/uploads/2018/05/word-image-4151.png" class="wp-image-4623" srcset="/wp-content/uploads/2018/05/word-image-4151.png 975w, /wp-content/uploads/2018/05/word-image-4151-300x166.png 300w, /wp-content/uploads/2018/05/word-image-4151-768x425.png 768w" sizes="(max-width: 975px) 100vw, 975px" /></p>
<h3>3.5.2、实现属性的入库修改</h3>
<p><img loading="lazy" decoding="async" width="991" height="678" src="/wp-content/uploads/2018/05/word-image-4152.png" class="wp-image-4624" srcset="/wp-content/uploads/2018/05/word-image-4152.png 991w, /wp-content/uploads/2018/05/word-image-4152-300x205.png 300w, /wp-content/uploads/2018/05/word-image-4152-768x525.png 768w, /wp-content/uploads/2018/05/word-image-4152-220x150.png 220w" sizes="(max-width: 991px) 100vw, 991px" /></p>
<h1>总结商品属性之间的关系</h1>
<p><img loading="lazy" decoding="async" width="1141" height="624" src="/wp-content/uploads/2018/05/word-image-4153.png" class="wp-image-4625" srcset="/wp-content/uploads/2018/05/word-image-4153.png 1141w, /wp-content/uploads/2018/05/word-image-4153-300x164.png 300w, /wp-content/uploads/2018/05/word-image-4153-768x420.png 768w, /wp-content/uploads/2018/05/word-image-4153-1024x560.png 1024w" sizes="(max-width: 1141px) 100vw, 1141px" /></p>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/4552.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
