Node.js 入門：Express + Mongoose 基礎使用

来源:http://www.cnblogs.com/linxin/archive/2017/08/02/7272105.html
-Advertisement-
Play Games

前言 Express 是基於 Node.js 平臺的 web 應用開發框架，在學習了 Node.js 的基礎知識後，可以使用 Express 框架來搭建一個 web 應用，實現對資料庫的增刪查改。 資料庫選擇 MongoDB，它是一個基於分散式文件存儲的開源資料庫系統，Mongoose 是 Mong ...


前言

Express 是基於 Node.js 平臺的 web 應用開發框架，在學習了 Node.js 的基礎知識後，可以使用 Express 框架來搭建一個 web 應用，實現對資料庫的增刪查改。

資料庫選擇 MongoDB，它是一個基於分散式文件存儲的開源資料庫系統，Mongoose 是 MongoDB 的對象模型工具，可以在非同步環境里工作。

接下來就使用 Express + Mongoose 來實現簡單的增刪查改，在實現的過程中來學習 Express 和 Mongoose 的基礎知識。

原文作者：林鑫，作者博客：http://blog.gdfengshuo.com/

準備

既然是基於 Node.js 的框架，那麼肯定需要裝 node.js，還有 MongoDB，網上有很多安裝教程。然後使用 express-generator 來快速生成一個 Express 項目。那麼先安裝一下 express-generator

npm install -g express-generator

然後初始化一個名為 express-demo 的項目

express express-demo

目前 Express 已經發佈到了 4.x 版本，接下來也是基於這個版本來實現的。

cd express-demo
npm install
npm start

瀏覽器打開 http://localhost:3000 ，就可以看到已經可以訪問了。

目錄

├─bin/      // 啟動文件
├─public/   // 資源文件
├─routes/   // 路由
├─views/    // 視圖
├─app.js
└─package.json

初始化的項目目錄簡單明瞭，接下來我們來看看 app.js 里是寫了什麼。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

這是設置模板引擎，使用了 jade 模板引擎，views/ 目錄下都是 .jade 格式文件，這種寫法我並不熟悉，那麼來改一下，改成 ejs 引擎，.html 格式的視圖文件。（需要 npm 安裝 ejs 模塊）

var ejs = require('ejs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', ejs.__express);
app.set('view engine', 'html');

實現

以上準備都好了之後，我們就來看看如何實現用戶信息的增刪查改。這裡我們先把視圖和路由搭建起來，能訪問頁面之後再來實現資料庫操作的功能。

用戶列表

在 view/ 視圖目錄下創建以下文件： UserList.html

<!DOCTYPE html>
<html>
<head>
    <title>用戶列表頁面</title>
</head>
<body>
    <table>
        <tr>
            <th>用戶名</th>
            <th>郵箱</th>
            <th>操作</th>
        </tr>
        <% for(var i in user){ %>
            <tr>
                <td><%= user[i].username %></td>
                <td><%= user[i].email %></td>
                <td>
                    <div>
                        <a href="/users/detail/<%= user[i]._id %>"> 查看 </a>
                        <a href="/users/edit/<%= user[i]._id %>"> 編輯 </a>
                        <a href="#" class="del" data-id="<%= user[i]._id %>"> 刪除 </a>
                    </div>
                </td>
            </tr>
        <% } %>
    </table>
</body>
</html>

<% %> 就是 ejs 模板引擎的語法，user 是在路由渲染頁面的時候傳過來的，它是如何傳的，待會再看。
接下來實現上面視圖對應的路由，項目中預設已經給我們生成了兩個路由。在 routes/ 路由目錄下已經有了兩個路由文件：index.js 和 users.js。

app.js 中，已經幫我們設置好了這兩個路由：

var index = require('./routes/index');
var users = require('./routes/users');
app.use('/', index);
app.use('/users', users);

只要瀏覽器訪問 http://localhost:3000/users ，就能訪問到 users 對應的頁面了。我們來看看路由里 users.js 是如何寫的。

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

express.Router 類創建模塊化、可掛載的路由句柄。我們修改上面代碼來創建用戶列表的路由 users/list

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

router.get('/list', function(req, res, next) {
  var list = [{_id: 1, username: 'linxin', email: '[email protected]'}];
  res.render('UserList',{
      user: list
  })
});

module.exports = router;

還記得在 UserList.html 視圖中的 user 變數嗎，這裡用到了 res.render() 響應方法，功能就是渲染視圖模板，第一個參數為視圖文件名，第二個參數為對象，用於向模板中傳遞數據，user 就是在這裡傳過去的。更改完路由之後重啟伺服器，訪問 http://localhost:3000/users/list 就可以看到用戶列表頁面了。

但是這用戶信息是寫死的，要怎麼從資料庫中讀取呢？

連接資料庫

我們這裡用到了 Mongoose，需要先安裝 npm install mongoose -S 。安裝之後在項目中引入並連接到資料庫 userdb

var mongoose = require('mongoose');
mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost:27017/userdb', {useMongoClient: true});

連接成功之後，定義一個 Schema，它一種以文件形式存儲的資料庫模型骨架，不具備資料庫的操作能力。

var userSchema = new mongoose.Schema({
    username: String,
    email: String
})

這裡的 userSchema 還不能對資料庫進行操作，只是定義了數據模型屬性 username, email 為字元串類型。需要將該 Schema 發佈為 Model，Model 是由 Schema 發佈生成的模型，具有抽象屬性和行為的資料庫操作對。

var model = mongoose.model('user', userSchema);

最後 model 就可以對資料庫進行操作了，把上面的代碼封裝成 userModel.js 到根目錄下新建一個 models/ 目錄下麵，用 module.exports = model; 將 model 暴露出來供其他文件使用。

在 user.js 路由文件里，我們來引入 userModel.js 進行資料庫操作。

var userModel = require('../models/userModel.js');

router.get('/list', function(req, res, next) {
  userModel.find(function(err, data){
    if(err){ return console.log(err) }
    res.render('UserList',{
      user: data
    })
  })
});

這裡使用 userModel.find() 查詢到所有用戶。但是現在資料庫里還是空的，我們來新增一個添加用戶頁面向資料庫里插入數據。

添加用戶

在 views/ 目錄下新建 UserAdd.html 添加用戶視圖

<!DOCTYPE html>
<html>
<head>
    <title>用戶編輯頁面</title>
</head>
<body>
    <form action="/users/add" method="post">
        <input type="text" name="username" value="">
        <input type="email" name="email" value="">
        <button type="submit">submit</button>
    </form>
</body>
</html>

在 user.js 路由文件里來添加對應視圖的路由

router.get('/add', function(req, res, next) {
  res.render('UserAdd');
});

這是渲染視圖頁面的路由，我們需要添加一個 post 方法的路由，在點擊提交按鈕的時候，把數據存進資料庫里。

router.post('/add', function(req, res, next) {
  var newUser = new userModel({
    username: req.body.username,
    email: req.body.email
  })
  newUser.save(function(err, data){
    if(err){ return console.log(err) }
    res.redirect('/users/list');
  })
});

這裡使用 new userModel() 創建了一個 Entity，它是由 Model 創建的實體，它的操作也會影響資料庫。newUser 調用 save() 方法將數據保存到資料庫中。然後 res.redirect() 將頁面重定向到用戶列表頁面，這時就可以看到我們新增的用戶顯示在列表中了。接下來我們看看如何來編輯用戶信息。

編輯用戶

依然是創建相應的用戶編輯視圖：UserEdit.html

<!DOCTYPE html>
<html>
<head>
    <title>用戶編輯頁面</title>
</head>
<body>
    <form action="/users/update" method="post">
        <input type="hidden" name="id" value="<%= user._id %>">
        <input type="text" name="username" value="<%= user.username %>">
        <input type="email" name="email" value="<%= user.email %>">
        <button type="submit">update</button>
    </form>
</body>
</html>

添加對應的路由：/users/edit/:id 來渲染視圖，/users/update 來修改資料庫數據

router.get('/edit/:id', function (req, res, next) {
  var id = req.params.id;
  userModel.findOne({_id: id}, function (err, data) {
    res.render('UserEdit', {
      user: data
    })
  })
});
router.post('/update', function (req, res, next) {
  var id = req.body.id;
  userModel.findById(id, function (err, data) {
    if(err){ return console.log(err); }
    data.username = req.body.username;
    data.email = req.body.email;
    data.save(function(err){
      res.redirect('/users/list');
    })
  })
});

userModel.findOne() 會根據查詢條件 {_id: id} 查詢到對應的一條數據，那麼同理，查看用戶詳情的實現也是如此，只是渲染你到另外一個模板而已，這裡就不重覆寫了；userModel.findById() 查詢到 data 對象，該對象也屬於 Entity，有 save() 操作。req.body.username 就可以獲取到我們修改後的 username，修改 data 對象之後調用 save() 方法保存到資料庫中。接下來看看如何刪除用戶吧。

刪除用戶

在用戶列表中，點擊刪除按鈕，就把該用戶從資料庫中給刪除了，不需要視圖，那直接寫路由吧。

router.delete('/del', function (req, res) {
  var id = req.query.id;
  userModel.remove({_id: id}, function (err, data) {
    if(err){ return console.log(err); }
    res.json({code: 200, msg: '刪除成功'});
  })
})

點擊按鈕，發送刪除的請求，那我們可以使用 ajax 來實現。在用戶列表頁面引入 jquery，方便我們操作。然後添加 ajax 請求

$('.del').on('click',function(){
    var id = $(this).data('id');
    $.ajax({
        url: '/users/del?id='+id,
        type: 'delete',
        success: function (res) { console.log(res); }
    })
})

重啟伺服器，進入 users/list，點擊刪除按鈕，如果看到控制臺中已經列印了 {code: 200, msg: '刪除成功'} ，表示已經成功刪除了，這時我們刷新頁面，看看列表中確實已經不存在該用戶了。

代碼地址: express-demo

總結

通過對用戶的增刪查改，學習如何寫路由已經如何操作資料庫。我們來總結一下：

  1. 定義 Schema，由 Schema 發佈 Model 來操作資料庫。
  2. Model 創建的實體 Entity，可以調用 save() 方法將數據保存到資料庫中。
  3. Model.find() 方法查詢到該 Schema 下的所有數據，findOne() 根據條件查詢數據，findById() 根據 id 查詢數據。
  4. Model.remove() 刪除數據。

更多文章：lin-xin/blog


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • NodeJs基礎
    參考連接：http://nqdeng.github.io/7-days-nodejs/#1.1 NodeJS基礎 什麼是NodeJS JS是腳本語言，腳本語言都需要一個解析器才能運行。對於寫在HTML頁面里的JS，瀏覽器充當瞭解析器的角色。而對於需要獨立運行的JS，NodeJS就是一個解析器。 每一 ...
  • javascript一些比較難理解的知識點
    原文出處：https://segmentfault.com/a/1190000010371988 看了一下這篇文章，自己也手敲了一遍 ...
  • location對象的使用
    Location 對象屬性 屬性 | 描述 | hash| 設置或返回從井號 ( ) 開始的 URL（錨）。 host | 設置或返回主機名和當前 URL 的埠號。 hostname | 設置或返回當前 URL 的主機名。 href | 設置或返回完整的 URL。 pathname | 設置或返回 ...
  • 騰訊 AlloyCrop 1.0 發佈
    寫在前面 "AlloyCrop" 這個項目是8個月前發佈的，作為 "AlloyFinger" 的典型案例，發佈之後被BAT等其他公司廣泛使用。但是發佈之後，有兩個問題一直沒有抽出時間去解決: 裁剪圖像的解析度太小，是否可配？ pinch雙指放大的時候，放大的中心不是雙指中心，是否可以優化？ 現在很高 ...
  • window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight
    說這幾個屬性前 我說一下我的設備 我的設備有兩個，一個高度為1080的顯示器，一個高度為800的電腦 第一種：window.screen.height 這個方法是獲取用戶電腦屏幕的高度，是不關瀏覽器或者頂部工具欄跟底部工具欄的高度的 當我在高度為1080的我的顯示屏屏幕上列印 當我在我的電腦上列印 ...
  • 移動端去除橫向滾動條
    移動端橫向商品瀏覽、橫向滑動廣告位(CSS實現) 在手機上逛一些電商網站或者其他相同類型的網站時，會遇到橫向滑動的商品。如京東、淘寶等電商網站下。我們知道，這一般情況下為某個元素設置 做到，表示橫向或者豎向依據內容的多少自動出現滾動條。但是，在頁面中間出現橫向滾動條是十分不好看的.. 在不使用任何插 ...
  • js學習總結----編寫簡單的ajax方法庫
    具體代碼如下: ...
  • 學生問的一道javascript面試題[來自騰訊]
    這是一道非常好的面試題， 考察以下知識點: 1，this的指向 2，原型(prototype)以及原型鏈 3，繼承 4，引用 要解出這道題，要理解以下幾句話就可以了： 1，每一個構造函數，都有一個原型[[prototype]]屬性 指向構造函數的原型對象 2，每一個實例生成的時候，都會在記憶體中產生一 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類