JPA的后台列表（查询，实体类）

## **JPA的controller层的列表查询，模糊**

 @RequestMapping("list")
    public Page list(@RequestParam(defaultValue = "1")Integer pageNum,@RequestParam(defaultValue = "3")Integer pageSize,Shop product){

        System.out.println(product+"--------------");

        

        Specification<Shop> specification = new Specification() {

            @Override
            public Predicate toPredicate(Root root, CriteriaQuery criteriaQuery, CriteriaBuilder criteriaBuilder) {

                List<Predicate> list=new ArrayList();
                if(product.getName()!=null){
                    Predicate name = criteriaBuilder.like(root.get("name"), "%".concat(product.getName()).concat("%"));
                    list.add(name);
                }

                if(product.getStart()!=null && product.getEnd()!=null){
                    Predicate price = criteriaBuilder.between(root.get("price"), product.getStart(), product.getEnd());
                    list.add(price);
                }


                return criteriaBuilder.and(list.toArray(new Predicate[list.size()]));
            }
        };
		
		//进行排序的操作
		Sort.Order sort=null;
		//getItemSales   为实体类的字段
		if(product.getItemSales()!=null){
			//以销量排序
			sort = Sort.Order.asc("itemSales");
		}else{
			//默认以价格排序
			sort = Sort.Order.asc("itemPrice");
		}
				
		PageRequest of = PageRequest.of(pageNum-1, pageSize，Sort.by(sort));


        return shopDao.findAll(specification,of);
    }

**

## VUE中的列表的展示（关于循环三级联动和图片以及多选框）

**
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">

			<!--全选配置-->
			<el-table-column type="selection"></el-table-column>
			
			<el-table-column prop="id" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="name" label="名称" width="180">
			</el-table-column>
			<el-table-column label="图片">
				<template slot-scope="scope">
					<el-avatar :src="scope.row.pic"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="日期" width="180">
			</el-table-column>
			<!--省市县-->
			<el-table-column label="产地">
				<template slot-scope="scope">
					{{scope.row.provinceName.name}}-{{scope.row.cityName.name}}-{{scope.row.countyName.name}}
				</template>
			</el-table-column>
			<el-table-column label="传销">
				<template slot-scope="scope">
					<template v-for="ch in scope.row.chuanList">
						{{ch.name}}
					</template>
				</template>
			</el-table-column>

			<el-table-column prop="created" label="创建时间">
			</el-table-column>
			
			
			<!-- 操作 -->
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
			
					<el-button type="danger" size="small" @click="doUpdate(scope.row)">修改</el-button>
					<el-button type="success" size="small" @click="chaStudent(scope.row)">查看</el-button>
				</template>
			
			</el-table-column>

		</el-table>

**

## 从后台获取数据的vue的连接

**

			initCascader() {
				this.axios.get('http://localhost:8100/api/shop/list1').then((res) => {
					console.log(res.data);
					this.nations = res.data;
				})
			},
			initData() {
				this.axios.get('http://localhost:8100/api/shop/list', {
					params: {
						pageNum: this.current,
						pageSize: this.size,
						name:this.searchFormModel.mohu,
						start:this.searchFormModel.start,
						end:this.searchFormModel.end 

					}
				}).then((res) => {
					this.tableData = res.data.content;
					this.total = res.data.totalElements;
					console.log(this.tableData)
				});
			},
			handleSizeChange(val) {
				this.size = val;
				this.initData();
			},
			handleCurrentChange(val) {
				this.current = val;
				this.initData();

			},