使用express服务器框架

文件目录

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的服务了。

打开服务

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

进入mongodb

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

建立系统数据库

1. use movie-db 建立数据库

   创建数据库

2. 添加第一个collection

   添加collection

遇到的问题

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

Another mongod instance is running…

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

1. 找到 /data/db/mongod.lock 这个文件，打开它可以看到现在在运行的进程的id。
2. 然后，kill -9 <process id>，如果仔细听，就能听到这个进程发出一声悲鸣。
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文件夹里面。

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

image.png

只有一部齐天大圣了。

点击最下面的+号。就可以进入到增加电影页面

image.png

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

image.png

总结

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