how2j.cn

-->
下载区
文件名 文件大小
请先登录 426k
增值内容 426k
426k

解压rar如果失败,请用5.21版本或者更高版本的winrar

点击下载 winrar5.21
步骤 1 : 先运行,看到效果,再学习   
步骤 2 : 模仿和排错   
步骤 3 : 界面效果   
步骤 4 : Product   
步骤 5 : Review   
步骤 6 : ReviewDAO   
步骤 7 : ReviewService   
步骤 8 : OrderItemDAO   
步骤 9 : OrderItemService   
步骤 10 : ProductService   
步骤 11 : ForeRESTController.product()   
步骤 12 : product.html   
步骤 13 : productPage.html   
步骤 14 : imgAndInfo.html   
步骤 15 : productReview.html   
步骤 16 : productDetail.html   
步骤 17 : modal4login.html   

步骤 1 :

先运行,看到效果,再学习

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
界面效果
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package com.how2java.tmall.pojo; import java.util.Date; import java.util.List; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.Table; import javax.persistence.Transient; import org.springframework.data.elasticsearch.annotations.Document; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; @Entity @Table(name = "product") @JsonIgnoreProperties({ "handler","hibernateLazyInitializer"}) @Document(indexName = "tmall_springboot",type = "product") public class Product { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "id") int id; @ManyToOne @JoinColumn(name="cid") private Category category; //如果既没有指明 关联到哪个Column,又没有明确要用@Transient忽略,那么就会自动关联到表对应的同名字段 private String name; private String subTitle; private float originalPrice; private float promotePrice; private int stock; private Date createDate; @Transient private ProductImage firstProductImage; @Transient private List<ProductImage> productSingleImages; @Transient private List<ProductImage> productDetailImages; @Transient private int reviewCount; @Transient private int saleCount; public int getId() { return id; } public void setId(int id) { this.id = id; } public Category getCategory() { return category; } public void setCategory(Category category) { this.category = category; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSubTitle() { return subTitle; } public void setSubTitle(String subTitle) { this.subTitle = subTitle; } public float getOriginalPrice() { return originalPrice; } public void setOriginalPrice(float originalPrice) { this.originalPrice = originalPrice; } public float getPromotePrice() { return promotePrice; } public void setPromotePrice(float promotePrice) { this.promotePrice = promotePrice; } public int getStock() { return stock; } public void setStock(int stock) { this.stock = stock; } public Date getCreateDate() { return createDate; } public void setCreateDate(Date createDate) { this.createDate = createDate; } public ProductImage getFirstProductImage() { return firstProductImage; } public void setFirstProductImage(ProductImage firstProductImage) { this.firstProductImage = firstProductImage; } public List<ProductImage> getProductSingleImages() { return productSingleImages; } public void setProductSingleImages(List<ProductImage> productSingleImages) { this.productSingleImages = productSingleImages; } public List<ProductImage> getProductDetailImages() { return productDetailImages; } public void setProductDetailImages(List<ProductImage> productDetailImages) { this.productDetailImages = productDetailImages; } public int getReviewCount() { return reviewCount; } public void setReviewCount(int reviewCount) { this.reviewCount = reviewCount; } public int getSaleCount() { return saleCount; } public void setSaleCount(int saleCount) { this.saleCount = saleCount; } @Override public String toString() { return "Product [id=" + id + ", category=" + category + ", name=" + name + ", subTitle=" + subTitle + ", originalPrice=" + originalPrice + ", promotePrice=" + promotePrice + ", stock=" + stock + ", createDate=" + createDate + ", firstProductImage=" + firstProductImage + ", reviewCount=" + reviewCount + ", saleCount=" + saleCount + "]"; } }
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package com.how2java.tmall.pojo; import java.util.Date; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.Table; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; @Entity @Table(name = "review") @JsonIgnoreProperties({ "handler","hibernateLazyInitializer" }) public class Review { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "id") private int id; @ManyToOne @JoinColumn(name="uid") private User user; @ManyToOne @JoinColumn(name="pid") private Product product; private String content; private Date createDate; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public Date getCreateDate() { return createDate; } public void setCreateDate(Date createDate) { this.createDate = createDate; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } public Product getProduct() { return product; } public void setProduct(Product product) { this.product = product; } }
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package com.how2java.tmall.dao; import java.util.List; import org.springframework.data.jpa.repository.JpaRepository; import com.how2java.tmall.pojo.Product; import com.how2java.tmall.pojo.Review; public interface ReviewDAO extends JpaRepository<Review,Integer>{ List<Review> findByProductOrderByIdDesc(Product product); int countByProduct(Product product); }
package com.how2java.tmall.dao;
 
import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;

import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.Review;

public interface ReviewDAO extends JpaRepository<Review,Integer>{

	List<Review> findByProductOrderByIdDesc(Product product);
	int countByProduct(Product product);

}
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package com.how2java.tmall.service; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.cache.annotation.CacheConfig; import org.springframework.cache.annotation.CacheEvict; import org.springframework.cache.annotation.Cacheable; import org.springframework.stereotype.Service; import com.how2java.tmall.dao.ReviewDAO; import com.how2java.tmall.pojo.Product; import com.how2java.tmall.pojo.Review; @Service public class ReviewService { @Autowired ReviewDAO reviewDAO; @Autowired ProductService productService; public void add(Review review) { reviewDAO.save(review); } public List<Review> list(Product product){ List<Review> result = reviewDAO.findByProductOrderByIdDesc(product); return result; } public int getCount(Product product) { return reviewDAO.countByProduct(product); } }
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package com.how2java.tmall.dao; import java.util.List; import org.springframework.data.jpa.repository.JpaRepository; import com.how2java.tmall.pojo.Order; import com.how2java.tmall.pojo.OrderItem; import com.how2java.tmall.pojo.Product; import com.how2java.tmall.pojo.User; public interface OrderItemDAO extends JpaRepository<OrderItem,Integer>{ List<OrderItem> findByOrderOrderByIdDesc(Order order); List<OrderItem> findByProduct(Product product); }
package com.how2java.tmall.dao;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;

import com.how2java.tmall.pojo.Order;
import com.how2java.tmall.pojo.OrderItem;
import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.User;

public interface OrderItemDAO extends JpaRepository<OrderItem,Integer>{
	List<OrderItem> findByOrderOrderByIdDesc(Order order);
	List<OrderItem> findByProduct(Product product);
}
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package com.how2java.tmall.service; import com.how2java.tmall.dao.OrderItemDAO; import com.how2java.tmall.pojo.Order; import com.how2java.tmall.pojo.OrderItem; import com.how2java.tmall.pojo.Product; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class OrderItemService { @Autowired OrderItemDAO orderItemDAO; @Autowired ProductImageService productImageService; public void fill(List<Order> orders) { for (Order order : orders) fill(order); } public void update(OrderItem orderItem) { orderItemDAO.save(orderItem); } public void fill(Order order) { List<OrderItem> orderItems = listByOrder(order); float total = 0; int totalNumber = 0; for (OrderItem oi :orderItems) { total+=oi.getNumber()*oi.getProduct().getPromotePrice(); totalNumber+=oi.getNumber(); productImageService.setFirstProdutImage(oi.getProduct()); } order.setTotal(total); order.setOrderItems(orderItems); order.setTotalNumber(totalNumber); order.setOrderItems(orderItems); } public void add(OrderItem orderItem) { orderItemDAO.save(orderItem); } public OrderItem get(int id) { return orderItemDAO.findOne(id); } public void delete(int id) { orderItemDAO.delete(id); } public int getSaleCount(Product product) { List<OrderItem> ois =listByProduct(product); int result =0; for (OrderItem oi : ois) { if(null!=oi.getOrder()) if(null!= oi.getOrder() && null!=oi.getOrder().getPayDate()) result+=oi.getNumber(); } return result; } public List<OrderItem> listByProduct(Product product) { return orderItemDAO.findByProduct(product); } public List<OrderItem> listByOrder(Order order) { return orderItemDAO.findByOrderOrderByIdDesc(order); } }
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
package com.how2java.tmall.service; import com.how2java.tmall.dao.ProductDAO; import com.how2java.tmall.pojo.Category; import com.how2java.tmall.pojo.Product; import com.how2java.tmall.util.Page4Navigator; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Sort; import org.springframework.stereotype.Service; import java.util.ArrayList; import java.util.List; @Service public class ProductService { @Autowired ProductDAO productDAO; @Autowired CategoryService categoryService; @Autowired ProductImageService productImageService; @Autowired OrderItemService orderItemService; @Autowired ReviewService reviewService; public void add(Product bean) { productDAO.save(bean); } public void delete(int id) { productDAO.delete(id); } public Product get(int id) { return productDAO.findOne(id); } public void update(Product bean) { productDAO.save(bean); } public Page4Navigator<Product> list(int cid, int start, int size,int navigatePages) { Category category = categoryService.get(cid); Sort sort = new Sort(Sort.Direction.DESC, "id"); Pageable pageable = new PageRequest(start, size, sort); Page<Product> pageFromJPA =productDAO.findByCategory(category,pageable); return new Page4Navigator<>(pageFromJPA,navigatePages); } public void fill(List<Category> categorys) { for (Category category : categorys) { fill(category); } } public void fill(Category category) { List<Product> products = listByCategory(category); productImageService.setFirstProdutImages(products); category.setProducts(products); } public void fillByRow(List<Category> categorys) { int productNumberEachRow = 8; for (Category category : categorys) { List<Product> products = category.getProducts(); List<List<Product>> productsByRow = new ArrayList<>(); for (int i = 0; i < products.size(); i+=productNumberEachRow) { int size = i+productNumberEachRow; size= size>products.size()?products.size():size; List<Product> productsOfEachRow =products.subList(i, size); productsByRow.add(productsOfEachRow); } category.setProductsByRow(productsByRow); } } public List<Product> listByCategory(Category category){ return productDAO.findByCategoryOrderById(category); } public void setSaleAndReviewNumber(Product product) { int saleCount = orderItemService.getSaleCount(product); product.setSaleCount(saleCount); int reviewCount = reviewService.getCount(product); product.setReviewCount(reviewCount); } public void setSaleAndReviewNumber(List<Product> products) { for (Product product : products) setSaleAndReviewNumber(product); } }
步骤 11 :

ForeRESTController.product()

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
@GetMapping("/foreproduct/{pid}") public Object product(@PathVariable("pid") int pid) { Product product = productService.get(pid); List<ProductImage> productSingleImages = productImageService.listSingleProductImages(product); List<ProductImage> productDetailImages = productImageService.listDetailProductImages(product); product.setProductSingleImages(productSingleImages); product.setProductDetailImages(productDetailImages); List<PropertyValue> pvs = propertyValueService.list(product); List<Review> reviews = reviewService.list(product); productService.setSaleAndReviewNumber(product); productImageService.setFirstProdutImage(product); Map<String,Object> map= new HashMap<>(); map.put("product", product); map.put("pvs", pvs); map.put("reviews", reviews); return Result.success(map); }
package com.how2java.tmall.web; import com.how2java.tmall.pojo.*; import com.how2java.tmall.service.*; import com.how2java.tmall.util.Result; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import org.springframework.web.util.HtmlUtils; import javax.servlet.http.HttpSession; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController public class ForeRESTController { @Autowired CategoryService categoryService; @Autowired ProductService productService; @Autowired UserService userService; @Autowired ProductImageService productImageService; @Autowired PropertyValueService propertyValueService; @Autowired OrderItemService orderItemService; @Autowired ReviewService reviewService; @GetMapping("/forehome") public Object home() { List<Category> cs= categoryService.list(); productService.fill(cs); productService.fillByRow(cs); categoryService.removeCategoryFromProduct(cs); return cs; } @PostMapping("/foreregister") public Object register(@RequestBody User user) { String name = user.getName(); String password = user.getPassword(); name = HtmlUtils.htmlEscape(name); user.setName(name); boolean exist = userService.isExist(name); if(exist){ String message ="用户名已经被使用,不能使用"; return Result.fail(message); } user.setPassword(password); userService.add(user); return Result.success(); } @PostMapping("/forelogin") public Object login(@RequestBody User userParam, HttpSession session) { String name = userParam.getName(); name = HtmlUtils.htmlEscape(name); User user =userService.get(name,userParam.getPassword()); if(null==user){ String message ="账号密码错误"; return Result.fail(message); } else{ session.setAttribute("user", user); return Result.success(); } } @GetMapping("/foreproduct/{pid}") public Object product(@PathVariable("pid") int pid) { Product product = productService.get(pid); List<ProductImage> productSingleImages = productImageService.listSingleProductImages(product); List<ProductImage> productDetailImages = productImageService.listDetailProductImages(product); product.setProductSingleImages(productSingleImages); product.setProductDetailImages(productDetailImages); List<PropertyValue> pvs = propertyValueService.list(product); List<Review> reviews = reviewService.list(product); productService.setSaleAndReviewNumber(product); productImageService.setFirstProdutImage(product); Map<String,Object> map= new HashMap<>(); map.put("product", product); map.put("pvs", pvs); map.put("reviews", reviews); return Result.success(map); } }
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="include/fore/header::html" ></head> <body> <div id="workingArea"> <div th:replace="include/fore/top::html" ></div> <div th:replace="include/fore/search::html" ></div> <div th:replace="include/fore/product/productPage::html" ></div> <div th:replace="include/fore/modal4login::html" ></div> <div th:replace="include/fore/footer::html" ></div> </div> </body> </html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/header::html" ></head>
<body>
<div id="workingArea">
    <div th:replace="include/fore/top::html" ></div>
    <div th:replace="include/fore/search::html" ></div>
    <div th:replace="include/fore/product/productPage::html" ></div>
    <div th:replace="include/fore/modal4login::html" ></div>
    <div th:replace="include/fore/footer::html" ></div>
</div>
</body>
</html>
步骤 13 :

productPage.html

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<div th:fragment="html"> <script> $(function(){ var pid = getUrlParms("pid"); var data4Vue = { uri:'foreproduct', p:'', category:null, firstProductImage:null, pvs:[], reviews:[], showDetail:true, showReview:false, user:{name:'', password:''} }; //ViewModel var vue = new Vue({ el: '#workingArea', data: data4Vue, mounted:function(){ //mounted 表示这个 Vue 对象加载成功了 linkDefaultActions(); this.load(); }, methods: { load:function(){ var url = this.uri+"/"+pid; axios.get(url).then(function(response) { var result = response.data; vue.p=result.data.product; vue.pvs=result.data.pvs; vue.reviews=result.data.reviews; vue.category = vue.p.category; vue.firstProductImage = vue.p.firstProductImage; vue.$nextTick(function(){ imgAndInfoPageRegisterListeners(vue); }) }); }, toggle2Detail:function(){ this.showDetail=true; this.showReview=false; }, toggle2Review:function(){ this.showDetail=false; this.showReview=true; } } }); }); </script> <title>模仿天猫官网 -- {{p.name}}</title> <div class="categoryPictureInProductPageDiv"> <img v-if="category!=null" class="categoryPictureInProductPage" :src="'img/category/'+category.id+'.jpg'"> </div> <div class="productPageDiv"> <div th:replace="include/fore/product/imgAndInfo::html" ></div> <div th:replace="include/fore/product/productReview::html" ></div> <div th:replace="include/fore/product/productDetail::html" ></div> </div> </div>
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
imgAndInfo.html
<div th:fragment="html"> <script> function imgAndInfoPageRegisterListeners(vue){ var stock = vue.p.stock; $(".productNumberSetting").keyup(function(){ var num= $(".productNumberSetting").val(); num = parseInt(num); if(isNaN(num)) num= 1; if(num<=0) num = 1; if(num>stock) num = stock; $(".productNumberSetting").val(num); }); $(".increaseNumber").click(function(){ var num= $(".productNumberSetting").val(); num++; if(num>stock) num = stock; $(".productNumberSetting").val(num); }); $(".decreaseNumber").click(function(){ var num= $(".productNumberSetting").val(); --num; if(num<=0) num=1; $(".productNumberSetting").val(num); }); $(".addCartButton").removeAttr("disabled"); $(".addCartLink").click(function(){ var url = "forecheckLogin"; axios.get(url).then(function(response) { if(0==response.data.code){ var pid = vue.p.id; var num= $(".productNumberSetting").val(); var url = "foreaddCart?pid="+pid+"&num="+num; axios.get(url).then(function(response) { var result = response.data; if(0==result.code){ $(".addCartButton").html("已加入购物车"); $(".addCartButton").attr("disabled","disabled"); $(".addCartButton").css("background-color","lightgray") $(".addCartButton").css("border-color","lightgray") $(".addCartButton").css("color","black") } }); } else{ $("#loginModal").modal('show'); } }); }); $(".buyLink").click(function(){ var url = "forecheckLogin"; axios.get(url).then(function(response) { if(0==response.data.code){ var pid = vue.p.id; var num= $(".productNumberSetting").val(); var url = "forebuyone?pid="+pid+"&num="+num; axios.get(url).then(function(response) { var oiid = response.data; location.href="buy?oiid="+oiid; }); } else{ $("#loginModal").modal('show'); } }); return false; }); $("button.loginSubmitButton").click(function(){ var url = "forelogin"; if(0==vue.user.name.length){ $("span.errorMessage").html("请输入用户名"); $("div.loginErrorMessageDiv").css("visibility","visible"); return; } if(0==vue.user.password.length){ $("span.errorMessage").html("请输入密码"); $("div.loginErrorMessageDiv").css("visibility","visible"); return; } axios.post(url,vue.user).then(function(response) { var result = response.data; if(result.code==0){ location.href="product?pid="+vue.p.id; } else{ $("span.errorMessage").html(result.message); $("div.loginErrorMessageDiv").css("visibility","visible"); } }); }); $("img.smallImage").mouseenter(function(){ var bigImageURL = $(this).attr("bigImageURL"); $("img.bigImg").attr("src",bigImageURL); }); $("img.bigImg").load( function(){ $("img.smallImage").each(function(){ var bigImageURL = $(this).attr("bigImageURL"); img = new Image(); img.src = bigImageURL; img.onload = function(){ $("div.img4load").append($(img)); }; }); } ); } </script> <div class="imgAndInfo"> <div class="imgInimgAndInfo"> <img v-if="firstProductImage!=null" :src="'img/productSingle/'+firstProductImage.id+'.jpg'" class="bigImg"> <div class="smallImageDiv"> <img v-for="pi in p.productSingleImages" :src="'img/productSingle_small/'+pi.id+'.jpg'" :bigImageURL="'img/productSingle/'+pi.id+'.jpg'" class="smallImage"> </div> <div class="img4load hidden" ></div> </div> <div class="infoInimgAndInfo"> <div class="productTitle"> {{p.name}} </div> <div class="productSubTitle"> {{p.subTitle}} </div> <div class="productPrice"> <div class="juhuasuan"> <span class="juhuasuanBig" >聚划算</span> <span>此商品即将参加聚划算,<span class="juhuasuanTime">1天19小时</span>后开始,</span> </div> <div class="productPriceDiv"> <div class="gouwujuanDiv"><img height="16px" src="img/site/gouwujuan.png"> <span> 全天猫实物商品通用</span> </div> <div class="originalDiv"> <span class="originalPriceDesc">价格</span> <span class="originalPriceYuan">¥</span> <span class="originalPrice"> {{p.originalPrice|formatMoneyFilter}} </span> </div> <div class="promotionDiv"> <span class="promotionPriceDesc">促销价 </span> <span class="promotionPriceYuan">¥</span> <span class="promotionPrice"> {{p.promotePrice|formatMoneyFilter}} </span> </div> </div> </div> <div class="productSaleAndReviewNumber"> <div>销量 <span class="redColor boldWord"> {{ p.saleCount }}</span></div> <div>累计评价 <span class="redColor boldWord"> {{ p.reviewCount }}</span></div> </div> <div class="productNumber"> <span>数量</span> <span> <span class="productNumberSettingSpan"> <input class="productNumberSetting" type="text" value="1"> </span> <span class="arrow"> <a href="#nowhere" class="increaseNumber"> <span class="updown"> <img src="img/site/increase.png"> </span> </a> <span class="updownMiddle"> </span> <a href="#nowhere" class="decreaseNumber"> <span class="updown"> <img src="img/site/decrease.png"> </span> </a> </span> 件</span> <span>库存{{p.stock}}件</span> </div> <div class="serviceCommitment"> <span class="serviceCommitmentDesc">服务承诺</span> <span class="serviceCommitmentLink"> <a href="#nowhere">正品保证</a> <a href="#nowhere">极速退款</a> <a href="#nowhere">赠运费险</a> <a href="#nowhere">七天无理由退换</a> </span> </div> <div class="buyDiv"> <a class="buyLink" ><button class="buyButton" >立即购买</button></a> <a href="#nowhere" class="addCartLink"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a> </div> </div> <div style="clear:both"></div> </div> </div>
步骤 15 :

productReview.html

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
productReview.html
<div th:fragment="html"> <div class="productReviewDiv" v-show="showReview" > <div class="productReviewTopPart"> <a href="#nowhere" class="productReviewTopPartSelectedLink" @click="toggle2Detail">商品详情</a> <a href="#nowhere" class="selected">累计评价 <span class="productReviewTopReviewLinkNumber">{{p.reviewCount}}</span> </a> </div> <div class="productReviewContentPart"> <div class="productReviewItem" v-for="r in reviews"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> {{r.content }} </div> <div class="productReviewItemDate"> {{r.createDate|formatDateFilter('YYYY-MM-DD')}} </div> </div> <div class="productReviewItemUserInfo"> {{r.user.anonymousName}}<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> </div> </div> </div>
步骤 16 :

productDetail.html

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
productDetail.html
<div th:fragment="html"> <div class="productDetailDiv" v-show="showDetail" > <div class="productDetailTopPart"> <a href="#nowhere" class="productDetailTopPartSelectedLink selected">商品详情</a> <a href="#nowhere" class="productDetailTopReviewLink" @click="toggle2Review">累计评价 <span class="productDetailTopReviewLinkNumber">{{p.reviewCount}}</span> </a> </div> <div class="productParamterPart"> <div class="productParamter">产品参数:</div> <div class="productParamterList"> <span v-for="pv in pvs" >{{pv.property.name}}: {{pv.value | subStringFilter(0,10)}} </span> </div> <div style="clear:both"></div> </div> <div class="productDetailImagesPart"> <img v-for="pi in p.productDetailImages" :src="'img/productDetail/'+pi.id+'.jpg'"> </div> </div> </div>
<div th:fragment="html"> 
	<div class="productDetailDiv" v-show="showDetail" >
		<div class="productDetailTopPart">
			<a href="#nowhere" class="productDetailTopPartSelectedLink selected">商品详情</a>
			<a href="#nowhere" class="productDetailTopReviewLink" @click="toggle2Review">累计评价 <span class="productDetailTopReviewLinkNumber">{{p.reviewCount}}</span> </a>
		</div>

		<div class="productParamterPart">
			<div class="productParamter">产品参数:</div>
			<div class="productParamterList">
				<span v-for="pv in pvs" >{{pv.property.name}}: {{pv.value | subStringFilter(0,10)}} </span>
			</div>
			<div style="clear:both"></div>
		</div>
		
		<div class="productDetailImagesPart">
			<img v-for="pi in p.productDetailImages" :src="'img/productDetail/'+pi.id+'.jpg'">
		</div>
	</div>
</div>

步骤 17 :

modal4login.html

edit
增值内容,请先登录
完整的 Springboot 模仿天猫项目,使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈, 从无到有涵盖全部129个知识点,565个开发步骤, 充实 Springboot 项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<div th:fragment="html" class="modal " id="loginModal" tabindex="-1" role="dialog" > <div class="modal-dialog loginDivInProductPageModalDiv"> <div class="modal-content"> <div class="loginDivInProductPage"> <div class="loginErrorMessageDiv"> <div class="alert alert-danger" > <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button> <span class="errorMessage"></span> </div> </div> <div class="login_acount_text">账户登录</div> <div class="loginInput " > <span class="loginInputIcon "> <span class=" glyphicon glyphicon-user"></span> </span> <input v-model="user.name" placeholder="手机/会员名/邮箱" type="text"> </div> <div class="loginInput " > <span class="loginInputIcon "> <span class=" glyphicon glyphicon-lock"></span> </span> <input v-model="user.password" type="password" placeholder="密码" type="text"> </div> <span class="text-danger">不要输入真实的天猫账号密码</span><br><br> <div> <a class="notImplementLink" href="#nowhere">忘记登录密码</a> <a href="register" class="pull-right">免费注册</a> </div> <div style="margin-top:20px"> <button class="btn btn-block redButton loginSubmitButton" type="submit">登录</button> </div> </div> </div> </div> </div>


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2022-07-05 关于页面跳转的疑惑
lwb5070074

站长,为什么这里直接从主页就跳转到产品页了?之前不是一直用pageController作页面跳转的吗?




2 个答案

how2j
答案时间:2022-08-01
是点击链接跳过来的吧,何为直接跳转。。。

qaiwo520
答案时间:2022-07-28
这不还是pagecontroller跳转吗,什么叫直接跳转。。。。你问的



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2021-11-13 优化
星归




我发现传到前台的pvs中每个属性都把产品详细信息带过去了(导致有多个重复的产品信息),在传到前台去时候把product设置为null会不会好一点?
加载中

							

							


2 个答案

鸡你太美噢北北
答案时间:2022-01-07
可以设置的

how2j
答案时间:2021-12-02
看需求吧,其实并不会节约多少带宽,影响并不大呢



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2021-10-27 关于预加载图片load函数的修改
2021-04-13 无法显示商品的商品详情和累计评价
2021-04-07 关于产品页图片


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 24 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫整站Springboot-产品页 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图