从0开始写Vue项目-Vue实现数据渲染和数据的增删改查

短命女 2024-05-06 23:02 58阅读 0赞

1.  [从0开始写Vue项目-环境和项目搭建\_慕言要努力的博客-CSDN博客][0_Vue_-_-CSDN]
2.  [从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建\_慕言要努力的博客-CSDN博客][0_Vue_-Vue2_Element-ui_-CSDN]
3.  [从0开始写Vue项目-Vue页面主体布局和登录、注册页面\_慕言要努力的博客-CSDN博客][0_Vue_-Vue_-CSDN]
4.  [从0开始写Vue项目-SpringBoot整合Mybatis-plus实现登录、注册功能\_慕言要努力的博客-CSDN博客\_mybatisplus登陆][0_Vue_-SpringBoot_Mybatis-plus_-CSDN_mybatisplus]
5.  [从0开始写Vue项目-SpringBoot实现增删改查和分页查询\_慕言要努力的博客-CSDN博客][0_Vue_-SpringBoot_-CSDN]

#### 一、前言 ####

在我们之前，我们已经实现了我们项目的登录、注册功能，然后我们也获取了我们数据库的数据，也写好了我们数据的增删改查，那么我们现在就来在我们的前端进行数据渲染，然后实现我们前端Vue的增删改查。

我这里就拿用户数据来进行演示

#### 二、数据渲染 ####

![bc565387e95e4217a830427e7a7f2d4e.png][] 可以发现我们已经渲染出来我们数据库里面用户表所有的数据了。

![e5d4ea66bac64005b3d7918609f5bd80.png][]

那么我们怎么来实现用户渲染呢？以及我们渲染出来的数据放在哪里存放？我们依然进行组件调用，我们可以在Element-ui里面找到我们的 **el-table** 来存放我们查找出来的数据。

其实在我们之前进行页面布局的时候我们就已经进行了 **el-table** 的引用，只不过里面的数据全是静态的而已。那么我们现在就来将我们的静态数据来变成动态的数据。

![e78e55816afb4d17b998cf9d91bbfbee.png][]

然后我们要对数据进行存放在一个大的属性里面，然后通过属性来进行数据渲染。

![2540279a24a94e26ac13b56678ff1bc5.png][]![928a48b18a7b4ae4ad5eea988ff7ccc2.png][]

我们将数据存放在我们的 **tableData** 里面，然后进行调用就可以了。重点：我们渲染数据的名称必须跟我们后端类里面的方法命名一致。

<el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="username" label="用户名" ></el-table-column>
          <el-table-column prop="nickname" label="昵称" ></el-table-column>
          <el-table-column prop="email" label="邮箱" ></el-table-column>
          <el-table-column prop="phone" label="联系方式" ></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="handleEdit(scope.row)"><i class="el-icon-edit-outline" />编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

data() {
        return {
          tableData: [],
          total: 0,
          pageNum: 1,
          pageSize: 5,
          username: "",
          form: {},
          dialogFormVisible: false,
          multipleSelection: [],
          headerBg: "headerBg",
          roles: []
        }
      },

#### 三、数据增删改查 ####

![ab84bf752b1a4b1691db157c002f7d07.png][]

我们分别命名2个方法，分别是新增 handleAdd 和删除 delBatch，然后我们进行我们接口的调用来实现我们的功能。

<div style="margin: 10px 0">
          <el-button type="primary" @click="handleAdd" class="ml-10"><i class="el-icon-circle-plus-outline" />新增</el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确认'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定批量删除这些信息吗？"
              @confirm="delBatch">
            <el-button type="danger" slot="reference" ><i class="el-icon-remove-outline" />删除</el-button>
          </el-popconfirm>
        </div>

**1.新增和编辑**

我们在新增的时候，会打开一个空的表单，然后在表单上面填写我们新增的数据，最后我们在点击确认按钮的时候，我们的表单会自己进行关闭。我们在编辑的时候，会自动获取用户数据渲染在我们的表单里面。

![fe76740919d9432384664def878e7d18.png][]

![766a3986eebb4ac585c7f0ea689e7854.png][]

![17f8b611e1ec4e669785981079d43e00.png][]

我们先来写我们的新增表单 **el-dialog**

![4b6a203c4c514bfbba6ce82968ceae82.png][]

<el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
          <el-form :model="form" label-width="100px" size="small">
            <el-form-item label="用户名" >
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称" >
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" >
              <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" >
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" >
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>

然后填入我们的信息，点击确认关闭我们的保单，存放我们的数据在我们的数据库里面。

![f62b70aa8c164da8b05745c7484a3609.png][]

// 保存信息
        save() {
          this.request.post("/user", this.form).then(res => {
            if (res.code === '200') {
              this.$message.success("保存成功")
              this.dialogFormVisible = false
              this.load()
            } else {
              this.$message.error("保存失败")
            }
          })
        },

打开我们的表单

![1108fb8048e441fd94c3b5505dcb885a.png][]

// 新增
        handleAdd() {
          this.dialogFormVisible = true
          this.form = {}
        },
        // 编辑
        handleEdit(row) {
          this.form = row
          this.dialogFormVisible = true
        },

**2.分页设置**

![96274a6c86b54485b4854ee80426f27e.png][]

分页功能我们依然是进行组建的调用

![cd46b5fec99f45798829fb317406c93d.png][] ![2df98df6476e48cdab255923824e17f0.png][]

<div style="padding: 10px 0">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[ 5, 10, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>

然后我们要自定义我们的分页数据

![2279ac5960f247f1ae73894bab9e4051.png][]

return {
          tableData: [],
          total: 0,
          pageNum: 1,
          pageSize: 5,
          username: "",
          form: {},
          dialogFormVisible: false,
          multipleSelection: [],
          headerBg: "headerBg",
          roles: []
        }

**3.数据删除**

我们在删除的时候进行二次确认，进行删除提示，看是否真的需要删除该数据。![bbb405fe60ea46b693362f7776b6a196.png][]

<el-popconfirm
              class="ml-5"
              confirm-button-text='确认'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定批量删除这些信息吗？"
              @confirm="delBatch">
            <el-button type="danger" slot="reference" ><i class="el-icon-remove-outline" />删除</el-button>
          </el-popconfirm>

我们进行调用后端的多选删除接口，来进行单个或多个数据的删除。

![e9f611cd2d6f439aa18751345b4d7a94.png][]

// 多选删除
        delBatch() {
          let ids = this.multipleSelection.map(v => v.id)  //[{}, {}, {}] => [1,2,3]
          this.request.post("/user/del/batch", ids).then(res => {
            if (res.code === '200') {
              this.$message.success("删除用户成功")
              this.load()
            } else {
              this.$message.error("删除用户失败")
            }
          })
        },

当然，我们进行多个删除必然少不了我们的多选框了，所以我们在我们的数据渲染表格里面已经加上了多选框的方法。

![4fdffd882ce741cc9eecdb0f654069e2.png][]

// 多选框
        handleSelectionChange(val) {
          console.log(val)
          this.multipleSelection = val;
        },

**4.数据查询**

我们在这里是通过搜索用户的用户名进行查询，当然还可以有其他的条件进行数据查询。

![65fdb896c73a4422878fa5420793b928.png][]

<div style="margin: 10px 0">
          <el-button class="ml-5" type="primary" @click="load"><i class="el-icon-search" />搜索</el-button>
        </div>

![8173d59796874616b1090099228f1c5d.png][]

我们在这里进行调用后端的page接口，就能查询所有的数据，且能通过username来进行用户信息的查询。

// 获取用户信息
        load: function () {
          this.request.get("/user/page", {
            params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              username: this.username,
            }
          }).then(res => {
            this.tableData = res.data.records
            this.total = res.data.total
          })
          this.request.get("/role").then(res => {
            this.roles = res.data
          })
        },

功能展示

![675d49c3c49c4070b5852a74730ab9cd.png][]

#### ⛵小结 ####

以上就是对从0开始写Vue项目-Vue实现数据渲染和数据的增删改查简单的概述，之后会陆续更新后面的模块，包括后端代码，带大家手码项目，提升自己的编码能力。

![20201213121345281.gif_pic_center][]

> 如果这篇文章有帮助到你，希望可以给作者点个赞?，创作不易，如果有对后端技术、前端领域感兴趣的，也欢迎关注 ，我将会给你带来巨大的收获与惊喜???！

[0_Vue_-_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129103838
[0_Vue_-Vue2_Element-ui_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129111414
[0_Vue_-Vue_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129127651
[0_Vue_-SpringBoot_Mybatis-plus_-CSDN_mybatisplus]: https://blog.csdn.net/weixin_65950231/article/details/129134187
[0_Vue_-SpringBoot_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129172565?spm=1001.2014.3001.5501
[bc565387e95e4217a830427e7a7f2d4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d6fb050428ee4d21927a3c003a0691ae.png
[e5d4ea66bac64005b3d7918609f5bd80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/eb2ddc49dc914458b85c70d45217371b.png
[e78e55816afb4d17b998cf9d91bbfbee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/7cf2119158bd4e5b986ec5e70ae79d7f.png
[2540279a24a94e26ac13b56678ff1bc5.png]: https://img-blog.csdnimg.cn/2540279a24a94e26ac13b56678ff1bc5.png
[928a48b18a7b4ae4ad5eea988ff7ccc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0458b83c5d694b57bb2a1b7f9628e233.png
[ab84bf752b1a4b1691db157c002f7d07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3603909f39be4b3ab8f4ccc86ab94108.png
[fe76740919d9432384664def878e7d18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c21067954cb74c4a8afc51828fba0708.png
[766a3986eebb4ac585c7f0ea689e7854.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/cbc52f2a41ea494bb191ac64506cb168.png
[17f8b611e1ec4e669785981079d43e00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5c7e8dde9edd48ac8165928a8245cb67.png
[4b6a203c4c514bfbba6ce82968ceae82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/76651091fb2f49a58f16a12f971fc5e4.png
[f62b70aa8c164da8b05745c7484a3609.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/32a766afa90845d2be8f8defd007819c.png
[1108fb8048e441fd94c3b5505dcb885a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/420578561c354ff2bf7cdbffa176b8ab.png
[96274a6c86b54485b4854ee80426f27e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/cc4a95ffcc4d458e984e61c485bbf30b.png
[cd46b5fec99f45798829fb317406c93d.png]: https://img-blog.csdnimg.cn/cd46b5fec99f45798829fb317406c93d.png
[2df98df6476e48cdab255923824e17f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/227bd759e04a41f898f09bd2f448721a.png
[2279ac5960f247f1ae73894bab9e4051.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5ac4023351f9468eb387384f4b5889d3.png
[bbb405fe60ea46b693362f7776b6a196.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f40c21eb4fd24de89d42565fb8897316.png
[e9f611cd2d6f439aa18751345b4d7a94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/a0fcbb412e22471cab55a063368a3e08.png
[4fdffd882ce741cc9eecdb0f654069e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8fa09b348f8b44d59c532e5df658a429.png
[65fdb896c73a4422878fa5420793b928.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2a1e4bf937a1463bb0160350a7b927e1.png
[8173d59796874616b1090099228f1c5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ed5057562d4d4dedbbc113bd0bc53f42.png
[675d49c3c49c4070b5852a74730ab9cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/80ca2684fab74f35857bce319045e1e4.png
[20201213121345281.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/29b63bc116df4a6aa352f88985d85674.gif