【實戰】用 express+MongoDB 搭建一個完整的前端項目

前言：要作一個全沾的工程師，對於後端和數據庫來講，即便不認識也要見個面的。本文給的例子很簡單，也貼出來源碼，只要一步步下來，就能夠跑起來啦~~~

思考一個需求：作一個登陸頁面，本身搭建服務和數據庫，將用戶輸入的登陸信息保存到數據庫
如何完成呢：首先選擇一個應用框架，不管是 express、koa、egg 均可以；而後是數據庫選擇，MySQL、MongoDB 均可以，Node.js 都支持鏈接；最後是插件和中間件的選擇，將應用於數據庫鏈接起來... 這是大體的思路，那本文以 express+MongoDB 爲例建一個簡單的程序，完成提出的需求。
數據庫準備：MongoDB與可視化工具adminMongo的安裝、啓動與鏈接

1、MongoDB 數據庫

數據庫選擇 MongoDB 是由於其結構與 JSON 數據格式很像。基本瞭解 MongoDB 的概念就好，主要是安裝上數據庫，並進行簡單的增刪操做。

SQL 與 MongoDB

更多學習：http://www.runoob.com/mongodb/

安裝並運行

更詳細的過程參考：MongoDB與可視化工具adminMongo的安裝、啓動與鏈接

• 下載：MongoDB網址 https://www.mongodb.com/downl...
• 配置：進入解壓後的目錄，爲MongoDB添加默認的/data/db數據庫存儲目錄 $ mkdir data/db
• 啓動：進入bin目錄下，啓動 mongodb 數據庫服務器 $ sudo ./mongod
• 訪問：再經過localhost訪問本地數據庫$ ./mongo
• 一些經常使用的命令：
  數據庫：show dbs ；use mytest ; db.dropDatabase()
  集合：show collections ; db.createCollection("mycollection") ; db.mycollection.drop()
  文檔：db.mycollection.find() ; db.mycollection.insert({name:"xxx"}) ; db.mycollection.remove({'name':'xxx'})

2、adminMongo 可視化工具

選擇一款可視化工具，能讓你的數據庫變得清晰，也能夠選擇其餘的工具，這裏安裝的是adminMongo

• 下載adminMongo

  $  git clone https://github.com/mrvautin/adminMongo

• 安裝並啓動：

  $  cd adminMongo
    $  npm install
    $  npm start

• 鏈接本地數據庫：mongodb://127.0.0.1:27017

3、mongoose 數據模型

直接用 node.js 也能夠鏈接數據庫進行讀寫，但不少插件除了封裝這個基本功能以外，還提供了不少其餘的服務。對於 MongoDB，我不會使用原生 node 去操做，而是選了 mongoose 這個插件。mongoose 官網: https://mongoosedoc.top/

• 安裝了 node.js 建一個 test 項目文件夾，初始化 package.json

  $  npm init

• 安裝 mongoose

  $ npm install mongoose  --save-dev

• 新建一個js文件，用來寫 mongoose 代碼

  $  touch mongoose.js

• 鏈接數據庫

  /* 
    mongoose.js ：創建數據庫鏈接
   */
  var mongoose = require('mongoose') // 引入 mongoose
  var url = "mongodb://localhost:27017/mytest"; // 本地數據庫地址
  mongoose.connect(url)
  
  // connect() 返回一個狀態待定（pending）的鏈接，能夠用來判斷鏈接成功或失敗
  var db = mongoose.connection; 
  db.on('error', console.error.bind(console, 'connection error:'));
  db.once('open', function() {
    console.log("Successful connection to "+url)
  });

  運行$ node mongoose.js 後輸出：
  Successful connection to mongodb://localhost:27017/mytest

• 此時鏈接數據庫成功，創建 Schema（Mongoose 定義的至關於 collection 集合的概念） ，寫數據

  /*
    mongoose.js ：創建數據庫鏈接用 mongoose.Schema 插入數據
   */
  var Schema = mongoose.Schema //schema 都會映射到一個 MongoDB collection
  
  let user = {
    name:String
  }
  
  var userSchema = Schema(user)
  var User = mongoose.model('User', userSchema); //將schema編譯爲model構造函數
  
  var newUser = new User({name: "yyyyyyyyyyyy"})// Mongoose 會自動找到名稱是 model 名字複數形式的 collection
  newUser.save()

  運行$ node mongoose.js 後，能夠經過 adminmongo 查看數據是否添加成功，也能夠經過 terminal 命令查看。

  

• 補充說明：如下是 mongoose 的全部合法 SchemaTypes：
  常見的 String , Number , Date , Buffer , Boolean , Array ,
  Mixed： 一個啥均可以放的 SchemaType，雖然便利，但也會讓數據難以維護，
  ObjectId：指定類型爲 ObjectId，即「主鍵」，
  Decimal128：自定義的Type

4、Express 服務框架

mongoose 只是幫咱們鏈接數據並進行讀寫，還須要啓動一個服務框架，這個框架封裝了 node 的 http 服務。

• 安裝 express

  $ npm install express --save-dev

• 建立 express.js 應用Demo，啓動服務接口

  /*
   express.js: 引入 express 模塊，設置路由
  */
  var express = require('express')()
  
  express.get('/',function (request, response) { // 路由
    response.send("hello world!") // 傳送HTTP響應
  })
  express.listen(3000) //監聽3000端口，默認localhost: 127.0.0.1 || 0.0.0.0

  運行$ node express.js 後打開瀏覽器輸入 http://localhost:3000/

5、完成一個表單提交

三四步驟完成後思路會清晰起來，如今只須要創建一個表單，提交數據到 express 提供的接口，express 接收到請求後經過 mongoose 訪問數據庫。

• express.js 導入 mongoose 模塊，

  /*
    mongoose.js: 導出模塊
   */
  module.exports = {mongoose,User}
  
  /*
    express.js: 引入 mongoose
   */
  var {mongoose, User} = require("./mongoose")

  *支持ES6須要

  $  npm install babel-core --save-dev

• 在express.js中建立一個請求數據的路由/接口

  /*
    express.js: 使用 mongoose 創建接口，添加數據到 MongoDB
   */    
  express.get("/addUser",function (request, response) {
    let data = {
      name: request.query.myinput
    }
    console.log(data)
    var addUser = new User(data)
    addUser.save()
    response.send(JSON.stringify(data))
  })

• 新建一個html，向 http://127.0.0.1:3000/addUser 發送 get 請求，提交數據。

  <!-- index.html -->
  <form action="http://127.0.0.1:3000/addUser" method="GET">
      <h1>隨便輸入：</h1>
      <input type="text" name="myinput">
      <input type="submit" value="Submit">
  </form>

• 運行$ node express.js 打開 index.html 文件：
  

  成功存儲：
  

  在 adminMongo 中查看：
  

6、模板引擎與視圖渲染

問題：html請求爲何帶url和端口? 如何將html也放在 http://127.0.0.1:3000/ 地址下進行訪問？

• 全部的應用框架都須要使用引擎才能將視圖渲染輸出爲HTML！express 官網上默認模板引擎 jade，express 4+ 用 ejs，也能夠自定義模板引擎進行視圖渲染

• 安裝模板引擎 ejs

  $  npm i ejs --save-dev

• 配置模板引擎，使用咱們習慣的 html 類型的模板代替 ejs

  /*
   express.js: 配置引擎
  */
  express.set('views', './views'); // 添加視圖路徑
  express.engine('html', require('ejs').renderFile); // 將EJS模板映射至".html"文件
  express.set('view engine', 'html'); // 設置視圖引擎

• 配置路由與渲染的模板

  /*
   express.js: 配置引擎
  */
  express.get('/view', function (request, response) {
    response.render('test')
  })

• 新建 views 文件夾與 test.html

  /*
   views/test.html
  */
  <h1>使用了模板引擎，能夠直接看到我！</h1>
  <form action="/addUser" method="GET">
      <h1>隨便輸入：</h1>
      <input type="text" name="myinput">
      <input type="submit" value="Submit">
  </form>

• 打開瀏覽器訪問：http://127.0.0.1:3000/view

  

• 注意此時數據的提交路徑是 「/addUser」 ，沒有地址和端口號，數據也能夠提交。

總結

• 總體的目錄結構以下：
  
• 整個流程下來，能夠直接複製代碼跑一下，但要知道每一個步驟須要作什麼，最重要的是思路，其餘的都是工具。

---

加油哦~ 少年！