Vue中的Uni-App与springboot交互实现增删改查

已于 2023-04-19 08:18:15 修改
阅读量2.1k 收藏 52
点赞数 8
分类专栏： Java uniapp 文章标签： vue.js uni-app spring boot idea 交互
于 2023-04-06 23:33:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lplovewjm/article/details/130001051
版权
Java 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
uniapp
10 篇文章 0 订阅
订阅专栏

-# 前言
在开发Web应用程序时，前端和后端协作是必不可少的。在本文中，我们将介绍如何在Vue框架下使用Uni-App实现前端和Java后台数据的交互，并演示如何通过Uni-App向Java后台发送请求来实现增删改查操作。文章最后会有前后端代码,

一、什么是Uni-App

Uni-App是DCloud推出的一个跨平台应用开发框架，它支持多种平台，包括iOS、Android、H5等，并具有原生应用的用户体验。Uni-App基于Vue.js开发，使得开发者可以使用Vue.js技术栈来构建跨平台应用，从而提高开发效率。

二、前端实现

发送查询GET请求

发送GET请求

Uni-App提供了封装好的uni.request方法来实现网络请求。在Vue组件中调用uni.request方法发送请求即可。例如：

// 查询js代码
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    query() {
      uni.request({
        url: '/api/list',
        method: 'GET',
        success: res => {
          this.list = res.data
        }
      })
    }
  },
  onLoad() {
    this.query()
  }
}

上述代码定义了一个Vue组件，其中query方法通过调用uni.request方法向Java后台发送GET请求，获取数据列表并更新页面显示。这是vue查询.

发送添加POST请求

Uni-App提供了封装好的uni.request方法来实现POST请求。例如：

// 添加js代码
data() {
		return {
				sname: '苹果',
				scount: 100,
				sprice: 10,
				stype: '水果',
			}
		},
	add() {
				// 发送 POST 请求
			uni.request({
				url: 'http://localhost:8080/add',
				method: 'POST',
				data: {
					sname: this.sname,
					scount: this.scount,
					stype: this.stype,
					sprice: this.sprice
				},
				success: function(res) {
					console.log(res.data);
				},
				fail: function(err) {
					console.log(err);
				},
			});
			this.query()
			},

上述代码定义了四个数据进行传递,用到的是post请求,在data里面进行对数据的赋值,POST添加请求.最后添加成功或者失败都重新调用query查询事件来进行查询刷新.

发送删除PUT请求/发送修改POST请求

// 删除PUT请求js代码和部分html代码
<view v-for="(item,index) in List" :key='index'>
			<text class="td">{{item.id}}</text>
			<text class="td">{{item.sname}}</text>
			<text class="td">{{item.scount}}</text>
			<text class="td">{{item.stype}}</text>
			<text class="td">{{item.sprice}}</text>
			<text class="td_" @tap="del(item.id)">删除</text>
			<text class="td_" @tap="updshow(item.id)">修改</text>
</view>
<view class="add" v-show="show">
			<view class="addtitle">
				物资修改
			</view>
			名称:<input class="input" v-model="sname" type="text" />
			数量:<input class="input" v-model="scount" type="number" />
			种类:<input class="input" v-model="stype" type="text" />
			价格:<input class="input" v-model="sprice" type="number" />
			<button @click="upd()">修改</button>
		</view>
		data() {
			return {
				List: [],
				sname: '',
				scount: null,
				sprice: null,
				stype: '',
				show: false,
				upd1:null,
			}
		},
del(id) {
				console.log(id)
				uni.request({
					url: 'http://localhost:8080/del',
					method: 'PUT',
					data: id,
					success: (res) => {
						console.log(res)
						this.query()
					}
				})
			},
			updshow(id) {
				this.show = !this.show
				this.upd1=id
				console.log(this.upd1)
			},
			upd() {
				console.log(this.upd1)
				uni.request({
					url: 'http://localhost:8080/upd',
					method: 'POST',
					data: {
						id:this.upd1,
						sname:this.sname,
						scount:this.scount,
						stype:this.stype,
						sprice:this.sprice
					},
					success: (res) => {
						console.log(res)
					}
				})
				this.query()
				this.show = !this.show
			}

在上述的代码中,我们是根据对象的id值进行判断和删除,主要是通过v-for遍历时的当前对象调用的id,来当del事件的实参,调用后用PUT请求方式,实现根据id来进行删除的操作.
而修改,我们是通过点击事件和v-show来确定修改页面是否显示且把当前事件的id值赋给data中的upd1,然后通过v-model实现双向绑定,最后通过id:this.upd1来进行对更新数据的判定,实现修改数据操作,最后调用查询事件并且把v-show编程false来对修改页面进行隐藏.

前台代码

<template>
	<view>
		<view class="query">
			<view class="th">
				<text class="td">编号</text><text class="td">名称</text><text class="td">数量</text><text
					class="td">类别</text><text class="td">单价</text>
			</view>
			<view v-for="(item,index) in List" :key='index'>
				<text class="td">{{item.id}}</text>
				<text class="td">{{item.sname}}</text>
				<text class="td">{{item.scount}}</text>
				<text class="td">{{item.stype}}</text>
				<text class="td">{{item.sprice}}</text>
				<text class="td_" @tap="del(item.id)">删除</text>
				<text class="td_" @tap="updshow(item.id)">修改</text>
			</view>
		</view>
		<button @click="showadd">添加</button>
		<view class="add" v-show="flag">
			<view class="addtitle">
				物资添加
			</view>
			名称:<input class="input" v-model="sname" type="text" />
			数量:<input class="input" v-model="scount" type="number" />
			种类:<input class="input" v-model="stype" type="text" />
			价格:<input class="input" v-model="sprice" type="number" />
			<button @click="add">添加</button>
		</view>
		<view class="add" v-show="show">
			<view class="addtitle">
				物资修改
			</view>
			名称:<input class="input" v-model="sname" type="text" />
			数量:<input class="input" v-model="scount" type="number" />
			种类:<input class="input" v-model="stype" type="text" />
			价格:<input class="input" v-model="sprice" type="number" />
			<button @click="upd()">修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List: [],
				sname: '',
				scount: null,
				sprice: null,
				stype: '',
				flag: false,
				show: false,
				upd1:null,
			}
		},
		onLoad() {
			this.query()
		},
		methods: {
			query: function() {
				this.sname= '',
				this.scount= null,
				this.sprice= null,
				this.stype= '',
				uni.request({
					url: 'http://localhost:8080/query',
					success: (res) => {
						console.log(res)
						this.List= res.data
					}
				})
			},
			add() {
				this.flag = !this.flag
				console.log(this.sname + this.scount + this.stype + this.sprice)
				// 发送 POST 请求
				uni.request({
					url: 'http://localhost:8080/add',
					method: 'POST',
					data: {
						sname: this.sname,
						scount: this.scount,
						stype: this.stype,
						sprice: this.sprice
					},
					success: function(res) {
						console.log(res.data);
					},
					fail: function(err) {
						console.log(err);
					},
				});
				this.query()
			},
			updshow(id) {
				this.show = !this.show
				this.upd1=id
				console.log(this.upd1)
			},
			showadd(id) {
				this.flag = !this.flag
			},
			del(id) {
				console.log(id)
				uni.request({
					url: 'http://localhost:8080/del',
					method: 'PUT',
					data: id,
					success: (res) => {
						console.log(res)
						this.query()
					}
				})
			},
			upd() {
				console.log(this.upd1)
				uni.request({
					url: 'http://localhost:8080/upd',
					method: 'POST',
					data: {
						id:this.upd1,
						sname:this.sname,
						scount:this.scount,
						stype:this.stype,
						sprice:this.sprice
					},
					success: (res) => {
						console.log(res)
					}
				})
				this.query()
				this.show = !this.show
			}
		}
	}
</script>

<style>
	.query {
		width: auto;
		margin: 10rpx;
		height: auto;
		/* background-image: linear-gradient(to right, #1f6eb4, #2c9dff); */
	}

	.th {
		font-weight: bold;
	}

	.td {
		display: inline-block;
		margin-left: 5rpx;
		width: 100rpx;
	}

	.td_ {
		display: inline-block;
		margin-left: 5rpx;
		width: 100rpx;
		color: #ff2631;
	}

	.add {
		position: fixed;
		bottom: 0;
	}

	.input {
		border: 1px solid lightgray;
		border-radius: 5rpx;
	}

	.addtitle {
		font-weight: bold;
		text-align: center;
	}
</style>

后台代码

contoller层
package com.supplies.controller;


import com.supplies.pojo.supplies;
import com.supplies.Service.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@ResponseBody
public class controller {
    @Autowired
    service ser;
    @RequestMapping("hello")
    public String hello()
    {
        return "Springboot";
    }
    @RequestMapping("query")
    public List<supplies> query()
    {
        return ser.query();
    }
    @RequestMapping("add")
     public int add(@RequestBody supplies s)
    {
        int res=ser.add(s);
        return res;
    }
    @PutMapping("del")
    public boolean del(@RequestBody int id)
    {
        return ser.del(id);
    }
    @RequestMapping("upd")
    public boolean upd(@RequestBody supplies s)
    {
        return ser.upd(s);
    }
}
实体类层
package com.supplies.pojo;

import lombok.Data;

@Data
public class supplies {
    private Integer id;
    private String sname;
    private Integer scount;
    private String stype;
    private Integer sprice;
}
service层
package com.supplies.Service;

import com.supplies.pojo.supplies;

import java.util.List;

public interface service {
    public List<supplies> query();
    public int add(supplies s);
    public boolean del(int id);
    public boolean upd(supplies s);
}
serviceimpl层
package com.supplies.Service;

import com.supplies.mapper.Smapper;
import com.supplies.pojo.supplies;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class serviceimpl implements service{
    @Autowired
    Smapper mapper;

    @Override
    public List<supplies> query()
    {
        return mapper.query();
    }
    @Override
    public int add(supplies s){
        int res=mapper.add(s);
        return res;
    }
    @Override
    public boolean del(int id)
    {
        return mapper.del(id);
    }
    @Override
    public boolean upd(supplies s)
    {

        return mapper.upd(s);
    }
}
mapper层
package com.supplies.mapper;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import com.supplies.pojo.supplies;
import java.util.List;

@Repository
@Mapper
public interface Smapper {
    public List<supplies> query();
    public int add(supplies s);
    public boolean del(int id);
    public boolean upd(supplies s);
}
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.supplies.mapper.Smapper">
    <!-- 新增一个对应 querystu 方法的查询语句 -->
    <select id="query" resultType="com.supplies.pojo.supplies">
        SELECT * FROM supplie;
    </select>
    <insert id="add">
        INSERT INTO supplie(sname,scount,stype,sprice) VALUES (#{sname},#{scount} ,#{stype}, #{sprice})
     </insert>
    <delete id="del">
        DELETE  FROM supplie WHERE id=#{id}
    </delete>
    <update id="upd">
        UPDATE supplie set sname=#{sname},scount=#{scount},stype=#{stype},sprice=#{sprice} where id=#{id}
    </update>
</mapper>
pom.xml
<?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.9</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.supplies.demo</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>supplies</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-devtools</artifactId>
            <optional>true</optional>
            <scope>true</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.project.lombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

数据表

在这里插入图片描述

爱吃巧克li
关注
  • 8
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》（附完整前后端项目demo）
tigerhhzz的博客
05-20 8330
功能： 通过前端发送请求，请求头中携带token参数，后端接受到token，然后进行token验证，拿到openid，通过openid去数据库中查询用户信息,并返回前端。功能： 通过前端发送请求携带的参数code以及后端配置文件中的微信小程序appid和微信小程序密钥，后端拼接url向微信后台发送请求。通过拿到的openid，去数据库查询对应用户信息，如果没有openid的用户，进行新增操作；使用uniapp构建一套代码多端使用的前端框架项目。如果存在openid的用户，进行更新操作。
uni-app和springboot开发的中俄睦邻app
10-09
标题中的“uni-app和springboot开发的中俄睦邻app”表明了这个项目是基于uni-app框架和Spring Boot后端框架构建的一个应用，主要用于促进中国和俄罗斯之间的文化交流。uni-app是一款多端开发框架，能用于开发iOS、...
uniapp+springboot 实现前后端分离的个人备忘录系统【超详细】
m0_60936523的博客
12-29 3785
至此后端工程全部创建完毕，按照下图检查一下是否有缺少，注意Mapper可写也可以不写，因为我们不需要写SQL语句，不需要调用Mapper，全部完毕后就可以运行项目，利用apipost进行测试，或者前端创建完后直接集成测试。首先打开IDEA，选择创建Spring Initializr，按照以下配置，jdk版本无法选择jdk1.8，先不管，进去以后可以改，具体操作可以看我的另一篇相关的博客。2.由于uniapp支持多个主流平台，你可以在不同的平台上发布你的备忘录系统，扩大用户群体，增加潜在的收入来源。
使用uni-app的uniCloud 云数据库入门：实现一个简单的增删改查
九段刀客的博客
08-03 1217
前置步骤使用uni-app新建一个uniCloud项目[外链图片转存失败,源站可能有防盗官方云数据库文档]!链机制,建议将()https://uniapp.dcloud.net.cn/uniCloud/hellodb.html)]
vue与Spring boot数据交互例子【简单版】
hac1322的博客
04-26 1110
官网解释：Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
uni-app请求后台接口方法封装
浩星
01-26 1万+
前言： uni-app中方法整理之请求后台接口。个人封装版本与官方提供方法。 官方入口： 封装版本：目录见下 1、新建文件夹api，这里主要放接口信息 login.js 放登录页面的接口方法 import axios from '../util/http' const Login = { // 获取验证码 goPhoneCode(params) { return axios({ method:'get', url:`/phoneCode`, params:param
uni-app 调用云函数的增删改查及上传图片
zczdc的博客
06-07 1678
调用云函数 uniCloud.callFunction({ name:"login", // 函数名 // data上传的参数 data:{ name:"李白", age:"111" }, success(res) { console.log(res) } }) 云函数向数据库添加数据 'use strict'; // 数据库的引用 const db = uniCloud.database(
UNI-APP 中sqlite demo 增删查改
06-24
本demo包含 自己封装的sqlite.js 页面功能 打开关闭数据库 创建表、删除表 新增表数据、删除表数据 查询表数据、编辑表数据 可按条件操作，删除、查询表数据
基于uni-app 与 Springboot开发的Snowy短视频.zip
最新发布
05-25
【标题】"基于uni-app 与 Springboot开发的Snowy短视频.zip" 提供了一个结合前端移动应用开发框架uni-app和后端Java SpringBoot框架的项目案例。uni-app是一款多端开发框架，允许开发者编写一次代码，发布到iOS、...
基于Vue的uni-app个人日记App
03-04
在本文中，我们将深入探讨如何使用基于Vue的uni-app框架构建一个个人日记应用程序。Vue.js是一种流行的前端JavaScript框架，而uni-app则是一个多端开发框架，可以让你编写一次代码，跨平台运行，包括iOS、Android、...
SpringBoot+uniapp实现数据获取
aoteman_web的博客
02-06 4511
1、设计数据库表结构 单纯的测试数据，结构不严谨。 create table if not exists activity (id integer unsigned primary key auto_increment, imgURL varchar(255) not null, title varchar(255) not null, classification varchar(255) not null, address varchar(255) not null, starttime varchar
uniapp——uicloud云服务（增删改查）
wy313622821的博客
09-07 1378
使用免费的uicloud云服务（增删改查）
uniApp微信小程序前后端交互
m0_67651116的博客
02-10 1721
uniApp微信小程序前后端交互
一，.uniapp如何请求数据？
Weiyatong的博客
04-03 590
3、在methods中添加方法，使用uni.request的方法来请求后台数据，url地址采用拼接的方式，在success函数中处理返回结果数据。6、然后我们在看下微信小程序的运行效果，dom元素中将返回的后台结果在前台进行渲染了。2、然后在template中定义元素，用来处理返回结果，渲染dom元素，如下图所示。首先在变量中定义一个lists，用来返回后台请求数据的结果，定义为数组类型。5、在微信小程序上我们通过打开相应的页面，打开控制台及调试工具，看是否有请求。
Spring boot 与 uni.app前端向后端数据传输
cchaos的博客
11-15 8047
1，路径GET请求传参 前端请求： uni.request({ url: this.domainUrl + "/zyymall/queryvoladdress/" +this.cmsSiteId+ "/" + this.uid, method: 'GET', }), 接收方式 @GetMapping("/queryvoladdress/{cmsSiteId}/{volId}") publ...
uniapp请求后端接口
qq_44971069的博客
04-08 1025
新建文件夹untils。
uni-app请求后端接口和请求
热门推荐
weixin_45511236的博客
11-27 1万+
后端接口是第三方涉及跨域问题，由于我自己没有后台服务器，无法采用cors进行设置响应头，所以采用和vue原理一样的nginx代理 首先在配置文件 "devServer": { "port": 8009, "disableHostCheck": true, "proxy": { "/api": { "target": "http://ceshi3.dishait.cn
uniapp+springboot前后端分离展示“学生信息”
m0_69064503的博客
03-05 949
uniapp+springboot跨域交互数据，前后端分离展示“学生信息管理系统”
UNIAPP实战项目笔记13 请求接口渲染首页数据
Ggome的博客
10-03 1629
此处也有一个bug 需要先将 动态获取高度的功能取消 改为2000 默认高度，后期再去修正为动态获取高度。将 swiper 和 commodityList组件需要的数据 封装到后端，方便前端请求数据。文件中将原来的静态数据改为 动态获取使用时通过参数传递过来的dataList数据。接口数据使用nodejs的express框架，搭建详情见上一个笔记。| 参数 | 必选 | 类型 | 说明 |将 组件中的静态数据转为动态 数据。将 组件中的静态数据转为动态 数据。将 组件中的静态数据转为动态 数据。
vue+uni-app+php+mysql 旅游
01-08
同时，PHP与MySQL的兼容性良好，可以方便地进行数据库的增删改查操作，存储用户的个人信息、旅游路线等数据。 综上所述，结合Vue、Uni-App、PHP和MySQL可以实现一个多平台的旅游应用，让用户能够在不同设备上方便地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃巧克li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值