使用 SpringBoot + Vue.js + Axios + ElementUi 完成增删改查

╰+攻爆jí腚メ 2021-11-15 12:22 467阅读 0赞

# 目的 #

这篇文章的目的是教会大家如何使用Axios请求后端数据，将拿到的后端数据JSON显示到ElementUi 的表格中，完成标准的分页，和增删改查。

# 什么是ElmentUI #

ElmentUI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，  
是由大名鼎鼎的饿了么前端团队开发的。  
想要了解更多可以去饿了么框架官网  
[饿了么框架][Link 1]

# 什么是Axios #

axios是Vue官方推荐的AJAX请求工具,它的Api比Jquery以及原生fetch简单，使用起来非常的方便。

# 关于后端技术 #

我这里使用的SpringBoot + SpringDataJpa + Mysql， 其实不管后端采用什么语言编写的，只要能给前端返回准确的JSON数据就ok了，后端没有硬性要求。

# 创建SpringBoot 工程 #

我们创建一个element\_ui的SpringBoot工程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70]  
在创建项目的时候添加如上依赖，这里我强调一下这里为什么用Thymeleaf，这里用Thymeleaf仅仅是返回一个视图页面。

首先我们在Mysql中建立一个数据库crud，再建立一个数据表crud表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 1]  
实体类代码

@Entity
    public class Crud { 
        private int id;
        private String crudName;
        private int crudAge;
        private String crudHobby;
        private String crudAddr;
        private String crudSalary;
    }

这里省略了部分代码,这里的实体类是由SpringDataJpa帮我们自动生成的。

Dao持久层代码

public interface CrudRepository extends JpaRepository<Crud,Integer> { 
       Page<Crud> findAll(Pageable pageable);
    }

dao里面就只有一个方法，分页查询所有数据

控制器代码

@Controller
    public class HomeController { 
        @Autowired
        private CrudRepository crudRepository;
        @GetMapping("/")
        public String indexPage() { 
            return "index"; //返回一个index.html页面
        }
    
        @PostMapping("/page")
        @ResponseBody
        public ResponseEntity<Object> findPageAll(@RequestBody PageVO pageVO) { 
    
            Pageable pageable = PageRequest.of(pageVO.getStart(),pageVO.getLength(), Sort.Direction.ASC,"id");
            Page<Crud> page = crudRepository.findAll(pageable);
            return new ResponseEntity<Object>(page, HttpStatus.OK);
        }
    
        @DeleteMapping("/crud/{id}")
        @ResponseBody
        public ResponseEntity<Object> deleteById(@PathVariable("id") Integer id) { 
            if (id.equals("")) { 
                return new ResponseEntity<Object>("id不能为空", HttpStatus.NOT_FOUND);
            }
            crudRepository.deleteById(id);
            return new ResponseEntity<Object>("删除成功", HttpStatus.OK);
        }
    
        @PutMapping("/updateUser")
        @ResponseBody
        public ResponseEntity<Object> updateById( @RequestBody  Crud crud) { 
    
            if (crud != null) { 
                crudRepository.save(crud);
                return new ResponseEntity<Object>("编辑成功", HttpStatus.OK);
            }
            return new ResponseEntity<Object>("编辑失败", HttpStatus.OK);
    
        }
    
        @PostMapping("/addCrud")
        @ResponseBody
        public ResponseEntity<Object> addCrud( @RequestBody  Crud crud) { 
    
            if (crud != null) { 
                crudRepository.save(crud);
                return new ResponseEntity<Object>("添加成功", HttpStatus.OK);
            }
            return new ResponseEntity<Object>("添加失败", HttpStatus.OK);
    
        }
    }

这里的PageVo是我自己封装的，省略get/set 方法 代码如下

public class PageVO { 
        private Integer start = 0; //页码
        private Integer length = 10; //页数
    }

application.yml 配置文件

spring:
      application:
        name: elment_crud
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/crud?serverTimezone=GMT%2B8
        username: root
        password: root

注意mysql5.7以上 驱动是com.mysql.cj.jdbc.Driver 5.7及以下是com.mysql.jdbc.Driver

# 前端编写 #

这里使用的Vue不是单文件组件.vue的形式而是在html中引入了vue.js

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link rel="stylesheet" href="../index.css"> 
    </head>
    <body>
    <div id="app">
        
        <el-row>
            <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-row>
        
        <el-table :data="crud" style="width: 100%" height="250">
            <el-table-column fixed prop="id" label="编号" width="150">
            </el-table-column>
            <el-table-column prop="crudName" label="名称" width="120">
            </el-table-column>
            <el-table-column prop="crudAge" label="年龄" width="120">
            </el-table-column>
            <el-table-column prop="crudSalary" label="薪水" width="120">
            </el-table-column>
            <el-table-column prop="crudHobby" label="地址" width="爱好">
            </el-table-column>
            <el-table-column prop="crudAddr" label="地址" width="120">
            </el-table-column>
               
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row,crud)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row,crud)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    
        
        <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageCode" :page-sizes="pageOption" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalaElemnts">
            </el-pagination>
        </div>
    
    
        
        <div v-show="show">
    
            <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
                <el-form>
                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input v-model="formCrud.crudName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" :label-width="formLabelWidth">
                        <el-input v-model="formCrud.crudAge" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="薪水" :label-width="formLabelWidth">
                        <el-input v-model="formCrud.crudSalary" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="爱好" :label-width="formLabelWidth">
                        <el-input v-model="formCrud.crudHobby" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                        <el-input v-model="formCrud.crudAddr" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" >取 消</el-button>
                    <el-button v-show="btn_show" type="primary" @click="handleUpdate">确 定</el-button>
                    <el-button type="primary" v-show="btn2_show" @click="add">确定添加</el-button>
                </div>
            </el-dialog>
        </div>
    
    
    </div>
    
    
    
    </body>
    <script src="../vue.js"></script>
    <script src="../index.js"></script>
    <script src="../axios.min.js"></script>
    
    <script> new Vue({ el: '#app', data() { return { show: false, btn_show: false, btn2_show: false, crud: [], pageCode: 0, //默认页 pageSize: 10,//每页10条 totalPage: 10 ,//总页数 pageOption: [10, 50, 100], totalaElemnts: 100, //总记录数 dialogFormVisible:false, formCrud: { id: '', crudName: '', crudAge: '', crudHobby: '', crudSalary: '', crudAddr: '', }, formLabelWidth: '120px' } }, methods: { findByPage(pageCode, pageSize) { axios.post("http://localhost:8080/page",{ start: pageCode, length: pageSize }).then( (res) => { if (res.status === 200) this.totalPage = res.data.totalPages //总页数 this.totalaElemnts = res.data.totalElements //总记录数 this.crud = res.data.content }).catch((err) => { console.log(err) }) }, handleSizeChange(val) { this.findByPage(this.pageCode, val) }, handleCurrentChange(val) { this.findByPage(val, this.pageSize) }, /** * 删除 * @param index * @param row * @param crud */ handleDelete(index, row, crud) { var id = crud[index].id; axios.delete("http://localhost:8080/crud/" + id, { }).then((res) =>{ this.findByPage(this.pageCode, this.pageSize) }).catch((err) => { console.log(err) }) }, /** * 编辑 之前回显数据 * @param index * @param row * @param crud */ handleEdit(index, row, crud) { this.show = true this.dialogFormVisible = true this.btn_show = true this.btn2_show = false this.formCrud.id = crud[index].id this.formCrud.crudName = crud[index].crudName this.formCrud.crudAge = crud[index].crudAge this.formCrud.crudSalary = crud[index].crudSalary this.formCrud.crudHobby = crud[index].crudHobby this.formCrud.crudAddr = crud[index].crudAddr }, /** * 编辑发送ajax请求 */ handleUpdate() { axios.put("http://localhost:8080/updateUser",{ id: this.formCrud.id, crudName: this.formCrud.crudName, crudAge: this.formCrud.crudAge, crudHobby: this.formCrud.crudHobby, crudSalary: this.formCrud.crudSalary, crudAddr: this.formCrud.crudAddr }).then((res) => { //编辑成功后刷新页面 this.findByPage(this.pageCode, this.pageSize) //关闭遮罩层 this.show = false this.dialogFormVisible = false console.log(1, res) }).catch((err) => { console.log(2, err) }) }, /** * 点击添加按钮的时候显示遮罩层,同时将编辑的按钮隐藏掉 */ handleAdd() { this.show= true this.dialogFormVisible = true //将双向绑定数据滞空 this.formCrud.crudName= '' this.formCrud.crudAge = '' this.formCrud.crudHobby = '' this.formCrud.crudSalary = '' this.formCrud.crudAddr = '' //将新编辑按钮隐藏掉 this.btn_show = false //将新增按钮显示 v-show 其实是display：none 和black操作 this.btn2_show =true }, /** * 新增 */ add() { axios.post("http://localhost:8080/addCrud",{ crudName: this.formCrud.crudName, crudAge: this.formCrud.crudAge , crudHobby: this.formCrud.crudHobby, crudSalary: this.formCrud.crudSalary, crudAddr: this.formCrud.crudAddr }).then((res) => { //添加成功后从新计算总页数 this.findByPage(this.pageCode, this.pageSize) //同时关闭遮罩层 this.show= true this.dialogFormVisible = false }).catch((err) => { console.log(err) }) } }, created() { this.findByPage(this.pageCode, this.pageSize) }, }) </script>
    </html>

下面我们来看下效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 2]  
新增效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 3]  
编辑效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 4]

# 总结 #

这样就完成了增删改查和分页，非常简单，这里并没有使用单文件组件的方式, 推荐大家去使用单文件的组件方式去实现，单文件组件也是非常的简单，这里就不做太多的深入了，网上哪些人实现的方法太过于复杂，我按照自己的想法实现了，写代码一定要有思维，这样写代码就很轻松。  
element ui 框架总体来说提供来非常多多样式，对没有css功底的程序员来说是相当不错的，极大的帮助了我们，不用花费很多的时间去写样式。

# 源码地址 #

[github][]

[Link 1]: https://element.eleme.cn/#/zh-CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70]: /images/20211115/72fd50575f5a4be88835dd771372feb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 1]: /images/20211115/1f50677e85e9461db73c3603e3b3fa60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 2]: /images/20211115/64182f6edea049bf90b1466ccabf6c25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 3]: /images/20211115/c05103d5a3af494c890266321dc3c318.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70 4]: /images/20211115/4de1b6fb97f749a0a8e491c6b6832bd0.png
[github]: https://github.com/zhoubiao188/element-crud