后端SpringBoot+前端Vue前后端分离的项目（二）

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

目录

一、数据库表的设计

​编辑二、后端实现

环境配置

model层

 mapper层

service层

 service层单元测试

controller层

三、前端实现

interface接口

接口api层

主体代码

效果展示

---

一、数据库表的设计

二、后端实现

环境配置

引入mybatis-plus依赖

        
            com.baomidou
            mybatis-plus-boot-starter
            3.5.3
        

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 {
}

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 {
}

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 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 {
    @Resource
    MerchandiseDetailsService merchandiseDetailsService;

    @Test
    public void getAll() {
        List list = merchandiseDetailsService.list();
        System.out.println(list);

    }

    @Test
    public 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 {
    @Resource
    MerchandiseDetailsService merchandiseDetailsService;

    @GetMapping
    public Result> listMerchandiseDetails() {
        return Result.success(merchandiseDetailsService.list());
    }

    @PutMapping
    public 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 instance

export function listMerchandiseDetailsApi(): AxiosPromise {
  return request({
    url: '/merchandiseDetails',
    method: 'get',
  })
}

export function updateMerchandiseDetailsApi(data: MerchandiseDetails) {
  return request({
    url: '/merchandiseDetails',
    method: 'put',
    data: data,
  })
}

主要代码

效果展示

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

搜索功能 

 过滤+搜索功能

修改商品名称

数据库merchandise_name字段值发生改变