目录
前言
本文主要讲解如何实现失物招领在uniapp+springboot中的实现，其中前端包括v-model,uni-request的简单使用，后端包括增删改查+模糊查询等接口实现。
编译器：idea+Hbuilder
运行器：微信开发者工具
一、实现步骤
流程如下：构思=>制作数据表=>配置springboot基础设置+uniapp的css样式和template结构=>后端实体类、mapper接口、mapper.xml、service、serviceimpl实体类、Controller控制层=>postman测试接口是否好用=>前端利用uni.request调用接口=>测试。
二、实现
1.创建数据表
代码如下（示例）：
-- 创建 stype 表
CREATE TABLE stype (
sid INT PRIMARY KEY, -- 物品类型ID
sname VARCHAR(255) -- 物品类型名称
);
-- 创建 lost 表
CREATE TABLE lost (
id INT PRIMARY KEY, -- 失物ID
uid INT, -- 用户ID
lostType INT, -- 所属商品类型ID
lostName VARCHAR(255), -- 失物名称
losttime DATETIME, -- 失物时间
lostphone VARCHAR(20), -- 联系电话
detail TEXT, -- 失物详情
FOREIGN KEY (lostType) REFERENCES stype(sid) -- 外键关联到 stype 表的 sid 字段
);
首先创建两个数据表，一个用于存储用户失物的具体数据，另一个用于装物品类型。
2.引入pom和配置maven
pom文件：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.5</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.shop</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>17</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.3.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project> <!--在build中配置resources,来防止我们资源导出失败的问题!-->
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.properties</include>/
<include>**/*.xml</include>
</includes>
<filtering>true</filtering>
</resource>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>/
<include>**/*.xml</include>
</includes>
<filtering>true</filtering>
</resource>
</resources>
</build>
注：springboot版本最好设置3.0以下版本，不然可能后续会有问题。
除了必需的springboot之外，还需要lombok，虽然它的安全性低，但是它会省去实体类中的get、set方法，可以用@Data代替，还需要引入mysql、mybatis等插件，这里就不细说了。
maven配置:
点击file=>setting=>搜索框搜索maven,把里面的Maven home directory、User settings file和Local repository配置成自己的，如果电脑没有maven也可以不配置用本地的，
Maven下载地址：https://maven.apache.org/download.cgi
3.uniapp的样式和结构
可以通过自己画图来做，也可以通过花瓣等UI库中找自己喜欢的样式来制作，在做样式的过程中可能会用到图标，这里推荐阿里巴巴图标库，免费还比较全面，下载即用。地址放下面了。
https://www.iconfont.cn/
下面放一下我做的两个样式图
因为只是想练习功能调用和实现，所以样式后续可以再调整。
4.后端实体类、mapper接口、mapper.xml、service、serviceimpl实体类、Controller控制层实现
实体层
package com.shop.demo.pojo;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;
import java.math.BigInteger;
import java.util.Date;
@Data
public class lost {
private Integer id;
private Integer uid;
private Integer lostType;
private String sname;
private String lostName;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date losttime; // 使用java.util.Date类型
private BigInteger lostphone;
private String detail;
private String lostlocation;
}
mapper接口
package com.shop.demo.mapper;
import com.shop.demo.pojo.lost;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface lostmapper {
// 全部查询
public List<lost> lostquery();
// 增加失物
public int lostadd(lost ll);
// 删除失物
public int lostdel(int id);
// 根据名字查询
public List<lost> lostqueryByName(String lostName);
// 修改自己发布的物品
public int lostupdata(lost l);
// 根据id查询
public List<lost> lostqueryById(int uid);
}
mapper.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.shop.demo.mapper.lostmapper">
<update id="lostupdata">
update lost set id=#{id}, lostType=#{lostType},lostName=#{lostName},losttime=#{losttime},lostphone=#{lostphone},detail=#{detail},lostlocation=#{lostlocation} where id=#{id}
</update>
<delete id="lostdel" parameterType="int">
delete from lost where id=#{id}
</delete>
<insert id="lostadd" parameterType="com.shop.demo.pojo.lost">
INSERT INTO lost(id, uid, lostType, lostName, losttime, lostphone, detail,lostlocation)
VALUES (#{id}, #{uid}, #{lostType}, #{lostName}, #{losttime}, #{lostphone}, #{detail},#{lostlocation})
</insert>
<select id="lostquery" resultType="com.shop.demo.pojo.lost">
SELECT lost.id, lost.uid, stype.sname, lost.lostName, lost.losttime, lost.lostphone, lost.detail,lost.lostlocation
FROM lost JOIN stype ON lost.lostType = stype.sid
</select>
<select id="lostqueryByName" resultType="com.shop.demo.pojo.lost">
select * from lost where 1=1
<if test="lostName!=null and lostName!=''">
and lostName like concat('%',#{lostName},'%') </if>
</select>
<select id="lostqueryById" resultType="com.shop.demo.pojo.lost">
select lost.* from lost, user where lost.uid=user.id
</select>
</mapper>
service层
package com.shop.demo.service;
import com.shop.demo.pojo.lost;
import java.util.List;
public interface lostservice {
List<lost> lostquery();
int lostadd(lost ll);
int lostdel(int id);
List<lost> lostqueryByName(String lostName);
int lostupdata(lost l);
List<lost> lostqueryById(int uid);
}
service实体类
package com.shop.demo.service;
import com.shop.demo.mapper.lostmapper;
import com.shop.demo.pojo.lost;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class lostserviceimpl implements lostservice {
@Autowired
lostmapper l;
@Override
public List<lost> lostquery(){
return l.lostquery();
}
@Override
public int lostadd(lost ll){
return l.lostadd(ll);
}
@Override
public int lostdel(int id){return l.lostdel(id);}
@Override
public List<lost> lostqueryByName(String lostName)
{
return l.lostqueryByName(lostName);
}
@Override
public int lostupdata(lost ll)
{
return l.lostupdata(ll);
}
@Override
public List<lost> lostqueryById(int uid)
{
return l.lostqueryById(uid);
}
}
controller控制层
package com.shop.demo.controller;
import com.shop.demo.pojo.lost;
import com.shop.demo.service.lostservice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@ResponseBody
public class lostController {
@Autowired
lostservice l;
@RequestMapping("hello")
public String hello()
{
return "数据库中没有该条件下的数据";
}
@RequestMapping("lostquery")
public List<lost> lostquery()
{
return l.lostquery();
}
@RequestMapping("lostadd")
public int lostadd(lost ll){
return l.lostadd(ll);
}
@RequestMapping("lostdel")
public int lostdel(int id) {return l.lostdel(id);}
@RequestMapping("lostqueryByName")
public List<lost> lostqueryByName(String lostName)
{
return l.lostqueryByName(lostName);
}
@RequestMapping("lostupdata")
public int lostupdata(lost ll)
{
return l.lostupdata(ll);
}
@RequestMapping("lostqueryById")
public List<lost> lostqueryById(int uid)
{
return l.lostqueryById(uid);
}
}
5.Postman测试
这里就不赘述了，放下postman官网，如有需要可自行下载。
https://www.postman.com/
6.前后端数据交互
主要用到的是uni.request和v-model
uni.request语法格式
uni.request({
url: '接口地址',
header: {
'请求头': 'application/x-www-form-urlencoded'
},
method: '方法名',
data: {
调用接口数据名称: this.实际在页面中的数据名
},
成功的回调函数
success: (res) => {
console.log(res)
uni.showToast({
title: '删除成功',
duration: 3000
})
}
})
v-model主要应用于表单，可以实现双向绑定。
删改查、模糊查询前端代码：
<template>
<view class="page">
<!-- 搜索框 -->
<view class="search-box">
<input type="text" v-model="queryByName" placeholder="请输入关键字" />
<image src="../../static/取消.png" @click="notlostquery" style="width:30px;height:30px;" class="quxiao">
</image><button @click="lostqueryByName" class="button_">搜索</button>
</view>
<!-- 推荐失物 -->
<h2 class="title_body">最近失物</h2>
<view v-if="index<4" v-for="(item, index) in LostList" :key="item.id" class="body_type"
@tap="body_detail(item)">
<p style="font-size:17px;font-weight:bold;margin:10px;">物品名：{{ item.lostName }}</p>
<p style="float:left;">时间：{{item.losttime}}</p>
<p style="float:left;">丢失地点：{{item.lostlocation}}</p>
</view>
<!-- 我的失物 -->
<view>
<h2 class="title_body">我的发布</h2>
<view class="body_type" v-for="(item, index) in mylostList" :key="index">
<p style="font-size:17px;font-weight:bold;">{{ item.lostName }}</p>
<p>{{ item.losttime }}</p>
<text @click="lostdel(item.id)" style="font-weight:bold;">删除||</text>
<text @click="lostupdata(item.id)" style="font-weight:bold;">更新</text>
</view>
</view>
<view v-show="updataflag" class="updata" style="text-align: center;">
<view style="font-size:30px;margin-bottom: 10px;;">失物更新</view>
<view style="text-align: left;">
<input type="text" v-model="lostName" placeholder="请输入物品名" />
<input type="number" v-model="lostType" placeholder="请输入物品类型" />
<input type="number" v-model="lostphone" placeholder="请输入联系方式" />
<input type="text" v-model="losttime" placeholder="丢失时间:yyyy-mm-dd" />
<input type="text" v-model="lostlocation" placeholder="请输入丢失地点" />
<input type="text" v-model="detail" placeholder="备注" />
</view>
<button style="float: left;width:45%;margin-right:20px;" @tap="upquxiao">取消</button>
<button style="float:left;width:45%;" @tap="upsub">提交</button>
</view>
</view>
</template>
<script>
import {
vShow
} from "vue";
export default {
mounted() {
this.lostquery()
this.lostqueryById()
},
data() {
return {
queryByName: "",
LostList: [],
mylostList: [],
lostDelId: null,
id: null,
updataflag: false,
lostName: "",
lostType: null,
losttime: "",
lostphone: null,
lostlocation: "",
detail: ""
};
},
methods: {
body_detail(item) {
uni.showModal({
title: "具体内容",
content: "丢失物品：" + item.lostName + "丢失类型:" + item.sname + "\n" + "丢失时间：" + item.losttime +
"\n联系方式：" + item
.lostphone + "\n备注：" + item.detail,
showCancel: false,
confirmText: "已查阅"
})
},
lostqueryById() {
uni.request({
url: 'http://localhost:8080/lostqueryById',
data: {
uid: 1
},
success: (res) => {
console.log(res.data)
this.mylostList = res.data
for (let i = 0; i < this.mylostList.length; i++) {
this.mylostList[i].losttime = this.mylostList[i].losttime.substring(0, 10)
console.log(this.mylostList[i].losttime)
}
}
})
},
lostqueryByName() {
uni.request({
url: 'http://localhost:8080/lostqueryByName',
data: {
lostName: this.queryByName
},
success: (res) => {
console.log(res.data)
this.LostList = res.data
for (let i = 0; i < this.LostList.length; i++) {
this.LostList[i].losttime = this.LostList[i].losttime.substring(0, 10)
console.log(this.LostList[i].losttime)
}
}
})
},
lostquery() {
uni.request({
url: 'http://localhost:8080/lostquery',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res.data)
this.LostList = res.data
for (let i = 0; i < this.LostList.length; i++) {
this.LostList[i].losttime = this.LostList[i].losttime.substring(0, 10)
console.log(this.LostList[i].losttime)
}
}
})
},
lostdel(id) {
console.log(id)
this.lostDelId = id
uni.request({
url: 'http://localhost:8080/lostdel',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'PUT',
data: {
id: this.lostDelId
},
success: (res) => {
console.log(res)
uni.showToast({
title: '删除成功',
duration: 3000
})
}
})
this.lostquery()
},
lostupdata(id) {
this.id = id
this.updataflag = !this.updataflag
},
upquxiao() {
this.updataflag = !this.updataflag
this.id=null,
this.lostName="",
this.lostType=null,
this.losttime="",
this.phone=null,
this.detail="",
this.lostlocation=""
this.lostquery()
},
upsub() {
this.updataflag = !this.updataflag
console.log(this.id)
console.log(this.lostType)
uni.request({
url: 'http://localhost:8080/lostupdata',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
data: {
id:this.id,
lostType: this.lostType,
lostName: this.lostName,
losttime: this.losttime,
lostphone: this.lostphone,
detail: this.detail,
lostlocation: this.lostlocation
},
success: (res) => {
console.log(res)
this.lostquery()
this.lostName-"",
this.id=null,
this.lostType=null,
this.losttime="",
this.phone=null,
this.detail="",
this.lostlocation=""
},
})
},
notlostquery() {
this.queryByName = ""
this.lostqueryByName()
}
}
};
</script>
<style>
page {
background: #e8e8e8;
}
.title_body {
font-size: 25px;
font-weight: bold;
}
.page {
padding: 20px;
}
.body_type {
background-color: white;
text-align: center;
height: auto;
display: inline-block;
width: 43.5%;
padding: 5px;
margin: 5px;
border-radius: 10px;
}
input {
margin-left: 30px;
width: 200px;
border: 1px solid gray;
padding: 7px;
display: inline-block;
margin-right: 5px;
}
.quxiao {
position: absolute;
left: 15px;
top: 25px;
}
.button_ {
background: linear-gradient(to bottom, #4097e8, #48c3e8);
color: white;
border-radius: 10px;
line-height: 40px;
width: 80px;
height: 40px;
display: inline-block;
}
.updata {
position: fixed;
bottom: 0;
background-color: white;
margin-right: 20px;
}
uni-modal .uni-modal__bd {
white-space: pre-wrap;
}
</style>
增加前端代码：
<template>
<form class="form">
<view class="form-group">
<label for="studentId">*学号</label>
<input type="number" id="studentId" name="studentId" v-model="uid" placeholder="请输入您的学号" required>
</view>
<view class="form-group">
<label for="name">*丢失物品名</label>
<input type="text" id="name" name="name" v-model="lostName" placeholder="请输入丢失物品名" required>
</view>
<view class="form-group">
<label>丢失物品类型</label>
<view class="radio-group">
<radio-group name="lostType">
<label v-for="(item,index) in lostType" @tap="queryType(item.id)">
<radio value="value" /><text>{{item.name}}</text>
</label>
</radio-group>
</view>
</view>
<view class="form-group">
<label for="name">丢失地点</label>
<input type="text" id="location" name="location" v-model="lostlocation" placeholder="请输入丢失物品名" required>
</view>
<view class="form-group">
<label for="date">丢失日期</label>
<input type="text" id="datename" name="datename" v-model="losttime" placeholder="格式:yyyy-mm-dd" required>
</view>
<view class="form-group">
<label for="phone">*联系方式</label>
<input type="tel" id="phone" name="phone" v-model="lostphone" placeholder="请输入您的手机号码" pattern="[0-9]{11}" required>
</view>
<view class="form-group">
<label for="remark">备注</label>
<textarea id="remark" name="remark" v-model="detail"></textarea>
</view>
<button type="submit" class="btn-submit" @click="sub">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
lostType:[
{id:"1",name:"生活用品"},
{id:"2",name:"学习用品"},
{id:"3",name:"电子产品"},
{id:"4",name:"其他"},
],
querytype:null,
uid:null,
lostName:"",
losttime:"",
lostphone:null,
detail:"",
lostlocation:""
}
},
methods: {
queryType(id){
this.querytype=id
console.log(this.querytype)
},
sub(){
if (this.querytype != "" && this.lostName != "" && this.losttime != "" && this.lostphone != null) {
uni.request({
url:'http://localhost:8080/lostadd',
method:'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data:{
uid:this.uid,
lostType:this.querytype,
lostName:this.lostName,
lostphone:this.lostphone,
losttime:this.losttime,
detail:this.detail,
lostlocation:this.lostlocation
},
success: (res) => {
console.log(res.data)
uni.redirectTo({
url:'/pages/life/life'
})
}
})
}
else{
uni.showModal({
content:"带*数据为必填项",
showCancel:false,
confirmText:"确认"
})
}
}
}
}
</script>
<style scoped>
.form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="number"],
input[type="tel"],
textarea {
width: 90%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.radio-group {
display: flex;
flex-wrap: wrap;
}
.radio-group label {
display: inline-block;
margin-right: 20px;
}
.datetime-picker {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
}
.btn-submit {
display: block;
width: 100%;
padding: 10px;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
完整的代码会放在我的资源里面，需要可自取。
总结
总共做了一周，零零散散的时间，因为在事先没有做详细的需求调研和需求分析，这对后续的制作造成一些困难，最终是想做一个校园微社区，而失物招领是它的一个功能，希望看到这篇文章的各位能获得一点帮助。
进窄门，行远路，见微光。
扫一扫
8694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
