在上一章中已经有了一个产品信息的空白页了
这一章来实现它
最终效果
最终页面大概长这样
列表展示
![47af3573658d676597465cd3039651dd.jpeg](https://i-blog.csdnimg.cn/blog_migrate/f56525ed1af249663679f8abdbbd8d35.jpeg)
编辑产品
![f1981e55fcb27ec8510914a4781171ab.jpeg](https://i-blog.csdnimg.cn/blog_migrate/add583318bf40b49846dd77d8766a8ba.jpeg)
筛选部分(后端)
类别和品牌的内容都是根据实际添加产品的类别和品牌生成的,所以需要有一个接口来获取他们
也就是对产品表中category
和brand
进行去重操作
category_list = Product.objects.values_list("category", flat=True).distinct()
去重之后再处理一下脏数据
category_list = [i.strip() for i in category_list if i != "" and i != None]
所以在backend/apps/product/views.py
里面添加
@action(methods=['get'], detail=False)
def category_list(self, request):
"""
返回类别列表
"""
category_list = Product.objects.values_list("category", flat=True).distinct()
category_list = [i.strip() for i in category_list if i != "" and i != None]
return Response(data=category_list)
@action(methods=['get'], detail=False)
def brand_list(self, request):
"""
返回品牌列表
"""
brand_list = Product.objects.values_list("brand", flat=True).distinct()
brand_list = [i.strip() for i in brand_list if i != "" and i != None]
return Response(data=brand_list)
筛选部分(前端)
接口
新建一个js文件来存放产品信息相关的接口
frontend/src/api/model/products.js
import config from "@/config"
import http from "@/utils/request"
export default {
list: {
url: `${config.API_URL1}/product/`,
name: "获取产品列表",
get: async function (params) {
return await http.get(this.url, params);
}
},
add: {
url: `${config.API_URL1}/product/`,
name: "添加产品",
post: async function (data) {
return await http.post(this.url, data);
}
},
edit: {
url: `${config.API_URL1}/product/`,
name: "修改产品",
put: async function (id, data) {
return await http.put(`${this.url}${id}/`, data);
}
},
del: {
url: `${config.API_URL1}/product/`,
name: "删除产品",
delete: async function (id) {
return await http.delete(`${this.url}${id}/`);
}
},
category_list: {
url: `${config.API_URL1}/product/category_list/`,
name: "获取全部产品类别",
get: async function (params) {
return await http.get(this.url, params);
}
},
brand_list: {
url: `${config.API_URL1}/product/brand_list/`,
name: "获取全部产品品牌",
get: async function (params) {
return await http.get(this.url, params);
}
},
}
顺便放上它的增删改查接口
页面
先简单搭建一下页面结构
<template>
<el-container>
<el-header style="height: auto;">
<sc-select-filter :data="filterData" :label-width="80"></sc-select-filter>
</el-header>
</el-container>
</template>
<script>
import scSelectFilter from '@/components/scSelectFilter'
export default {
name: "product",
components: {
scSelectFilter
},
data(){
return {
filterData: [
{
title: "类别",
key: "category",
multiple: false,
options: [
{
label: "全部",
value: ""
},
]
},
{
title: "品牌",
key: "brand",
multiple: false,
options: [
{
label: "全部",
value: ""
},
]
}
],
}
},
methods:{
}
}
</script>
<style scoped>
</style>
然后进行数据的获取
在created也就是进入该页面的时候就会去请求这两个接口,然后把数据合并到之前的对象里面,渲染的时候就会增加除了「全部」之外的部分
methods:{
async get_category_list() {
var category_list = await this.$API.products.category_list.get()
this.filterData[0]["options"] = [{label: "全部", value: ""}]
for (const categoryListElement of category_list) {
this.filterData[0]["options"].push(
{
label: categoryListElement,
value: categoryListElement
},
)
}
},
async get_brand_list() {
var brand_list = await this.$API.products.brand_list.get()
this.filterData[1]["options"] = [{label: "全部", value: ""}]
for (const brandListElement of brand_list) {
this.filterData[1]["options"].push(
{
label: brandListElement,
value: brandListElement
},
)
}
},
},
created() {
this.get_category_list()
this.get_brand_list()
},
测试
查看页面可以发现,类别和品牌中的信息不单单只有「全部」了
![72527c8cf5f8a0c870608029dd047600.jpeg](https://i-blog.csdnimg.cn/blog_migrate/18c0a1b6e37796f14e0a6d197f2efeef.jpeg)