初尝node.js + Express + MongoDB + Vue.js 项目构建(2)

zhisheng 发布于2019-06-26 17:15 / 2719人阅读

摘要：使用内在模块发送响应数据监听端口终端打印如下信息使用框架本项目使用的框架来起服务器。数据库中文档每一行的数据的数据结构和基本一样，所有存储在集合中的数据都是格式，是一种类的一种二进制形式的存储格式，简称。

前言

经过上一篇经济基础构建的完成，那么现在正式开始码代码吧！

项目架构

起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;

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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