技能學習：學習使用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元件

技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-5.mongoodb資料庫的“删、改、查”操作

<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的強大功能之一子分類，即分類的關聯（綁定）。

技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-5.mongoodb資料庫的“删、改、查”操作

繼續閱讀

MySQL的4種隔離級别？出現問題

tab滑鼠經過菜單切換

XX系統實施過程問題總結

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

【MySQL資料庫】資料庫索引事務1.索引2.事務

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

登入plsql 報錯 the account is locked --使用者被鎖

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條