uniapp增删改查
时间: 2023-10-26 10:07:02 浏览: 176
uniapp是一款跨平台的开发框架,可以用于开发微信小程序、支付宝小程序、H5、App等多个平台。在uniapp中进行增删改查操作,可以使用uni-app提供的API或者第三方插件。
1. 增加数据:可以使用uni.request()方法向后端发送请求,将数据添加到数据库中。
2. 删除数据:同样可以使用uni.request()方法向后端发送请求,将指定数据从数据库中删除。
3. 修改数据:使用uni.request()方法向后端发送请求,将需要修改的数据和修改后的数据一起传递给后端,由后端进行修改操作。
4. 查询数据:使用uni.request()方法向后端发送请求,将需要查询的条件传递给后端,由后端返回符合条件的数据。
相关问题
uniapp增删改查简单实现
Uniapp 是一个跨平台的应用程序开发框架,可以用于开发微信小程序、App 和 H5 等多种应用程序。如果要实现增删改查,可以使用 uniapp 搭配后端技术实现。下面是一个简单的示例:
1. 创建一个数据库表
首先,需要创建一个数据库表,表名为 `user`,包含以下字段:
- `id`:自增长的主键
- `name`:用户姓名
- `age`:用户年龄
- `gender`:用户性别
2. 后端实现
使用 Node.js 和 Express 框架,编写后端接口实现增删改查功能。以下是示例代码:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
const port = 3000;
// 创建连接池
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '123456',
database: 'test'
});
// 解析 application/json
app.use(bodyParser.json());
// 查询用户列表
app.get('/api/user', (req, res) => {
const sql = 'SELECT * FROM user';
pool.query(sql, (err, result) => {
if (err) throw err;
res.send(result);
});
});
// 查询单个用户
app.get('/api/user/:id', (req, res) => {
const id = req.params.id;
const sql = 'SELECT * FROM user WHERE id = ?';
pool.query(sql, id, (err, result) => {
if (err) throw err;
res.send(result[0]);
});
});
// 新增用户
app.post('/api/user', (req, res) => {
const { name, age, gender } = req.body;
const sql = 'INSERT INTO user SET ?';
const user = { name, age, gender };
pool.query(sql, user, (err, result) => {
if (err) throw err;
res.send('User added successfully');
});
});
// 修改用户
app.put('/api/user/:id', (req, res) => {
const id = req.params.id;
const { name, age, gender } = req.body;
const sql = 'UPDATE user SET name = ?, age = ?, gender = ? WHERE id = ?';
pool.query(sql, [name, age, gender, id], (err, result) => {
if (err) throw err;
res.send('User updated successfully');
});
});
// 删除用户
app.delete('/api/user/:id', (req, res) => {
const id = req.params.id;
const sql = 'DELETE FROM user WHERE id = ?';
pool.query(sql, id, (err, result) => {
if (err) throw err;
res.send('User deleted successfully');
});
});
// 启动服务
app.listen(port, () => {
console.log(`Server started at http://localhost:${port}`);
});
```
3. 前端实现
在 uniapp 中,通过 `uni.request` 方法调用后端接口实现增删改查功能。以下是示例代码:
```javascript
export default {
data() {
return {
userList: []
};
},
created() {
// 查询用户列表
uni.request({
url: 'http://localhost:3000/api/user',
success: res => {
this.userList = res.data;
}
});
},
methods: {
// 查询单个用户
getUser(id) {
uni.request({
url: `http://localhost:3000/api/user/${id}`,
success: res => {
console.log(res.data);
}
});
},
// 新增用户
addUser(user) {
uni.request({
url: 'http://localhost:3000/api/user',
method: 'POST',
data: user,
success: res => {
console.log(res.data);
}
});
},
// 修改用户
updateUser(id, user) {
uni.request({
url: `http://localhost:3000/api/user/${id}`,
method: 'PUT',
data: user,
success: res => {
console.log(res.data);
}
});
},
// 删除用户
deleteUser(id) {
uni.request({
url: `http://localhost:3000/api/user/${id}`,
method: 'DELETE',
success: res => {
console.log(res.data);
}
});
}
}
}
```
以上就是一个简单的 uniapp 增删改查的实现示例。需要注意的是,这只是一个示例,实际开发中需要根据具体业务需求进行适当调整。
ssm+uniapp增删改查
SSM框架和uni-app可以很好地结合使用来实现增删改查功能。下面是一个示例:
1. 在SSM框架中,使用MyBatis进行数据库操作。首先,创建一个Mapper接口,定义增删改查的方法。例如,创建一个UserMapper接口:
```java
public interface UserMapper {
void insert(User user);
void delete(int id);
void update(User user);
User select(int id);
}
```
2. 在MyBatis的配置文件中,配置Mapper接口的映射关系。例如,创建一个userMapper.xml文件:
```xml
<mapper namespace="com.example.mapper.UserMapper">
<insert id="insert" parameterType="com.example.model.User">
INSERT INTO user (id, name, age) VALUES (#{id}, #{name}, #{age})
</insert>
<delete id="delete" parameterType="int">
DELETE FROM user WHERE id = #{id}
</delete>
<update id="update" parameterType="com.example.model.User">
UPDATE user SET name = #{name}, age = #{age} WHERE id = #{id}
</update>
<select id="select" parameterType="int" resultType="com.example.model.User">
SELECT * FROM user WHERE id = #{id}
</select>
</mapper>
```
3. 在Spring MVC中,创建一个Controller类,处理前端请求并调用对应的Mapper方法。例如,创建一个UserController类:
```java
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserMapper userMapper;
@RequestMapping("/add")
@ResponseBody
public String addUser(User user) {
userMapper.insert(user);
return "添加成功";
}
@RequestMapping("/delete")
@ResponseBody
public String deleteUser(int id) {
userMapper.delete(id);
return "删除成功";
}
@RequestMapping("/update")
@ResponseBody
public String updateUser(User user) {
userMapper.update(user);
return "更新成功";
}
@RequestMapping("/get")
@ResponseBody
public User getUser(int id) {
return userMapper.select(id);
}
}
```
4. 在uni-app中,使用Vue.js进行前端开发。可以通过发送HTTP请求来调用SSM框架中的接口。例如,使用uni.request方法发送请求:
```javascript
// 添加用户
uni.request({
url: 'http://localhost:8080/user/add',
method: 'POST',
data: {
id: 1,
name: '张三',
age: 20
},
success: function(res) {
console.log(res.data);
}
});
// 删除用户
uni.request({
url: 'http://localhost:8080/user/delete',
method: 'POST',
data: {
id: 1
},
success: function(res) {
console.log(res.data);
}
});
// 更新用户
uni.request({
url: 'http://localhost:8080/user/update',
method: 'POST',
data: {
id: 1,
name: '李四',
age: 25
},
success: function(res) {
console.log(res.data);
}
});
// 获取用户
uni.request({
url: 'http://localhost:8080/user/get',
method: 'GET',
data: {
id: 1
},
success: function(res) {
console.log(res.data);
}
});
```
这样,就可以通过uni-app发送HTTP请求来实现SSM框架中的增删改查功能。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)