10. 开发物品收藏功能

196 字约 1 分钟读完283 次阅读更新于 2026/5/3

JS 去除页面的参数

const clearPathParam = () => {
  let url = location.href
  url = url.replace(/(\?|#)[^'"]*/, '');           //去除参数
  window.history.pushState({},0, url);
}

SQL

CREATE TABLE `collect` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `item_id` int DEFAULT NULL COMMENT '物品',
  `user_id` int DEFAULT NULL COMMENT '收藏人',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='收藏信息';

开发后端接口

Collect.java

package com.example.entity;

public class Collect {

    /**ID */
    private Integer id;
    /**物品 */
    private Integer itemId;
    private String itemName;
    /**收藏人 */
    private Integer userId;
    private String userName;
    /**时间 */
    private String time;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getItemId() {
        return itemId;
    }

    public void setItemId(Integer itemId) {
        this.itemId = itemId;
    }

    public String getItemName() {
        return itemName;
    }

    public void setItemName(String itemName) {
        this.itemName = itemName;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }
}

CollectMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.CollectMapper">

    <select id="selectAll" resultType="com.example.entity.Collect">
        select collect.*, items.name as itemName, user.name as userName from `collect`
        left join items on collect.item_id = items.id
        left join user on collect.user_id = user.id
        <where>
            <if test="itemName != null"> and items.name like concat('%', #{itemName}, '%')</if>
            <if test="userId != null"> and collect.user_id = #{userId}</if>
        </where>
        order by collect.id desc
    </select>

    <insert id="insert" parameterType="com.example.entity.Collect" useGeneratedKeys="true">
        insert into `collect`
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">id,</if>
            <if test="itemId != null">item_id,</if>
            <if test="userId != null">user_id,</if>
            <if test="time != null">time,</if>
        </trim>
        values
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">#{id},</if>
            <if test="itemId != null">#{itemId},</if>
            <if test="userId != null">#{userId},</if>
            <if test="time != null">#{time},</if>
        </trim>
    </insert>

    <update id="updateById" parameterType="com.example.entity.Collect">
        update `collect`
        <set>
            <if test="id != null">
                id = #{id},
            </if>
            <if test="itemId != null">
                item_id = #{itemId},
            </if>
            <if test="userId != null">
                user_id = #{userId},
            </if>
            <if test="time != null">
                time = #{time},
            </if>
        </set>
        where id = #{id}
    </update>

</mapper>

物品的分页查询

/**
     * 分页查询
     */
    public PageInfo<Items> selectPage(Items items, Integer loginUserId, Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<Items> list = itemsMapper.selectAll(items);
        if (loginUserId != null) {
            for (Items item : list) {
                // 设置当前用户的收藏ID  获取用户收藏的信息
                Collect collect = collectMapper.selectByItemIdAndUserId(item.getId(), loginUserId);
                if (collect != null) {
                    item.setCollectId(collect.getId());
                }
            }
        }
        return PageInfo.of(list);
    }

@Select("select * from `collect` where item_id = #{itemId} and user_id = #{userId}")
Collect selectByItemIdAndUserId(@Param("itemId") Integer itemId, @Param("userId") Integer userId);

开发前端页面

ItemsViews.vue

<template>
  <div>
    <div class="card" style="margin-bottom: 10px; display: flex; align-items: center">
      <div style="flex: 1">
        <el-button @click="changeCategoryItem(null)" :type="data.categoryId === null ? 'primary' : 'default'">全部</el-button>
        <el-button @click="changeCategoryItem(item.id)" :type="data.categoryId === item.id ? 'primary' : 'default'" v-for="item in data.categoryList" :key="item.id">{{ item.name }}</el-button>
      </div>
      <div>
        <el-input clearable @clear="load" @keyup.enter="load" style="width: 300px" v-model="data.name" placeholder="请输入物品名称"></el-input>
        <el-button @click="load" type="primary" style="margin-left: 5px">搜索</el-button>
      </div>

    </div>

    <div v-if="data.total > 0">
      <el-row :gutter="10">
       <el-col :span="6" v-for="item in data.tableData" :key="item.id">
         <div class="card" style="padding: 0">
           <img :src="item.img" alt="" style="width: 100%; height:350px; display: block; border-radius: 5px 5px 0 0">
           <div style="padding: 10px">
             <div style="margin: 10px 0; display: flex; align-items: center; grid-gap: 10px">
               <div style="flex: 1; font-size: 20px; font-weight: 400">物品：{{ item.name }}</div>
               <el-button @click="addCollect(item.id)" v-if="!item.collectId" size="small" type="warning">收藏</el-button>
               <el-button @click="removeCollect(item)" v-else size="small" type="info">取消收藏</el-button>
             </div>
             <div class="ellipsis2" style="margin: 10px 0; text-align: justify; color: #666;" ><span style="color: #333">描述信息：</span>{{ item.description }}</div>
             <div class="ellipsis2" style="margin: 10px 0; text-align: justify; color: #666;" ><span style="color: #333">交换条件：</span>{{ item.requirement }}</div>
             <div style="margin: 10px 0; display: flex; color: #666">
               <div style="flex: 1"><span style="color: #333">上传人：</span>{{item.userName}}</div>
               <div><span style="color: #333">上传时间：</span>{{ item.time }}</div>
             </div>
             <div style="text-align: right">
               <el-button @click="handleCharge(item)" type="primary" :disabled="item.userId === data.user.id">申请交换</el-button>
             </div>
           </div>
         </div>
       </el-col>
      </el-row>
    </div>

    <div v-else>
      <div class="card" style="padding: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #666">暂无物品...</div>
    </div>

    <el-dialog title="申请信息" width="40%" v-model="data.formVisible" :close-on-click-modal="false" destroy-on-close>
      <el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="100px" style="padding-right: 50px">
        <div style="padding-left: 30px; margin-bottom: 20px; color: #1890ff">当前申请交换：<b>{{ data.form.itemName }}</b></div>
        <el-form-item label="交换物品" prop="content">
          <el-input placeholder="请输入您提供的交换物品" v-model="data.form.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="交换理由" prop="remark">
          <el-input type="textarea" :rows="3" maxlength="200" placeholder="请输入交换理由" v-model="data.form.remark" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCharge">保 存</el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";

const formRef = ref()
const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  categoryList: [],
  categoryId: null,  // 当前选中的分类ID
  name: router.currentRoute.value.query.name || null,
  pageNum: 1,
  pageSize: 10,
  total: 0,
  tableData: [],
  form: {},
  rules: {
    content: [
      { required: true, message: '请输入交换物品', trigger: 'blur' }
    ],
  }
})

const addCollect = (itemId) => {
  request.post('/collect/add', { itemId: itemId, userId: data.user.id }).then(res => {
    if (res.code === '200') {
      load()
      ElMessage.success('操作成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const removeCollect = (item) => {
  request.delete('/collect/delete/' + item.collectId).then(res => {
    if (res.code === '200') {
      load()
      ElMessage.success('操作成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const handleCharge = (item) => {
  data.formVisible = true
  data.form = { itemName: item.name, itemId: item.id, itemUserid: item.userId }
}

const saveCharge = () => {
  formRef.value.validate(valid => {
    if (valid) {
      data.form.userId = data.user.id
      request.post('/charge/add', data.form).then(res => {
        if (res.code === '200') {
          load()
          ElMessage.success('操作成功')
          data.formVisible = false
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

// 查询分类数据
request.get('/category/selectAll').then(res => {
  data.categoryList = res.data
})

const changeCategoryItem = (categoryId) => {
  data.categoryId = categoryId
  load()
}

// 分页查询
const load = () => {
  request.get('/items/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name,
      loginUserId: data.user.id,  // 当前登录的用户ID
      status: true,
      checkStatus: '通过',
      categoryId: data.categoryId
    }
  }).then(res => {
    if (res.code === '500') {
      ElMessage.error(res.msg)
      return
    }
    data.tableData = res.data?.list
    data.total = res.data?.total
  })
}
load()

const clearPathParam = () => {
  let url = location.href
  url = url.replace(/(\?|#)[^'"]*/, '');           //去除参数
  window.history.pushState({},0, url);
}
clearPathParam()
</script>

<style>
.ellipsis2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 超出几行省略 */
  overflow: hidden;
}
</style>

Collect.vue

<template>
  <div>

    <div class="card" style="margin-bottom: 5px;">
      <el-input v-model="data.itemName" style="width: 300px; margin-right: 10px" placeholder="请输入物品名称查询"></el-input>
      <el-button type="primary" @click="load">查询</el-button>
      <el-button type="info" style="margin: 0 10px" @click="reset">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" stripe>
        <el-table-column prop="itemName" label="物品"></el-table-column>
        <el-table-column prop="userName" label="收藏人"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template #default="scope">
            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="card">
      <el-pagination @current-change="load" background layout="total, prev, pager, next" v-model:page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/>
    </div>

  </div>
</template>

<script setup>
import request from "@/utils/request";
import {reactive, ref} from "vue";
import {ElMessageBox, ElMessage} from "element-plus";

const formRef = ref()
const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  pageNum: 1,
  pageSize: 10,
  total: 0,
  formVisible: false,
  form: {},
  tableData: [],
  itemName: null,
})

// 分页查询
const load = () => {
  request.get('/collect/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      itemName: data.itemName
    }
  }).then(res => {
    data.tableData = res.data?.list
    data.total = res.data?.total
  })
}

// 新增
const handleAdd = () => {
  data.form = {}
  data.formVisible = true
}

// 编辑
const handleEdit = (row) => {
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
}

// 新增保存
const add = () => {
  request.post('/collect/add', data.form).then(res => {
    if (res.code === '200') {
      load()
      ElMessage.success('操作成功')
      data.formVisible = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 编辑保存
const update = () => {
  request.put('/collect/update', data.form).then(res => {
    if (res.code === '200') {
      load()
      ElMessage.success('操作成功')
      data.formVisible = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 弹窗保存
const save = () => {
  formRef.value.validate(valid => {
    if (valid) {
      // data.form有id就是更新，没有就是新增
      data.form.id ? update() : add()
    }
  })
}

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/collect/delete/' + id).then(res => {
      if (res.code === '200') {
        load()
        ElMessage.success('操作成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

// 重置
const reset = () => {
  data.itemName = null
  load()
}

load()
</script>

UserCollect.vue

<template>
  <div>

    <div class="card" style="margin-bottom: 5px;">
      <el-input v-model="data.itemName" style="width: 300px; margin-right: 10px" placeholder="请输入物品名称查询"></el-input>
      <el-button type="primary" @click="load">查询</el-button>
      <el-button type="info" style="margin: 0 10px" @click="reset">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" stripe>
        <el-table-column prop="itemName" label="物品">
          <template #default="scope">
            <span @click="goToItem(scope.row.itemName)" style="color: #1967e3; cursor: pointer">{{ scope.row.itemName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="收藏人"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template #default="scope">
            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="card">
      <el-pagination @current-change="load" background layout="total, prev, pager, next" v-model:page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/>
    </div>

  </div>
</template>

<script setup>
import request from "@/utils/request";
import {reactive, ref} from "vue";
import {ElMessageBox, ElMessage} from "element-plus";
import router from "@/router";

const formRef = ref()
const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  pageNum: 1,
  pageSize: 10,
  total: 0,
  formVisible: false,
  form: {},
  tableData: [],
  itemName: null,
})

const goToItem = (itemName) => {
  router.push('/manager/itemsView?name=' + itemName)
}

// 分页查询
const load = () => {
  request.get('/collect/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      itemName: data.itemName,
      userId: data.user.id
    }
  }).then(res => {
    data.tableData = res.data?.list
    data.total = res.data?.total
  })
}

// 新增
const handleAdd = () => {
  data.form = {}
  data.formVisible = true
}

// 编辑
const handleEdit = (row) => {
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
}

// 新增保存
const add = () => {
  request.post('/collect/add', data.form).then(res => {
    if (res.code === '200') {
      load()
      ElMessage.success('操作成功')
      data.formVisible = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 编辑保存
const update = () => {
  request.put('/collect/update', data.form).then(res => {
    if (res.code === '200') {
      load()
      ElMessage.success('操作成功')
      data.formVisible = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 弹窗保存
const save = () => {
  formRef.value.validate(valid => {
    if (valid) {
      // data.form有id就是更新，没有就是新增
      data.form.id ? update() : add()
    }
  })
}

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/collect/delete/' + id).then(res => {
      if (res.code === '200') {
        load()
        ElMessage.success('操作成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

// 重置
const reset = () => {
  data.itemName = null
  load()
}

load()
</script>