使用node.js ,Express, 和Mongodb 简历一个简单的Restful 网页服务-part1

最新推荐文章于 2019-05-14 19:43:47 发布

susan93171

最新推荐文章于 2019-05-14 19:43:47 发布

阅读量1.4k

点赞数

分类专栏： mac Express handlebars node js mongodb 文章标签： node.js mongodb Express handlebars

本文链接：https://blog.csdn.net/susan200893171/article/details/46648915

版权

mac 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

node js

5 篇文章 0 订阅

订阅专栏

mongodb

2 篇文章 0 订阅

订阅专栏

使用node.js ,Express, 和Mongodb 简历一个简单的Restful 网页服务-part1

这个实现的基础是《使用handlebars 代替Jade 使用Express》，或者可以直接下载开始的源码，根据下面的步骤进行编辑

$ git clone https://susan200893171@bitbucket.org/susan200893171/node-js-example.git 
$ cd node-js-exmaple ;git checkout jadeToHandlebars
$ cd node-js-example
$ npm install
$ npm start

在这篇文章中，主要是记录如何使用mongoose，添加数据，handlebars 的一些基本的使用。
为了比较清楚的了解，首先创建页面
这里写图片描述

因为这边文章主要是针对nodejs Express， mongoose讲解，你可以直接粘贴下面的代码到相应的文件里。

1、进入 views/layouts , 编辑main.handlebars,

node-js-example/views/layout/main.handlebars

<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

2、在views 文件夹中创建users.handlebars

node-js-example/views/users.handlebars

<script type="text/javascript" src="/javascripts/users.js"></script>
<div class="container">
 <div class="row">
   <div class="col-sm-6">
     <div id="addUserForm">
       <h1>Add New User</h1>
         <form role="form">
           <div class="form-group">
             <label for="name">Name:</label>
             <input type="text" id="username" class="form-control" name=name>
           </div>
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="useremail" class="form-control" name="email">
          </div>
          <button type="button" class="btn btn-default" id="add" name="Add">添加</button>
       </form>
     </div>
     <div id="showUserInfo">
         <!--之后添加-->
      </div>
   </div>
   <div class="col-sm-6">
     <h1> Show the User's information</h1>
       <div class="table-responsive">
         <table class="table" id="usersTable">
           <thead>
             <th>Name</th>
             <th>Email</th>
             <th>Delete?</th>
           </thead>
           <tbody>
             {{#each users}}
             <tr>
               <td><a href="#" rel="{{name}}">{{name}}</a></td>    
               <td>{{email}}</td>
               <td><a href="#" rel="{{_id}}">Delete?</a></td>
             </tr>
             {{/each}}
          </tbody>
        </table>
       </div>
    </div>
</div>

3、在public/javascripts/ 文件夹中，建立users.js 文件，这个是在users.handlebars 第一行中引用的文件,因为在app.js 文件中我们引用了app.use(express.static(path.join(__dirname, 'public')));
users.js 文件内容如下,如果没有javascripts 文件夹，直接创建：

node-js-example/public/

$ mkdir javascripts

node-js-example/public/javascripts/users.js

$(document).ready(function(){
   $('#add').on('click',addUser);
});
function addUser(event){
        event.preventDefault();
        var newUser = {
                name:$("#username").val(),
                email:$("#useremail").val(),
        };
        console.log('new user='+newUser);
        //use AJAX to post object to our adduser service
        $.ajax({
                type:'POST',
                data: newUser,
                url : '/users/adduser',
                dataType:'JSON'
        }).done(function(response){
                console.log(response);
                if(response.message === ''){
                        //post correct ,
                        //刷新数据 {{uses}}
                        window.location.href='/users/';
                }else{
                };
        });
}

添加的数据格式是{name:…,email:…}
4、使用mongoose 对数据库进行操作。
在MongoDB 在mac上安装已经讲解了如何安装。
创建data文件夹启动数据库

node-js-example/

$mkdir data
$cd data
$mongod --dbpath .

我建立一个credentials.js 文件，保留一些配置文件，之后可以添加其他的一个配置,现在只是数据库的url

node-js-example/credentials.js

module.exports={
        database:{
                         url:'mongodb://127.0.0.1:27017/blog',
                 },
}

因为是使用mongoose，首先安装mongoose

node-js-example/

$npm install --save mongoose

我建立一个models文件保存数据的格式

node-js-example/

$ mkdir models 
$ cd models
$ touch user.js

mongodb是使用shema来确定数据库的格式，在/public/javascripts/users.js 中ajax post newUser 的格式是{name,email} ,所以models/user.js 的内容

node-js-example/models/users.js

var mongoose = require('mongoose');
var userSchema = mongoose.Schema({
        name:String,
        email:String,
});
var User = mongoose.model('User',userSchema);

module.exports = User;

建立完数据格式，我们需要把express 和数据库链接起来。
打开app.js 文件，添加如下代码：

node-js-example/app.js

var mongoose = require('mongoose');
var credentials = require('./credentials.js');
mongoose.connect(credentials.database.url);

5 、数据库连接之后，我们需要对路径/users 进行操作,因为在app.js 中

node-js-example/app.js

var users = require('./routes/users');
app.use('/users',users);

所以进入routes 文件夹打开 users.js 文件

node-js-example/

$ vi routes/users.js

因为在routes/users.js文件中有对数据库操作，所以添加

node-js-example/routes/users.js

var User = require('../models/user.js');

首先为了得到如图片所示的界面，首先对 get(‘/’，function(req,res)) 进行编辑

node-js-example/routes/users.js

router.get('/',function(req,res){
    //因为在文件views/users.handlebars中{{#each users}} 所以需要访问数据库得到所有的users
    User.find(function(err,docs){
        if(err){
           res.send({message:err});
        }else{
            res.render('users',{users:docs});
        }  
    });
});

添加完这段之后，可以运行，之后出现如图的界面

node-js-example/

$ npm start

在添加user的是，ajax post 操作，所以需要添加 post /users/adduser ，添加如下代码

node-js-example/routes/users.js

router.post('/adduser',function(req,res){

        var body=req.body;
        var newUser = new User({
                name:body.name,
                email:body.email
        });
        newUser.save(function(err){
                if(err){
                        //if there is some error ,when saving into the database
                        //send back to error
                        res.send({message:err});
                }else{
                        //insert sucessfully, send back nothing
                         res.send({message:'',newUser:newUser});
                }
        });
});

之后运行

node-js-example/

$ npm start

完整的这部分代码：

$ git clone https://susan200893171@bitbucket.org/susan200893171/node-js-example.git 
$ cd node-js-example
$ git checkout mongoose
$ npm install 
$ npm start

然后打开browser ，输入http://localhost:3000/users/