uni-app新增怎么写
时间: 2023-08-12 22:38:19 浏览: 136
uni-app入门
在uni-app中新增可以分为两部分,一部分是前端页面的新增,另一部分是后端数据的新增。下面我将分别介绍如何实现。
1. 前端页面的新增
前端页面的新增一般指的是在前端页面中添加一个表单,用户填写后点击提交按钮,将数据提交到后端进行保存。具体实现步骤如下:
1. 在前端页面中添加一个表单,例如:
```html
<template>
<div>
<form>
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="formData.name">
</div>
<div>
<label for="age">年龄:</label>
<input type="number" id="age" v-model="formData.age">
</div>
<button type="submit" @click.prevent="submitForm">提交</button>
</form>
</div>
</template>
```
2. 在前端页面的script中定义一个data对象,用于存储表单数据,例如:
```javascript
<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
}
}
},
methods: {
submitForm() {
// 在这里编写提交表单的逻辑代码
}
}
}
</script>
```
3. 在submitForm方法中,使用uni.request方法将数据提交到后端进行保存,例如:
```javascript
<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
}
}
},
methods: {
submitForm() {
uni.request({
url: '/api/user',
method: 'POST',
data: this.formData,
success: (res) => {
console.log(res)
}
})
}
}
}
</script>
```
2. 后端数据的新增
后端数据的新增一般指的是将前端页面提交的数据保存到后端数据库中。具体实现步骤如下:
1. 在后端编写一个接口,用于接收前端页面提交的数据,例如:
```javascript
app.post('/api/user', (req, res) => {
const { name, age } = req.body
// 在这里将数据保存到数据库中
res.send('success')
})
```
2. 在前端页面中使用uni.request方法将数据提交到后端接口,例如:
```javascript
<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
}
}
},
methods: {
submitForm() {
uni.request({
url: '/api/user',
method: 'POST',
data: this.formData,
success: (res) => {
console.log(res)
}
})
}
}
}
</script>
```
这样,当用户在前端页面填写完表单后点击提交按钮,数据就会被提交到后端进行保存。
阅读全文