突然發現自己很憨批的沒有看er圖就開始擼項目，怪不得搞得雲裏霧裏，補充在(0)那篇裏面了，可以隨時參閱
這裏的產品屬性呢，是一對多分別引用產品和屬性，做出來是這樣一個樣子，我漸漸發覺，想做一個模塊，得先搞清楚需求，然後再去設計具體的業務邏輯，以後做一個模塊之前，就先對這些進行分析
上述是做出來的效果圖，這個模塊是從產品的這個界面進去的，傳入了產品的pid，進入到這個產品屬性的編輯頁面而產品屬性的項目是在category的屬性管理中定義的，這裏需要填充的是，propertyValue的value值，按我的分析呢，需要通過product的pid首先查出所在的product，這是value綁定的對象，然後還要根據product查出其所屬的category，找出屬性list出來。
這裏的功能設計呢，大體上來說只有兩個，一個就是從屬性的category list出來屬性，第二個呢，就是對屬性進行填充(這就決定了第一次還未創建的時候需要初始化操作)或者更新綁定在產品上
下面給出具體的實現代碼
1.pojo
@Entity
@Table(name = "propertyvalue")
@JsonIgnoreProperties({
"handler","hibernateLazyInitializer"
})
public class PropertyValue {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private int id;
@ManyToOne
@JoinColumn(name = "pid")
private Product product;
@ManyToOne
@JoinColumn(name = "ptid")
private Property property;
private String value;
}
2.dao
public interface PropertyValueDAO extends JpaRepository<PropertyValue,Integer>{
List<PropertyValue> findByProductOrderByIdDesc(Product product);
PropertyValue getByPropertyAndProduct(Property property,Product product);
}
3.service
@Service
public class PropertyValueService {
@Autowired
PropertyValueDAO propertyValueDAO;
@Autowired
PropertyService propertyService;
public void update(PropertyValue bean) {
propertyValueDAO.save(bean);
}
public void init(Product product) {
List<Property> properties = propertyService.listByCategory(product.getCategory());
for (Property property : properties) {
PropertyValue propertyValue = getByPropertyAndProduct(product, property);
if (null==propertyValue) {
propertyValue = new PropertyValue();
propertyValue.setProduct(product);
propertyValue.setProperty(property);
propertyValueDAO.save(propertyValue);
}
}
}
public PropertyValue getByPropertyAndProduct(Product product, Property property) {
return propertyValueDAO.getByPropertyAndProduct(property, product);
}
public List<PropertyValue> list(Product product) {
return propertyValueDAO.findByProductOrderByIdDesc(product);
}
}
4.controller
@RestController
public class PropertyValueController {
@Autowired
PropertyValueService propertyValueService;
@Autowired
ProductService productService;
@GetMapping("/products/{pid}/propertyValues")
public List<PropertyValue> list(@PathVariable("pid") int pid) {
Product product = productService.get(pid);
propertyValueService.init(product);
List<PropertyValue> propertyValues = propertyValueService.list(product);
return propertyValues;
}
@PutMapping("/propertyValues")
public Object update(@RequestBody PropertyValue bean) {
propertyValueService.update(bean);
return bean;
}
}
5.editPropertyValue
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminheader::html('產品屬性管理')">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:replace="include/admin/adminNavigator::html"></div>
<script>
$(function () {
var pid = getUrlParms("pid");
var data4Vue = {
uri: 'propertyValues',
product: '',
beans: [],
category: ''
};
//ViewModel
var vue = new Vue({
el: '#workingArea',
data: data4Vue,
mounted:function () {
this.getProduct(pid);
this.list();
},
methods: {
list: function () {
var url = "products/" + pid + "/" + this.uri;
axios.get(url).then(function (response) {
vue.beans = response.data;
});
},
getProduct: function (pid) {
var url = "products/" + pid;
axios.get(url).then(function (response) {
vue.product = response.data;
vue.category = vue.product.category;
});
},
update: function (bean) {
var url = this.uri;
var id = bean.id;
$("#pvid"+bean.id).css("border","2px solid yellow");
axios.put(url,bean).then(function (response) {
if (bean.id == response.data.id)
$("#pvid"+bean.id).css("border","2px solid green");
else
$("#pvid"+bean.id).css("border","2px solid red");
});
}
}
});
});
</script>
<div id="workingArea">
<ol class="breadcrumb">
<li><a href="admin_category_list">所有分類</a></li>
<li><a :href="'admin_product_list?cid='+category.id">{{category.name}}</a></li>
<li class="active">{{product.name}}</li>
<li class="active">產品屬性管理</li>
</ol>
<div class="editPVDiv">
<div v-for="bean in beans" class="eachPV">
<span class="pvName">{{bean.property.name}}</span>
<span class="pvValue">
<input class="pvValue" :id="'pvid'+bean.id" type="text" v-model="bean.value" @keyup="update(bean)">
</span>
</div>
<div style="clear:both"></div>
</div>
</div>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
這裏的實現很有意思，選用的是監聽的方式，很有vue的特點
謝謝觀看