springboot+vue+element-plus增删改查Demo

好的，这个Demo需要分为前端页面和后端代码两部分来实现，下面我将介绍具体的实现步骤。

## 后端代码实现

1. 创建SpringBoot项目，引入相关依赖：

   <dependencies>
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
       </dependency>
       <dependency>
           <groupId>org.mybatis.spring.boot</groupId>
           <artifactId>mybatis-spring-boot-starter</artifactId>
           <version>2.2.0</version>
       </dependency>
       <dependency>
           <groupId>com.alibaba</groupId>
           <artifactId>druid-spring-boot-starter</artifactId>
           <version>1.2.5</version>
       </dependency>
       <dependency>
           <groupId>org.projectlombok</groupId>
           <artifactId>lombok</artifactId>
           <version>1.18.12</version>
       </dependency>
   </dependencies>

2. 创建数据库表，并使用Mybatis进行数据访问操作，这里使用Druid作为数据源：

   @Mapper
   public interface DemoMapper {
       List<Demo> getDemoList();
       Demo getDemoById(Integer id);
       int addDemo(Demo demo);
       int updateDemo(Demo demo);
       int deleteDemo(Integer id);
   }

3. 在Controller层编写接口，提供增删改查的功能：

   @RestController
   @RequestMapping("/demo")
   public class DemoController {
       @Autowired
       private DemoMapper demoMapper;
   
       @GetMapping("/list")
       public List<Demo> getDemoList() {
           return demoMapper.getDemoList();
       }
   
       @GetMapping("/{id}")
       public Demo getDemoById(@PathVariable Integer id) {
           return demoMapper.getDemoById(id);
       }
   
       @PostMapping("/add")
       public int addDemo(@RequestBody Demo demo) {
           return demoMapper.addDemo(demo);
       }
   
       @PutMapping("/update")
       public int updateDemo(@RequestBody Demo demo) {
           return demoMapper.updateDemo(demo);
       }
   
       @DeleteMapping("/{id}")
       public int deleteDemo(@PathVariable Integer id) {
           return demoMapper.deleteDemo(id);
       }
   }

## 前端页面实现

1. 创建Vue项目，并引入相关依赖：

   import ElementPlus from 'element-plus';
   import 'element-plus/lib/theme-chalk/index.css';

2. 在页面中使用Element-Plus组件，实现增删改查的功能：

   <template>
     <div class="demo">
       <el-button type="primary" @click="showAddDialog">添加</el-button>
       <el-table :data="tableData">
         <el-table-column prop="id" label="ID"></el-table-column>
         <el-table-column prop="name" label="姓名"></el-table-column>
         <el-table-column prop="age" label="年龄"></el-table-column>
         <el-table-column prop="sex" label="性别"></el-table-column>
         <el-table-column label="操作">
           <template #default="{ row }">
             <el-button type="text" @click="showUpdateDialog(row)">编辑</el-button>
             <el-button type="text" @click="deleteDemo(row.id)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <el-dialog title="添加" :visible.sync="addDialogVisible">
         <el-form :model="addForm" :rules="rules">
           <el-form-item label="姓名" prop="name">
             <el-input v-model="addForm.name"></el-input>
           </el-form-item>
           <el-form-item label="年龄" prop="age">
             <el-input v-model="addForm.age"></el-input>
           </el-form-item>
           <el-form-item label="性别" prop="sex">
             <el-radio-group v-model="addForm.sex">
               <el-radio label="男"></el-radio>
               <el-radio label="女"></el-radio>
             </el-radio-group>
           </el-form-item>
         </el-form>
         <div slot="footer">
           <el-button @click="addDialogVisible = false">取消</el-button>
           <el-button type="primary" @click="addDemo">确定</el-button>
         </div>
       </el-dialog>
       <el-dialog title="编辑" :visible.sync="updateDialogVisible">
         <el-form :model="updateForm" :rules="rules">
           <el-form-item label="姓名" prop="name">
             <el-input v-model="updateForm.name"></el-input>
           </el-form-item>
           <el-form-item label="年龄" prop="age">
             <el-input v-model="updateForm.age"></el-input>
           </el-form-item>
           <el-form-item label="性别" prop="sex">
             <el-radio-group v-model="updateForm.sex">
               <el-radio label="男"></el-radio>
               <el-radio label="女"></el-radio>
             </el-radio-group>
           </el-form-item>
         </el-form>
         <div slot="footer">
           <el-button @click="updateDialogVisible = false">取消</el-button>
           <el-button type="primary" @click="updateDemo">确定</el-button>
         </div>
       </el-dialog>
     </div>
   </template>
   
   <script>
   import { reactive, toRefs } from 'vue';
   import axios from 'axios';
   
   export default {
     name: 'Demo',
     setup() {
       const state = reactive({
         tableData: [],
         addDialogVisible: false,
         updateDialogVisible: false,
         addForm: {
           name: '',
           age: '',
           sex: '男'
         },
         updateForm: {
           id: '',
           name: '',
           age: '',
           sex: ''
         },
         rules: {
           name: [
             { required: true, message: '请输入姓名', trigger: 'blur' }
           ],
           age: [
             { required: true, message: '请输入年龄', trigger: 'blur' }
           ],
           sex: [
             { required: true, message: '请选择性别', trigger: 'change' }
           ]
         }
       });
   
       const getDemoList = () => {
         axios.get('/demo/list').then(res => {
           state.tableData = res.data;
         });
       };
   
       const addDemo = () => {
         axios.post('/demo/add', state.addForm).then(() => {
           state.addDialogVisible = false;
           state.addForm = {
             name: '',
             age: '',
             sex: '男'
           };
           getDemoList();
         });
       };
   
       const updateDemo = () => {
         axios.put('/demo/update', state.updateForm).then(() => {
           state.updateDialogVisible = false;
           state.updateForm = {
             id: '',
             name: '',
             age: '',
             sex: ''
           };
           getDemoList();
         });
       };
   
       const deleteDemo = id => {
         axios.delete(`/demo/${id}`).then(() => {
           getDemoList();
         });
       };
   
       const showAddDialog = () => {
         state.addDialogVisible = true;
       };
   
       const showUpdateDialog = row => {
         state.updateDialogVisible = true;
         state.updateForm = Object.assign({}, row);
       };
   
       getDemoList();
   
       return {
         ...toRefs(state),
         getDemoList,
         addDemo,
         updateDemo,
         deleteDemo,
         showAddDialog,
         showUpdateDialog
       };
     }
   };
   </script>

这样就完成了一个简单的增删改查Demo，前后端分离，前端使用Vue和Element-Plus实现。