技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-5.mongoodb数据库的“删、改、查”操作

简介: 上篇我们说了上传数据,也就是数据库的增加数据,本节我们探索一下“删、改、查”数据。
上篇我们说了上传数据,也就是数据库的增加数据,本节我们探索一下“删、改、查”数据。

先将所有代码给大家看一下,避免学习过程出错找不到问题。
admin/src/views/CategoryList.vue:

<template>
    <div>
        <h1>分类列表</h1>
        <el-table :data="items">
            <el-table-column prop="_id" label="ID" width="220">
            </el-table-column>
            <el-table-column prop="name" label="分类名称">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="$router.push('/categories/edit/' + scope.row._id)">编辑</el-button>
                    <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            items: []
        }
    },
    methods: {
        async fetch(){
            const res = await this.$http.get('categories')
            this.items = res.data
        },
        remove(row){
            this.$confirm('是否确定要删除分类"' + row.name + '"?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 要想使用await,函数必须使用async
                // await异步执行,待调用接口获取数据完成后再将值传给res,进行下一步操作
                const res = await this.$http.delete('categories/' + row._id)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                if(res.status == 200){
                    // 接口调用成功后,刷新页面
                    this.fetch()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    created() {
        this.fetch()
    }
}
</script>

server/routes/admin/index.js:

module.exports = app => {
    // 要想使用express,该文件就需要引入express
    const express = require('express')

    // 定义路由方法,将我们定义的路由挂载到express
    const router = express.Router()

    // 引入Category模型
    const Category = require('../../models/Category')

    // router挂载post方法,因为表单传值时用的就是post传值
    // 接口地址是categories,接收的是分类功能(创建分类、修改分类、查询分类列表)的操作
    // 之后其他功能实现与此模板相同,与此功能平级
    // 上传数据(增)
    router.post('/categories', async(req, res) => {
        // 在里边放该接口的具体操作,所有操作同级放置

        // 数据来源是接受到的req中的body
        // 为避免阻塞,要用异步操作,故加入await
        const model = await Category.create(req.body)
        // 接收返回值
        res.send(model)
    })
    // 查询数据(查)
    router.get('/categories', async(req, res) => {
        const items = await Category.find().limit(10)
        res.send(items)
    })
    // 根据id查询数据(查)
    router.get('/categories/:id', async(req, res) => {
        const model = await Category.findById(req.params.id)
        res.send(model)
    })
    // 编辑数据(改)
    router.put('/categories/:id', async(req, res) => {
        const model = await Category.findByIdAndUpdate(req.params.id, req.body)
        res.send(model)
    })
    // 删除数据(删)
    router.delete('/categories/:id', async(req, res) => {
        // 不需要返回值
        await Category.findByIdAndDelete(req.params.id, req.body)
        // 只发送一个bool值,表明删除成功
        res.send({
            success: true
        })
    })

    // 定义“admin/api”路由方法,挂载存入到router
    app.use('/admin/api', router)
}
1.创建list页面组件。

vue.js不同于以往html\css的开发方式,全程以组件为主体进行视觉呈现,其中.vue文件就是vue的单文件组件,开发方式就是包装组件,然后将已开发的子组件引入父级组件中,从而进行进一步操作。现我们基本都会用前端框架进行视觉的呈现,很少用到css,其中css不可在vue组件中使用,后期我们需要的时候可能会用到.less文件,大家需要的话可以学习一下.less相关的引入方法。
进入正题:
(1)创建CategoryList.vue组件
在这里插入图片描述

<template>
    <div>
        <h1>分类列表</h1>
        <el-table :data="items">
            <el-table-column prop="_id" label="ID" width="220">
            </el-table-column>
            <el-table-column prop="name" label="分类名称">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data(){
        return {
            items: [
                {
                    name: "wogiao",
                    _id: 1
                },{
                    name: "yigiaowoligiao",
                    _id: 2
                }
            ]
        }
    }
}
</script>

(2)在路由中引入
在这里插入图片描述
此时就可以在页面中进入页面了。
在这里插入图片描述

2.创建接口-删改查

进入服务器端

cd server
npm run serve

找到服务端admin路由主文件
在这里插入图片描述
(1)查询数据
上篇文章的上传数据接口就是“增”,在下方并列写下“查”的方法接口:
在这里插入图片描述

// 查询数据(查)
    router.get('/categories', async(req, res) => {
        const items = await Category.find().limit(10)
        res.send(items)
    })

(2)根据id查询数据(查)

// 根据id查询数据(查)
    router.get('/categories/:id', async(req, res) => {
        const model= await Category.findById(req.params.id)
        res.send(model)
    })

(3)编辑数据-改

// 编辑数据(改)
    router.put('/categories/:id', async(req, res) => {
        const model = await Category.findByIdAndUpdate(req.params.id, req.body)
        res.send(model)
    })

(4)删除数据-删

// 删除数据(删)
    router.delete('/categories/:id', async(req, res) => {
        // 不需要返回值
        await Category.findByIdAndDelete(req.params.id, req.body)
        // 只发送一个bool值,表明删除成功
        res.send({
            success: true
        })
    })
3.调用接口

(1)呈现数据到页面-使用查询接口
回到CategoryList.vue组件中,删除items原始数据的内容,添加方法fetch(),且使用初始化钩子函数created方法调用。
在这里插入图片描述

export default {
    data() {
        return {
            items: []
        }
    },
    methods: {
        async fetch(){
            const res = await this.$http.get('categories')
            this.items = res.data
        }
    },
    created() {
        this.fetch()
    }
}

保存代码后,页面数据就改变了,打开网站开发面板检查调用数据,发现接口调用没问题。
在这里插入图片描述
回到创建分类页面再次添加一个分类,测试:
在这里插入图片描述
在这里插入图片描述
没问题,到此查询功能实现。
(2)显示编辑前数据-根据id查询接口(查)
在elementUI官网找到表格的按钮代码:
在这里插入图片描述

<el-table-column
  fixed="right"
  label="操作"
  width="100">
  <template slot-scope="scope">
    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    <el-button type="text" size="small">编辑</el-button>
  </template>
</el-table-column>

在这里插入图片描述
修改编辑按钮,添加@click方法,传入这个按钮所在行的id:

<el-button type="text" size="small" @click="$router.push('/categories/edit/' + scope.row._id)">编辑</el-button>

在服务器端路由admin添加接口的路径信息,由于修改分类的页面与添加分类页面相同,所以让edit修改页面地址指向同一个.vue组件CategorySet.vue。
同时最后要加一个props,指将链接传入的url参数值传入页面内,可以在页面内使用我们传入的id。
在这里插入图片描述
同时,页面内要接收传来的id,在CategorySet.vue作改动:
在这里插入图片描述
点击按钮跳转:
在这里插入图片描述
进入编辑页面后,根据id查询修改前的分类名,所以我们要调用根据id查询的查询接口,改动CategorySet.vue:
在这里插入图片描述
这样,页面原值就出现了:
在这里插入图片描述
(3)使用编辑接口(改)
改动原save()方法,如果页面有id(编辑分类)则修改数据,若没有id(新建分类)则创建数据。
在这里插入图片描述
改动后save()方法:

async save(){
    const res
    if(this.id){
        // 传id值,表明修改哪一条数据
        res = await this.$http.put('categories/' + this.id, this.model)
    }else{
        // 这里放axios方法,用来提交数据
        res = await this.$http.post('categories', this.model)
    }
    // 操作完成后跳转到categories地址
    this.$router.push('/categories/list')
    // 提示信息
    this.$message({
        type: 'success',
        message: '保存成功'
    })
},

测试一下,没问题:
在这里插入图片描述
在这里插入图片描述
(4)使用删除接口(删)
首先,将“查看”按钮改成“删除”按钮,由于我们多数制作删除按钮是要注意避免误删,所以在点击删除应该多一步是否确认删除该条分类。因此与编辑保存后直接跳转接口不同,在这里要点击后跳转remove()方法,将整行信息传到方法中。

<el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>

然后,在methods中编写remove()方法,在elementUI中找到messageBox弹框,使用其中的确认消息。
在这里插入图片描述

remove(row){
    this.$confirm('是否确定要删除分类"' + row.name + '"?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 要想使用await,函数必须使用async
        // await异步执行,待调用接口获取数据完成后再将值传给res,进行下一步操作
        const res = await this.$http.delete('categories/' + row._id)
        this.$message({
            type: 'success',
            message: '删除成功!'
        });
        if(res.status == 200){
            // 接口调用成功后,刷新页面
            this.fetch()
        }
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });          
    });
}

测试该功能:
在这里插入图片描述
在这里插入图片描述
没问题。

4.路由页面的跳转

在这里插入图片描述
如果我们编辑某一个分类,进入页面后进入新建分类页面,页面中的数据依然是之前编辑的页面:
在这里插入图片描述
这是因为页面的路由是以组件来区分的:
在这里插入图片描述
由于修改和新建分类使用的是同一个页面,所以我们不可以使用组件来区分,应该用路由地址区分:
在这里插入图片描述
此时问题得以解决。

5.总结

到此,mongodb的增删改查都学习完了。所有功能都可以照此相关接口完成,可以一步步制作我们的动态网站了。但是分类是一个网站内容的起始、根源,一切内容都以分类为进一步扩展。下篇文章我们学习mongodb的强大功能之一子分类,即分类的关联(绑定)。

相关文章
|
20天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
17天前
|
存储 缓存 NoSQL
2款使用.NET开发的数据库系统
2款使用.NET开发的数据库系统
|
21天前
|
存储 SQL 数据库
深入浅出后端开发之数据库优化实战
【10月更文挑战第35天】在软件开发的世界里,数据库性能直接关系到应用的响应速度和用户体验。本文将带你了解如何通过合理的索引设计、查询优化以及恰当的数据存储策略来提升数据库性能。我们将一起探索这些技巧背后的原理,并通过实际案例感受优化带来的显著效果。
37 4
|
1月前
|
存储 Java 关系型数据库
在Java开发中,数据库连接是应用与数据交互的关键环节。本文通过案例分析,深入探讨Java连接池的原理与最佳实践
在Java开发中,数据库连接是应用与数据交互的关键环节。本文通过案例分析,深入探讨Java连接池的原理与最佳实践,包括连接创建、分配、复用和释放等操作,并通过电商应用实例展示了如何选择合适的连接池库(如HikariCP)和配置参数,实现高效、稳定的数据库连接管理。
52 2
|
20天前
|
SQL 关系型数据库 MySQL
12 PHP配置数据库MySQL
路老师分享了PHP操作MySQL数据库的方法,包括安装并连接MySQL服务器、选择数据库、执行SQL语句(如插入、更新、删除和查询),以及将结果集返回到数组。通过具体示例代码,详细介绍了每一步的操作流程,帮助读者快速入门PHP与MySQL的交互。
34 1
|
22天前
|
SQL 关系型数据库 MySQL
go语言数据库中mysql驱动安装
【11月更文挑战第2天】
36 4
|
2月前
|
存储 关系型数据库 MySQL
Mysql(4)—数据库索引
数据库索引是用于提高数据检索效率的数据结构,类似于书籍中的索引。它允许用户快速找到数据,而无需扫描整个表。MySQL中的索引可以显著提升查询速度,使数据库操作更加高效。索引的发展经历了从无索引、简单索引到B-树、哈希索引、位图索引、全文索引等多个阶段。
66 3
Mysql(4)—数据库索引
|
29天前
|
监控 关系型数据库 MySQL
数据库优化:MySQL索引策略与查询性能调优实战
【10月更文挑战第27天】本文深入探讨了MySQL的索引策略和查询性能调优技巧。通过介绍B-Tree索引、哈希索引和全文索引等不同类型,以及如何创建和维护索引,结合实战案例分析查询执行计划,帮助读者掌握提升查询性能的方法。定期优化索引和调整查询语句是提高数据库性能的关键。
163 1
|
1月前
|
关系型数据库 MySQL Linux
在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,包括准备工作、下载源码、编译安装、配置 MySQL 服务、登录设置等。
本文介绍了在 CentOS 7 中通过编译源码方式安装 MySQL 数据库的详细步骤,包括准备工作、下载源码、编译安装、配置 MySQL 服务、登录设置等。同时,文章还对比了编译源码安装与使用 RPM 包安装的优缺点,帮助读者根据需求选择最合适的方法。通过具体案例,展示了编译源码安装的灵活性和定制性。
89 2
|
1月前
|
存储 关系型数据库 MySQL
MySQL vs. PostgreSQL:选择适合你的开源数据库
在众多开源数据库中,MySQL和PostgreSQL无疑是最受欢迎的两个。它们都有着强大的功能、广泛的社区支持和丰富的生态系统。然而,它们在设计理念、性能特点、功能特性等方面存在着显著的差异。本文将从这三个方面对MySQL和PostgreSQL进行比较,以帮助您选择更适合您需求的开源数据库。
125 4