使用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。就可以进入数据库了。
就可以开心的使用了。吧。
建立系统数据库
-
use movie-db 建立数据库
-
添加第一个collection
遇到的问题
数据库是一个很重要的东西,所以呢,关闭数据库一定要安全的关闭它。我的一次粗暴关闭,导致了第二次打开数据的时候就会报错如下
然后就开始在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')
});
然后重启数据库服务,我们就可以查询到这条记录了
在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中显示。
整合之前的前端页面
之前在cli文件夹下写了与mock数据交互的前端页面,现在我们要让他和真正的后台交互了。
1. 目录结构
讲个道理,之前写的页面没有用html模版,而且它应该是属于静态文件的。所以我们在这里将它当作静态文件访问。所以我们将它拖到server文件夹里面。
然后为了可以访问它,我们要在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。本来的目的是为了学习restful风格的API编写。这是第一次实现了一个最最最最简单的完整的有前后端的web项目。终于实践了一次前后台的数据交互了。(摸摸后脑勺)