使用express服務器框架

文件目錄

1. 接著上次的項目中，創(chuàng)建server文件夾，并且在該路徑下npm init

2. 創(chuàng)建一個index.js作為啟動文件

然后創(chuàng)建一個最簡單的web服務器。通過運行index.js ，然后，然后在localhost:3000就可以訪問到hello World。

const express = require('express');
const app = express();

app.get('/',(req,res)=>{
    res.send('hello World')
});

app.listen(3000,()=>{
    console.log('port: 3000')
});

3. 使用nodemon可以自動在每次修改完代碼后重啟服務器。以后就用nodemon index.js命令來運行js了。

安裝mongoDB

google安裝mongoDB的教程，一大把一大把。
這次用了brew來安裝。

sudo brew install mongodb

然后要做的就是修改mongodb的配置。

1. 在根目錄下創(chuàng)建 /data/db作為mongodb存放數(shù)據(jù)的地方
2. 將mangodb添加到系統(tǒng)變量

export MONGO_PATH=/usr/local/mongodb  
export PATH=$PATH:$MONGO_PATH/bin 

3. 要修改一下配置文件，默認在 /usr/local/etc 下的 mongod.conf

# Store data in /usr/local/var/mongodb instead of the default /data/db
dbpath = /data/db
# Append logs to /usr/local/var/log/mongodb/mongo.log
logpath = /usr/local/var/log/mongodb/mongo.log
logappend = true


# Only accept local connections
bind_ip = 127.0.0.1

主要就是改dbpath。

然后我們sudo mongodb一下（由于權限沒有配置好。將就也能用），就可以打開mongodb的服務了。

打開服務

然后在另外一個終端里，輸入mongo。就可以進入數(shù)據(jù)庫了。

進入mongodb

建立系統(tǒng)數(shù)據(jù)庫

1. use movie-db 建立數(shù)據(jù)庫

   
   
   創(chuàng)建數(shù)據(jù)庫

2. 添加第一個collection

   
   
   添加collection

遇到的問題

數(shù)據(jù)庫是一個很重要的東西，所以呢，關閉數(shù)據(jù)庫一定要安全的關閉它。我的一次粗暴關閉，導致了第二次打開數(shù)據(jù)的時候就會報錯如下

Another mongod instance is running...

然后就開始在google之旅。后來，解決的辦法就是殺掉了原來的進程。

1. 找到 /data/db/mongod.lock 這個文件，打開它可以看到現(xiàn)在在運行的進程的id。
2. 然后，kill -9 <process id>，如果仔細聽，就能聽到這個進程發(fā)出一聲悲鳴。
3. 再重新啟動數(shù)據(jù)庫，就可以打開了。

所以小朋友們要記得安全關閉數(shù)據(jù)庫哦。

> use admin;                     --使用管理員數(shù)據(jù)庫
> db.shutdownServer();           --安全關閉MongoDB

express 連接數(shù)據(jù)庫

因為上一步是在命令行中連接的數(shù)據(jù)庫，這一次，終于要在express中使用數(shù)據(jù)庫了。首先，安全的關掉命令行的連接。然后，在之前的server/index.js中，加上連接數(shù)據(jù)庫的代碼。

Mongoose系咩啊

Mongoose是一個npm包，提供了MongoDB地相映射的Node.js庫，它在Node.js中與ORM（Object Relational Mapping）有著類似的接口，意思是Mongoose將數(shù)據(jù)庫中的數(shù)據(jù)轉換為JavaScript對象以供你在應用中使用。摘抄出處

npm i -s mongoose

連接數(shù)據(jù)庫

const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/express-api');
const db = mongoose.connection;
db.on('error',console.log);

db.once('open',()=>{console.log('success!')});

端口號從這里看到

2018-07-06T13:39:05.139+0800 I FTDC     [initandlisten] Initializing full-time diagnostic data capture with directory '/data/db/diagnostic.data'
2018-07-06T13:39:05.142+0800 I NETWORK  [initandlisten] waiting for connections on port 27017

如果數(shù)據(jù)庫服務以及打開，那么，就可以在控制臺看到，連接成功了耶～新建了一個叫做express-api的數(shù)據(jù)庫

連接成功

向數(shù)據(jù)庫里增加數(shù)據(jù)

首先，要定義一個Schema，這一部分應該是放在server下面的models文件夾里面的。我們需要在models文件夾中新建一個movie.js。在這個文件下定義叫做movie的Schema。感覺就像是定義類一樣。

/* models/movie.js */
const mongoose = require('mongoose');
//通過mongoose的Schema接口可以創(chuàng)建Schema。一個Schema映射數(shù)據(jù)庫中的一個Collection
const Schema = mongoose.Schema;

//MovieSchema包括五個字段，其中title字段不能為空
const MovieSchema = new Schema({
        title: {type: String, required: true},
        post: {type: String},
        director: {type: String},
        date: {type: String},
        score: {type: String}
    },
//選擇timestamps字段為true，就會在所映射的集合中自動加上createdAt和updateAt兩個字段
    {timestamps: true}
);

  //為了讓Schema和數(shù)據(jù)庫中的collection映射起來，就要用到mongoose.model
//傳入?yún)?shù)Movie,就會讓數(shù)據(jù)庫里movies collection和MovieSchema映射起來
module.exports = mongoose.model('Movie',MovieSchema);

然后，我們要創(chuàng)建一條數(shù)據(jù)傳入movies。

/* server/index.js */
const express = require('express');
const app = express();


//引入mongoose數(shù)據(jù)庫驅動
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/express-api');
const db = mongoose.connection;

//引入MovieSchema
const Movie = require('./models/movie')

db.on('error', console.log);

db.once('open', () => {
//向movies里增加一條數(shù)據(jù)。通過save()接口
    let movie = new Movie({title: '齊天大圣'});

    movie.save(function (error) {
        if (error) {
            console.log(error)
        }
    });
    console.log('success!')
});

app.get('/', (req, res) => {
    res.send('hello World')
});


app.listen(3300, () => {
    console.log('port: 3300')
});

然后重啟數(shù)據(jù)庫服務，我們就可以查詢到這條記錄了

image.png

在chrome中測試API

首先，要在服務器文件夾下安裝body-parser，它是express中間件，可以用來解析HTTP請求。

/*  index.js */
const bodyParser = require('body-parser');

然后在mongoose.connection之后，添加use。

/* index.js */

app.use(bodyParser.json());
app.use({extended:false}));

然后在index.js中，添加路由。

app.get('/api',(req,res)=>{
    res.json({message:'get request'})
});

app.post('/api',(req,res)=>{
    console.log(req.body);
    res.json({message:'post request'})
});

然后，就可以向localhost:3300/api 發(fā)送HTTP請求進行測試了。

輔助測試工具

1. postman

2. morgan
   在index.js中引入morgan，之后的http請求就會在console中顯示。
   

   morgan在console中的反饋

整合之前的前端頁面

之前在cli文件夾下寫了與mock數(shù)據(jù)交互的前端頁面，現(xiàn)在我們要讓他和真正的后臺交互了。

1. 目錄結構

講個道理，之前寫的頁面沒有用html模版，而且它應該是屬于靜態(tài)文件的。所以我們在這里將它當作靜態(tài)文件訪問。所以我們將它拖到server文件夾里面。

image.png

然后為了可以訪問它，我們要在server/index.js也就是我們的入口文件里增加靜態(tài)文件的路由。

app.use('/static', express.static(__dirname + '/cli'));

向服務器請求數(shù)據(jù)

然后要加上向數(shù)據(jù)庫請求數(shù)據(jù)和傳遞數(shù)據(jù)的代碼

//從后臺獲取數(shù)據(jù)
app.get('/movies', function(req, res) {
    Movie.find().sort({'createdAt': -1}).exec(function(err, movies) {
        if (err) return res.status(500).json({error: err.message});
        res.json({ movies: movies})
    });
});

//向后臺提交數(shù)據(jù)
app.post('/movies', function(req, res) {
    if (req.body.title === '') return res.status(400).json({error: '電影標題不能為空！'});
    let movie = new Movie();

    for (let prop in req.body) {
        console.log('prop',prop);
        movie[prop] = req.body[prop];
    }
    movie.save(function(err) {
        if (err) return res.status(500).json({error: err.message});
        res.json({
            message: '電影存儲成功了！'
        });
    });
});

訪問

然后。
訪問http://localhost:3300/static/html/home.html 就可以看到我們的電影列表頁面了，展示了最開始數(shù)據(jù)庫里的情況

image.png

image.png

提交完了之后，就再回到電影列表頁面就可以看到抖森來陪齊天大圣了。

image.png

總結

以上就是express+ mongodb的小demo。本來的目的是為了學習restful風格的API編寫。這是第一次實現(xiàn)了一個最最最最簡單的完整的有前后端的web項目。終于實踐了一次前后臺的數(shù)據(jù)交互了。（摸摸后腦勺）