vue连接后台写出增删改查的实例

好的，这里提供一个简单的 Vue 连接后台并实现增删改查的示例：

1. 后端代码：

首先，我们需要在后端实现 RESTful API 接口，用于处理前端发送的请求。这里以 Spring Boot 为例：

@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 请求：

<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 连接后台并实现增删改查的示例，具体实现可以根据您的需求进行调整。希望能对您有所帮助。