基于springboot vue 校园失物招领平台的设计与实现

博主介绍：专注于Java（springboot ssm springcloud等开发框架） vue .net php phython node.js uniapp小程序等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址介绍 qq_251836457-CSDN博客
文末下方有源码获取地址

系统预览

系统设计
1. 系统架构设计

本校园失物招领平台的架构设计主要分为可以3层，主要有Web层，业务层，Model层。其中web层还包括View层和Controller层，Model层包括元数据扩展层和数据访问层。

系统架构如下图所示。

图4-1 系统架构

1. 系统总体设计

校园失物招领平台总体分为前台用户模块和后台管理员模块。

两个模块表现上是分别独立存在，但是访问的数据库是一样的。每一个模块的功能都是根据先前完成的需求分析，并查阅相关资料后整理制作的。

综上所述，系统功能结构图如下图所示。

图4-2 系统功能结构图

1. 系统功能设计

登录模块：登录模块是进入系统的入口，所有用户必须登录后才能访问系统。登录需要输入用户名和密码，如果多次尝试登录需要输入验证码。登录时需要选择用户的角色，是一般用户还是管理员登录等。登录成功后，会通过数据库获取用户的权限，并跳转至用户的主页面。

校园资讯模块：可分为校园资讯浏览、校园资讯检索、校园资讯维护三个模块，管理员对校园资讯有维护的权限，发布新的校园资讯、更新已有的校园资讯等。

认领管理模块：认领管理分为认领添加、修改和认领查询。认领信息由丢失者进行修改、添加、删除操作；认领查询由普通用户来执行。

招领管理模块：招领管理分为招领添加、修改和招领查询。招领信息由拾到者进行修改、添加、删除操作；招领查询由普通用户来执行。

1. 数据库设计
  1. 数据需求分析

从前面可以分析到数据库中最重要的是认领信息，招领信息，公告信息。分析可以得到如下数据描述：

平台用户：用于记录用户的各种信息，包括用户名、密码、姓名、性别、地址、邮箱、联系方式等数据项。

管理员：记录管理员的登录信息。包括用户名，密码，权限等数据项。

认领：存放给认领的内容，包括物品名称、丢失时间、丢失地点、图片、用户名、姓名、性别、联系方式、备注、是否审核等数据项。

招领：存储各种招领信息。包括物品名称、拾取时间、拾取地点、拾取人、联系方式、备注、是否审核等数据项。

校园资讯：存储平台内的校园资讯内容。包括标题，校园资讯内容，时间等数据项。

1. 1. 数据库概念设计

根据前面的数据流程图，结合系统的功能模块设计，设计出符合系统的各信息实体。

系统ER图如下图所示。

图4-3 系统ER图

1. 1. 数据库表设计

校园失物招领平台所拥有的数据表有以下：用户信息表，认领信息表，招领信息表，公告表。

由于数据表较多，只展示系统主要数据表，如下表所示。

表access_token (登陆访问时长)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	token_id	int	10	0	N	Y		临时访问牌ID
2	token	varchar	64	0	Y	N		临时访问牌
3	info	text	65535	0	Y	N
4	maxage	int	10	0	N	N	2	最大寿命：默认2小时
5	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
6	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
7	user_id	int	10	0	N	N	0	用户编号:

表article (文章：用于内容管理系统的文章)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	article_id	mediumint	8	0	N	Y		文章id：[0,8388607]
2	title	varchar	125	0	N	Y		标题：[0,125]用于文章和html的title标签中
3	type	varchar	64	0	N	N	0	文章分类：[0,1000]用来搜索指定类型的文章
4	hits	int	10	0	N	N	0	点击数：[0,1000000000]访问这篇文章的人次
5	praise_len	int	10	0	N	N	0	点赞数
6	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
7	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
8	source	varchar	255	0	Y	N		来源：[0,255]文章的出处
9	url	varchar	255	0	Y	N		来源地址：[0,255]用于跳转到发布该文章的网站
10	tag	varchar	255	0	Y	N		标签：[0,255]用于标注文章所属相关内容，多个标签用空格隔开
11	content	longtext	2147483647	0	Y	N		正文：文章的主体内容
12	img	varchar	255	0	Y	N		封面图
13	description	text	65535	0	Y	N		文章描述

表article_type (文章分类)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	type_id	smallint	5	0	N	Y		分类ID：[0,10000]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]决定分类显示的先后顺序
3	name	varchar	16	0	N	N		分类名称：[2,16]
4	father_id	smallint	5	0	N	N	0	上级分类ID：[0,32767]
5	description	varchar	255	0	Y	N		描述：[0,255]描述该分类的作用
6	icon	text	65535	0	Y	N		分类图标：
7	url	varchar	255	0	Y	N		外链地址：[0,255]如果该分类是跳转到其他网站的情况下，就在该URL上设置
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表auth (用户权限管理)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	auth_id	int	10	0	N	Y		授权ID：
2	user_group	varchar	64	0	Y	N		用户组：
3	mod_name	varchar	64	0	Y	N		模块名：
4	table_name	varchar	64	0	Y	N		表名：
5	page_title	varchar	255	0	Y	N		页面标题：
6	path	varchar	255	0	Y	N		路由路径：
7	position	varchar	32	0	Y	N		位置：
8	mode	varchar	32	0	N	N	_blank	跳转方式：
9	add	tinyint	3	0	N	N	1	是否可增加：
10	del	tinyint	3	0	N	N	1	是否可删除：
11	set	tinyint	3	0	N	N	1	是否可修改：
12	get	tinyint	3	0	N	N	1	是否可查看：
13	field_add	text	65535	0	Y	N		添加字段：
14	field_set	text	65535	0	Y	N		修改字段：
15	field_get	text	65535	0	Y	N		查询字段：
16	table_nav_name	varchar	500	0	Y	N		跨表导航名称：
17	table_nav	varchar	500	0	Y	N		跨表导航：
18	option	text	65535	0	Y	N		配置：
19	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表claim_information (认领信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	claim_information_id	int	10	0	N	Y		认领信息ID
2	publish_users	int	10	0	Y	N	0	发布用户
3	contact_number	varchar	64	0	Y	N		联系电话
4	collect_items	varchar	64	0	Y	N		招领物品
5	item_category	varchar	64	0	Y	N		物品类别
6	claiming_users	int	10	0	Y	N	0	认领用户
7	claimants_name	varchar	64	0	Y	N		认领人姓名
8	claim_voucher	varchar	255	0	Y	N		认领凭证
9	claim_instructions	text	65535	0	Y	N		认领说明
10	examine_state	varchar	16	0	N	N	未审核	审核状态
11	examine_reply	varchar	16	0	Y	N		审核回复
12	recommend	int	10	0	N	N	0	智能推荐
13	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
14	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表collect (收藏)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	collect_id	int	10	0	N	Y		收藏ID：
2	user_id	int	10	0	N	N	0	收藏人ID：
3	source_table	varchar	255	0	Y	N		来源表：
4	source_field	varchar	255	0	Y	N		来源字段：
5	source_id	int	10	0	N	N	0	来源ID：
6	title	varchar	255	0	Y	N		标题：
7	img	varchar	255	0	Y	N		封面：
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表comment (评论)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	comment_id	int	10	0	N	Y		评论ID：
2	user_id	int	10	0	N	N	0	评论人ID：
3	reply_to_id	int	10	0	N	N	0	回复评论ID：空为0
4	content	longtext	2147483647	0	Y	N		内容：
5	nickname	varchar	255	0	Y	N		昵称：
6	avatar	varchar	255	0	Y	N		头像地址：[0,255]
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
9	source_table	varchar	255	0	Y	N		来源表：
10	source_field	varchar	255	0	Y	N		来源字段：
11	source_id	int	10	0	N	N	0	来源ID：

表hits (用户点击)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	hits_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：

表item_category (物品类别)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	item_category_id	int	10	0	N	Y		物品类别ID
2	item_category	varchar	64	0	Y	N		物品类别
3	recommend	int	10	0	N	N	0	智能推荐
4	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
5	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表notice (公告)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	notice_id	mediumint	8	0	N	Y		公告id：
2	title	varchar	125	0	N	N		标题：
3	content	longtext	2147483647	0	Y	N		正文：
4	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
5	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表ordinary_users (普通用户)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	ordinary_users_id	int	10	0	N	Y		普通用户ID
2	user_name	varchar	64	0	Y	N		用户姓名
3	gender	varchar	64	0	Y	N		性别
4	examine_state	varchar	16	0	N	N	已通过	审核状态
5	recommend	int	10	0	N	N	0	智能推荐
6	user_id	int	10	0	N	N	0	用户ID
7	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表praise (点赞)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	praise_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	status	bit	1	0	N	N	1	点赞状态:1为点赞，0已取消

表recruitment_information (招领信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	recruitment_information_id	int	10	0	N	Y		招领信息ID
2	publish_users	int	10	0	Y	N	0	发布用户
3	contact_number	varchar	64	0	Y	N		联系电话
4	collect_items	varchar	64	0	Y	N		招领物品
5	item_category	varchar	64	0	Y	N		物品类别
6	picture	varchar	255	0	Y	N		图片
7	pickup_location	varchar	64	0	Y	N		拾物地点
8	pick_up_time	varchar	64	0	Y	N		拾物时间
9	pick_up_quantity	int	10	0	Y	N	0	拾物数量
10	item_introduction	text	65535	0	Y	N		物品简介
11	details	text	65535	0	Y	N		详情
12	hits	int	10	0	N	N	0	点击数
13	praise_len	int	10	0	N	N	0	点赞数
14	recommend	int	10	0	N	N	0	智能推荐
15	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
16	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表slides (轮播图)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	slides_id	int	10	0	N	Y		轮播图ID：
2	title	varchar	64	0	Y	N		标题：
3	content	varchar	255	0	Y	N		内容：
4	url	varchar	255	0	Y	N		链接：
5	img	varchar	255	0	Y	N		轮播图：
6	hits	int	10	0	N	N	0	点击量：
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表upload (文件上传)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	upload_id	int	10	0	N	Y		上传ID
2	name	varchar	64	0	Y	N		文件名
3	path	varchar	255	0	Y	N		访问路径
4	file	varchar	255	0	Y	N		文件路径
5	display	varchar	255	0	Y	N		显示顺序
6	father_id	int	10	0	Y	N	0	父级ID
7	dir	varchar	255	0	Y	N		文件夹
8	type	varchar	32	0	Y	N		文件类型

表user (用户账户：用于保存用户登录信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	user_id	mediumint	8	0	N	Y		用户ID：[0,8388607]用户获取其他与用户相关的数据
2	state	smallint	5	0	N	N	1	账户状态：[0,10](1可用\|2异常\|3已冻结\|4已注销)
3	user_group	varchar	32	0	Y	N		所在用户组：[0,32767]决定用户身份和权限
4	login_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	上次登录时间：
5	phone	varchar	11	0	Y	N		手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
6	phone_state	smallint	5	0	N	N	0	手机认证：[0,1](0未认证\|1审核中\|2已认证)
7	username	varchar	16	0	N	N		用户名：[0,16]用户登录时所用的账户名称
8	nickname	varchar	16	0	Y	N		昵称：[0,16]
9	password	varchar	64	0	N	N		密码
10	email	varchar	64	0	Y	N		邮箱：
11	email_state	smallint	5	0	N	N	0	邮箱认证：[0,1](0未认证\|1审核中\|2已认证)
12	avatar	varchar	255	0	Y	N		头像地址：[0,255]
13	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：

表user_group (用户组：用于用户前端身份和鉴权)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	group_id	mediumint	8	0	N	Y		用户组ID：[0,8388607]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]
3	name	varchar	16	0	N	N		名称：[0,16]
4	description	varchar	255	0	Y	N		描述：[0,255]描述该用户组的特点或权限范围
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	register	smallint	5	0	Y	N	0	注册位置:
9	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

系统实现
1. 数据库访问层的实现

该系统是通过jdbc和MySQL达成连接的，新建一个jdbc.properties文件来填写与数据库连接所需要的驱动和参数。

jdbc.driverClass=com.MySQL.jdbc.Driver

jdbc.url=jdbc:MySQL://localhost:3306/tsi

jdbc.username=root

jdbc.password=123

第一个参数代表MySQL数据库的驱动，第二个参数代表要连接的数据库，第三个和第四个参数代表数据库连接名和密码。

后台与数据库访问主要是通过HQL语句来进行查询的，查询语句中的表名是表格的实体类名，在这种查询语句中*是不允许使用的，除非适合聚合函数一起使用才可以。

1. 注册模块的实现

用户在填写数据的时候必须与注册页面上的验证相匹配否则会注册失败，注册页面的表单验证是通过JavaScript进行验证的，用户名的长度必须在6到18之间，邮箱必须带有@符号，密码和密码确认必须相同，你输入的密码，系统会根据你输入密码的强度给出指定的值，电话号码和身份证号码必须要求输入格式与生活相符合，当你前台验证通过的时候你点击注册，表单会将你输入的值通过name值传递给后台并保存到数据库中。

用户注册流程图如下图所示。

图5-1用户注册流程图

用户注册界面如下图所示。

图5-2用户注册界面

1. 登录模块的实现

主要由两部分组成，登录前的登录界面以及登录后的用户功能界面。登录界面，要求用户输入用户名和密码，当用户名和密码其中一个输入为空时，给出提示“用户名，密码不能为空”。获取用户名和密码后到数据库中查找，如果用户名存在，以及对应的密码正确，则登录成功，否则登录失败。登录失败后给出提示，并把焦点停在文本框中。登录成功后将该次会话的全局变量username设置为用户名。登录成功后进入会员的功能模块，主要有会员基本信息修改，已经发布认领信息管理，发布信息，和退出功能。退出功能是清除全局变量username的值，并跳回到首页。

登录流程图如下图所示。

图5-4登录流程图

用户登录界面如下图所示。

图5-5用户登录界面

1. 料修改模块的实现

用户登录/注册成功之后可以修改自己的基本信息。修改页面的表单中每一个input的name值都要与实体类中的参数相匹配，在用户点击修改页面的时候，如果改后用户名与数据库里面重复了，页面会提示该用户名已经存在了，否则通过Id来查询用户，并将用户的信息修改为表单提交的数据。

1. 校园资讯管理模块的实现

如果校园资讯的信息需要修改，管理员可以通过查询校园资讯的基本信息来查询校园资讯，查询校园资讯是通过ajax技术来进行查询的，需要传递校园资讯的标题、编号等参数然后在返回到该页面中,可以选中要修改或删除的那条信息，如果选中了超过一条数据，页面会挑一个窗口提醒只能选择一条数，如果没有选中数据会挑一个窗口题型必须选择一条数据。当选择确认修改的时候，后台会根据传过来的id到数据库查询，并将结果返回到修改页面中，可以在修改页面中修改刚刚选中的信息当点击确认的时候from表单会将修改的数据提交到后台并保存到数据库中，就是说如果提交的数据数据库中存在就修改，否则就保存。

校园资讯展示界面如下图所示。

图5-6校园资讯展示界面

校园资讯管理界面如下图所示。

图5-7校园资讯管理界面

1. 认领管理模块的实现

此页面的关键是编写认领信息，包括认领编号，名称，详情等。单击提交按钮以完成信息的添加。如果未写入完整的认领信息，例如，如果未写入认领编号，系统将给出相应的错误提示，并且无法成功输入。数据以概念的形式以onsubmit =“return checkForm（）”的形式写入以进行检查，checkForm（）函数是一种用于写入数据的不同类型的校对方法，是不是为空也是经过form表单中的οnsubmit=”return checkForm()来检查。

管理员点击左侧菜单“认领信息管理”，页面跳转到认领信息管理外观，调用后台认领查询所有认领信息。并将信息密封到数据集合List，绑定到请求对象，然后页面跳转到相应的jsp，显示出认领信息，单击删除按钮完成认领信息的删除。

认领管理流程图如下图所示。

图5-17认领管理流程图

认领添加界面如下图所示。

图5-18认领添加界面

认领管理界面如下图所示。

图5-19认领管理界面

部分代码

<template><el-main class="bg table_wrap"><el-form label-position="right" :model="query" class="form p_4" label-width="120"><el-row><el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap"><el-form-item label="招领物品"><el-input v-model="query.collect_items"></el-input></el-form-item></el-col><el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap"><el-form-item label="物品类别"><el-select v-model="query.item_category"><el-option v-for="o in list_item_category" :key="o.item_category" :label="o.item_category":value="o.item_category"></el-option></el-select></el-form-item></el-col><el-col :xs="24" :sm="10" :lg="8" class="search_btn_wrap_1"><el-form-item><el-button type="primary" @click="search()" class="search_btn_find">查询</el-button><el-button @click="reset()" style="margin-right: 74px;" class="search_btn_reset">重置</el-button><router-link v-if="user_group == '管理员' || $check_action('/recruitment_information/table','add') || $check_action('/recruitment_information/view','add')" class="el-button el-button--default el-button--primary search_btn_add" to="./view?">添加</router-link><el-button v-if="user_group == '管理员' || $check_action('/recruitment_information/table','del') || $check_action('/recruitment_information/view','del')" class="search_btn_del" type="danger" @click="delInfo()">删除</el-button></el-form-item></el-col></el-row></el-form><el-table :data="list" @selection-change="selectionChange" @sort-change="$sortChange" style="width: 100%" id="dataTable"><el-table-column fixed type="selection" tooltip-effect="dark" width="55"></el-table-column><el-table-column prop="publish_users" @sort-change="$sortChange" label="发布用户"v-if="user_group == '管理员' || $check_field('get','publish_users')" min-width="200"><template slot-scope="scope">{{ get_user_publish_users(scope.row['publish_users']) }}</template></el-table-column><el-table-column prop="contact_number" @sort-change="$sortChange" label="联系电话"v-if="user_group == '管理员' || $check_field('get','contact_number')" min-width="200"></el-table-column><el-table-column prop="collect_items" @sort-change="$sortChange" label="招领物品"v-if="user_group == '管理员' || $check_field('get','collect_items')" min-width="200"></el-table-column><el-table-column prop="item_category" @sort-change="$sortChange" label="物品类别"v-if="user_group == '管理员' || $check_field('get','item_category')" min-width="200"></el-table-column><el-table-column prop="picture" @sort-change="$sortChange" label="图片"v-if="user_group == '管理员' || $check_field('get','picture')" min-width="200"><template slot-scope="scope"><el-image style="width: 100px; height: 100px" :src="$fullUrl(scope.row['picture'])":preview-src-list="[$fullUrl(scope.row['picture'])]"><div slot="error" class="image-slot"><img src="../../../public/img/error.png" style="width: 90px; height: 90px" /></div></el-image></template></el-table-column><el-table-column prop="pickup_location" @sort-change="$sortChange" label="拾物地点"v-if="user_group == '管理员' || $check_field('get','pickup_location')" min-width="200"></el-table-column><el-table-column prop="pick_up_time" @sort-change="$sortChange" label="拾物时间"v-if="user_group == '管理员' || $check_field('get','pick_up_time')" min-width="200"></el-table-column><el-table-column prop="pick_up_quantity" @sort-change="$sortChange" label="拾物数量"v-if="user_group == '管理员' || $check_field('get','pick_up_quantity')" min-width="200"></el-table-column><el-table-column prop="item_introduction" @sort-change="$sortChange" label="物品简介"v-if="user_group == '管理员' || $check_field('get','item_introduction')" min-width="200"></el-table-column><el-table-column prop="details" @sort-change="$sortChange" label="详情"v-if="user_group == '管理员' || $check_field('get','details')" min-width="200"></el-table-column><el-table-column sortable prop="create_time" label="创建时间" min-width="200"><template slot-scope="scope">{{ $toTime(scope.row["create_time"],"yyyy-MM-dd hh:mm:ss") }}</template></el-table-column><el-table-column sortable prop="update_time" label="更新时间" min-width="200"><template slot-scope="scope">{{ $toTime(scope.row["update_time"],"yyyy-MM-dd hh:mm:ss") }}</template></el-table-column><el-table-column fixed="right" label="操作" min-width="120" v-if="user_group == '管理员' || $check_action('/recruitment_information/table','set') || $check_action('/recruitment_information/view','set') || $check_action('/recruitment_information/view','get') || $check_action('/认领/table','add') || $check_action('/认领/view','add')" ><template slot-scope="scope"><router-link class="el-button el-button--small is-plain el-button--success" style="margin: 5px !important;"v-if="user_group == '管理员' || $check_action('/recruitment_information/table','set') || $check_action('/recruitment_information/view','set') || $check_action('/recruitment_information/view','get')":to="'./view?' + field + '=' + scope.row[field]"size="small"><span>详情</span></router-link><router-link v-if="user_group == '管理员' || $check_comment('/recruitment_information/table')" class="el-button el-button--small is-plain el-button--primary":to="'../comment/table?size=10&page=1&source_table=recruitment_information&source_field=' + field + '&source_id=' + scope.row[field]" size="small">查看评论</router-link></template></el-table-column></el-table><!-- 分页器 --><div class="mt text_center"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="query.page" :page-sizes="[7, 10, 30, 100]" :page-size="query.size"layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination></div><!-- /分页器 --><div class="modal_wrap" v-if="showModal"><div class="modal_box"><!-- <div class="modal_box_close" @click="closeModal">X</div> --><p class="modal_box_title">重要提醒</p><p class="modal_box_text">当前有数据达到预警值！</p><div class="btn_box"><span @click="closeModal">取消</span><span @click="closeModal">确定</span></div></div></div></el-main>
</template>
<script>import mixin from "@/mixins/page.js";export default {mixins: [mixin],data() {return {// 弹框showModal: false,// 获取数据地址url_get_list: "~/api/recruitment_information/get_list?like=0",url_del: "~/api/recruitment_information/del?",// 字段IDfield: "recruitment_information_id",// 查询query: {"size": 7,"page": 1,"collect_items": "","item_category": "","login_time": "","create_time": "","orderby": `create_time desc`},// 数据list: [],// 用户列表list_user_publish_users: [],// 物品类别列表list_item_category: [""],}},methods: {// 关闭弹框closeModal(){this.showModal = false;},get_list_before(param){var user_group = this.user.user_group;if(user_group != "管理员"){let sqlwhere = "(";if(user_group=="普通用户"){sqlwhere+= "publish_users = " + this.user.user_id + " or ";}if (sqlwhere.length>1){sqlwhere = sqlwhere.substr(0,sqlwhere.length-4);sqlwhere += ")";param["sqlwhere"] = sqlwhere;}}return param;},/*** 获取物品类别列表*/async get_list_item_category() {var json = await this.$get("~/api/item_category/get_list?");if(json.result){this.list_item_category = json.result.list;}else if (json.error){console.log(json.error);}},/*** 获取普通用户用户列表*/async get_list_user_publish_users() {var json = await this.$get("~/api/user/get_list?user_group=普通用户");if(json.result && json.result.list){this.list_user_publish_users = json.result.list;}else if(json.error){console.error(json.error);}},get_user_publish_users(id){var obj = this.list_user_publish_users.getObj({"user_id":id});var ret = "";if(obj){ret = obj.nickname+"-"+obj.username;// if(obj.nickname){// 	ret = obj.nickname;// }// else{// 	ret = obj.username;// }}return ret;},deleteRow(index, rows) {rows.splice(index, 1);}},created() {this.get_list_user_publish_users();// 初始化物品类别列表this.get_list_item_category();}}
</script><style type="text/css">.bg {background: white;}.form.p_4 {padding: 1rem;}.form .el-input {width: initial;}.mt {margin-top: 1rem;}.text_center {text-align: center;}.float-right {float: right;}.modal_wrap{width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.5);z-index: 9999999999;}.modal_wrap .modal_box{width: 400px;height: 200px;background: url("../../assets/modal_bg.jpg") no-repeat center;background-size: cover;position: absolute;top: 50%;left: 50%;margin-left: -200px;margin-top: -100px;border-radius: 10px;}.modal_wrap .modal_box .modal_box_close{font-size: 20px;position: absolute;top: 10px;right: 10px;cursor: pointer;}.modal_wrap .modal_box .modal_box_title{text-align: center;font-size: 18px;margin: 16px auto;color: #fff;border-bottom: 1px solid rgba(117, 116, 116,0.5);padding-bottom: 16px;width: 356px;}.modal_wrap .modal_box .modal_box_text{text-align: center;font-size: 15px;color: #fff;margin-top: 25px;}.modal_wrap .modal_box .btn_box{display: flex;flex-direction: row;justify-content: center;margin-top: 42px;}.modal_wrap .modal_box .btn_box span{display: inline-block;width: 80px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;font-size: 14px;cursor: pointer;color: #fff;}.modal_wrap .modal_box .btn_box span:nth-child(2){background: #409EFF;color: #fff;border-color: #409EFF;margin-left: 15px;}
</style>

1. 招领管理模块的实现

根据需求，需要对招领进行添加、删除或修改详情信息。删除或修改招领时，系统根据招领的状态判定为可删除状态下，才会给出删除和修改链接，点击删除链接按钮时，请求到达后台，还会先查询招领状态再次做出判定能否删除。点击修改链接按钮时，会跳转到修改信息的页面，重新填写好数据后，数据提交到后台会对数据库中相应的记录做出修改。

添加招领时，会给出数据填写的页面，该页面根据填写好的招领编号同样会事先发送Ajax请求查询编号是否已存在，数据填写好之后提交到后台，会调用相关服务在数据库中插入记录。

招领管理流程图如下图所示。