express + mongodb的小Demo

使用express服务器框架

express + mongodb的小Demo_第1张图片
文件目录
  1. 接着上次的项目中,创建server文件夹,并且在该路径下npm init

  2. 创建一个index.js作为启动文件

然后创建一个最简单的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')
});
  1. 使用nodemon可以自动在每次修改完代码后重启服务器。以后就用nodemon index.js命令来运行js了。

安装mongoDB

google安装mongoDB的教程,一大把一大把。
这次用了brew来安装。

sudo brew install mongodb

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

  1. 在根目录下创建 /data/db作为mongodb存放数据的地方
  2. 将mangodb添加到系统变量
export MONGO_PATH=/usr/local/mongodb  
export PATH=$PATH:$MONGO_PATH/bin 
  1. 要修改一下配置文件,默认在 /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的服务了。


express + mongodb的小Demo_第2张图片
打开服务

然后在另外一个终端里,输入mongo。就可以进入数据库了。


express + mongodb的小Demo_第3张图片
进入mongodb

就可以开心的使用了。吧。

建立系统数据库

  1. use movie-db 建立数据库


    创建数据库
  2. 添加第一个collection


    添加collection

遇到的问题

数据库是一个很重要的东西,所以呢,关闭数据库一定要安全的关闭它。我的一次粗暴关闭,导致了第二次打开数据的时候就会报错如下


express + mongodb的小Demo_第4张图片
Another mongod instance is running...

然后就开始在google之旅。后来,解决的办法就是杀掉了原来的进程。

  1. 找到 /data/db/mongod.lock 这个文件,打开它可以看到现在在运行的进程的id。
  2. 然后,kill -9 ,如果仔细听,就能听到这个进程发出一声悲鸣。
  3. 再重新启动数据库,就可以打开了。

所以小朋友们要记得安全关闭数据库哦。

> use admin;                     --使用管理员数据库
> db.shutdownServer();           --安全关闭MongoDB

express 连接数据库

因为上一步是在命令行中连接的数据库,这一次,终于要在express中使用数据库了。首先,安全的关掉命令行的连接。然后,在之前的server/index.js中,加上连接数据库的代码。

Mongoose系咩啊

Mongoose是一个npm包,提供了MongoDB地相映射的Node.js库,它在Node.js中与ORM(Object Relational Mapping)有着类似的接口,意思是Mongoose将数据库中的数据转换为JavaScript对象以供你在应用中使用。摘抄出处

npm i -s mongoose

连接数据库

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

如果数据库服务以及打开,那么,就可以在控制台看到,连接成功了耶~新建了一个叫做express-api的数据库


连接成功

向数据库里增加数据

首先,要定义一个Schema,这一部分应该是放在server下面的models文件夹里面的。我们需要在models文件夹中新建一个movie.js。在这个文件下定义叫做movie的Schema。感觉就像是定义类一样。

/* models/movie.js */
const mongoose = require('mongoose');
//通过mongoose的Schema接口可以创建Schema。一个Schema映射数据库中的一个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和数据库中的collection映射起来,就要用到mongoose.model
//传入参数Movie,就会让数据库里movies collection和MovieSchema映射起来
module.exports = mongoose.model('Movie',MovieSchema);

然后,我们要创建一条数据传入movies。

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


//引入mongoose数据库驱动
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里增加一条数据。通过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')
});

然后重启数据库服务,我们就可以查询到这条记录了


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 发送HTTP请求进行测试了。

辅助测试工具

  1. postman

  2. morgan
    在index.js中引入morgan,之后的http请求就会在console中显示。

    morgan在console中的反馈

整合之前的前端页面

之前在cli文件夹下写了与mock数据交互的前端页面,现在我们要让他和真正的后台交互了。

1. 目录结构

讲个道理,之前写的页面没有用html模版,而且它应该是属于静态文件的。所以我们在这里将它当作静态文件访问。所以我们将它拖到server文件夹里面。


express + mongodb的小Demo_第5张图片
image.png

然后为了可以访问它,我们要在server/index.js也就是我们的入口文件里增加静态文件的路由。

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

向服务器请求数据

然后要加上向数据库请求数据和传递数据的代码

//从后台获取数据
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})
    });
});

//向后台提交数据
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 就可以看到我们的电影列表页面了,展示了最开始数据库里的情况

express + mongodb的小Demo_第6张图片
image.png

只有一部齐天大圣了。
点击最下面的+号。就可以进入到增加电影页面

express + mongodb的小Demo_第7张图片
image.png

提交完了之后,就再回到电影列表页面就可以看到抖森来陪齐天大圣了。

express + mongodb的小Demo_第8张图片
image.png

总结

以上就是express+ mongodb的小demo。本来的目的是为了学习restful风格的API编写。这是第一次实现了一个最最最最简单的完整的有前后端的web项目。终于实践了一次前后台的数据交互了。(摸摸后脑勺)

你可能感兴趣的:(express + mongodb的小Demo)