基本样式
先编写表格的基本样式
直接使用框架提供的表格组件:frontend/src/components/scTable/index.vue
<el-main class="nopadding">
<scTable ref="table" :apiObj="list.apiObj" row-key="id" remoteSort>
<el-table-column label="货品编码" prop="product_id" width="300"></el-table-column>
<el-table-column label="类别" prop="category" width="150"></el-table-column>
<el-table-column label="品牌" prop="brand" width="250"></el-table-column>
<el-table-column label="品名" prop="name" width="150"></el-table-column>
<el-table-column label="产品单价" prop="price" width="150" sortable='custom'></el-table-column>
<el-table-column label="库存数" prop="total_warehouse" width="150"></el-table-column>
<el-table-column label="样图" width="160"></el-table-column>
<el-table-column label="备注" prop="desc" width="160"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="160">
</el-table-column>
</scTable>
</el-main>
在数据中直接写this.$API.products.list
接口调用就可以了,组件内部会去发起数据请求
data() {
return {
list: {
apiObj: this.$API.products.list
},
}
},
效果
![e64eaef7d0977cb6c244ea4515249ad6.jpeg](https://i-blog.csdnimg.cn/blog_migrate/269ad3b5eca73be0c5693f9db276dfdb.jpeg)
组件中调用逻辑
mounted() {
...
//判断是否静态数据
if(this.apiObj){
this.getData();
}else if(this.data){
this.tableData = this.data;
this.total = this.tableData.length
}
},
//获取数据
async getData(){
this.loading = true;
var reqData = {
[config.request.page]: this.currentPage,
[config.request.pageSize]: this.scPageSize,
[config.request.prop]: this.prop,
[config.request.order]: this.order
}
if(this.hidePagination){
delete reqData[config.request.page]
delete reqData[config.request.pageSize]
}
Object.assign(reqData, this.tableParams)
try {
var res = await this.apiObj.get(reqData);
}catch(error){
this.loading = false;
this.emptyText = error.statusText;
return false;
}
try {
var response = config.parseData(res);
}catch(error){
this.loading = false;
this.emptyText = "数据格式错误";
return false;
}
if(response.code != config.successCode){
this.loading = false;
this.emptyText = response.msg;
}else{
this.emptyText = "暂无数据";
if(this.hidePagination){
this.tableData = response.data || [];
}else{
this.tableData = response.rows || [];
}
this.total = response.total || 0;
this.summary = response.summary || {};
this.loading = false;
}
this.$refs.scTable.setScrollTop(0)
this.$emit('dataChange', res, this.tableData)
},
getData
函数拆开来看
处理请求数据:当前页码\每页条数\排序规则
是否hidePagination(没有页码组件部分)
把请求参数合并成一个新的对象
var reqData = {
[config.request.page]: this.currentPage,
[config.request.pageSize]: this.scPageSize,
[config.request.prop]: this.prop,
[config.request.order]: this.order
}
if(this.hidePagination){
delete reqData[config.request.page]
delete reqData[config.request.pageSize]
}
Object.assign(reqData, this.tableParams)
发起http请求
try {
var res = await this.apiObj.get(reqData);
}catch(error){
this.loading = false;
this.emptyText = error.statusText;
return false;
}
根据配置的规则处理数据
parseData: function (res) {
return {
data: res.data, //分析无分页的数据字段结构
rows: res.data.rows, //分析行数据字段结构
total: res.data.total, //分析总数字段结构
summary: res.data.summary, //分析合计行字段结构
msg: res.message, //分析描述字段结构
code: res.code //分析状态字段结构
}
},
try {
var response = config.parseData(res);
}catch(error){
this.loading = false;
this.emptyText = "数据格式错误";
return false;
}
我们在后端按照这个规则处理过数据了,拿到的json数据为
{
"data": {
"page": 1,
"pageSize": 20,
"rows": [
{
"id": 1,
"c_time": "2022-09-02T12:14:32.356282+08:00",
"u_time": "2022-09-02T12:14:32.356417+08:00",
"product_id": "0001",
"category": "饮料",
"brand": "可口可乐",
"name": "可乐",
"price": "3.00",
"sample_png": "",
"desc": "无"
}
],
"total": 1
},
"message": "",
"code": 200,
"next": null,
"previous": null
}
它刚好和处理的方式一致,也就不会报出数据格式错误
错误了
根据响应码和数据内容判断是否继续
if(response.code != config.successCode){
this.loading = false;
this.emptyText = response.msg;
}else{
this.emptyText = "暂无数据";
if(this.hidePagination){
this.tableData = response.data || [];
}else{
this.tableData = response.rows || [];
}
this.total = response.total || 0;
this.summary = response.summary || {};
this.loading = false;
}
子组件往父组件把拿到的数据传递出去
this.$refs.scTable.setScrollTop(0)
this.$emit('dataChange', res, this.tableData)
文件操作
要展示样图的话,首先需要编写一个上传图片的接口
这个接口是一个通用的接口,所以单独新建一个file
模块来编写
python manage.py startapp file
然后把file移到apps中
![5799e2abd7e798022bb8f83c8f966f15.jpeg](https://i-blog.csdnimg.cn/blog_migrate/38a1df26def4be6b74a04f88fbd9f0e9.jpeg)
在backend/LightSeeking/settings.py
中进行注册
编写models.py
from django.db import models
from utils.models import BaseModel
class File(BaseModel):
file = models.FileField(blank=False, null=False)
class Meta:
db_table = 'tb_files'
verbose_name = '文件'
verbose_name_plural = verbose_name
编写一个serializers.py
from rest_framework import serializers
from file.models import File
class FileSerializer(serializers.ModelSerializer):
class Meta:
model = File
exclude = ('is_delete',)
extra_kwargs = {
'c_time': {
'read_only': True
}
}
编写视图文件views.py
from rest_framework.decorators import api_view
from rest_framework.response import Response
from file.serializers import FileSerializer
@api_view(["POST"])
def upload(request):
"""
上传文件
:param request:
:return:
"""
if request.method == "POST":
serializer = FileSerializer(data=request.data)
serializer.is_valid(raise_exception=True)
serializer.save()
return Response(data=serializer.data, status=200)
编写路由文件urls.py
from django.urls import path
from file import views
urlpatterns = [
path("upload/", views.upload)
]
在backend/LightSeeking/urls.py
补上
path('', include('file.urls'))
数据迁移
python manage.py makemigrations
python manage.py migrate
迁移后会多一张表:
![5524a28796e48e9312f979b4e105c678.jpeg](https://i-blog.csdnimg.cn/blog_migrate/7a745c2838ca41ab150cfbd3a0d11e3a.jpeg)
测试
使用postman发送图片进行测试
![b2141581ce2aa5ed720a7b49f79d6c36.jpeg](https://i-blog.csdnimg.cn/blog_migrate/e943e72f82411879f3ac3ef51c833a64.jpeg)
调用接口后,图片被存放到了backend/media/20221018144148.png
![d41a8ef45f7eb9250adfd3c79185139a.jpeg](https://i-blog.csdnimg.cn/blog_migrate/0794a0aabcb1395b4e67cb4cf1070c8e.jpeg)
后面使用的时候将sample_png
设置为/media/20221018144148.png
样图展示
对样图部分进行修改
<el-table-column label="样图" width="160">
<template v-slot="scope">
<el-popover placement="top-start" trigger="hover">
<template #reference>
<el-image :src="baseURL+scope.row.sample_png.replace(baseURL,'')" alt="无样图"
class="scopeImg"
style="width: 70px; height: 70px">
<template #error>
<div class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</template>
</el-image>
</template>
<el-image :src="baseURL+scope.row.sample_png.replace(baseURL,'')" alt="无样图"
style="width: 300%; height: 300%"></el-image>
</el-popover>
</template>
</el-table-column>
其中baseURL
为config.API_URL1,
拼接出来的地址为:http://127.0.0.1:8000/media/20221018144148.png
这样后还是无法查看到图片,还需要给urls配置静态文件访问地址
from django.conf import settings
from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('users/', include('users.urls')),
path('', include('product.urls')),
path('', include('warehouse.urls')),
path('', include('file.urls')),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
最终效果
![f3a9528f277eeecf09086814684ffafc.jpeg](https://i-blog.csdnimg.cn/blog_migrate/a713036b290238ce50fdbdf1003749ce.jpeg)