vue连接后台写出增删改查的实例
时间: 2023-08-11 08:15:08 浏览: 33
好的,这里提供一个简单的 Vue 连接后台并实现增删改查的示例:
1. 后端代码:
首先,我们需要在后端实现 RESTful API 接口,用于处理前端发送的请求。这里以 Spring Boot 为例:
```java
@RestController
@RequestMapping("/api/books")
public class BookController {
@Autowired
private BookService bookService;
// 查询所有书籍
@GetMapping("")
public List<Book> getAllBooks() {
return bookService.getAllBooks();
}
// 根据 ID 查询书籍
@GetMapping("/{id}")
public Book getBookById(@PathVariable Long id) {
return bookService.getBookById(id);
}
// 添加书籍
@PostMapping("")
public Book addBook(@RequestBody Book book) {
return bookService.addBook(book);
}
// 更新书籍
@PutMapping("/{id}")
public Book updateBook(@PathVariable Long id, @RequestBody Book book) {
book.setId(id);
return bookService.updateBook(book);
}
// 删除书籍
@DeleteMapping("/{id}")
public void deleteBook(@PathVariable Long id) {
bookService.deleteBook(id);
}
}
```
其中,Book 表示书籍实体类,BookService 表示书籍服务类,具体实现可以根据您的需求自行编写。
2. 前端代码:
在前端中,我们需要使用 Vue.js 来实现页面渲染和交互。这里以 Element UI 为 UI 框架,使用 Axios 库来发送 Ajax 请求:
```html
<template>
<div>
<el-table :data="books" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="author" label="作者"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-form :model="book" label-width="80px">
<el-form-item label="名称">
<el-input v-model="book.name"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="book.author"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveBook">保存</el-button>
</div>
</el-dialog>
<el-button type="primary" @click="handleAdd">添加</el-button>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
books: [],
dialogVisible: false,
book: {}
}
},
methods: {
// 获取所有书籍
loadBooks() {
axios.get('/api/books')
.then(response => {
this.books = response.data
})
.catch(error => {
console.log(error)
})
},
// 添加书籍
handleAdd() {
this.book = {}
this.dialogVisible = true
},
// 编辑书籍
handleEdit(row) {
this.book = Object.assign({}, row)
this.dialogVisible = true
},
// 删除书籍
handleDelete(row) {
axios.delete('/api/books/' + row.id)
.then(response => {
this.loadBooks()
})
.catch(error => {
console.log(error)
})
},
// 保存书籍
saveBook() {
if (this.book.id) {
// 更新书籍
axios.put('/api/books/' + this.book.id, this.book)
.then(response => {
this.dialogVisible = false
this.loadBooks()
})
.catch(error => {
console.log(error)
})
} else {
// 添加书籍
axios.post('/api/books', this.book)
.then(response => {
this.dialogVisible = false
this.loadBooks()
})
.catch(error => {
console.log(error)
})
}
}
},
mounted() {
this.loadBooks()
}
}
</script>
```
其中,el-table 表示表格组件,el-dialog 表示弹窗组件,el-button 表示按钮组件,具体使用可以参考 Element UI 文档。loadBooks 方法用于获取所有书籍,handleAdd 方法用于添加书籍,handleEdit 方法用于编辑书籍,handleDelete 方法用于删除书籍,saveBook 方法用于保存书籍。这里使用了 Object.assign 方法来避免直接修改原始数据,具体使用可以参考 JavaScript 文档。
这就是一个简单的 Vue 连接后台并实现增删改查的示例,具体实现可以根据您的需求进行调整。希望能对您有所帮助。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)