1、数据表axf_shop
模板:
迁移:
#生成迁移文件:
python manage.py makemigrations
#执行迁移文件:
python manage.py migrate
插入数据:
2、 商店栏
视图:
#这里提示一个快捷键:Ctrl + Shift + Alt + j pycharm一键选择、修改多个相同变量、符号、值
home.html
home.css
/*商店*/
.shop_container h2 img {
width: 100%;
}
.shop_container fieldset {
border: none;
padding: 0;
}
.shop_container fieldset > a {
display: inline-block;
width: 49%;
}
.shop_container fieldset img {
width: 100%;
}
.shop_container ul {
display: flex;
}
.shop_container ul li {
width: 2.5rem;
text-align: center;
font-size: 0.35rem;
}
.shop_container ul li img {
width: 2.5rem;
}
.shop_container ol {
display: flex;
flex-wrap: wrap;
}
.shop_container > ol a {
display: block;
}
.shop_container ol li {
list-style: none;
width: 5rem;
}
.shop_container ol a img {
width: 100%;
}
访问:
3、优选商品栏
新建数据表axf_mianshow
模板App/models:
class MainShow(Main):
# 分类的id
categoryid = models.IntegerField(default=1)
# 名称
brandname = models.CharField(max_length=64)
# 图片
img1 = models.CharField(max_length=255)
# 分类
childcid1 = models.IntegerField(default=1)
# 商品编码
productid1 = models.IntegerField(default=1)
# 长名字
longname1 = models.CharField(max_length=128)
# 价格
price1 = models.FloatField(default=1)
# 超市价格
marketprice1 = models.FloatField(default=0)
img2 = models.CharField(max_length=255)
childcid2 = models.IntegerField(default=1)
productid2 = models.IntegerField(default=1)
longname2 = models.CharField(max_length=128)
price2 = models.FloatField(default=1)
marketprice2 = models.FloatField(default=0)
img3 = models.CharField(max_length=255)
childcid3 = models.IntegerField(default=1)
productid3 = models.IntegerField(default=1)
longname3 = models.CharField(max_length=128)
price3 = models.FloatField(default=1)
marketprice3 = models.FloatField(default=0)
class Meta:
db_table = 'axf_mainshow'
插入数据:
INSERT INTO `axf`.`axf_mainshow`(`main_ptr_id`, `categoryid`, `brandname`,
`img1`, `childcid1`, `productid1`, `longname1`, `price1`, `marketprice1`, `img2`,
`childcid2`, `productid2`, `longname2`, `price2`, `marketprice2`, `img3`, `childcid3`,
`productid3`, `longname3`, `price3`, `marketprice3`) VALUES (25, 1003, '水果特卖',
'/static/axf/img/1001.png', 10011, 100111, '红石榴', 25.8, 26.6,
'/static/axf/img/1002.png', 10021, 10012, '绿番茄', 1.5, 1.5,
'/static/axf/img/1003.png', 10031, 10013, '迷你南瓜', 3.66, 3.65);
视图:
home.html
{# 首页主显示#}
<div>
<ul>
{% for main_show in main_shows %}
<li class="mainInfo">
<section>
<h3>
{{ main_show.name }}
<a>更多></a>
<span></span>
</h3>
<div><a><img src="{{ main_show.img }}" alt="{{ main_show.name }}"></a></div>
<ul>
<li>
<a href="#">
<img src="{{ main_show.img1 }}" alt="{{ main_show.longname1 }}">
<p class="description">{{ main_show.longname1 }}</p>
<span>{{ main_show.price1 }}</span>
<s>{{ main_show.marketprice1 }}</s>
</a>
<button>
<span>+</span>
</button>
</li>
<li>
<a href="#">
<img src="{{ main_show.img2 }}" alt="{{ main_show.longname2 }}">
<p class="description">{{ main_show.longname2 }}</p>
<span>{{ main_show.price2 }}</span>
<s>{{ main_show.marketprice2 }}</s>
</a>
<button>
<span>+</span>
</button>
</li>
<li>
<a href="#">
<img src="{{ main_show.img3 }}" alt="{{ main_show.longname3 }}">
<p class="description">{{ main_show.longname3 }}</p>
<span>{{ main_show.price3 }}</span>
<s>{{ main_show.marketprice3 }}</s>
</a>
<button>
<span>+</span>
</button>
</li>
</ul>
</section>
</li>
{% endfor %}
</ul>
</div>
home.css
/*主显示*/
.mainInfo {
background-color: white;
}
.mainInfo > section {
margin: 0.2rem auto 0;
padding: 0.2rem 0;
width: 9.2rem;
}
.mainInfo > section h3 {
text-align: center;
height: 1.2rem;
position: relative;
}
.mainInfo > section h3 a {
color: grey;
font-size: 0.3rem;
line-height: 0rem;
position: absolute;
right: 0.1rem;
display: block;
}
.mainInfo > section h3 > span {
background-color: yellow;
width: 0.6rem;
height: 0.1rem;
position: absolute;
bottom: 0.25rem;
left: 4.3rem;
}
.mainInfo > section > div > a > img {
width: 100%;
}
.mainInfo > section > ul {
display: flex;
justify-content: space-around;
}
.mainInfo > section > ul > li {
width: 2.6rem;
position: relative;
}
.mainInfo > section > ul > li > a > span:before {
color: red;
content: "¥";
}
.mainInfo > section > ul > li > a {
font-size: 0.4rem;
color: red;
display: block;
}
.mainInfo > section > ul > li > a > img {
width: 100%;
}
.mainInfo > section > ul > li > a > s {
color: gray;
font-size: 0.3rem;
}
.mainInfo > section > ul > li > a > s:before {
color: gray;
content: "¥";
}
.mainInfo .description {
font-size: 0.37rem;
color: black;
display: block;
line-height: 1.2rem;
height: 2.4rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.mainInfo > section > ul > li > button {
border: 1px solid lightgray;
border-radius: 1111px;
width: 0.6rem;
height: 0.6rem;
display: block;
line-height: 0.0rem;
text-align: center;
color: orange;
font-size: 0.6rem;
position: absolute;
right: 0;
top: 3.6rem;
background: white;
}
.mainInfo > section > ul > li > button > span {
position: relative;
margin: auto;
}
访问: