初嘗node.js + Express + MongoDB + Vue.js 項目構建(2)

zhisheng 發布于2019-06-26 17:15 / 2720人閱讀

摘要：使用內在模塊發送響應數據監聽端口終端打印如下信息使用框架本項目使用的框架來起服務器。數據庫中文檔每一行的數據的數據結構和基本一樣，所有存儲在集合中的數據都是格式，是一種類的一種二進制形式的存儲格式，簡稱。

前言

經過上一篇經濟基礎構建的完成，那么現在正式開始碼代碼吧！

項目架構

起HTTP服務

首先建立/server/app.js文件，先把起服務所需的模塊引入進來，以下介紹兩種起HTTP服務的方法。

1.使用Node.js 內在模塊http

var http = require("http");
http.createServer(function (request, response) {
    // 發送響應數據 "Hello Node.js"
    response.end("Hello Node.js");
}).listen(8888); // 監聽8888端口
// 終端打印如下信息
console.log("Server running at http://127.0.0.1:8888/");

2.使用express框架
本項目使用node.js的express框架來起HTTP服務器。express官網，內有對應的簡單教程、API等，可自行查閱

    const express = require("express"), //加載express模塊
          app = express(); //啟動一個web服務器
    
    app.get("/",function(req,res){
        res.send("Hello Node.js");
    })
    
    const server = app.listen(3000,function(){
        let port = server.address().port;
        console.log("app listening at http://%s:%s","localhost",port);
    });

保存后，命令行進入app.js文件所在文件夾，運行命令node app.js，然后瀏覽器訪問http://localhost:3000，即會查看到返回"Hello Node.js"。

MongoDB可視化工具Robomongo

為了測試方便，我們首先要往我們本地的MongoDB數據庫中插入一些數據。為了方便使用，MongoDB也有類似mysql navicat的圖形化管理工具Robomongo 1.0.0，下載地址：https://robomongo.org/download，下載安裝即可。

1.打開Robomongo，點擊左上角file->connect(快捷鍵ctrl+N)，在彈出來的框中點擊create來創建連接。

2.輸入連接名字，以及地址名，端口默認為27017，地址address和端口一般不用更改。

這樣test為名字的MongoDB連接就創建了。

3.MongoDB 是由C++語言編寫的，是一個基于分布式文件存儲的開源數據庫系統。MongoDB和平常使用的MySQL是有比較大的區別的：

4.我們首先點擊左側剛剛創建的test連接，鼠標右鍵單擊 create database，輸入是數據庫名testDb點擊create創建即可。

5.鼠標左鍵單擊剛剛創建的testDb數據庫，創建collection(即為平常使用的數據庫中所說的table表)，點擊create即可創建user 集合成功。

6.下面我們開始往user collection集合中插入數據：鼠標右鍵單擊user collection -> insert documet(插入文檔，即我們平常使用的sql數據庫中的行)。

7.MongoDB數據庫中文檔(每一行的數據)的數據結構和JSON基本一樣，所有存儲在集合中的數據都是BSON格式，BSON是一種類JSON的一種二進制形式的存儲格式，簡稱Binary JSON。因此，我們在插入數據時，只要像JSON格式那樣輸入我們想要插入的數據。點擊save保存即可成功插入數據。

{
    userName:"dodo",
    sex:18,
    sex:"女",
    job:"font-end Engineer"
}

8.雙擊user collection即可看到我們剛剛插入的那條數據，MongoDB的主鍵自動將_id字段設置為主鍵。

開始連接數據庫

1.使用MongoDB原生自帶的API來創建連接，直接在/server/app.js輸入以下代碼

var MongoClient = require("mongodb").MongoClient,
    DB_CONN_STR = "mongodb://localhost:27017/testDb"; # 數據庫為 testDb
var selectData = function(db, callback) {  
  //連接到user表  
  var collection = db.collection("user");
  //查詢數據
  var whereStr = {"userName":"dodo"};
  collection.find(whereStr).toArray(function(err, result) {
    if(err)
    {
      console.log("Error:"+ err);
      return;
    }     
    callback(result);
  });
}
 
MongoClient.connect(DB_CONN_STR, function(err, db) {
  console.log("連接成功！");
  selectData(db, function(result) {
    console.log(result);
    db.close();
  });
});

2.本項目使用Mongoose來配合MongoDB操作數據庫
mongoose是mongoDB的一個對象模型工具，是基于node-mongodb-native開發的mongoDB的nodejs驅動，可以在異步的環境下執行。同時它也是針對mongoDB操作的一個對象模型庫，封裝了mongoDB對文檔的一些增刪改查等常用方法，讓nodejs操作mongoDB數據庫變得更加容易。

// 加載所需要的模塊
const mongoose = require("mongoose");
mongoose.Promise = require("bluebird");
const Schema = mongoose.Schema;

const UserSchema = new mongoose.Schema({
    username: String,//用戶名
    sex: String,// 性別
    age: Number, // 年齡
},{collection:"user"}) 
// 注意這里一定要帶有collection，否則mongoose會在下面model時對user添加后綴s.

const Models = {
    User : mongoose.model("user", UserSchema)
};

/**
 * 創建數據庫名稱并連接
 * Connecting to Mongod instance.
 */
const dbHost = "mongodb://localhost/testDb";
mongoose.connect(dbHost);
const db = mongoose.connection;
db.on("error", function () {
    console.log("Database connection error.");
});
db.once("open", function () {
    console.log("The Database has connected.")
});

module.exports = Models;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19005.html

初嘗node.js + Express + MongoDB + Vue.js 項目構建(2)

摘要：使用內在模塊發送響應數據監聽端口終端打印如下信息使用框架本項目使用的框架來起服務器。數據庫中文檔每一行的數據的數據結構和基本一樣，所有存儲在集合中的數據都是格式，是一種類的一種二進制形式的存儲格式，簡稱。前言經過上一篇經濟基礎構建的完成，那么現在正式開始碼代碼吧！項目架構 showImg(https://segmentfault.com/img/bVNkQM?w=322&h=58...

kevin 2019-08-22 11:04 評論0 收藏0
初嘗node.js + Express + MongoDB 項目構建(1)

摘要：前言由于最近公司需要做一個聊天監控的項目，老大讓我把后臺也做了，于是才真正實踐深入的內部。幾番折騰終于把項目搭起來了。發生服務特定錯誤，則前去目錄下的和文件刪掉，以管理員身份運行命令行然后重新啟動服務即可。前言由于最近公司需要做一個聊天監控的項目，老大讓我把后臺也做了，于是才真正實踐深入node.js的內部。幾番折騰終于把項目搭起來了。經濟基礎 node.js (安裝配置傳送門...

wangzy2019 2019-08-20 16:15 評論0 收藏0
初嘗node.js + Express + MongoDB 項目構建(1)

摘要：前言由于最近公司需要做一個聊天監控的項目，老大讓我把后臺也做了，于是才真正實踐深入的內部。幾番折騰終于把項目搭起來了。發生服務特定錯誤，則前去目錄下的和文件刪掉，以管理員身份運行命令行然后重新啟動服務即可。前言由于最近公司需要做一個聊天監控的項目，老大讓我把后臺也做了，于是才真正實踐深入node.js的內部。幾番折騰終于把項目搭起來了。經濟基礎 node.js (安裝配置傳送門...

toddmark 2019-06-26 17:15 評論0 收藏0
初入Vue，node，express，mongodb

摘要：本人前端萌新大概花了一周多一點，完成了一個前后端分離解耦的簡易個人博客項目。項目前后端分離，路由完全交給處理，后端只負責操作數據庫，暴露。目前項目提供做學習用途，希望能給大家一些幫助，對全棧項目有一個初步的了解，謝謝。本人前端萌新大概花了一周多一點，完成了一個前后端分離解耦的簡易個人博客項目。項目前后端分離，路由完全交給vue-router處理，后端只負責操作數據庫，暴露api。技...

dingding199389 2019-08-21 17:45 評論0 收藏0
一些基于React、Vue、Node.js、MongoDB技術棧的實踐項目

摘要：利用中間件實現異步請求，實現兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯通的項目。刪除分組會連同組內的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化，項目文章在這里。后來一直沒動，前些日子才把后續的完善。歡迎訪問我的個人網站：http://www.neroht.com/? 剛學vue和react時，利用業余時間寫的關于這兩個框架的訓練，都相對簡單，有的...

tangr206 2019-06-26 17:34 評論0 收藏0