Uni-app 是一个基于 Vue.js 的跨平台应用开发框架，可以用于开发iOS、Android、H5等多个平台的应用。下面我会简单介绍一下在 uni-app 中进行增删改查的基本操作，并提供一些示例代码帮助理解。
### 增加数据
在 uni-app 中进行数据的增加操作通常涉及到两个部分：前端页面的设计和后端接口的调用。
#### 前端页面设计
在前端页面设计中，你可以使用 `<form>` 标签来创建一个表单，用户通过表单输入数据，然后通过点击提交按钮来触发数据的提交操作。以下是一个简单的示例：
```html
<template>
<form @submit="addData">
<input type="text" v-model="name" placeholder="请输入名称" />
<input type="text" v-model="age" placeholder="请输入年龄" />
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
age: ''
};
},
methods: {
addData() {
// 在这里调用后端接口，将数据提交到服务器
}
}
};
</script>
```
'use strict';
exports.main = async (event, context) => {
//event为客户端上传的参数
console.log('event : ', event)
//1.连接数据库
const db = uniCloud.database();
//2 插入数据
var id = await db.collection('Index').add({
name: event.username,
createTime: event.createTime,
reason: event.reason,
starTime: event.starrDate,
endTime: event.endtdDte,
attachment: event.attachment,
})
//返回数据给客户端
if (id) {
return {
code: 200,
msg: "成功"
}
} else {
return {
code: 500,
msg: "失败"
}
}
};
#### 后端接口调用
在 `addData` 方法中，你需要调用后端接口将数据提交到服务器。你可以使用 `uni.request` 或者其他 HTTP 请求库来发起网络请求，将数据发送到后端服务器，完成数据的新增操作。以下是一个使用 `uni.request` 的简单示例：
```javascript
addData() {
uni.request({
url: 'https://your-backend-api-url/addData',
method: 'POST',
data: {
name: this.name,
age: this.age
},
success: (res) => {
// 处理成功的回调
},
fail: (err) => {
// 处理失败的回调
}
});
}
```
### 删除数据
进行数据删除操作同样需要前后端配合。
#### 前端页面设计
在前端页面设计中，你可以使用列表展示数据，并为每一项数据添加删除按钮，用户点击删除按钮时触发删除操作。以下是一个简单的示例：
```html
<template>
<div>
<ul>
<li v-for="(item, index) in dataList" :key="index">
{{ item.name }} - {{ item.age }}
<button @click="deleteData(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [] // 假设这里是获取到的数据列表
};
},
methods: {
deleteData(index) {
// 在这里调用后端接口，将数据从服务器删除
}
}
};
</script>
```
#### 后端接口调用
在 `deleteData` 方法中，你需要调用后端接口将对应的数据从服务器删除。与新增操作相似，你可以使用 `uni.request` 或其他 HTTP 请求库发起网络请求，将删除请求发送到后端服务器。以下是一个使用 `uni.request` 的简单示例：
```javascript
deleteData(index) {
const id = this.dataList[index].id; // 假设每条数据有一个唯一的id
uni.request({
url: `https://your-backend-api-url/deleteData?id=${id}`,
method: 'GET',
success: (res) => {
// 处理成功的回调
this.dataList.splice(index, 1); // 成功后前端也需要将对应数据从列表中删除
},
fail: (err) => {
// 处理失败的回调
}
});
}
```
<template>
<view class=" classify">
<view class="content">
<!-- 侧边栏 -->
<scroll-view scroll-y="true" class="left">
<text @tap="onclick(index)" :class="currentIndex==index?'active':''"
v-for="(item,index) in classifyList" :key="index">{{item.nationality}}</text>
</scroll-view>
<!-- id不能为数字开头 滑轮效果-->
<scroll-view scroll-y="true" :scroll-into-view="itemId" scroll-with-animation="true">
<view class="right" style="height:100vh;">
<view :id="'item'+index" class="biankuan" v-for="(item,index) in classifyList" :key="index">
<text class="title">{{item.nationality}}</text>
<view class="list">
<view class="item" v-for="(good,index) in classifyList" :key="index">
<image :src="good.attachment" mode=""></image>
<text>{{good.huaname}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
itemId: "item0",
classifyList: [],
//默认选中的项下标
currentIndex: 0
}
},
onLoad() {
this.getGoodsList()
},
methods: {
//分类的接口
getGoodsList() {
uniCloud.callFunction({
name: "Index-get",
success: (res) => {
console.log(res)
this.classifyList = res.result.indexs.data;
}
})
},
//定位样式
onclick(index) {
this.currentIndex = index;
//获取id值
this.itemId = "item" + index;
}
}
}
</script>
<style lang="scss">
.classify {
.content {
display: flex;
.left {
width: 130rpx;
background-color: #f6f6f6;
flex-wrap: wrap;
//使用内部的样式链接
/deep/ .uni-scroll-view-content {
display: flex;
flex-direction: column;
}
text {
text-align: center;
padding: 15px 0;
}
//被点中再加上一个类
.active {
background-color: white;
border-left: 3px solid #0055ff;
}
}
.right {
margin: 10px;
border-color: #fbf4ff;
background-color: #fafafa;
flex: 1;
height: 100vh;
&>view {
border-color: white;
font-weight: 5px;
margin: 10px;
}
.list {
display: flex;
flex-wrap: wrap;
.item {
width: 33%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 10px;
image {
width: 60px;
height: 60px;
overflow-clip-margin: content-box;
overflow: clip;
}
}
}
}
}
}
</style>
### 修改数据
数据的修改操作与添加操作类似，也需要前后端配合完成。
#### 前端页面设计
在前端页面设计中，你可以使用表单来展示需要修改的数据，并提供提交按钮来触发修改操作。以下是一个简单的示例：
```html
<template>
<form @submit="updateData">
<input type="text" v-model="currentData.name" />
<input type="text" v-model="currentData.age" />
<button type="submit">提交修改</button>
</form>
</template>
<script>
export default {
data() {
return {
currentData: {} // 假设这里是需要修改的当前数据
};
},
methods: {
updateData() {
// 在这里调用后端接口，将修改后的数据提交到服务器
}
}
};
</script>
```
#### 后端接口调用
在 `updateData` 方法中，你需要调用后端接口将修改后的数据提交到服务器。使用 `uni.request` 或其他 HTTP 请求库发起网络请求，将修改请求发送到后端服务器。以下是一个使用 `uni.request` 的简单示例：
```javascript
updateData() {
const id = this.currentData.id; // 假设每条数据有一个唯一的id
uni.request({
url: `https://your-backend-api-url/updateData?id=${id}`,
method: 'POST',
data: this.currentData, // 将修改后的数据作为请求体发送到服务器
success: (res) => {
// 处理成功的回调
},
fail: (err) => {
// 处理失败的回调
}
});
}
```
### 查询数据
查询数据操作通常是通过调用后端接口，从服务器获取数据并在前端页面展示。
#### 前端页面设计
在前端页面设计中，你可以设计一个展示数据的列表或表格，并在页面加载时调用后端接口获取数据。以下是一个简单的示例：
```html
<template>
<div>
<ul>
<li v-for="(item, index) in dataList" :key="index">
{{ item.name }} - {{ item.age }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [] // 用于存储从后端获取的数据
};
},
mounted() {
this.loadData();
},
methods: {
loadData() {
// 在这里调用后端接口，获取数据
}
}
};
</script>
```
#### 后端接口调用
在 `loadData` 方法中，你需要调用后端接口从服务器获取数据。使用 `uni.request` 或其他 HTTP 请求库发起网络请求，将获取数据的请求发送到后端服务器。以下是一个使用 `uni.request` 的简单示例：
```javascript
loadData() {
uni.request({
url: 'https://your-backend-api-url/getData',
method: 'GET',
success: (res) => {
this.dataList = res.data; // 将从服务器获取的数据存储起来，页面会自动更新展示
},
fail: (err) => {
// 处理失败的回调
}
});
}
```
以上是在 uni-app 中进行增删改查操作的简单示例代码。在实际开发中，需要根据具体业务逻辑和后端接口的设计做相应调整。希望对你有所帮助.
2801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
