springboot3 vue3校园失物招领系统实战开发教程

今天给大家分享一个全新校园失物招领系统，网上找了很多没有找到springboot3 vue3这一技术栈的校园失物招领系统，只能自己写一个了，花了几天才完成，界面如下。

角色设计

此项目的操作主要是用户，如发布失物，发布招领，用户之间私信。因此设计两个角色用户与管理员就可以了。字段中用户名，密码，角色是最重要的，其它的字段如邮箱，手机号，地址可以随意设计。

此项目也录制了完整的带敲视频供大家参考学习 带敲视频

功能设计

此项目功能设计如丢失物品模块，招领物品模块，公告通模块肯定是必要的，其它模块可以自由发挥，如反馈信息，论坛帖子，轮播图模块等，想添加亮点可以在用户之间添加websocket对话功能，这一功能大家也可以去学习下，在很多项目开发中都可以用到，实用性拉满！

有同学对设计功能无从下手，可以参考别的的失物招领系统，核心功能基本都是固定的，项目功能如下图所示。

基本的功能如注册，登录，个人信息管理每个项目都是这些，网上教程用有很多，在此不多赘述。

发布失物

此功能在丢失物品列表中，发布失物功能中可以添加富文本编辑，可以在编辑框中输入文字与上传图文，其它必要字段如丢失时间，地点，分类等。上传的物品在丢失物品栏目中显示，管理员可以置顶物品。

发布招领

用户也可以发布招领物品，功能与丢失物品功能类似。

物品详情

物品详细信息中包含物品分类丢失时间丢失地点发布时间发布人

此模块主要功能为私信，在查看丢失物品时，若自己捡到了，可以私信发布人。

若登录的用户是当前物品的发布人，需要判断无法与自己对话。代码如下

ini 复制代码

const handleAdd=(lostData)=>{
  if (data.user.id==lostData.userId){
    ElMessage.warning("无法与自己对话")
    return
  }
  data.form={}
  data.formVisible=true
  data.form.goodsId=lostData.id
  data.form.fromId=data.user.id
  data.form.toId=lostData.userId
  data.form.category='丢失物品'
}

首页信息

首页提示消息借鉴了二手软件某鱼电脑版的右侧设计，发布失物，发布招领与消息提示，获取他人私信自己的未读消息数据进行统计。

统计当前用户未读消息代码

csharp 复制代码

<select id="selectUnReadNum" resultType="int">
    select count(id)
    from message
    where to_id=#{toId} and is_read=0
</select>

领取物品

用户在确定是自己的物品时，可以确定领取物品，此时物品状态需要进行调整，丢失物品/招领物品中不再显示此物品信息。

管理员功能

物品分类管理，添加物品的分类。丢失/招领物品管理，这一功能主要是某些不合适的物品可以删除，也可以对贵重物品进行置顶，公告这一功能也是基本的增删改查。

echarts统计

可以根据官网的文档去引入echarts，本项目使用的丢失物品/招领物品统计以饼图的方式显示，网上也有很多教程，将它改为动态的，需要从后台获取相同格式的数据，代码如下。

typescript 复制代码

public List<Map<String,Object>> selectLostByState() {
List<Lost> list=lostMapper.selectLostByState();
List<Map<String,Object>> mapList=new ArrayList<>();
for (Lost lost:list){
    Map<String, Object> map=new HashMap<>();
    map.put("value",lost.getNum());
    map.put("name",lost.getState());
    mapList.add(map);
}
return mapList;
}