Slog102_使用React框架進行前端開發13

ArthurSlog
SLog-102
Year·1
Guangzhou·China
October 26th 2018

曲則全枉則直窪則盈敝則新少則多多則惑

開發環境MacOS(Mojave 10.14 (18A391))

信息源

開始編碼

本次爲後端服務添加了基礎的數據庫操作
實現基本的CRUD函數
代碼如下：

server/main.js

// 數據操作函數區
// 數據庫和集合： https://docs.mongodb.com/manual/core/databases-and-collections/

// Create database
// 創建數據庫
// 在 MongoDB 中創建一個數據庫 需要創建一個 MongoClient 對象
// 不指定數據庫名 默認打開 test 數據庫
// 然後指定數據庫的 URL 和 端口
// 當數據庫不存在時 MongoDB 會根據你給的 數據庫名 創建新的數據庫並建立連接
function create_MongodbDatabase(config) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(connection => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            // Returns the name of the current database
            // 返回當前數據庫的名稱
            console.log('數據庫' + db.getName() + '創建成功')
            console.log('--------------------')
            return db
        })
        .then(db => {
            db.close()
        })
        .catch(err => {
            console.log('Error: ' + err)
            console.log('--------------------')
        })
}

// Create collection
// 創建集合（如果數據庫和集合都不存在 那麼會根據指定的數據庫名和集合名創建新的數據庫和集合）
// 有三種方式創建集合，例如：
// db.myNewCollection2.insertOne( { x: 1 } )
// db.myNewCollection3.createIndex( { y: 1 } )
// db.createCollection(name, options)
// options 的約定 請參考：https://docs.mongodb.com/manual/reference/method/db.createCollection/#db.createCollection
// 在 MongoDB 的數據庫中創建一個集合 需要創建一個 MongoClient 對象
// 然後指定數據庫的 URL 和 端口
// 然後使用 createCollection() 方法來創建集合
function create_MongodbCollection(config) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(connection => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            console.log('成功連接到' + '數據庫' + db.getName())
            return db
        })
        .then(db => {
            db.createCollection('Slog')
            return db
        })
        .then(db => {
            console.log('集合創建成功')
            console.log('--------------------')
            db.close()
        })
        .catch(err => {
            console.log('Error: ' + err)
            console.log('--------------------')
        })
}

// Document operate
// 文檔操作
// 與 MySQL 不同的是 MongoDB 會自動創建數據庫和集合
// 所以使用前我們不需要手動去創建
// 向集合插入文檔（document）
// 例如：
// document = { name: "ArthurSlog", url: "https://www.arthurslog.com" }
function create_MongodbDocument(collection, document) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(() => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            console.log('成功連接到' + '數據庫' + db.getName())
            return db
        })
        .then(db => {
            console.log('正在向集合 ' + collection + ' 插入文檔...')
            db.collection(collection).insertOne(document)
                .then(result => {
                    console.log('文檔插入成功')
                    console.log('插入結果 => ')
                    console.log(result)
                    console.log('--------------------')
                })
        })
}

// 查詢數據
// 查詢條件： condition
// 例如：condition = {name:'ArthurSlog'}
function read_MongodbDocument(collection, condition) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(() => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            console.log('成功連接到' + '數據庫' + db.getName())
            return db
        })
        .then(db => {
            console.log('正在集合查詢 ' + collection + ' 裏的文檔...')
            db.collection(collection).find(condition).toArray()
                .then(result => {
                    console.log('查詢成功')
                    console.log('查詢結果 => ')
                    console.log(result)
                    console.log('--------------------')
                })
        })
}

// 更新數據
// 查詢條件： condition
// 例如：condition = {name:'ArthurSlog'}
// 更新動作： updateAction
// 例如：updateAction = {$set: { url : "https://www.arthurslog.com" }}
function upade_MongodbDocument(collection, condition, updateAction) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(() => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            console.log('成功連接到' + '數據庫' + db.getName())
            return db
        })
        .then(db => {
            console.log('正在更新集合 ' + collection + ' 中的文檔')
            db.collection(collection).updateOne(condition, updateAction)
                .then(result => {
                    console.log('文檔更新成功')
                    console.log('更新結果 => ')
                    console.log(result)
                    console.log('--------------------')
                })
        })
}

// 移除數據
// 查詢條件： condition
// 例如：condition = {name:'ArthurSlog'}
function delete_MongodbDocument(collection, condition) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(() => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            console.log('成功連接到' + '數據庫' + db.getName())
            return db
        })
        .then(db => {
            console.log('正在集合 ' + collection + ' 中移除文檔')
            db.collection(collection).deleteOne(condition)
                .then(result => {
                    console.log('文檔移除成功')
                    console.log('移除結果 => ')
                    console.log(result)
                    console.log('--------------------')
                })
        })
}

// 排序： 
// 按 type 字段升序
// sort_Mongodb = { type: 1 }  
// 按 type 字段降序
// sort_Mongodb = { type: -1 } 
// 例如：
// db.collection(collection).find().sort(sort_Mongodb).toArray()
// 對查詢到的結果進行排序：

// 查詢數據
// 查詢條件： condition
// 例如：condition = {name:'ArthurSlog'}
function read_MongodbDocument(collection, condition, sort_Mongodb) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(() => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            console.log('成功連接到' + '數據庫' + db.getName())
            return db
        })
        .then(db => {
            console.log('正在集合查詢 ' + collection + ' 裏的文檔...')
            db.collection(collection).find(condition).sort(sort_Mongodb).toArray()
                .then(result => {
                    console.log('排序成功')
                    console.log('排序結果' + '(' + ((sort_Mongodb == 1) ? '升序' : '降序') + ')' +  ' => ')
                    console.log(result)
                    console.log('--------------------')
                })
        })
}

// 分頁： 
// 查詢的返回條數：limit_Mongodb

// 查詢數據
// 查詢條件： condition
// 例如：condition = {name:'ArthurSlog'}
function read_MongodbDocument(collection, condition, limit_Mongodb) {
    MongoClient.connect(config.databaseBaseUrl)
        .then(() => {
            // Connect specified database
            // 連接指定的數據庫
            return connection.db(config.databaseName)
        })
        .then(db => {
            console.log('成功連接到' + '數據庫' + db.getName())
            return db
        })
        .then(db => {
            console.log('正在集合查詢 ' + collection + ' 裏的文檔...')
            db.collection(collection).find(condition).limit(limit_Mongodb).toArray()
                .then(result => {
                    console.log('查詢成功')
                    console.log('查詢結果 => ')
                    console.log(result)
                    console.log('--------------------')
                })
        })
}

同時對程序的入口點進行了更新

server/main.js

// Enter point
// 程序的入口點
// Connect database base Url
// 連接數據庫的基地址（連接成功後才連接指定的數據庫）
MongoClient.connect(config.databaseBaseUrl, { useNewUrlParser: true })
    .then(connection => {
        // Connect specified database
        // 連接指定的數據庫
        db = connection.db(config.databaseName)
    })
    .then(() => {
        // Start server 
        // 啓動服務
        app.listen(config.serverPort, () => {
            console.log('Server start on port: ' + config.serverPort)
        })
    })
    .catch(err => {
        // Print error informations on console
        // 打印出錯信息
        console.log('Error: ', err)
    })

前端頁面進行測試之前的功能保持正常
不過新增的函數還沒有經過測試下篇進行測試報告
目前全局配置是放在main.js的一個對象裏

server/main.js

// 引入路徑方案解決第三方包
// path.join()方法path使用特定於平臺的分隔符作爲分隔符將所有給定的段連接在一起 然後規範化生成的路徑
// 零長度path段會被忽略 如果連接的路徑字符串是零長度字符串 則返回'.' 表示當前工作目錄
const path = require('path')

// 這裏config作爲一個object 所以使用{}
const config = {
    jsUrl: path.join(__dirname, "/src/js"),
    imgUrl: path.join(__dirname, "/src/public/img"),
    // 公告欄顯示的信息
    BulletinBoardMsg: '[歡迎來到ArthurSlogStore]_當前時間是： ',
    serverPort: 3000,
    databaseBaseUrl: 'mongodb://localhost:27017',
    databaseName: 'issuetracker'
}
// 導出工程的配置文件
module.exports = config

一些詳細的解釋和參考包含在代碼註釋裏面
工程文件已經上傳至Github：https://github.com/BlessedChild/ArthurSlogStore
至此，開始了後端數據庫CURD基礎函數的持續構建。

歡迎關注我的微信公衆號 ArthurSlog

如果你喜歡我的文章歡迎點贊留言
謝謝

Slog102_使用React框架進行前端開發13

開發環境MacOS(Mojave 10.14 (18A391))

信息源

開始編碼

Slog72_顯示上傳的圖片文件GET！（微信小程序之雲開發-全棧時代4）

Slog76_用一個簡單的遊戲演示與數據庫的交互（微信小程序之雲開發-全棧時代6）

Slog74_UI設計、整理和佈局GET！（微信小程序之雲開發-全棧時代5）

Slog105_我回來了

Slog104_使用React框架進行前端開發15

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結