express|express + mongodb的小Demo express+mongodb的小Demo

使用express服务器框架
文章图片
文件目录

接着上次的项目中，创建server文件夹，并且在该路径下npm init
创建一个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') });

使用nodemon可以自动在每次修改完代码后重启服务器。以后就用nodemon index.js命令来运行js了。

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

sudo brew install mongodb

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

在根目录下创建 /data/db作为mongodb存放数据的地方
将mangodb添加到系统变量

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

要修改一下配置文件，默认在 /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
就可以开心的使用了。吧。建立系统数据库

use movie-db 建立数据库

文章图片
创建数据库
添加第一个collection

文章图片
添加collection

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

文章图片
Another mongod instance is running... 然后就开始在google之旅。后来，解决的办法就是杀掉了原来的进程。

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

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

> 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请求进行测试了。
辅助测试工具

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