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 安裝步驟總結：

一、解壓目錄到d盤 mongodb

二、安裝目錄的下新建文件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

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

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

net start MongoDB
net stop MongoDB
mongod --remove

一、建立node項目

express -e demo

二、初始化相關組件

npm install

// 初始化ejs

npm install ejs

// 初始化express組件

npm install express

// 初始化mongdb組合的組件 

npm install mongoose

npm install express-mongoose

// node 默認啓動後修改文件，頁面不會當即體現，經過該組件可使修改的文件實時在頁面體現出來

npm install supervisor

三、運行app.js，訪問：http://localhost:3000，查看頁面，如看到如下頁面則說明頁面訪問成功：

                       

 

四、此時項目默認使用*.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

 

五、從新啓動服務訪問，若是頁面能夠正常顯示則說明修改爲功。

 

六、如今開始寫增刪改查的詳細方法

 

      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>

 

到此，增刪改查已經完成，啓動項目便可。