node.js + express(ejs) + mongodb(mongoose) 增删改实例

刚学node不久,以下是对最近学习的总结,不足的地方还请见谅。

node 和 mongodb安装不做为本文讲解,想了解的朋友可以通过一下链接配置环境:

node 安装:http://www.infoq.com/cn/articles/nodejs-npm-install-config

Win7下MongoDB安装 :http://www.mkyong.com/mongodb/how-to-install-mongodb-on-windows/

MongoDB 安装步骤总结:

1、解压目录到d盘 mongodb

2、安装目录的下新建文件mongo.config文件

##store data here

dbpath=D:\mongodb\data

##all output go here

logpath=D:\mongodb\log\mongo.log

##log read and write operations

diaglog=3

3、d:\mongodb\bin>mongod --config D:\mongodb\mongo.config

4、d:\mongodb\bin> mongod --config D:\mongodb\mongo.config --install

net start MongoDB
net stop MongoDB
mongod --remove

1、创建node项目

express -e demo

2、初始化相关组件

npm install

// 初始化ejs

npm install ejs

// 初始化express组件

npm install express

// 初始化mongdb组合的组件

npm install mongoose

npm install express-mongoose

// node 默认启动后修改文件,页面不会立即体现,通过该组件可以使修改的文件实时在页面体现出来

npm install supervisor

3、运行app.js,访问:http://localhost:3000,查看页面,如看到以下页面则说明页面访问成功:

4、此时项目默认使用*.ejs作为页面的模板,为了方便我们吧ejs的后缀修改html

a) 修改app.js中内容:

var ejs = require(‘ejs‘); //增加

app.engine(‘html‘,ejs.__express); //增加

//将app.set(‘view engine‘, ‘ejs‘); 修改为app.set(‘view engine‘, ‘html‘);

b) 重命名views下的index.ejs为index.html

5、重新启动服务访问,如果页面可以正常显示则说明修改成功。

6、现在开始写增删改查的详细方法

1)修改路由(app.js)

app.get(‘/add.html‘,routes.add); //跳转到添加页面
app.post(‘/add.html‘, routes.create);//添加记录
app.get(‘/del.html‘,routes.delById);//删除
app.get(‘/modify.html‘, routes.toModify); //跳转到修改页面
app.post(‘/modify.html‘, routes.modify);//修改数据

2)在routes目录下创建model.js文件,内容如下:

var mongoose = require(‘mongoose‘);
var Schema = mongoose.Schema;

var demoSchema = new Schema({
            uid : String,
            title:String,
            content:String,
            createTime : { type: Date, default: Date.now }
});

exports.Demo = mongoose.model(‘Demo‘,demoSchema); //此处Demo会自动对应数据库中的demos表,不知道是不是可以修改,反正我是这个认为的。

3)修改index.js,添加逻辑方法

/*
 * GET home page.
 */
var mongoose = require(‘mongoose‘);
var model = require(‘./model‘);
var Demo = model.Demo;

mongoose.connect(‘mongodb://localhost/monkey‘);
 
exports.index = function(req, res){
            //查询所有数据,保存到demos中,在页面循环输出
            Demo.find(function(err,docs){
                        res.render(‘index‘, {
                                     title:‘Express Demo Example‘,
                                     demos:docs
                        });
            });
           
};

//跳转到添加页面
exports.add = function(req, res) {
            console.log(‘----here‘);
            res.render(‘add.html‘, {title :‘添加 demo list‘});
};

//创建新纪录
exports.create = function(req, res){
            var demo = new Demo({
                        uid : req.body.uid,
                        title: req.body.title,
                        content : req.body.content
            });
           
            console.log(‘create----‘);
            demo.save(function(err,doc){
                        console.log(doc);
                        res.redirect(‘/‘);
            });

};

// 根据id删除相应的记录
exports.delById = function(req, res) {
           
            var id = req.query.id;
            console.log(‘id = ‘ + id);
           
            if(id && ‘‘ != id) {
                        console.log(‘----delete id = ‘ + id);
                        Demo.findByIdAndRemove(id, function(err, docs) {
                                     console.log(‘delete-----‘+ docs);
                                     res.redirect(‘/‘);
                        });
            }
           
};

// 查询对应修改记录,并跳转到修改页面
exports.toModify = function(req, res) {
            var id = req.query.id;
            console.log(‘id = ‘ + id);
           
            if(id && ‘‘ != id) {
                        console.log(‘----delete id = ‘ + id);
                        Demo.findById(id, function(err, docs){
                                     console.log(‘-------findById()------‘ + docs);
                                    
                                     res.render(‘modify.html‘,{title:‘修改ToDos‘,demo:docs});
                        });
            };
};

//修改相应的值
exports.modify = function(req, res) {
           
            var demo = {
                        uid : req.body.uid,
                        title: req.body.title,
                        content : req.body.content
            };
           
            var id = req.body.id; //因为是post提交,所以不用query获取id
            if(id && ‘‘ != id) {
                        console.log(‘----update id = ‘ + id + "," + demo);
                        Demo.findByIdAndUpdate(id, demo,function(err, docs) {
                                     console.log(‘update-----‘+ docs);
                                     res.redirect(‘/‘);
                        });
            }
           
};

4)index.html页面

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
            <style type="text/css">
            table { border:1px solid green;}
            table thead tr th{ border:1px solid green;}
            table tbody tr td{ border:1px solid green;}
            </style>
           
  </head>
  <body>
            <p>
                        <a href="http://houzhiqingjava.blog.163.com/blog/add.html">增加</a>
                       
            </p>
    <h1>DEMO List</h1>
   
           
            <table>
                        <thead>
                                     <tr>
                                                 <th>id</th>
                                                 <th>uid</th>
                                                 <th>title</th>
                                                 <th>content</th>
                                                 <th>createTime</th>
                                                 <th>操作</th>
                                     </tr>
                        </thead>
                        <tbody>
                                    
                                     <% demos.forEach(function( demo ){ %>
                                     <tr>
                                                 <td><%=demo._id%></td>
                                                 <td><%= demo.uid %></td>
                                                 <td><%= demo.title %></td>
                                                 <td><%= demo.content %></td>
                                                 <td><%=demo.createTime%></td>
                                                 <td><a href="http://houzhiqingjava.blog.163.com/blog/del.html?id=<%=demo._id%>">Delete</a> | <a href="http://houzhiqingjava.blog.163.com/blog/modify.html?id=<%=demo._id%>">Update</a></td>
                                     </tr>
                                     <% }); %>
                        </tbody>
            </table>
  </body>
</html>

5)add.html页面

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
           
            <style type="text/css">

</style>
  </head>
  <body>
            <h1>
                        增加
            </h1>
           
            <form method="post">
                        uid : <input type="text" name="uid"/><br/>
                        title:<input type="text" name="title"/><br/>
                        content:<textarea name="content"></textarea><br/>
                       
                        <input type="submit" value="submit"/>
                        <input type="reset" value="reset"/>
            </form>
 
           
  </body>
</html>

6) 修改页面modify.html

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
            <h1>
                        修改
            </h1>
            <form method="post">
                        uid : <input type="text" name="uid" value="<%=demo.uid%>"/><br/>
                        title:<input type="text" name="title" value="<%=demo.title%>"/><br/>
                        content:<textarea name="content"><%=demo.content%></textarea><br/>
                        <input type="hidden" name="id" value="<%=demo._id%>"/>
                       
                        <input type="submit" value="submit"/>
                        <input type="reset" value="reset"/>
            </form>
  </body>
</html>

到此,增删改查已经完成,启动项目即可。

时间: 2024-08-27 11:11:09

node.js + express(ejs) + mongodb(mongoose) 增删改实例的相关文章

node.js(express)连接mongoDB入门指导

一.写在前面 人人都想成为全栈码农,作为一个web前端开发人员,通往全栈的简洁之路,貌似就是node.js了.前段时间学习了node.js,来谈谈新手如何快速的搭建自己的web服务,开启全栈之路. 二.安装node.js 接触过后端开发的人都知道,首先要安装服务.作为新手,肯定是选择最简单的可视化安装了(傻瓜式下一步,其它的方式等熟悉相关操作后自然就会了的),通过官网http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi 下载电脑适配的安装包(这个是windo

[MEAN Stack] First API with Node.js, Express and MongoDB

Learn how to import data into your MongoDB and then use Express to serve a simple Node.js API. Import data into MongoDB: For exmaple, you have an data.json file and contains some data. 1. Start Mongod service: //in the cmd $ mongod 2. Open a new Tab,

Node.js + MySQL 实现数据的增删改查

通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-crud && cd $_ $ yarn init -y && npx gitignore node 上面的命令创建了一个空文件夹 node-crud,进入之后初始化一个 package.json 以及创建 .gitignore 文件. 安装 Koa 并创建 app.js 以启动一个

Node.js+express+ejs新建个项目

首先安装Nodejs: 下载地址:http://nodejs.org/download/ 配置环境变量 express4.x的安装 1.npm install -g express 2. npm install -g express-generator或者npm install -g [email protected] 后者是指定express命令的版本号,4.x已经把命令行工具分离出来. 创建一个新的项目   express -e ejs newproject cd [项目所在目录] &&

node.js操作mysql数据库之增删改查

安装mysql模块 npm install mysql 数据库准备 mysql server所在的机器IP地址是192.168.0.108,登录账户就用[email protected] 在mysql中创建test数据库 在test数据库中创建一张users表 操作 连接数据库 var mysql=require('mysql'); var connection = mysql.createConnection({ host : '192.168.0.108', user : 'root', p

node.js高效操作mongodb

node.js高效操作mongodb Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为JavaScript对象以供你在应用中使用. 当然要使用的话,必须要先安装好环境Node.js与MongoDB => MongoDB安装 MongoDB是目前最流行的noSQL数据库之一,它是专为node.js而开发的,理解下与我们常用的RDBMS关系型数据库的区别就可以基本使用了 MongoDB中有三个

node 通过mongoose实现 mongodb的增删改

node 通过mongoose实现 mongodb的增删改 新建文件test.js 内容如下: var mongoose = require('mongoose') , Schema = mongoose.Schema; mongoose.connect('mongodb://localhost/test'); var BlogSchema = new Schema({ id : {type : Number, index : true} ,title : {type : String} });

Node.js开发入门——MongoDB与Mongoose

为了保存网站的用户数据和业务数据,通常需要一个数据库.MongoDB和Node.js特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二进制格式)存储的,增删改查等管理数据库的命令和JavaScript语法很像.如果你在Node.js里访问MongoDB的数据,会有我们是一家人的感觉,特别亲切. 我也准备使用MongoDB来作为我的数据库. MongoDB使用集合(collection)和文档(document)来描述和存储数据,collection就相当

Node.js+Express+MongoDB数据库实现网页注册登入功能

通过 Node.js + Express + MongoDB 实现网页注册账号 和 登入账号的功能 项目准备: 1: 事先准备好项目的页面 (首页页面 index.html)(登入页面 login.html) (注册页面 register.html) 2:    安装好 Node.js 需要使用的第三方模板 3:  设计路径设计 4:  理清功能需求 5:  创建 app.js  router.js   mgdb.js 三个 js 文件  和 public 和 views 文件夹 作用: app