中国新闻发布,优化工具箱下载,wordpress个人博客实战,卧龙区建网站前言#xff1a;完成一个列表#xff0c;实现表头的切换#xff0c;字段的筛选#xff0c;排序#xff0c;分页功能。 目录
一、数据库表的设计
编辑二、后端实现
环境配置
model层 mapper层
service层 service层单元测试
controller层
三、前端实现
interface接… 前言完成一个列表实现表头的切换字段的筛选排序分页功能。 目录
一、数据库表的设计
编辑二、后端实现
环境配置
model层 mapper层
service层 service层单元测试
controller层
三、前端实现
interface接口
接口api层
主体代码
效果展示 一、数据库表的设计
二、后端实现
环境配置
引入mybatis-plus依赖 dependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion3.5.3/version/dependency
model层
package com.mrjj.java.model;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;Data
NoArgsConstructor
AllArgsConstructor
TableName(merchandise_details)
public class MerchandiseDetails {TableId(type IdType.AUTO)public int id;public String salesPlatform;public String merchandiseName;public int freightCharge;public String notes;
}mapper层
package com.mrjj.java.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.mrjj.java.model.MerchandiseDetails;
import org.apache.ibatis.annotations.Mapper;Mapper
public interface MerchandiseDetailsMapper extends BaseMapperMerchandiseDetails {
}
service层
MerchandiseDetailsService文件
package com.mrjj.java.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.mrjj.java.model.MerchandiseDetails;public interface MerchandiseDetailsService extends IServiceMerchandiseDetails {
}
package com.mrjj.java.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.mrjj.java.mapper.MerchandiseDetailsMapper;
import com.mrjj.java.model.MerchandiseDetails;
import com.mrjj.java.service.MerchandiseDetailsService;
import org.springframework.stereotype.Service;Service(MerchandiseDetailsService)
public class MerchandiseDetailsServiceImpl extends ServiceImplMerchandiseDetailsMapper, MerchandiseDetails implements MerchandiseDetailsService {
}service层单元测试
package com.mrjj.java.service;import com.mrjj.java.model.MerchandiseDetails;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;
import java.util.List;SpringBootTest
Transactional
public class MerchandiseDetailsServiceTest {ResourceMerchandiseDetailsService merchandiseDetailsService;Testpublic void getAll() {ListMerchandiseDetails list merchandiseDetailsService.list();System.out.println(list);}Testpublic void update() {MerchandiseDetails change new MerchandiseDetails(30, 淘宝, 天堂伞, 16, 质量好);merchandiseDetailsService.updateById(change);}
}controller层
package com.mrjj.java.controller;import com.mrjj.java.model.MerchandiseDetails;
import com.mrjj.java.model.Result;
import com.mrjj.java.service.MerchandiseDetailsService;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;
import java.util.List;RestController
RequestMapping(/MerchandiseDetails)
public class MerchandiseDetailsController {ResourceMerchandiseDetailsService merchandiseDetailsService;GetMappingpublic ResultListMerchandiseDetails listMerchandiseDetails() {return Result.success(merchandiseDetailsService.list());}PutMappingpublic Result updateMerchandiseDetails(RequestBody MerchandiseDetails merchandiseDetails) {boolean result merchandiseDetailsService.updateById(merchandiseDetails);if (result) {return Result.success(更新商品详细信息成功);} else {return Result.fail(210, 更新商品详细信息失败, merchandiseDetails);}}
}三、前端实现
interface接口
export interface MerchandiseDetails {id: number;salesPlatform: string;merchandiseName: string;freightCharge: number;notes: string;
}
接口api层
import request from ../request
import axios, { type AxiosPromise } from axios
import type { MerchandiseDetails } from /types/merchandises_details/types
const instance axios.create({baseURL: /merchandiseDetails,timeout: 30000,headers: { Content-Type: application/json;charsetutf-8 }})export default instanceexport function listMerchandiseDetailsApi(): AxiosPromiseMerchandiseDetails[] {return request({url: /merchandiseDetails,method: get,})
}export function updateMerchandiseDetailsApi(data: MerchandiseDetails) {return request({url: /merchandiseDetails,method: put,data: data,})
}
主要代码
template
mainel-dialog title修改商品名称 v-modelisUpdateNameel-input v-modelchangeRow.merchandiseName sizedefault clearable/el-inputtemplate #footerspanel-button clickisUpdateName false取消/el-buttonel-button typeprimary clickupdateMerchandiseName确认/el-button/span/template/el-dialogel-rowel-col :span12 :offset0 el-radio-group v-modelfilterType sizedefaultel-radio-button labelall全部/el-radio-buttonel-radio-button label京东 /el-radio-button label唯品会 /el-radio-button label淘宝 /el-radio-button label亚马逊 /el-radio-button label拼多多 /el-radio-button label当当 /el-radio-button label天猫 //el-radio-group/el-colel-col el-inputv-modelsearchTextplaceholder请输入内容进行搜索sizedefaultclearable:suffix-iconSearchtemplate #prependel-button typeprimary sizedefault :iconSearch/el-button/template/el-input/el-col/el-rowel-table :datashowMerchandiseList stylewidth: 50% height540 border stripeel-table-column label商品名称 fixed propmerchandiseName width200px /el-table-column label销售平台 propsalesPlatform width100px /el-table-column label邮费 propfreightCharge width100px /el-table-column label详细信息 propnotes width200px /el-table-column label操作 width200pxtemplate #default{ row }el-buttontypeprimarysizedefaultclickisUpdateName true;changeRow { ...row };修改商品名称/el-button/template/el-table-column/el-tableel-paginationbackgroundv-model:current-pagecurrentPagev-model:page-sizepageSize:page-sizes[10, 20, 50]layouttotal, prev,sizes, pager, next,jumper:totalfilterMerchandiseList.lengthsize-changehandleSizeChangecurrent-changehandleCurrentChange//main
/template
script setup langts
import { MerchandiseName } from ../types/merchandises_details/types
import { listMerchandiseDetailsApi, updateMerchandiseDetailsApi } from ../api/merchandise_details
import { computed, onMounted, ref } from vue
import { Search } from element-plus/icons-vue
import { ElMessage } from element-plus
let merchandiseDetailsList refMerchandiseName[]([])
let filterMerchandiseList computed(() {let platformMerchandise merchandiseDetailsList.value.filter((key) {return filterType.value all || key.salesPlatform filterType.value}).filter((merchandise) {return (merchandise.merchandiseName.indexOf(searchText.value) ! -1 ||merchandise.notes.indexOf(searchText.value) ! -1)})return platformMerchandise
})
onMounted(() {ListMerchandiseDetails()
})const searchText ref()
const filterType ref(all)let changeRow refMerchandiseName()
let isUpdateName ref(false)let currentPage ref(1)
let pageSize ref(10)let showMerchandiseList computed(() {let startIndex (currentPage.value - 1) * pageSize.valuelet endIndex currentPage.value * pageSize.value - 1let index -1let currentPageData filterMerchandiseList.value.filter((merchandiseName) {index 1return index endIndex index startIndex})return currentPageData
})function ListMerchandiseDetails() {listMerchandiseDetailsApi().then(({ data }) {merchandiseDetailsList.value data})
}
function updateMerchandiseName() {// ElMessage.info(JSON.stringify(changeRow.value))isUpdateName.value falseupdateMerchandiseDetailsApi(changeRow.value!).then(({ data }) {ElMessage.success(data)ListMerchandiseDetails()})
}
function handleSizeChange(size: number) {console.log(当前页面大小是, size)pageSize.value size
}
const handleCurrentChange (page: number) {console.log(当前的页数是, page)currentPage.value page
}
/scriptstyle scoped
.el-input{
width: 30%;
}
/style
效果展示
固定表头每页展示50条数据分页功能 搜索功能 过滤搜索功能
修改商品名称 数据库merchandise_name字段值发生改变
