后端SpringBoot+前端Vue前后端分离的项目(二)

前言:完成一个列表,实现表头的切换,字段的筛选,排序,分页功能。

目录

一、数据库表的设计

​编辑二、后端实现

环境配置

model层

 mapper层

service层

 service层单元测试

controller层

三、前端实现

interface接口

接口api层

主体代码

效果展示


一、数据库表的设计

二、后端实现

环境配置

引入mybatis-plus依赖

        <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.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 BaseMapper<MerchandiseDetails> {
}

service层

MerchandiseDetailsService文件

package com.mrjj.java.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.mrjj.java.model.MerchandiseDetails;public interface MerchandiseDetailsService extends IService<MerchandiseDetails> {
}
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 ServiceImpl<MerchandiseDetailsMapper, 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() {List<MerchandiseDetails> 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 Result<List<MerchandiseDetails>> 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;charset=utf-8' }})export default instanceexport function listMerchandiseDetailsApi(): AxiosPromise<MerchandiseDetails[]> {return request({url: '/merchandiseDetails',method: 'get',})
}export function updateMerchandiseDetailsApi(data: MerchandiseDetails) {return request({url: '/merchandiseDetails',method: 'put',data: data,})
}

主要代码

<template>
<main><el-dialog title="修改商品名称" v-model="isUpdateName"><el-input v-model="changeRow.merchandiseName" size="default" clearable></el-input><template #footer><span><el-button @click="isUpdateName = false">取消</el-button><el-button type="primary" @click="updateMerchandiseName">确认</el-button></span></template></el-dialog><el-row><el-col :span="12" :offset="0"> <el-radio-group v-model="filterType" size="default"><el-radio-button label="all">全部</el-radio-button><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-button label="天猫" /></el-radio-group></el-col><el-col ><el-inputv-model="searchText"placeholder="请输入内容进行搜索"size="default"clearable:suffix-icon="Search"><template #prepend><el-button type="primary" size="default" :icon="Search"></el-button></template></el-input></el-col></el-row><el-table :data="showMerchandiseList" style="width: 50%" height="540" border stripe><el-table-column label="商品名称" fixed prop="merchandiseName" width="200px" /><el-table-column label="销售平台" prop="salesPlatform" width="100px" /><el-table-column label="邮费" prop="freightCharge" width="100px" /><el-table-column label="详细信息" prop="notes" width="200px" /><el-table-column label="操作" width="200px"><template #default="{ row }"><el-buttontype="primary"size="default"@click="isUpdateName = true;changeRow = { ...row };">修改商品名称</el-button></template></el-table-column></el-table><el-paginationbackgroundv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 50]"layout="total, prev,sizes, pager, next,jumper":total="filterMerchandiseList.length"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></main>
</template>
<script setup lang="ts">
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 = ref<MerchandiseName[]>([])
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 = ref<MerchandiseName>()
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
}
</script><style scoped>
.el-input{
width: 30%;
}
</style>

效果展示

固定表头,每页展示50条数据,分页功能

搜索功能 

 过滤+搜索功能

修改商品名称

数据库merchandise_name字段值发生改变 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74263.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IP和MAC的作用区别

在 IP 地址的上一行是 link/ether fa:16:3e:c7:79:75 brd ff:ff:ff:ff:ff:ff&#xff0c;这个被称为 MAC 地址&#xff0c;是一个网卡的物理地址&#xff0c;用十六进制&#xff0c;6 个 byte 表示。 一个网络包要从一个地方传到另一个地方&#xff0c;除了要有确定的地址&…

合宙Air724UG LuatOS-Air LVGL API控件-滑动条 (Slider)

滑动条 (Slider) 滑动条看起来和进度条是有些是有些像&#xff0c;但不同的是滑动条可以进行数值选择。 示例代码 -- 回调函数 slider_event_cb function(obj, event)if event lvgl.EVENT_VALUE_CHANGED then local val (lvgl.slider_get_value(obj) or "0")..&…

在PHP8中遍历数组-PHP8知识详解

所谓遍历数组就是把数组中的变量值读取出来。遍历数组中的所有元素对程序员来说是经常使用的操作&#xff0c;通过遍历数组可以完成数组元素的查询工作。 这好比你去商场买东西一样&#xff0c;要买什么东西&#xff0c;就去该区域浏览一遍&#xff0c;以便找出适合自己的产品…

Ubuntu 18.04安装搜狗输入法后无法显示中文

前置 Ubuntu系统&#xff1a; Ubuntu 18.04 LTS搜狗输入法版本&#xff1a; sogoupinyin_4.2.1.145_amd64.deb 搜狗输入法Linux官方安装指导&#xff1a;https://shurufa.sogou.com/linux/guide 问题 按照官方文档安装后&#xff0c;发现fcitx管理已经添加搜狗输入法&#…

【JavaEE】_CSS常用属性值

目录 1. 字体属性 1.1 设置字体家族 font-family 1.2 设置字体大小 font-size 1.3 设置字体粗细 font-weight 1.4 设置字体倾斜 font-style 2. 文本属性 2.1 设置文本颜色 color 2.2 文本对齐 text-align 2.3 文本装饰 text-decoration 2.4 文本缩进 text-indent 2.…

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image)

图片 (Image) 图片IMG是用于显示图像的基本对象类型&#xff0c;图像来源可以是文件&#xff0c;或者定义的符号。 示例代码 -- 创建图片控件 img lvgl.img_create(lvgl.scr_act(), nil) -- 设置图片显示的图像 lvgl.img_set_src(img, "/lua/luatos.png") -- 图片…

【LeetCode-面试经典150题-day20】

目录 70.爬楼梯 198.打家劫舍 139.单词拆分 322.零钱兑换 300.最长递增子序列 70.爬楼梯 题意&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 提示&#xff1a; 1 < n < …

day32 泛型 数据结构 List

一、泛型 概述 JDK1.5同时推出了两个和集合相关的特性&#xff1a;增强for循环&#xff0c;泛型 泛型可以修饰泛型类中的属性&#xff0c;方法返回值&#xff0c;方法参数&#xff0c; 构造函数的参数 Java提供的泛型类/接口 Collection, List, Set&#xff0c;Iterator 等 …

hive解决了什么问题

hive出现的原因 Hive 出现的原因主要有以下几个&#xff1a; 传统数据仓库无法处理大规模数据&#xff1a;传统的数据仓库通常采用关系型数据库作为底层存储&#xff0c;这种数据库在处理大规模数据时效率较低。MapReduce 难以使用&#xff1a;MapReduce 是一种分布式计算框架…

【Linux】进程概念I --操作系统概念与冯诺依曼体系结构

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法…感兴趣就关注我吧&#xff01;你定不会失望。 本篇导航 1. 冯诺依曼体系结构为什么这样设计? 2. 操作系统概念为什么我们需要操作系统呢?操作系统怎么进行管理? 计算机是由两部分组…

性能监控-grafana+prometheus+node_exporter

Prometheus是一个开源的系统监控和报警工具。它由SoundCloud开发并于2012年发布&#xff0c;后来成为了一个独立的开源项目&#xff0c;并得到了广泛的应用和支持。 Prometheus的主要功能包括采集和存储各种系统和应用程序的监控数据&#xff0c;并提供强大的查询语言PromQL来…

算法:数组中的最大差值---“打擂台法“

文章来源&#xff1a; https://blog.csdn.net/weixin_45630258/article/details/132737088 欢迎各位大佬指点、三连 1、题目&#xff1a; 给定一个整数数组 nums&#xff0c;找出给定数组中两个数字之间的最大差值。要求&#xff0c;第二个数字必须大于第一个数字。 2、分析特…

【数据结构】搜索树MapSet

目录 1.搜索树 1.1概念 1.2查找 1.3插入 1.4删除 2.Map 2.1map说明 2.2TreeMap和HashMap 2.3常用方法 3.Set 3.1set说明 3.2TreeSet和HashSet 3.3常用方法 1.搜索树 1.1概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者具有以下性质&…

静态工厂模式,抽象工厂模式,建造者模式

静态工厂模式 ublic class FruitFactory {public static Fruit getFruit(String name) {Fruit fnull;switch (name){case "APPLE":{fnew Apple();}case "BANANA":{fnew Banana();}default :{System.out.println("Unknown Fruit");}}return f;} …

机器学习算法系列————决策树(二)

1.什么是决策树 用于解决分类问题的一种算法。 左边是属性&#xff0c;右边是标签。 属性选择时用什么度量&#xff0c;分别是信息熵和基尼系数。 这里能够做出来特征的区分。 下图为基尼系数为例进行计算。 下面两张图是对婚姻和年收入的详细计算过程&#xff08;为GINI系…

2023.09.10 学习周报

文章目录 摘要文献阅读1-1 题目1-2 创新点1-3 本文工作2-1 题目2-2 什么是图2-3 图神经网络2-4 信息传递3-1 题目3-2 创新点3-3 本文工作 深度学习1.GNN的构建步骤2.构建图的方法3.GNN的简单样例 总结 摘要 本周阅读了三篇文章&#xff0c;第一篇是基于物理信息深度学习和激光…

【C++】学习STL中的list

❤️前言 大家好&#xff01;&#xff0c;今天为大家带来的一篇博客是关于STL中的list&#xff0c;内容主要包括list的介绍使用、list的模拟实现。以及list与vector的对比。 正文 list的介绍和使用 首先&#xff0c;让我们看看list的文档介绍&#xff1a; list是可以在常数范…

PaddleOCR学习笔记3-通用识别服务

今天优化了下之前的初步识别服务的python代码和html代码。 采用flask paddleocr bootstrap快速搭建OCR识别服务。 代码结构如下&#xff1a; 模板页面代码文件如下&#xff1a; upload.html : <!DOCTYPE html> <html> <meta charset"utf-8"> …

数据挖掘的学习路径

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…

Docker实战:docker compose 搭建Sonar

1、docker-compose-sonar文件准备 进入/home/docker目录&#xff0c;新建docker-compose-sonar.yml文件&#xff0c;内容如下&#xff1a; version: 3 services: sonar:image: sonarqube:8.9.6-communityrestart: always container_name: sonarqubevolumes:# 设置与宿主机时间…