乐优商城笔记六：商品详情页
完成乐优商城商品详情页
搭建商品详情页微服务
创建子工程
- GroupId：
com.leyou.service - ArtifactId：
ly-page
编写pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>parentartifactId>
<groupId>com.leyougroupId>
<version>1.0.0-SNAPSHOTversion>
parent>
<modelVersion>4.0.0modelVersion>
<groupId>com.leyou.servicegroupId>
<artifactId>ly-pageartifactId>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.cloudgroupId>
<artifactId>spring-cloud-starter-netflix-eureka-clientartifactId>
dependency>
<dependency>
<groupId>org.springframework.cloudgroupId>
<artifactId>spring-cloud-starter-openfeignartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
<dependency>
<groupId>com.leyou.servicegroupId>
<artifactId>ly-item-interfaceartifactId>
<version>${leyou.latest.version}version>
dependency>
dependencies>
project>
编写application.yml
server:
port: 8004
spring:
application:
name: page-service
thymeleaf:
cache: false # 关闭thymeleaf缓存
eureka:
client:
service-url:
defaultZone: http://127.0.0.1:9999/eureka
instance:
lease-renewal-interval-in-seconds: 5 # 每隔5秒发送一次心跳
lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期
编写启动类
package com.leyou;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
import org.springframework.cloud.openfeign.EnableFeignClients;
@SpringBootApplication
@EnableDiscoveryClient
@EnableFeignClients
public class LyPageService {
public static void main(String[] args) {
SpringApplication.run(LyPageService.class, args);
}
}
导入thymeleaf模板
将下面的代码放入resources/templates下。
item.html
这个模板为最终模板，即内部逻辑已经全部完成，只需要放入数据即可。
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>乐优商城--商品详情页title>
<link rel="icon" href="/assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="/css/webbase.css" />
<link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
<link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
<link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />
<style type="text/css">
.goods-intro-list li {
display: inline-block;
width: 300px;
}
.Ptable {
margin: 10px 0;
}
.Ptable-item {
padding: 12px 0;
line-height: 220%;
color: #999;
font-size: 12px;
border-bottom: 1px solid #eee;
}
.Ptable-item h3 {
width: 110px;
text-align: right;
}
.Ptable-item h3, .package-list h3 {
font-weight: 400;
font-size: 12px;
float: left;
}
h3 {
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.Ptable-item dl {
margin-left: 110px;
}
dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
.Ptable-item dt {
width: 160px;
float: left;
text-align: right;
padding-right: 5px;
}
.Ptable-item dd {
margin-left: 210px;
}
dd {
display: block;
-webkit-margin-start: 40px;
}
.package-list {
padding: 12px 0;
line-height: 220%;
color: #999;
font-size: 12px;
margin-top: -1px;
}
.package-list h3 {
width: 130px;
text-align: right;
}
.package-list p {
margin-left: 155px;
padding-right: 50px;
}
style>
head>
<body>
<div id="itemApp">
<div id="nav-bottom">
<ly-top />
div>
<div class="py-container">
<div id="item">
<div class="crumb-wrap">
<ul class="sui-breadcrumb">
<li th:each="category : ${categories}">
<a href="#" th:text="${category.name}">手机a>
li>
<li>
<a href="#" th:text="${brand.name}">Applea>
li>
<li class="active" th:text="${spu.title}">Apple iPhone 6sli>
ul>
div>
<div class="product-info">
<div class="fl preview-wrap">
<div class="zoom">
<div id="preview" class="spec-preview">
<span class="jqzoom">
<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
span>
div>
<div class="spec-scroll">
<a class="prev"><a>
<div class="items">
<ul>
<li v-for="(image, i) in images" :key="i">
<img :src="image" :bimg="image" onmousemove="preview(this)" />
li>
ul>
div>
<a class="next">>a>
div>
div>
div>
<div class="fr itemInfo-wrap">
<div class="sku-name">
<h4 v-text="sku.title">h4>
div>
<div class="news"><span th:utext="${spu.subTitle}">span>div>
<div class="summary">
<div class="summary-wrap">
<div class="fl title"><i>价 格i>div>
<div class="fl price">
<i>¥i><em v-text="ly.formatPrice(sku.price)">em><span>降价通知span>
div>
<div class="fr remark"><i>累计评价i><em>612188em>div>
div>
<div class="summary-wrap">
<div class="fl title">
<i>促 销i>
div>
<div class="fl fix-width">
<i class="red-bg">加价购i>
<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品em>
div>
div>
div>
<div class="support">
<div class="summary-wrap">
<div class="fl title">
<i>支 持i>
div>
<div class="fl fix-width">
<em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购em>
div>
div>
<div class="summary-wrap">
<div class="fl title">
<i>配 送 至i>
div>
<div class="fl fix-width">
<em class="t-gray">上海 <span>有货span>em>
div>
div>
div>
<div class="clearfix choose">
<div id="specification" class="summary-wrap clearfix">
<dl v-for="(value,key) in specialSpec" :key="key">
<dt>
<div class="fl title">
<i>{{key}}i>
div>
dt>
<dd v-for="(str, index) in value" :key="index">
<a href="javascript:;" :class="{selected: index===indexes[key]}" @click="indexes[key]=index">
{{str}}<span v-if="index===indexes[key]" title="点击取消选择"> span>
a>
dd>
dl>
div>
<div class="summary-wrap">
<div class="fl title">
<div class="control-group">
<div class="controls">
<input autocomplete="off" type="text" disabled value="1" minnum="1" class="itxt" />
<a href="javascript:void(0)" class="increment plus">+a>
<a href="javascript:void(0)" class="increment mins">-a>
div>
div>
div>
<div class="fl">
<ul class="btn-choose unstyled">
<li>
<a href="success-cart.html" target="_blank" class="sui-btn btn-danger addshopcar">加入购物车a>
li>
ul>
div>
div>
div>
div>
div>
<div class="clearfix product-detail">
<div class="fl aside">
<ul class="sui-nav nav-tabs tab-wraped">
<li class="active">
<a href="#index" data-toggle="tab">
<span>相关分类span>
a>
li>
<li>
<a href="#profile" data-toggle="tab">
<span>推荐品牌span>
a>
li>
ul>
<div class="tab-content tab-wraped">
<div id="index" class="tab-pane active">
<ul class="part-list unstyled">
<li>手机li>
<li>手机壳li>
<li>内存卡li>
<li>Iphone配件li>
<li>贴膜li>
<li>手机耳机li>
<li>移动电源li>
<li>平板电脑li>
ul>
<ul class="goods-list unstyled">
<li>
<div class="list-wrap">
<div class="p-img">
<img src="/img/_/part01.png" />
div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)em>
div>
<div class="price">
<strong>
<em>¥em>
<i>6088.00i>
strong>
div>
<div class="operate">
<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车a>
div>
div>
li>
<li>
<div class="list-wrap">
<div class="p-img">
<img src="/img/_/part02.png" />
div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)em>
div>
<div class="price">
<strong>
<em>¥em>
<i>6088.00i>
strong>
div>
<div class="operate">
<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车a>
div>
div>
li>
<li>
<div class="list-wrap">
<div class="p-img">
<img src="/img/_/part03.png" />
div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)em>
div>
<div class="price">
<strong>
<em>¥em>
<i>6088.00i>
strong>
div>
<div class="operate">
<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车a>
div>
div>
<div class="list-wrap">
<div class="p-img">
<img src="/img/_/part02.png" />
div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)em>
div>
<div class="price">
<strong>
<em>¥em>
<i>6088.00i>
strong>
div>
<div class="operate">
<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车a>
div>
div>
<div class="list-wrap">
<div class="p-img">
<img src="/img/_/part03.png" />
div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)em>
div>
<div class="price">
<strong>
<em>¥em>
<i>6088.00i>
strong>
div>
<div class="operate">
<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车a>
div>
div>
li>
ul>
div>
<div id="profile" class="tab-pane">
<p>推荐品牌p>
div>
div>
div>
<div class="fr detail">
<div class="clearfix fitting">
<h4 class="kt">选择搭配h4>
<div class="good-suits">
<div class="fl master">
<div class="list-wrap">
<div class="p-img">
<img src="/img/_/l-m01.png" />
div>
<em>￥5299em>
<i>+i>
div>
div>
<div class="fl suits">
<ul class="suit-list">
<li class="">
<div id="">
<img src="/img/_/dp01.png" />
div>
<i>Feless费勒斯VRi>
<label data-toggle="checkbox" class="checkbox-pretty">
<input type="checkbox"><span>39span>
label>
li>
<li class="">
<div id=""><img src="/img/_/dp02.png" /> div>
<i>Feless费勒斯VRi>
<label data-toggle="checkbox" class="checkbox-pretty">
<input type="checkbox"><span>50span>
label>
li>
<li class="">
<div id=""><img src="/img/_/dp03.png" />div>
<i>Feless费勒斯VRi>
<label data-toggle="checkbox" class="checkbox-pretty">
<input type="checkbox"><span>59span>
label>
li>
<li class="">
<div id=""><img src="/img/_/dp04.png" />div>
<i>Feless费勒斯VRi>
<label data-toggle="checkbox" class="checkbox-pretty">
<input type="checkbox"><span>99span>
label>
li>
ul>
div>
<div class="fr result">
<div class="num">已选购0件商品div>
<div class="price-tit"><strong>套餐价strong>div>
<div class="price">￥5299div>
<button class="sui-btn btn-danger addshopcar">加入购物车button>
div>
div>
div>
<div class="tab-main intro">
<ul class="sui-nav nav-tabs tab-wraped">
<li class="active">
<a href="#one" data-toggle="tab">
<span>商品介绍span>
a>
li>
<li>
<a href="#two" data-toggle="tab">
<span>规格与包装span>
a>
li>
<li>
<a href="#three" data-toggle="tab">
<span>售后保障span>
a>
li>
<li>
<a href="#four" data-toggle="tab">
<span>商品评价span>
a>
li>
<li>
<a href="#five" data-toggle="tab">
<span>手机社区span>
a>
li>
ul>
<div class="clearfix">div>
<div class="tab-content tab-wraped">
<div id="one" class="tab-pane active">
<div class="intro-detail">
<div th:utext="${detail.description}">div>
div>
div>
<div id="two" class="tab-pane">
<div class="Ptable">
<div class="Ptable-item" v-for="(group, i) in specs" :key="i">
<h3 v-text="group.group">h3>
<dl>
<span v-for="(param,j) in group.params" :key="j">
<dt v-text="param.k">dt>
<dd v-text="param.v ? param.v + (param.unit || '') : JSON.parse(sku.ownSpec)[param.k]">dd>
span>
dl>
div>
div>
<div class="package-list">
<h3>包装清单h3>
<p th:text="${detail.packingList}">p>
div>
div>
<div id="three" class="tab-pane">
<p>售后保障p>
<p th:text="${detail.afterService}">p>
div>
<div id="four" class="tab-pane">
<p>商品评价p>
div>
<div id="five" class="tab-pane">
<p>手机社区p>
div>
div>
div>
div>
div>
<div class="clearfix">div>
<div class="like">
<h4 class="kt">猜你喜欢h4>
<div class="like-list">
<ul class="yui3-g">
<li class="yui3-u-1-6">
<div class="list-wrap">
<div class="p-img">
<img src="/img/_/itemlike01.png" />
div>
<div class="attr">
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本em>
div>
<div class="price">
<strong>
<em>¥em>
<i>3699.00i>
strong>
div>
<div class="commit">
<i class="command">已有6人评价i>
div>
div>
li>