[入门案例] Express+MongoDB
写在前面
请确保已安装 node.js node.js安装教程
请确保已安装 MongoDB MongoDB 安装教程
Step 1. 项目初始化
创建项目目录
mkdir express_mongodb_demo cd express_mongodb_demo npm init -y npm install --save express npm insatll --save express-handlebars这里使用 handlebars 作为模板引擎。
安装好的 package.json 文件：
{ "name": "express_mongodb_demo", "version": "1.0.0", "description": "This is a demo with express and mongoDB.", "main": "app.js", // 注意，这里 index.js 改为了 app.js "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": ["Express", "mongoDB"], "author": "leo", "license": "ISC", "dependencies": { "body-parser": "^1.18.2", "bootstrap": "^3.3.7", "express": "^4.16.2", "express-handlebars": "^3.0.0", "jquery": "^3.2.1", "mongoose": "^4.13.5" } }express_mongodb_demo \ app.js
// import dependencies var express = require('express'); var bodyParser = require('body-parser'); var mongoose = require('mongoose'); // project initilization var app = express(); app.set('port', process.env.PORT || 3000); // import `handlebars` and set it as default engine var handlebars = require('express-handlebars') .create({ defaultLayout: 'main', helpers: { section: function(name, options) { if (!this._sections) { this._sections = {}; } this._sections[name] = options.fn(this); return null; } } }); app.engine('handlebars', handlebars.engine); app.set('view engine', 'handlebars'); // use middleware app.use(express.static(__dirname + '/public')); // configuration routing app.get('/', function(req, res) { res.render('home'); }); // customized 404 page app.use(function(req, res) { res.status(404); res.render('404'); }); // customized 500 page app.use(function(req, res) { res.status(500); res.status('500'); }); // listener app.listen(app.get('port'), function() { console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terninate.'); });这里进行了主文件的初始化，包括依赖引入、初始化、设置模板引擎、静态资源中间件、配置路由等。上面代码中均有注释。
express_mongodb_demo \ views \ layouts \ main.handlebars
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Meadowlark Traveltitle> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/main.css"> {{! 这里的路径都是相对于 /public 目录，在 app.js 中有对静态资源路径的设置}} {{! 另外，bootstrap 和 jquery 都是从 node_modules 目录下复制到 /public/css 和 /public/js 下的，这个方法是从网上搜来的，如果有更好的方法，欢迎分享}} head> <body> <div class="container"> <header> <img src="/img/logo.png" alt="logo" /> header> {{{body}}} <footer>© {{copyrightYear}} w3funfooter> div> <script src="/js/jquery.min.js">script> <script src="/js/bootstrap.min.js">script> body> html>express_mongodb_demo \ views \ home.handlebars
<h1>Hello Expressh1>express_mongodb_demo \ views \ 404.handlebars
<h1>404 - Not Foundh1>express_mongodb_demo \ views \ 500.handlebars
<h1>500 - Server Errorh1>home.handlebars, 404.handlebars, 500.handlebars 都是将 main.handlebars 作为母版布局的视图。在 app.js 中也有设置
defaultLayout: 'main'。当你检查 home 页面时，会发现母版布局的信息。
express_mongodb_demo \ public \
这个文件下放置 css, js, img, fonts 等静态资源。
项目初始化完成后，先检查一下目录结构：
/express_mongodb_demo
|- node_modules/
|- public/
|- css/
|- bootstrap.min.css
|- fonts/ 这里直接把 Bootstrap 中的字体目录复制过来
|- img/
|- logo.png
|- js/
|- bootstrap.min.js
|- jquery.min.js到此，在根目录下命令行执行 node app.js 就可以在 http://localhost:3000 下访问了。
如果成功，那么项目初始化这一步就完成了。
Step 2. 启动 MongoDB
安装好 MongoDB 后，这里我安装在 D:\MongoDB。
然后在 D 盘下新建一个 data 目录，然后在 data 目录下新建一个 db 目录。
接着执行：
D:\MongoDB\bin>mongod --dbpath d:\data\db新建一个终端窗口，执行:
D:\MongoDB\bin>mongo新建一个 users 的数据库：
use users向 users 插入一条数据：
db.users.insert({"name":"leo","email":"[email protected]","age":"26"});可以查询一下，看看插入是否成功：
db.users.find();Step 3. 连接数据库
检查是否安装 mongoose，没有的话，在项目根目录下：
npm install --save mongoose然后，在 app.js 中连接数据库：
// mongodb connection
mongoose.Promise = global.Promise;
var conn = mongoose.connect('mongodb://127.0.0.1:27017/users');
var User = new mongoose.Schema({
name: String,
email: String,
age: String
});
var myModel = conn.model('user', User);
// configuration routing
// 这里需要将已经设置好的路由重新设置
app.get('/', function(req, res, next) {
myModel.findOne({ name: 'leo' }, function(err, user) {
console.log(user);
res.render('home', { user: user });
});
});再更改一下 home.handlebars 视图，以便在页面显示数据库中的数据：
<h1>Hello Expressh1>
<ul class="list-group">
<li class="list-group-item">姓名: {{{user.name}}}li>
<li class="list-group-item">邮箱: {{{user.email}}}li>
<li class="list-group-item">年龄: {{{user.age}}}li>
ul>保存，运行 node app.js ，就可以在 http://localhost:3000 下访问了。
这里截个图：
到此为止，这个简单的项目就完成了。
我也是新手，如果有什么错误，欢迎指出。
补充：接下来将项目放到 GitHub 上。
Step 4. 使用 Git
先要将项目初始化：
git init然后添加 .gitignore 文件，可以把我们不需要上传的文件放在这里面，比如：
node_modules/
.vscode/因为我这里用的 vscode ，所以把它的配置文件也放在 .gitignore 里面。
接下来，执行以下命令：
git add -A // 将所有文件加入暂存区
git commit -m 'project init' // 保存仓库的历史记录，-m 后面接提交信息添加远程仓库，默认你已经有了 GitHub 账号，并且已经创建好了一个名叫 express_mongodb_demo 的 repo:
git remote add origin https://github.com/swpuLeo/express_mongodb_demo.git最后，将本地 git 库推送至远程库：
git push -u origin master写在最后
本项目地址：express_mongodb_demo