|
|
10分56秒 步骤 1 : 先运行，看到效果，再学习 步骤 2 : 模仿和排错 步骤 3 : 页面截图 步骤 4 : Property 步骤 5 : PropertyDAO 步骤 6 : PropertyService 步骤 7 : AdminPageController 步骤 8 : PropertyController 步骤 9 : listProperty.html+editProperty.html 步骤 10 : 查询功能讲解 步骤 11 : 增加功能讲解 步骤 12 : 编辑功能讲解 步骤 13 : 修改功能讲解 步骤 14 : 删除功能讲解 步骤 15 : 其他-面包屑导航 步骤 16 : 自己做一遍
增值内容，请先登录
完整的 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 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 = "property")
@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" })
public class Property {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private int id;
@Column(name = "name")
private String name;
@ManyToOne
@JoinColumn(name="cid")
private Category category;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Category getCategory() {
return category;
}
public void setCategory(Category category) {
this.category = category;
}
@Override
public String toString() {
return "Property [id=" + id + ", name=" + name + ", category=" + category + "]";
}
}
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
package com.how2java.tmall.dao;
import java.util.List;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.pojo.Property;
public interface PropertyDAO extends JpaRepository<Property,Integer>{
Page<Property> findByCategory(Category category, Pageable pageable);
}
package com.how2java.tmall.dao;
import java.util.List;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.pojo.Property;
public interface PropertyDAO extends JpaRepository<Property,Integer>{
Page<Property> findByCategory(Category category, Pageable pageable);
}
增值内容，请先登录
完整的 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.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 com.how2java.tmall.dao.PropertyDAO;
import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.pojo.Property;
import com.how2java.tmall.util.Page4Navigator;
@Service
public class PropertyService {
@Autowired PropertyDAO propertyDAO;
@Autowired CategoryService categoryService;
public void add(Property bean) {
propertyDAO.save(bean);
}
public void delete(int id) {
propertyDAO.delete(id);
}
public Property get(int id) {
return propertyDAO.findOne(id);
}
public void update(Property bean) {
propertyDAO.save(bean);
}
public Page4Navigator<Property> 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<Property> pageFromJPA =propertyDAO.findByCategory(category,pageable);
return new Page4Navigator<>(pageFromJPA,navigatePages);
}
}
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
package com.how2java.tmall.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class AdminPageController {
@GetMapping(value="/admin")
public String admin(){
return "redirect:admin_category_list";
}
@GetMapping(value="/admin_category_list")
public String listCategory(){
return "admin/listCategory";
}
@GetMapping(value="/admin_category_edit")
public String editCategory(){
return "admin/editCategory";
}
@GetMapping(value="/admin_order_list")
public String listOrder(){
return "admin/listOrder";
}
@GetMapping(value="/admin_product_list")
public String listProduct(){
return "admin/listProduct";
}
@GetMapping(value="/admin_product_edit")
public String editProduct(){
return "admin/editProduct";
}
@GetMapping(value="/admin_productImage_list")
public String listProductImage(){
return "admin/listProductImage";
}
@GetMapping(value="/admin_property_list")
public String listProperty(){
return "admin/listProperty";
}
@GetMapping(value="/admin_property_edit")
public String editProperty(){
return "admin/editProperty";
}
@GetMapping(value="/admin_propertyValue_edit")
public String editPropertyValue(){
return "admin/editPropertyValue";
}
@GetMapping(value="/admin_user_list")
public String listUser(){
return "admin/listUser";
}
}
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
package com.how2java.tmall.web;
import com.how2java.tmall.pojo.Property;
import com.how2java.tmall.service.PropertyService;
import com.how2java.tmall.util.Page4Navigator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
@RestController
public class PropertyController {
@Autowired PropertyService propertyService;
@GetMapping("/categories/{cid}/properties")
public Page4Navigator<Property> list(@PathVariable("cid") int cid, @RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
start = start<0?0:start;
Page4Navigator<Property> page =propertyService.list(cid, start, size,5);
return page;
}
@GetMapping("/properties/{id}")
public Property get(@PathVariable("id") int id) throws Exception {
Property bean=propertyService.get(id);
return bean;
}
@PostMapping("/properties")
public Object add(@RequestBody Property bean) throws Exception {
propertyService.add(bean);
return bean;
}
@DeleteMapping("/properties/{id}")
public String delete(@PathVariable("id") int id, HttpServletRequest request) throws Exception {
propertyService.delete(id);
return null;
}
@PutMapping("/properties")
public Object update(@RequestBody Property bean) throws Exception {
propertyService.update(bean);
return bean;
}
}
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('属性管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
$(function(){
var cid = getUrlParms("cid");
var data4Vue = {
uri:'properties',
beans: [],
bean: {id:0,name:'',category:{id:0}},
pagination:{},
category:''
};
//ViewModel
var vue = new Vue({
el: '#workingArea',
data: data4Vue,
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
this.getCategory(cid);
this.list(0);
},
methods: {
getCategory:function(cid){
var url = "categories/"+cid;
axios.get(url).then(function(response) {
vue.category = response.data;
})
},
list:function(start){
var url = "categories/"+cid+"/"+this.uri+"?start="+start;
axios.get(url).then(function(response) {
vue.pagination = response.data;
vue.beans = response.data.content ;
});
},
add: function () {
if(!checkEmpty(this.bean.name, "属性名称"))
return;
var url = this.uri;
this.bean.category.id = cid;
axios.post(url,this.bean).then(function(response){
vue.list(0);
vue.bean = {id:0,name:'',category:{id:0}};
});
},
deleteBean: function (id) {
if(!checkDeleteLink())
return;
var url = this.uri+"/"+id;
axios.delete(url).then(function(response){
if(0!=response.data.length)
alert(response.data);
else
vue.list(0);
});
},
jump: function(page){
jump(page,vue); //定义在adminHeader.html 中
},
jumpByNumber: function(start){
jumpByNumber(start,vue);
}
}
});
});
</script>
<div id="workingArea" >
<ol class="breadcrumb">
<li><a href="admin_category_list">所有分类</a></li>
<li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</a></li>
<li class="active">属性管理</li>
</ol>
<div class="listDataTableDiv">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr class="success">
<th>ID</th>
<th>属性名称</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="bean in beans ">
<td>{{bean.id}}</td>
<td>
{{bean.name}}
</td>
<td>
<a :href="'admin_property_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
</td>
<td>
<a href="#nowhere" @click="deleteBean(bean.id)"><span class=" glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
<div th:replace="include/admin/adminPage::html" ></div>
<div class="panel panel-warning addDiv">
<div class="panel-heading">新增属性</div>
<div class="panel-body">
<table class="addTable">
<tr>
<td>属性名称</td>
<td><input @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<a href="#nowhere" @click="add" class="btn btn-success">提交</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('编辑属性')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
$(function(){
var data4Vue = {
uri: 'properties',
listURL:'admin_property_list',
bean: '',
category:''
};
//ViewModel
var vue = new Vue({
el: '#workingArea',
data: data4Vue,
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
this.get();
},
methods: {
get:function(){
var id = getUrlParms("id");
var url = this.uri+"/"+id;
axios.get(url).then(function(response) {
vue.bean = response.data;
vue.category = vue.bean.category;
})
},
update:function () {
if(!checkEmpty(this.bean.name, "属性名称"))
return;
var url = this.uri;
axios.put(url,vue.bean).then(function(response){
location.href=vue.listURL+"?cid="+vue.category.id;
});
}
}
});
});
</script>
<div id="workingArea">
<ol class="breadcrumb">
<li><a href="admin_category_list">所有分类</a></li>
<li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</a></li>
<li class="active">属性管理</li>
</ol>
<div class="panel panel-warning editDiv">
<div class="panel-heading">编辑属性</div>
<div class="panel-body">
<table class="editTable">
<tr>
<td>属性名称</td>
<td><input @keyup.enter="update" v-model.trim="bean.name" type="text" class="form-control"></td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<input type="hidden" name="id" v-model.trim="bean.id" >
<a href="#nowhere" class="btn btn-success" @click="update">提 交</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
@GetMapping("/categories/{cid}/properties")
public Page4Navigator<Property> list(@PathVariable("cid") int cid, @RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
start = start<0?0:start;
Page4Navigator<Property> page =propertyService.list(cid, start, size,5);
return page;
}
list:function(start){
var url = "categories/"+cid+"/"+this.uri+"?start="+start;
axios.get(url).then(function(response) {
vue.pagination = response.data;
vue.beans = response.data.content ;
});
},
<tr v-for="bean in beans ">
<td>{{bean.id}}</td>
<td>
{{bean.name}}
</td>
<td>
<a :href="'admin_property_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
</td>
<td>
<a href="#nowhere" @click="deleteBean(bean.id)"><span class=" glyphicon glyphicon-trash"></span></a>
</td>
</tr>
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<div class="panel panel-warning addDiv">
<div class="panel-heading">新增属性</div>
<div class="panel-body">
<table class="addTable">
<tr>
<td>属性名称</td>
<td><input @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<a href="#nowhere" @click="add" class="btn btn-success">提交</a>
</td>
</tr>
</table>
</div>
</div>
add: function () {
if(!checkEmpty(this.bean.name, "属性名称"))
return;
var url = this.uri;
this.bean.category.id = cid;
axios.post(url,this.bean).then(function(response){
vue.list(0);
vue.bean = {id:0,name:'',category:{id:0}};
});
}
@PostMapping("/properties")
public Object add(@RequestBody Property bean) throws Exception {
propertyService.add(bean);
return bean;
}
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
@GetMapping(value="/admin_property_edit")
public String editProperty(){
return "admin/editProperty";
}
@GetMapping("/properties/{id}")
public Property get(@PathVariable("id") int id) throws Exception {
Property bean=propertyService.get(id);
return bean;
}
get:function(){
var id = getUrlParms("id");
var url = this.uri+"/"+id;
axios.get(url).then(function(response) {
vue.bean = response.data;
vue.category = vue.bean.category;
})
},
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
update:function () {
if(!checkEmpty(this.bean.name, "属性名称"))
return;
var url = this.uri;
axios.put(url,vue.bean).then(function(response){
location.href=vue.listURL+"?cid="+vue.category.id;
});
}
update:function () {
if(!checkEmpty(this.bean.name, "属性名称"))
return;
var url = this.uri;
axios.put(url,vue.bean).then(function(response){
location.href=vue.listURL+"?cid="+vue.category.id;
});
}
@PutMapping("/properties")
public Object update(@RequestBody Property bean) throws Exception {
propertyService.update(bean);
return bean;
}
@PutMapping("/properties")
public Object update(@RequestBody Property bean) throws Exception {
propertyService.update(bean);
return bean;
}
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
deleteBean: function (id) {
if(!checkDeleteLink())
return;
var url = this.uri+"/"+id;
axios.delete(url).then(function(response){
if(0!=response.data.length)
alert(response.data);
else
vue.list(0);
});
},
deleteBean: function (id) {
if(!checkDeleteLink())
return;
var url = this.uri+"/"+id;
axios.delete(url).then(function(response){
if(0!=response.data.length)
alert(response.data);
else
vue.list(0);
});
},
@DeleteMapping("/properties/{id}")
public String delete(@PathVariable("id") int id, HttpServletRequest request) throws Exception {
propertyService.delete(id);
return null;
}
@DeleteMapping("/properties/{id}")
public String delete(@PathVariable("id") int id, HttpServletRequest request) throws Exception {
propertyService.delete(id);
return null;
}
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
getCategory:function(cid){
var url = "categories/"+cid;
axios.get(url).then(function(response) {
vue.category = response.data;
})
},
<ol class="breadcrumb">
<li><a href="admin_category_list">所有分类</a></li>
<li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</a></li>
<li class="active">属性管理</li>
</ol>
getCategory:function(cid){
var url = "categories/"+cid;
axios.get(url).then(function(response) {
vue.category = response.data;
})
},
<ol class="breadcrumb">
<li><a href="admin_category_list">所有分类</a></li>
<li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</a></li>
<li class="active">属性管理</li>
</ol>
增值内容，请先登录
完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈， 从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
