解决后端需要接收Date类型参数，前端传过来的是字符串的问题。

在pojo中对特定的date类型属性加了以下配置
@DateTimeFormat来控制入参，@JsonFormat来控制出参

复制    
    @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
    private Date payTime;

参考教程

Spring Boot jackson（Date类型入参、格式化，以及如何处理null）

 

以下为vue其他组件：

elementui需要配合得表单为：

<el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>

　　

 图片展示

<el-table-column prop="img1" header-align="center" align="center" label="图片1" width="200">
<template slot-scope="scope">
<img :src="scope.row.img1" style="height: 200px;width: 200px;"  />
</template>
</el-table-column>
<el-table-column prop="img2" header-align="center" align="center" label="图片2" width="200">
<template slot-scope="scope">
<img :src="scope.row.img2" style="height: 200px;width: 200px;"  />
</template>
</el-table-column>
<el-table-column prop="img3" header-align="center" align="center" label="图片3" width="200">
<template slot-scope="scope">
<img :src="scope.row.img3" style="height: 200px;width: 200px;"  />
</template>
</el-table-column>

 

图片上传

    <el-form-item label="图片1" prop="img1">
                <el-input v-model="dataForm.img1" placeholder="图片1"></el-input>
                <el-upload class="upload-demo" :action="imgUrl" multiple :limit="1"
                    :on-exceed="handleExceed" :file-list="fileList1" :on-success="doc1" :on-error="handleAvatarError">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="图片2" prop="img2">
                <el-input v-model="dataForm.img2" placeholder="图片2"></el-input>
                <el-upload class="upload-demo" :action="imgUrl" multiple :limit="1"
                    :on-exceed="handleExceed" :file-list="fileList2" :on-success="doc2" :on-error="handleAvatarError">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="图片3" prop="img3">
                <el-input v-model="dataForm.img3" placeholder="图片3"></el-input>
                <el-upload class="upload-demo" :action="imgUrl" multiple :limit="1"
                    :on-exceed="handleExceed" :file-list="fileList3" :on-success="doc3" :on-error="handleAvatarError">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>

vue data

fileList1: [],
fileList2: [],
fileList3: [],
imgUrl: 'http://127.0.0.1:8080/renren-fast/uploads/local',

methoed

handleAvatarError(res, file) {
                this.$message.error('文件太大');
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            doc1(res, file) {
                this.$message({
                    message: '上传成功',
                    type: 'success'
                });
                if (res.code == 0) {
                    this.dataForm.img1 = res.msg;
                }
            },
            doc2(res, file) {
                this.$message({
                    message: '上传成功',
                    type: 'success'
                });
                if (res.code == 0) {
                    this.dataForm.img2 = res.msg;
                }
            },
            doc3(res, file) {
                this.$message({
                    message: '上传成功',
                    type: 'success'
                });
                if (res.code == 0) {
                    this.dataForm.img3 = res.msg;
                }
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },

 

 uviewui

select用法

template

<u-form-item label="类型" :label-width="150">
                <u-input v-model="form.type" type="select" :border="false" @click="showType = true" />
                <u-select v-model="showType" :list="typeList" @confirm="confirmType"></u-select>
            </u-form-item>

data

showType:false,
                typeList:[
                    {
                        value: '生活',
                        label: '生活'
                    },
                    {
                        value: '学习',
                        label: '学习'
                    },
                    {
                        value: '问答',
                        label: '问答'
                    },
                    {
                        value: '活动',
                        label: '活动'
                    }
                ],

js

confirmType(e){
                this.form.type=e[0].value
            },

 

uviewui下拉联动

<u-form-item label="捐赠救灾事项" :label-width="200">
                <u-input v-model="form.rescue" type="select" :border="false" @click="show = true" />
                <u-select v-model="show" :list="list" @confirm="confirm"></u-select>
            </u-form-item>

 

show: false,
                list: [],

 

getList() {
                this.$http.post(this.$api.rescue.list + '?page=1&limit=9999&', {}).then(
                    res => {
                        if (res.code === 0) {
                            this.list = res.page.list
                            this.list.map(item => {
                                item.value = item.id
                                item.label = item.name
                            })
                            console.log(this.list)
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: "失败：" + res.msg
                            })
                        }
                    })
            },

confirm(e) {
console.log(e)
this.form.rescue = e[0].label
this.form.rescueId = e[0].value
},

 

created() {
            this.getList()
        },

 

 

 

 

vue下拉框

 <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择" filterable >
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>

 

elementui 省市区地址级联

https://www.jianshu.com/p/e63fa331f320

 

elementui的下拉框联动

界面

<el-form-item label="供应商" prop="supplierId">
                <el-select v-model="dataForm.supplierId" placeholder="请选择" filterable >
                    <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
</el-form-item>

js

supplierList:[],


this.getSupplier();


getSupplier() {
                this.$http({
                    url: this.$http.adornUrl('/generator/supplier/list'),
                    method: 'get',
                    params: this.$http.adornParams({
　　　　　　　　　　　　　　 'page': 1,
                        'limit': 9999
                    })
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.supplierList= data.page.list
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },

 

 走马灯

<el-carousel :interval="4000" type="card" height="600px" indicator-position="outside">
            <el-carousel-item v-for="item in imagesBox" :key="item.id">
                <img :src="item.idView" style="width: 100%;height: 1000px;">
            </el-carousel-item>
        </el-carousel>

js

imagesBox: [{
                        id: 0,
                        idView: require("../../assets/img/1.jpg")
                    },
                    {
                        id: 1,
                        idView: require("../../assets/img/2.jpg")
                    },
                    {
                        id: 2,
                        idView: require("../../assets/img/3.jpg")
                    },
                    {
                        id: 3,
                        idView: require("../../assets/img/4.jpg")
                    },
                ],

 

数据权限：

 自己只能修改删除自己的，管理员不限

<template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)"
                        v-if="(isAuth('generator:drugs:update') && user.userId == scope.row.createBy) || user.userId==1">修改</el-button>
                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)"
                        v-if="(isAuth('generator:drugs:delete') && user.userId == scope.row.createBy) || user.userId==1">删除</el-button>
                </template>

 查询自己的信息

user: {}


this.getinfo()


getinfo() {
                this.$http({
                    url: this.$http.adornUrl('/sys/user/info'),
                    method: 'get'
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.user = data.user
                    }
                })
            },

 卡片形式展示表格数据

<template>
    <div class="mod-config">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button v-if="isAuth('generator:good:save')" type="primary" @click="addOrUpdateHandle()">新增
                </el-button>

            </el-form-item>
        </el-form>


        <el-row>
            <el-col :span="6" v-for="(item, index) in dataList" :key="item.id">
                <el-card style="margin: 20px;height: 420px;">
                    <img :src="item.img1" class="image">
                    <div style="padding: 14px;">
                        <span>{{item.name}}</span>
                        <div class="bottom clearfix">
                            <div style="display: flex;justify-content: space-between;">
                                <div style="color: red;line-height: 12px;font-size: 18px;font-weight: bold;">¥:
                                    {{item.price}}
                                </div>
                                <div>
                                    <el-button type="text" class="button" @click="buy(item.id)">购买</el-button>
                                    <el-button type="text" class="button" style="margin-right: 10px;"
                                        @click="addshopcar(item.id)">加购</el-button>
                                    <el-button type="text" class="button" @click="godetail(item)">详情</el-button>
                                    <el-button type="text" class="button" @click="addOrUpdateHandle(item.id)"
                                        v-if="isAuth('generator:good:update')">修改
                                    </el-button>
                                    <el-button type="text" class="button" @click="deleteHandle(item.id)"
                                        v-if="isAuth('generator:good:delete')">删除</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>


        <!-- <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination> -->
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>


        <el-dialog title="下订单" :close-on-click-modal="false" :visible.sync="orderVisible">
            <el-form :model="dataForm2" :rules="dataRule2" ref="dataForm2" @keyup.enter.native="dataFormSubmit2()"
                label-width="80px">
                <el-form-item label="姓名" prop="name">
                    <el-select v-model="dataForm2.name" placeholder="请选择" @change="changeAddress">
                        <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="dataForm2.address" placeholder="地址" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="detail">
                    <el-input v-model="dataForm2.detail" placeholder="详细地址" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="dataForm2.phone" placeholder="手机" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="orderVisible = false">取消</el-button>
                <el-button type="primary" @click="dataFormSubmit2()">确定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="detailVisible" :fullscreen='true'>
            <el-row>
                <el-col :span="6">
                    <div class="grid-content bg-purple"></div>
                </el-col>
                <el-col :span="12">
                    <div style="text-align: center;">
                        <h1>{{good.name}}</h1>
                    </div>
                    <el-carousel :interval="4000" type="card" height="400px" indicator-position="outside">
                        <el-carousel-item>
                            <img :src="good.img1" style="width: 80%;height: 400px;">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img :src="good.img2" style="width: 80%;height: 400px;">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img :src="good.img3" style="width: 800%;height: 400px;">
                        </el-carousel-item>
                    </el-carousel>

                    <el-card class="box-card">
                        <div style="display: flex;justify-content: space-around;">
                            <h3>类型：{{good.type}}</h3>
                            <h3>销量：{{good.xiaoliang}}</h3>
                            <h3 style="color: red;">价格：{{good.price}}</h3>
                        </div>
                        <div>
                            <el-button type="success" @click="addshopcar(good.id)">加入购物车</el-button>
                            <el-button @click="buy(good.id)" type="primary">立即购买</el-button>
                        </div>
                        <h3>介绍</h3>
                        <div>{{good.introduce}}</div>
                        <h3>发货地点</h3>
                        <div>{{good.deliveryPoint}}</div>
                        <h3>厂家</h3>
                        <div>{{good.manufactor}}</div>
                        <h3>保障</h3>
                        <div>{{good.guarantee}}</div>
                        <h3>产品参数</h3>
                        <div>{{good.productParameters}}</div>
                    </el-card>

                    <el-card class="box-card" style="margin-top: 20px;" v-if="tongjiList.length!=0">
                        <div slot="header" class="clearfix">
                            <h3>好评差评率</h3>
                        </div>

                        <div style="display: flex;justify-content: space-around;">
                            <div id="myChart" :style="{width: '500px', height: '500px'}"></div>
                        </div>

                    </el-card>

                    <el-card class="box-card" style="margin-top: 20px;">
                        <div slot="header" class="clearfix">
                            <h3>评论列表</h3>
                        </div>
                        <div v-for="item in commentList">
                            <h4>用户名：{{item.username}}</h4>
                            <div style="display: flex;justify-content: space-between;">
                                <div>评价：{{item.content}}</div>
                                <div>类型：{{item.type}}</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <div class="grid-content bg-purple"></div>
                </el-col>

            </el-row>

        </el-dialog>

    </div>
</template>

<script>
    import AddOrUpdate from './good-add-or-update'
    export default {
        data() {
            return {
                commentList: [],
                list1: [],
                detailVisible: false,
                good: {},
                supplierList: [],
                dataRule2: {
                    name: [{
                        required: true,
                        message: '姓名不能为空',
                        trigger: 'blur'
                    }],
                    address: [{
                        required: true,
                        message: '地址不能为空',
                        trigger: 'blur'
                    }],
                    phone: [{
                        required: true,
                        message: '手机不能为空',
                        trigger: 'blur'
                    }]
                },
                dataForm2: {},
                orderVisible: false,
                currentDate: new Date(),
                dataForm: {
                    name: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 9999,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                tongjiList: []
            }
        },
        components: {
            AddOrUpdate
        },
        mounted() {
            //this.drawLine1();

        },
        activated() {
            this.getDataList()
            this.getSupplier()
        },
        methods: {
            drawLine1() {
                this.$http({
                    url: this.$http.adornUrl('/generator/comment/tongji'),
                    method: 'post',
                    data: this.$http.adornData({
                        'goodId': this.good.id
                    })
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        console.log(data)
                        this.tongjiList = data.list
                        this.tongjiList.map(item => {
                            item.value = item.num
                        })
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = this.$echarts.init(document.getElementById('myChart'))
                        // 绘制图表
                        myChart.setOption({
                            title: {
                                text: '好评差评率',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [{
                                name: '数量',
                                type: 'pie',
                                radius: '50%',
                                data: this.tongjiList,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        });

                    }
                })
            },
            godetail(item) {
                this.good = item
                this.detailVisible = true

                //pinjia
                this.$http({
                    url: this.$http.adornUrl('/generator/comment/listByGoodId'),
                    method: 'post',
                    data: this.$http.adornData({
                        'goodId': this.good.id,
                    })
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.commentList = data.list
                    } else {
                        this.$message.error(data.msg)
                    }
                })

                this.drawLine1();
            },
            addshopcar(id) {
                this.$http({
                    url: this.$http.adornUrl('/generator/shopcar/save'),
                    method: 'post',
                    data: this.$http.adornData({
                        'goodId': id,
                    })
                }).then(({
                    data
                }) => {
                    this.orderVisible = false
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                this.getDataList()
                            }
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            changeAddress(e) {
                console.log(e)
                this.supplierList.map(item => {
                    if (item.id == e) {
                        this.dataForm2.name = item.name
                        this.dataForm2.phone = item.phone
                        this.dataForm2.address = item.address
                        this.dataForm2.detail = item.detail
                    }
                })
            },
            dataFormSubmit2() {
                this.$refs['dataForm2'].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url: this.$http.adornUrl('/generator/myorder/buy'),
                            method: 'post',
                            data: this.$http.adornData({
                                'goodId': this.dataForm2.goodId,
                                'name': this.dataForm2.name,
                                'phone': this.dataForm2.phone,
                                'address': this.dataForm2.address
                            })
                        }).then(({
                            data
                        }) => {
                            this.orderVisible = false
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.visible = false
                                        this.getDataList()
                                    }
                                })
                            } else {
                                this.$message.error(data.msg)
                            }
                        })
                    }
                })
            },
            buy(id) {
                this.dataForm2.goodId = id
                this.orderVisible = true
            },
            getSupplier() {
                this.$http({
                    url: this.$http.adornUrl('/generator/address/mylist'),
                    method: 'post',
                    data: this.$http.adornData({
                        'page': 1,
                        'limit': 9999
                    })
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.supplierList = data.page.list
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/generator/good/list'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'page': this.pageIndex,
                        'limit': this.pageSize,
                        'name': this.dataForm.name
                    })
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/generator/good/delete'),
                        method: 'post',
                        data: this.$http.adornData(ids, false)
                    }).then(({
                        data
                    }) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                })
            }
        }
    }
</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        height: 300px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #ffffff;
      }
      .bg-purple {
        background: #ffffff;
      }
      .bg-purple-light {
        background: #ffffff;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
</style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end