1:当前环境

y@y:~$ node --version && express -V && mongo --version
v0.12.2
4.9.
MongoDB shell version: 2.4.
y@y:~$

2:新建工程目录

y@y:express-test$ express demo01
y@y:express-test$ cd demo01 && npm install
使用bower下载bootstrap:
y@y:public$ bower install bootstrap

在package.json中加入mongodb依赖:

{
"name": "demo01",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.9.0",
"body-parser": "~1.8.1",
"cookie-parser": "~1.3.3",
"morgan": "~1.3.0",
"serve-favicon": "~2.1.3",
"debug": "~2.0.0",
"jade": "~1.6.0",
"mongodb": "~2.0.33",
"monk": "~1.0.1"
}
}

再次执行:npm install

3:工程代码结构

(1)app.js

// 加载依赖库
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser'); //mongodb config
//var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/test'); // 加载路由控制
var routes = require('./routes/index');
var users = require('./routes/users'); // 创建项目实例
var app = express(); // 定义jade模板引擎和模板文件位置
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); // 定义网站图标
//app.use(favicon(__dirname + '/public/favicon.ico')); // 定义日志和输出级别
app.use(logger('dev')); // 定义数据解析器
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false })); // 定义cookie解析器
app.use(cookieParser()); // 定义静态文件目录
app.use(express.static(path.join(__dirname, 'public'))); //让db访问路由
app.use(function(req,res,next){
req.db = db;
next();
}); // 匹配路径和路由
app.use('/', routes);
app.use('/user', users); // 404错误处理
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
}); // 开发环境,500错误处理和错误堆栈跟踪
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
} // 生产环境,500错误处理
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
}); // 输出模型app
module.exports = app;

(2)路由users.js

var express = require('express');
var router = express.Router(); /**
* 用户列表
* http://127.0.0.1:3000/user/list
*/
router.get('/list', function(req, res) {
var db = req.db; db.get('user').find({},{},function(err,docs){
if(err){
errHandler(res,err);
}else{
res.render('users/list',{
title: '用户列表',
userlist: docs
});
}
});
}); /**
* 添加新用户操作界面
* http://127.0.0.1:3000/user/add
*/
router.get('/add', function(req, res) {
res.render('users/add');
}); /**
* 修改用户信息界面
*/
router.get('/edit/:id', function(req,res){
var db = req.db;
db.get('user').findOne({_id:req.params.id},{},function(err,doc){
if(err){
errHandler(res,err);
}else{
res.render('users/edit', {user: doc});
}
});
}); /**
* 修改用户信息
*/
router.post('/update', function(req,res){
var db = req.db; var _id = req.body._id;
var name = req.body.name;
var email = req.body.email; db.get('user').updateById(_id,
{'name':name,'email':email},
function(err,doc){
if(err){
errHandler(res,err);
}else{
res.redirect('list');
}
});
}); /**
* 保存新添加的用户信息
*/
router.post('/save', function(req,res){
var db = req.db; var name = req.body.name;
var email = req.body.email; db.get('user').insert(
{
'name': name,
'email': email
},
function(err,doc){
if(err){
errHandler(res,err);
}else{
res.redirect('list');
}
}
);
}); /**
* 根据_id删除
*/
router.get('/delete/:id', function(req,res){
var db = req.db; db.get('user').remove({_id:req.params.id},function(err,doc){
if(err){
errHandler(res,err);
}else{
res.render('info',{info:'删除成功!',url:'http://127.0.0.1:3000/user/list'});
}
});
}); /**
* 错误处理
* @param res
* @param err
*/
function errHandler(res,err){
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
}; module.exports = router;

(3)users/list.jade

extends ../layout

block content
div.container
h3.text-center.text-primary 用户列表
hr
a.btn.btn-primary.btn-sm(href='add') 增加
table.table.table-bordered.table-condensed.table-hover
thead
tr.bg-info
th.text-center.col-xs-4 用户名
th.text-center.col-xs-5 邮箱
th.text-center.col-xs-3 操作
tbody
each user, i in userlist
tr.text-center
td= user.name
td= user.email
td
a.btn.btn-danger.btn-sm.margin-left(href='delete/'+user._id) 删除
a.btn.btn-warning.btn-sm.margin-left(href='edit/'+user._id) 修改

(4)users/add.jade

extends ../layout

block content
div.container
h3.text-center.text-primary 添加用户
hr
form(name="addUserForm",method="post",action="/user/save")
div.form-group
label(for='name') 用户名
input#name.form-control(name='name',placeholder='用户名')
div.form-group
label(for='email') 邮箱
input#email.form-control(name='email',type='email',placeholder='邮箱地址')
div.text-center
button.btn.btn-primary.margin-right(type='submit') 保存
button.btn.btn-default.margin-left(type='reset') 重置

(5)users/edit.jade

extends ../layout
block content
div.container
h3.text-center.text-primary 修改用户信息
hr
form(name="editUserForm",method="post",action="/user/update")
input(type='hidden',name='_id',value=user._id)
div.form-group
label(for='name') 用户名
input#name.form-control(name='name',placeholder='用户名', value=user.name)
div.form-group
label(for='email') 邮箱
input#email.form-control(name='email',type='email',placeholder='邮箱地址', value=user.email)
div.text-center
button.btn.btn-primary.margin-right(type='submit') 保存
button.btn.btn-default.margin-left(type='reset') 重置

(6)info.jade

extends layout
block content
div.container.text-center
h1.text-warning=info
a.btn.btn-primary(href=url) 返回


express+jade+bootstrap+mongdb simple CRUD test的更多相关文章

  1. express框架+jade+bootstrap+mysql开发用户注册登录项目

    完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...

  2. webstorm创建nodejs + express + jade 的web 项目

    webstorm创建nodejs + express + jade 的web 项目 前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近 ...

  3. nodejs+express+jade+mongodb给我baby做个小相册(2)-留言板

    上一篇简单的实现了下照片的展现跟浏览功能,这一篇我将给这个程序添加一个留言的功能.那么留言的话肯定要涉及到数据持久了,其实对于这个小功能的话,用个xml就可以,不过为了看起来更加高大上,我决定使用mo ...

  4. nodejs+express+jade给我baby做个小相册

    去年年底迎来了my little star.从此人生多了一个最重要的牵挂.生了宝宝全家人都太忙了.最近宝宝稍微大点了,终于有空可以研究下技术了.这是14年第一帖.废话不多了.开始吧 1.安装NTVS ...

  5. nodejs+express+jade配置

    安装步骤 一.首先可跟着这个网址安装http://jingyan.baidu.com/article/91f5db1b2bb6941c7f05e33c.html,路径可由自己定. 二.同时参考http ...

  6. nodejs学习篇 (1)webstorm创建nodejs + express + jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

  7. nodeJS+express+Jade写一个局域网聊天应用(node基础)

    为了复习一下nodeJS, 而且socketIO这东西听起来就好高端有木有, 而且有人写过了open, 也可以作为自己的参考有木有, 点击下载源代码: express是4.x的版本, 跟以前的配置有些 ...

  8. [译]简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站

    原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ 原文的源代码在此 太多的教程教你些一个Hello, World!了, ...

  9. nodejs+express+jade安装备忘

    安装步骤 1.安装nodejs,比如安装在E:\nodejs. 确保有两个环境变量 用户环境变量:C:\Users\Administrator\AppData\Roaming\npm 系统环境变量:e ...

随机推荐

  1. Mysql binlog日志解析

    1. 摘要: Mysql日志抽取与解析正如名字所将的那样,分抽取和解析两个部分.这里Mysql日志主要是指binlog日志.二进制日志由配置文件的log-bin选项负责启用,Mysql服务器将在数据根 ...

  2. hash定义

    * 若结构中存在关键字和K相等的记录,则必定存储在f(K)的位置上.由此,不需比较便可直接取得所查记录.这个对应关系f称为 散列函数(Hash function),按这个思想建立的表为 散列表. * ...

  3. ZOJ 1301 The New Villa (BFS + 状态压缩)

    题意:黑先生新买了一栋别墅,可是里面的电灯线路的连接是很混乱的(每个房间的开关可能控制其他房间,房间数<=10),有一天晚上他回家时发现所有的灯(除了他出发的房间)都是关闭的,而他想回卧室去休息 ...

  4. [Javascript] Proper use of console.assert in JavaScript

    Learn about console.assert, which is syntactic sugar for logging an error the console when a given c ...

  5. PHP安全编程:跨站脚本攻击的防御(转)

    跨站脚本攻击是众所周知的攻击方式之一.所有平台上的Web应用都深受其扰,PHP应用也不例外. 所有有输入的应用都面临着风险.Webmail,论坛,留言本,甚至是Blog.事实上,大多数Web应用提供输 ...

  6. 第二篇:R语言数据可视化之数据塑形技术

    前言 绘制统计图形时,半数以上的时间会花在调用绘图命令之前的数据塑型操作上.因为在把数据送进绘图函数前,还得将数据框转换为适当格式才行. 本文将给出使用R语言进行数据塑型的一些基本的技巧,更多技术细节 ...

  7. GDB调试技巧

    1. 查看内存分布 (gdb) info proc mappings 2. 对于类的调试,先通过行号来设断点, 比如:(gdb) b TcpConnection.cc:63 3. 打印数组的内容 (g ...

  8. Android(java)学习笔记241:多媒体之 MediaPlayer使用

    MediaPlayer类可用于控制音频/视频文件或流的播放.关于如何使用这个类的方法还可以阅读VideoView类的文档. 1.MediaPlayer 状态图       对播放音频/视频文件和流的控 ...

  9. json 序列化和反序列化

    Json串的格式: string strDataDiyList={"id":"1","name":"zhangsan", ...

  10. 【转】vue基础学习

    1.基本绑定:    new Vue(        {            el:'#elID',            data:{                // data obj     ...